:root{
  /* Brand palette (based on current logo) */
  --bg: #f6f7f4;
  --page-bg-base: #eff4fb;
  --page-bg-glow-a: rgba(54,102,187,0.18);
  --page-bg-glow-b: rgba(22,58,122,0.16);
  --page-bg-glow-c: rgba(83,129,207,0.11);
  --page-bg-tint-top: #f7f9fd;
  --page-bg-tint-mid: #f2f6fc;
  --page-bg-tint-bottom: #edf3fb;
  --home-band-live: rgba(255,255,255,0.08);
  --home-band-skill: rgba(54,102,187,0.055);
  --home-band-winners: rgba(22,58,122,0.045);
  --home-band-how: rgba(54,102,187,0.035);
  --home-band-divider: rgba(54,102,187,0.16);
  --card: #ffffff;
  --text: #0b1b3a;
  --muted: #55637a;
  --accent: #3666bb;
  --accent-2: #163a7a;
  --border: rgba(11, 27, 58, 0.12);
  --shadow: 0 18px 50px rgba(11, 27, 58, 0.12);
  --shadow-soft: 0 14px 38px rgba(11, 27, 58, 0.10);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --container: min(1140px, 92vw);

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Sora", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --ease-out: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  font-family:var(--font-sans);
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}

/* ----------------------------
   Layout primitives
----------------------------- */

.container{ width: var(--container); margin:0 auto; }

.page{
  position:relative;
  min-height:100%;
}

body.page.page-bg{
  background-color: var(--page-bg-base);
  background-image:
    radial-gradient(1320px 760px at -14% -24%, var(--page-bg-glow-a), rgba(255,255,255,0) 64%),
    radial-gradient(1120px 680px at 112% -18%, var(--page-bg-glow-b), rgba(255,255,255,0) 66%),
    radial-gradient(880px 560px at 52% 108%, var(--page-bg-glow-c), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--page-bg-tint-top) 0%, var(--page-bg-tint-mid) 48%, var(--page-bg-tint-bottom) 100%);
  background-repeat: no-repeat;
  background-size: 1380px 820px, 1220px 740px, 980px 620px, 100% 100%;
  background-position: -320px -250px, calc(100% + 260px) -210px, 50% 104%, 0 0;
}

.content{ position:relative; z-index:1; }

@media (max-width: 900px){
  body.page.page-bg{
    background-image:
      radial-gradient(940px 620px at -26% -18%, rgba(54,102,187,0.16), rgba(255,255,255,0) 66%),
      radial-gradient(860px 560px at 124% -16%, rgba(22,58,122,0.14), rgba(255,255,255,0) 66%),
      radial-gradient(720px 500px at 50% 116%, rgba(83,129,207,0.10), rgba(255,255,255,0) 72%),
      linear-gradient(180deg, #f8fafd 0%, #f2f6fc 52%, #edf3fb 100%);
    background-size: 980px 640px, 940px 620px, 760px 520px, 100% 100%;
    background-position: -320px -200px, calc(100% + 280px) -220px, 50% 108%, 0 0;
  }
}

/* ----------------------------
   Navigation
----------------------------- */

.nav{
  --nav-blue-900: #16345f;
  --nav-blue-800: #1f4c85;
  --nav-blue-700: #2d63a7;
  --nav-link-surface: rgba(255,255,255,0.06);
  --nav-link-surface-hover: rgba(255,255,255,0.13);
  --nav-link-surface-active: rgba(255,255,255,0.19);
  --nav-link-border: rgba(231,241,255,0.16);
  --nav-link-border-hover: rgba(236,245,255,0.28);
  --nav-link-border-active: rgba(239,247,255,0.36);
  --nav-secondary-surface: rgba(255,255,255,0.13);
  --nav-secondary-surface-hover: rgba(255,255,255,0.20);
  --nav-secondary-surface-active: rgba(255,255,255,0.23);
  --nav-secondary-border: rgba(231,241,255,0.28);
  --nav-focus-ring: rgba(224,238,255,0.95);
  --nav-basket-solid-top: #ffffff;
  --nav-basket-solid-bottom: #e9f2ff;
  --nav-basket-ink: #153d7a;
  --nav-main-height: 64px;
  --nav-strip-height: 34px;
  position: sticky;
  top: 0;
  z-index: 80;
  background: linear-gradient(148deg, var(--nav-blue-700) 0%, var(--nav-blue-800) 56%, var(--nav-blue-900) 100%);
  border-bottom: 1px solid rgba(238,246,255,0.24);
  box-shadow: 0 10px 24px rgba(7,20,44,0.24);
}

@media (min-width: 901px){
  .nav{
    --nav-main-height: 68px;
  }

  .nav .container{
    width: min(1640px, 93vw);
  }

  .nav-inner{
    gap: clamp(26px, 2.4vw, 48px);
    padding: 12px 0;
  }

  .nav-links{
    gap: clamp(16px, 1.6vw, 30px);
  }

  .nav-links > a,
  .nav-drop-toggle{
    padding-inline: 6px;
  }

  .nav-main-actions{
    gap: 12px;
  }
}

.nav-announce{
  border-bottom: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(145deg, rgba(11,36,79,0.56), rgba(27,73,155,0.26));
}

.nav-announce-inner{
  min-height: var(--nav-strip-height);
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-announce-track{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.nav-announce-item{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  color: #dce8ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.nav-announce-item + .nav-announce-item{
  border-left: 1px solid rgba(255,255,255,0.24);
}

.nav-announce-item svg{
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #7fe7c8;
  flex: 0 0 auto;
}

.nav-announce-link{
  text-decoration: none;
  color: #dce8ff;
  transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

.nav-announce-link svg{
  color: #8bcbff;
}

.nav-announce-link:hover{
  color: #ffffff;
}

.nav-announce-link:focus-visible{
  outline: 2px solid rgba(255,255,255,0.86);
  outline-offset: 2px;
  border-radius: 8px;
}

.nav-announce-dots{
  display: none;
}

.nav-announce-dot{
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(220,232,255,0.38);
  padding: 0;
}

.nav-inner{
  min-height: var(--nav-main-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 10px 0;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:0.1px;
  color: #ffffff;
  min-width: 0;
  justify-self: start;
}

.brand-logo{ height:28px; width:auto; display:block; }

.brand-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width: 0;
  justify-self: center;
}

.nav-links > a,
.nav-drop-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #f2f7ff;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.nav-links > a:hover,
.nav-drop-toggle:hover{
  background: rgba(255,255,255,0.10);
  border-color: transparent;
  color: #ffffff;
  box-shadow: none;
}

.nav-links > a:active,
.nav-drop-toggle:active{
  transform: translateY(1px);
}

.nav-links > a[data-active="true"],
.nav-drop-toggle[data-active="true"]{
  background: rgba(255,255,255,0.08);
  border-color: transparent;
  color: #ffffff;
  box-shadow: inset 0 -2px 0 rgba(235,245,255,0.92);
}

.nav-links > a:focus-visible,
.nav-drop-toggle:focus-visible{
  outline: 2px solid var(--nav-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(13,36,75,0.65);
}

.nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-drop-toggle{
  cursor: pointer;
}

.nav-drop-toggle::after{
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(234,245,255,0.92);
  border-bottom: 2px solid rgba(234,245,255,0.92);
  transform: rotate(45deg);
  margin-top: -3px;
}

.nav-dropdown[data-open="true"] .nav-drop-toggle::after{
  transform: rotate(-135deg);
  margin-top: 2px;
}

.nav-drop-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 210px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(202,224,255,0.36);
  background: linear-gradient(155deg, rgba(20,52,102,0.98), rgba(24,67,130,0.98));
  box-shadow: 0 14px 30px rgba(7,20,44,0.34);
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out);
  z-index: 90;
}

.nav-drop-menu a{
  display: block;
  padding: 9px 11px;
  border-radius: 10px;
  color: #f2f7ff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.nav-drop-menu a:hover{
  background: rgba(255,255,255,0.14);
  color: #ffffff;
}

.nav-drop-menu a:focus-visible{
  outline: 2px solid rgba(255,255,255,0.84);
  outline-offset: 2px;
}

.nav-dropdown[data-open="true"] .nav-drop-menu{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-main-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
  justify-self: end;
}

.nav-account-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.nav-account-btn svg{
  display: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-account-label{
  display: inline;
}

.nav-auth-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 6px;
  color: rgba(238,245,255,0.88);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  transition: color 170ms var(--ease-out), background 170ms var(--ease-out);
}

.nav-basket-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(239,247,255,0.90);
  background: linear-gradient(156deg, var(--nav-basket-solid-top), var(--nav-basket-solid-bottom));
  color: var(--nav-basket-ink);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 7px 14px rgba(8,20,44,0.22);
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), color 180ms var(--ease-out);
}

.nav-basket-btn svg{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-wallet{
  position: relative;
}

.nav-wallet-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(231,241,255,0.36);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.nav-wallet-btn svg{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-wallet-btn.is-disabled{
  opacity: 0.66;
}

.nav-wallet-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 35;
  width: min(92vw, 330px);
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(16,47,97,0.18);
  background: rgba(249,252,255,0.99);
  box-shadow: 0 14px 30px rgba(9,22,46,0.18);
  color: var(--ink);
}

.nav-wallet-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.nav-wallet-title{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-wallet-balance{
  font-size: 17px;
  line-height: 1.2;
}

.nav-wallet-panel .field{
  margin-top: 10px;
}

.nav-wallet-panel .input{
  font-size: 14px;
}

.nav-wallet-preview{
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(18,51,102,0.13);
  background: rgba(17,52,106,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}

.nav-wallet-actions{
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.nav-wallet-actions .btn{
  flex: 1;
}

.nav-wallet-link{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  color: #1a4d9f;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.nav-wallet-link:hover{
  text-decoration: underline;
}

.nav-account-btn:hover,
.nav-wallet-btn:hover{
  background: rgba(255,255,255,0.10);
  border-color: transparent;
  box-shadow: none;
}

.nav-account-btn[data-active="true"],
.nav-wallet-btn[data-active="true"]{
  background: rgba(255,255,255,0.08);
  border-color: transparent;
  box-shadow: inset 0 -2px 0 rgba(235,245,255,0.92);
}

.nav-wallet-btn:hover{
  border-color: rgba(236,245,255,0.5);
}

.nav-wallet-btn[data-active="true"]{
  border-color: rgba(236,245,255,0.55);
}

.nav-basket-btn:hover{
  background: linear-gradient(156deg, #ffffff, #f2f7ff);
  border-color: rgba(248,252,255,0.96);
  box-shadow: 0 9px 16px rgba(8,20,44,0.24);
  transform: translateY(-1px);
}

.nav-basket-btn[data-active="true"]{
  background: linear-gradient(156deg, #fcfeff, #eef5ff);
  border-color: rgba(248,252,255,0.98);
  box-shadow: 0 8px 16px rgba(8,20,44,0.24);
}

.nav-auth-link:hover{
  color: #ffffff;
  background: rgba(255,255,255,0.12);
}

.nav-account-btn:focus-visible,
.nav-auth-link:focus-visible,
.nav-basket-btn:focus-visible,
.nav-wallet-btn:focus-visible{
  outline: 2px solid var(--nav-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(13,36,75,0.65);
}

.nav-basket-btn .badge{
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  background: #154180;
  border: 1px solid rgba(246,251,255,0.74);
  color: #f7fbff;
}

.nav-toggle{
  display:none;
  border:1px solid rgba(232,243,255,0.34);
  background: rgba(255,255,255,0.14);
  border-radius: 11px;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
}

.nav-toggle:hover{
  background: rgba(255,255,255,0.20);
}

.nav-toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 2px;
}

.nav-mobile-utility,
.nav-mobile-actions{
  display: none;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding:0 7px;
  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
}

@media (min-width: 901px) and (max-width: 1320px){
  .nav .container{
    width: min(1640px, 97vw);
  }

  .nav-inner{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .nav-links{
    gap: 6px;
    min-width: 0;
  }

  .nav-links > a,
  .nav-drop-toggle{
    font-size: 14px;
    padding-inline: 6px;
  }

  .nav-main-actions{
    gap: 7px;
  }

  .nav .nav-account-btn,
  .nav .nav-wallet-btn{
    min-width: 40px;
    padding: 0;
    gap: 0;
    border-radius: 10px;
  }

  .nav .nav-account-btn svg{
    display: block;
  }

  .nav .nav-account-label,
  .nav .nav-wallet-label{
    display: none;
  }

  .nav .nav-wallet-btn{
    padding: 0;
  }

  .nav .nav-basket-btn{
    padding-inline: 10px;
  }

  .nav .nav-auth-link{
    font-size: 12px;
    padding-inline: 4px;
  }
}

@media (min-width: 901px) and (max-width: 1160px){
  .nav .nav-auth-link{
    display: none;
  }
}

@media (max-width: 900px){
  .nav{
    --nav-main-height: 58px;
    --nav-strip-height: 32px;
  }

  .nav-inner{
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    gap: 10px;
    min-height: var(--nav-main-height);
    padding: 8px 0;
  }

  .nav-toggle{
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .brand{
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .brand-logo{
    height: 24px;
  }

  .brand-text{
    font-size: 18px;
  }

  .nav-main-actions{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 8px;
  }

  .nav-auth-link{
    display: none;
  }

  .nav-account-btn{
    display: inline-flex;
    min-height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 999px;
    background: var(--nav-secondary-surface);
    border-color: var(--nav-secondary-border);
  }

  .nav-wallet-btn{
    min-height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 999px;
    gap: 0;
    background: var(--nav-secondary-surface);
    border-color: var(--nav-secondary-border);
  }

  .nav-account-btn svg{
    display: block;
    width: 18px;
    height: 18px;
  }

  .nav-wallet-btn svg{
    width: 18px;
    height: 18px;
  }

  .nav-account-label{
    display: none;
  }

  .nav-wallet-label{
    display: none;
  }

  .nav-basket-btn{
    min-height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 999px;
    gap: 0;
    background: linear-gradient(156deg, var(--nav-basket-solid-top), var(--nav-basket-solid-bottom));
    border-color: rgba(243,250,255,0.92);
    color: var(--nav-basket-ink);
    box-shadow: 0 6px 12px rgba(8,20,44,0.22);
  }

  .nav-basket-btn .nav-basket-label{
    display: none;
  }

  .nav-basket-btn .badge{
    position: absolute;
    top: -3px;
    right: -4px;
  }

  .nav-wallet-panel{
    right: -8px;
    top: calc(100% + 8px);
    width: min(92vw, 316px);
  }

  .nav-announce-inner{
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 6px 0 7px;
  }

  .nav-announce-inner::-webkit-scrollbar{
    display: none;
  }

  .nav-announce-track{
    width: 100%;
    flex-wrap: nowrap;
    padding: 0;
  }

  .nav-announce-item{
    padding: 0 10px;
    font-size: 11px;
    flex: 0 0 auto;
  }

  .nav-announce-inner.is-carousel .nav-announce-track{
    transform: translateX(calc(var(--announce-index, 0) * -100%));
    transition: transform 260ms var(--ease-out);
  }

  .nav-announce-inner.is-carousel .nav-announce-item{
    flex: 0 0 100%;
    justify-content: center;
    border-left: 0;
  }

  .nav-announce-dots{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 8px;
  }

  .nav-announce-dot{
    cursor: pointer;
    transition: width 180ms var(--ease-out), background 180ms var(--ease-out);
  }

  .nav-announce-dot.is-active{
    width: 16px;
    background: rgba(220,232,255,0.95);
  }

  .nav-announce-dot:focus-visible{
    outline: 2px solid rgba(255,255,255,0.84);
    outline-offset: 2px;
  }

  .nav-links{
    grid-column: 1 / -1;
    grid-row: 1;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--nav-main-height) + var(--nav-strip-height));
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(230,241,255,0.20);
    background: linear-gradient(180deg, #1a427b 0%, #123263 60%, #0d2346 100%);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    overflow-y: auto;
    transition: opacity 210ms var(--ease-out), transform 210ms var(--ease-out);
    z-index: 90;
  }

  .nav-links[data-open="true"]{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  body.nav-open{ overflow:hidden; }

  body.nav-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(6,18,45,0.22);
    pointer-events: none;
    z-index: 75;
  }

  .nav-links > a,
  .nav-drop-toggle{
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 13px 14px;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(233,243,255,0.18);
    background: rgba(255,255,255,0.09);
  }

  .nav-dropdown{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .nav-drop-toggle{
    justify-content: space-between;
  }

  .nav-drop-menu{
    position: static;
    width: 100%;
    min-width: 100%;
    margin-top: 0;
    padding: 0;
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid rgba(233,243,255,0.18);
    background: rgba(255,255,255,0.11);
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    overflow: hidden;
    pointer-events: none;
    transition: max-height 200ms var(--ease-out), opacity 160ms var(--ease-out), transform 160ms var(--ease-out), padding 160ms var(--ease-out);
  }

  .nav-drop-menu a{
    padding: 10px 13px 10px 17px;
    font-size: 13px;
  }

  .nav-dropdown[data-open="true"] .nav-drop-menu{
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding: 6px;
    margin-top: 6px;
  }

  .nav-mobile-utility{
    display: grid;
    gap: 2px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    padding: 8px;
  }

  .nav-mobile-utility .nav-announce-item{
    min-height: 34px;
    width: 100%;
    padding: 0 8px;
    border-left: 0;
    border-radius: 8px;
    justify-content: flex-start;
  }

  .nav-mobile-utility .nav-announce-item + .nav-announce-item{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
  }

  .nav-mobile-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
  }

  .nav-mobile-actions .btn{
    min-height: 44px;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.26);
    color: #ffffff;
  }
}

.nav-toggle-lines{
  position:relative;
  width: 18px;
  height: 2px;
  display:inline-block;
  background: #ffffff;
  border-radius: 999px;
  opacity:0.95;
}

.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: #ffffff;
  border-radius: 999px;
}

.nav-toggle-lines::before{ top:-5px; }
.nav-toggle-lines::after{ top:5px; }

/* Simplified header: logo + one Draws link */
.nav--minimal .nav-announce{
  display: none !important;
}

.nav--minimal .nav-inner{
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
}

.nav--minimal .nav-toggle{
  display: none !important;
}

.nav--minimal .nav-links{
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  overflow: visible;
  z-index: auto;
}

.nav--minimal .nav-links > a{
  min-height: 36px;
  padding: 8px 13px;
}

.nav--minimal .brand-text{
  white-space: nowrap;
}

@media (max-width: 900px){
  .nav--minimal .nav-inner{
    min-height: 54px;
    padding: 8px 0;
    gap: 10px;
  }

  .nav--minimal .brand-logo{
    height: 24px;
  }

  .nav--minimal .brand-text{
    font-size: 18px;
  }

  .nav--minimal .nav-links{
    position: static;
    flex-direction: row;
    gap: 6px;
    margin-left: auto;
  }

  .nav--minimal .nav-links > a{
    width: auto;
    min-height: 34px;
    padding: 8px 12px;
    text-align: center;
  }
}

/* ----------------------------
   Buttons
----------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.50);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
  font-size: 14px;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
  touch-action: manipulation;
}

.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(11,27,58,0.10); }
.btn:active{ transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:0.6; pointer-events:none; }
.btn:focus-visible{
  outline: 2px solid rgba(54,102,187,0.45);
  outline-offset: 2px;
}

.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255,255,255,0.08);
  color:#fff;
  box-shadow: 0 14px 28px rgba(54,102,187,0.25);
}

.btn-ghost{
  background: rgba(11,27,58,0.06);
}

.btn-glow{
  position:relative;
  overflow:hidden;
}

.btn-glow::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.60), rgba(255,255,255,0) 55%);
  transform: translateX(-60%) rotate(10deg);
  opacity:0;
  transition: opacity 240ms var(--ease-out), transform 700ms var(--ease-out);
}

.btn-glow:hover::after{
  opacity:0.45;
  transform: translateX(0%) rotate(10deg);
}

/* ----------------------------
   Cards / surfaces
----------------------------- */

.card{
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(54,102,187,0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 12px 34px rgba(11,27,58,0.08);
  backdrop-filter: blur(10px);
}

.card.soft{
  background: rgba(255,255,255,0.65);
  box-shadow: 0 12px 30px rgba(11,27,58,0.06);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.55);
}

.pill-accent{
  border-color: rgba(54,102,187,0.25);
  background: rgba(54,102,187,0.10);
  color: var(--accent-2);
}

.meta{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 620px){
  .meta{ grid-template-columns: 1fr; }
}

/* ----------------------------
   Home hero
----------------------------- */

.hero-home{
  position:relative;
  padding: clamp(46px, 7vw, 96px) 0 26px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items:stretch;
}

.hero-title{
  margin:0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.8px;
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 0.98;
}

.hero-sub{
  margin: 14px 0 0;
  color: var(--muted);
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.55;
}

.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }

.hero-spark{
  margin-top: 16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.spark{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.62);
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

.spark svg{ width:18px; height:18px; color: var(--accent); }

.hero-panel{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.20);
  background:
    radial-gradient(600px 280px at 30% 20%, rgba(54,102,187,0.26), rgba(255,255,255,0) 55%),
    radial-gradient(620px 320px at 80% 85%, rgba(22,58,122,0.20), rgba(255,255,255,0) 60%),
    rgba(255,255,255,0.72);
  box-shadow: var(--shadow);
}

.hero-panel-inner{ padding: 18px; }

.hero-panel h3{
  margin: 0 0 10px;
  font-family: var(--font-display);
  letter-spacing:-0.2px;
}

.hero-mini-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.mini-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 12px;
  border-radius: var(--radius-md);
  border:1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.55);
  transition: transform 260ms var(--ease-out);
}

.mini-card:hover{ transform: translateY(-2px); }

.mini-thumb{
  width: 62px;
  height: 62px;
  border-radius: 14px;
  overflow:hidden;
  flex: 0 0 auto;
  background: rgba(11,27,58,0.06);
}
.mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.mini-meta{ flex:1; min-width:0; }
.mini-title{ font-weight: 900; font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-sub{ margin-top:4px; color: var(--muted); font-size: 12px; font-weight:700; }

.hero-orbit{
  position:absolute;
  inset:-50px;
  pointer-events:none;
  opacity:0.85;
}

.orb{
  position:absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.75), rgba(255,255,255,0) 55%);
  filter: blur(0.2px);
  animation: float 10s var(--ease-out) infinite;
}

.orb.one{ left:-70px; top:-60px; background: radial-gradient(circle at 30% 25%, rgba(54,102,187,0.35), rgba(255,255,255,0) 58%); }
.orb.two{ right:-80px; top:40px; width: 260px; height:260px; animation-duration: 12s; background: radial-gradient(circle at 30% 25%, rgba(22,58,122,0.25), rgba(255,255,255,0) 58%); }
.orb.three{ right: 40px; bottom:-120px; width: 320px; height:320px; animation-duration: 14s; background: radial-gradient(circle at 30% 25%, rgba(54,102,187,0.18), rgba(255,255,255,0) 62%); }

@keyframes float{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-14px,0) scale(1.02); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

.hero-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 90px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(246,247,244,0) 0%, rgba(246,247,244,1) 70%);
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* ----------------------------
   Sections
----------------------------- */

.section{ padding: 56px 0; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing:0.35px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--accent-2);
}

.section-title{
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing:-0.4px;
  font-size: clamp(22px, 2.8vw, 34px);
}

.section-sub{
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.6;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 12px 0 0;
}

@media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid{ grid-template-columns: 1fr; } }

/* Draw listings on small screens: show a compact 2-up layout instead of one oversized card */
@media (max-width: 620px){
  #competitionsGrid.grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #competitionsGrid .draw-card{
    border-radius: 14px;
  }
  #competitionsGrid .draw-media{
    aspect-ratio: 4 / 3;
  }
  #competitionsGrid .draw-ends{
    top: 8px;
    left: 8px;
    font-size: 10px;
    padding: 5px 7px;
  }
  #competitionsGrid .draw-strip{
    padding: 10px 10px 0;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.5em;
  }
  #competitionsGrid .draw-body{
    padding: 8px 10px 10px;
    gap: 8px;
  }
  #competitionsGrid .draw-sub{
    font-size: 12px;
    line-height: 1.35;
    min-height: 0;
    max-height: calc(1.35em * 2);
  }
  #competitionsGrid .draw-story{
    display: none;
  }
  #competitionsGrid .draw-price{
    font-size: 24px;
    line-height: 1;
  }
  #competitionsGrid .draw-sold{
    font-size: 11px;
    gap: 6px;
  }
  #competitionsGrid .draw-actions{
    padding: 0 10px 10px;
  }
  #competitionsGrid .draw-actions .btn{
    min-height: 40px;
    padding: 10px;
    font-size: 13px;
  }
}
@media (max-width: 350px){
  #competitionsGrid.grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

#drawList{
  grid-template-columns: repeat(auto-fit, minmax(860px, 1fr));
  align-items: start;
}
@media (max-width: 900px){
  #drawList{ grid-template-columns: 1fr; }
}

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.feature{
  position:relative;
  overflow:hidden;
  padding: 18px;
}

.feature h3{ margin: 10px 0 8px; font-family: var(--font-display); letter-spacing:-0.2px; }
.feature p{ margin:0; color: var(--muted); line-height: 1.6; }

.feature .icon{
  width: 44px; height:44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(54,102,187,0.10);
  border: 1px solid rgba(54,102,187,0.18);
  color: var(--accent);
}

.feature .icon svg{ width: 22px; height:22px; }

@media (max-width: 900px){ .feature-grid{ grid-template-columns: 1fr; } }

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

.stat{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.55);
}

.stat .n{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing:-0.3px;
}

.stat .l{ color: var(--muted); font-weight:800; font-size: 12px; text-transform:uppercase; letter-spacing:0.35px; margin-top: 4px; }

@media (max-width: 900px){ .stats{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .stats{ grid-template-columns: 1fr; } }

/* ----------------------------
   Draw cards (keep existing class names)
----------------------------- */

.draw-card{
  height:100%;
  display:flex;
  flex-direction:column;
  padding: 0;
  overflow:hidden;
}

.draw-media{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio: 16 / 9;
  background: rgba(11,27,58,0.06);
}

.draw-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform 650ms var(--ease-out), filter 650ms var(--ease-out);
  filter: saturate(1.05);
}

.draw-card:hover .draw-media img{ transform: scale(1.08); }
.draw-media[data-fit="contain"] img{ object-fit: contain; transform: scale(1); }
.draw-card:hover .draw-media[data-fit="contain"] img{ transform: scale(1); }

.draw-ends{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index:2;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(11,27,58,0.55);
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:0.35px;
  backdrop-filter: blur(8px);
}

.draw-strip{
  padding: 14px 16px 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing:-0.2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.draw-body{ padding: 10px 16px 16px; flex: 1 1 auto; display:flex; flex-direction:column; gap:10px; }

.draw-sub{
  margin:0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  max-height: calc(1.35em * 2);
  overflow:hidden;
}
.draw-story{
  margin:0;
  font-style: italic;
  color: rgba(11,27,58,0.72);
  font-weight: 700;
  line-height: 1.4;
}

.draw-price{ font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing:-0.3px; }

.draw-sold{ display:flex; justify-content:space-between; gap:10px; font-size: 12px; font-weight: 900; color: var(--muted); }

.progress{ height: 8px; border-radius:999px; background: rgba(11,27,58,0.10); overflow:hidden; }
.progress > span{
  display:block;
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:999px;
  animation: progressFill 1.2s var(--ease-out) forwards;
  animation-delay: 120ms;
}

@keyframes progressFill{
  to{ width: var(--w, 0%); }
}

.draw-actions{ padding: 0 16px 16px; display:flex; gap:10px; align-items:center; }
.draw-actions .btn{ width:100%; }

.draw-card.is-closed{ opacity:0.84; }

/* ----------------------------
   Forms
----------------------------- */

.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
  color: var(--text);
  outline:none;
  font-weight: 700;
  transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

.input:focus{
  border-color: rgba(54,102,187,0.35);
  box-shadow: 0 0 0 6px rgba(54,102,187,0.12);
}

.hint{ color: var(--muted); font-size: 13px; line-height: 1.5; }
.hint[data-state="success"]{ color:#1f6b4f; }
.hint[data-state="error"]{ color:#a33d3d; }

/* ----------------------------
   Competition detail
----------------------------- */

.comp-layout{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; align-items:start; }
@media (max-width: 900px){ .comp-layout{ grid-template-columns: 1fr; } }

.comp-media{ overflow:hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: rgba(11,27,58,0.06); aspect-ratio: 16 / 9; }
.comp-media img{ width:100%; height:auto; display:block; }

.comp-box{ padding: 18px; }

.qty{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.qty .stepper{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.60);
}

.qty .stepper .btn{ padding: 10px 12px; }
.qty .stepper .input{ width: 110px; text-align:center; }

.divider{ height:1px; background: var(--border); margin: 16px 0; }

.accordion details{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.60);
  padding: 12px 14px;
  margin-top: 10px;
}

.accordion summary{
  cursor:pointer;
  font-weight: 900;
  list-style:none;
}

.accordion summary::-webkit-details-marker{ display:none; }

.accordion p{ margin: 10px 0 0; color: var(--muted); line-height:1.6; }

/* ----------------------------
   Footer
----------------------------- */

.site-footer{
  margin-top: 60px;
  border-top: 1px solid var(--border);
  background: rgba(246,247,244,0.85);
  backdrop-filter: blur(12px);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 16px;
  padding: 26px 0;
}

.footer-grid h4{ margin: 0 0 10px; font-family: var(--font-display); letter-spacing:-0.2px; }
.footer-grid p, .footer-grid a{ color: var(--muted); font-weight: 700; line-height: 1.6; }
.footer-grid a:hover{ color: var(--accent-2); }

.footer-links{ display:flex; flex-direction:column; gap:10px; }

.fineprint{
  padding: 12px 0 26px;
  color: rgba(85,99,122,0.92);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ----------------------------
   Reveal animations
----------------------------- */

.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------
   FX layers
----------------------------- */

#fx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0.65;
}

.cursor-glow{
  position:fixed;
  width: 380px;
  height: 380px;
  border-radius: 999px;
  pointer-events:none;
  transform: translate3d(-50%,-50%,0);
  background: radial-gradient(circle at center, rgba(54,102,187,0.22), rgba(246,247,244,0) 60%);
  mix-blend-mode: multiply;
  filter: blur(1px);
  z-index: 2;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}

body.has-cursor .cursor-glow{ opacity: 0.9; }

/* ----------------------------
   Reduced motion
----------------------------- */

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .btn, .nav-links a, .mini-card, .draw-media img{ transition:none !important; }
  .orb, .live-tape-track, .winners-orb, .about-orb, .impact-orb, .skeleton-line,
  .impact-hero-card::before, .impact-hero-card::after{ animation:none !important; }
  .xp-float-chip, .skill-game.is-xp-pop{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  body.reveal-ready [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .impact-stage{ opacity:1 !important; transform:none !important; }
  .cursor-glow{ display:none !important; }
}

/* Low-power/mobile performance mode */
body.perf-mode.page-bg{
  background-image: linear-gradient(180deg, #f7f9fc 0%, #eef4fb 100%);
}
body.perf-mode #fx-canvas,
body.perf-mode .cursor-glow{
  display:none !important;
}
body.perf-mode .card,
body.perf-mode .sticky-cta,
body.perf-mode .nav-links,
body.perf-mode .footer{
  backdrop-filter:none !important;
}
body.perf-mode .draw-card,
body.perf-mode .winner-tile{
  box-shadow: 0 8px 18px rgba(11,27,58,0.08);
}
body.perf-mode .xp-float-chip{
  animation-duration: 420ms;
}
body.perf-mode .word-grid::after{
  display:none;
}
body.perf-mode .word-keyboard{
  backdrop-filter:none !important;
}
body.perf-mode .word-cell,
body.perf-mode .key{
  transition-duration: 90ms;
}
body.perf-mode.reveal-ready [data-reveal],
body.perf-mode [data-reveal]{
  transition-duration: 420ms;
}

/* -------------------------------------------------------------------
   UI v2 mapping (for the redesigned HTML pages)
------------------------------------------------------------------- */

/* Typographic helpers */
.brand-text{ font-weight: 900; }
.kicker{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.display{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -1px;
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: 0.98;
}

.lead{
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 62ch;
}

.h1{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.6px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
}

.h2{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.4px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.12;
}

.h3{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: 18px;
}

.sub{ color: var(--muted); margin: 10px 0 0; line-height: 1.65; }
.fineprint{ color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Reveal animation (used by ui.js)
   Fail-open by default: if JS/reveal setup fails, content stays visible. */
[data-reveal]{
  opacity: 1;
  transform: translate3d(0,0,0);
}
body.reveal-ready [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
body.reveal-ready [data-reveal].is-in{ opacity: 1; transform: translate3d(0,0,0); }

/* Inputs */
.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
  color: var(--text);
  font-weight: 800;
  outline: none;
  transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.input:focus{ box-shadow: 0 0 0 6px rgba(54,102,187,0.14); }

.btn-sm{ padding: 10px 12px; border-radius: 12px; }
.btn-lg{ padding: 14px 16px; border-radius: 16px; font-size: 15px; }

/* Hero (new structure) */
.hero-home{ padding: clamp(52px, 7vw, 98px) 0 28px; }
.hero-visual{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-orbs .orb{ display:none; }
.hero-orbs .orb-1,
.hero-orbs .orb-2,
.hero-orbs .orb-3{
  position:absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: radial-gradient(circle at 30% 25%, rgba(54,102,187,0.26), rgba(255,255,255,0) 58%);
  filter: blur(0.2px);
  animation: float 12s var(--ease-out) infinite;
}
.hero-orbs .orb-1{ width: 260px; height:260px; left: -90px; top: -80px; }
.hero-orbs .orb-2{ width: 320px; height:320px; right: -120px; top: 20px; animation-duration: 14s; background: radial-gradient(circle at 30% 25%, rgba(22,58,122,0.22), rgba(255,255,255,0) 60%); }
.hero-orbs .orb-3{ width: 420px; height:420px; right: 10%; bottom: -220px; animation-duration: 16s; background: radial-gradient(circle at 30% 25%, rgba(54,102,187,0.16), rgba(255,255,255,0) 62%); }

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

.hero-copy{ position:relative; }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }
.hero-badges{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.hero-badges .pill{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding: 12px 12px; border-radius: 18px; }
.hero-badges .pill strong{ font-size: 13px; }
.hero-badges .pill span{ font-size: 12px; color: var(--muted); font-weight: 800; }

.hero-panel{ position:relative; }
.panel-card{
  overflow:hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(54,102,187,0.06));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.panel-head{ display:flex; justify-content:space-between; align-items:center; padding: 14px 14px 6px; }
.panel-head-meta{
  display:flex;
  align-items:center;
  gap: 10px;
}
.panel-title{ font-weight: 900; font-family: var(--font-display); letter-spacing:-0.2px; }
.panel-sub{ color: var(--muted); font-weight: 800; font-size: 12px; margin-top: 2px; }
.panel-chip{ font-size: 12px; font-weight: 900; padding: 7px 10px; border-radius: 999px; background: rgba(54,102,187,0.14); color: var(--accent-2); border:1px solid rgba(54,102,187,0.20); }
.panel-rotator{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 0 14px 10px;
}
.panel-rotator-progress{
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(11,27,58,0.12);
  overflow:hidden;
}
.panel-rotator-progress span{
  display:block;
  height:100%;
  width:100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.panel-rotator-progress.is-animating span{
  animation: heroProgress var(--duration, 7000ms) linear forwards;
}
.panel-rotator-dots{
  display:flex;
  align-items:center;
  gap: 6px;
}
.panel-rotator-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0;
  appearance: none;
}
.panel-rotator-dot.is-active{
  background: #ffffff;
}
.panel-rotator-dot:focus-visible{
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}
.hero-spotlight-ring{
  --pct: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 10px;
  font-weight: 900;
  color: var(--accent-2);
  border: 1px solid rgba(255,255,255,0.5);
  background:
    conic-gradient(var(--accent) calc(var(--pct) * 1%), rgba(255,255,255,0.22) 0),
    radial-gradient(circle at center, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0) 60%);
  box-shadow: 0 10px 24px rgba(11,27,58,0.16);
}
.panel-media{ height: 190px; background-image: linear-gradient(90deg, rgba(11,27,58,0.20), rgba(11,27,58,0)), var(--img); background-size: cover; background-position: var(--mx, 50%) var(--my, 50%); transition: background-position 240ms var(--ease-out); }
.panel-media[data-fit="contain"]{ background-size: contain; background-repeat: no-repeat; }
.panel-body{ padding: 14px; }
.panel-prize{ font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing:-0.2px; }
.panel-meta{ margin: 10px 0 14px; display:flex; justify-content:space-between; gap:10px; color: var(--muted); font-weight: 800; font-size: 12px; }
.panel-stats{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.70);
  color: var(--accent-2);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 12px;
}
.panel-stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.panel-card [data-hero-swap]{
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.panel-card.is-swapping [data-hero-swap]{
  opacity: 0;
  transform: translateY(6px);
}

@keyframes heroProgress{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

@media (max-width: 520px){
  .hero-spotlight-ring{
    width: 36px;
    height: 36px;
  }
  .panel-rotator{
    padding: 0 12px 8px;
  }
}
@media (max-width: 900px){
  .panel-media[data-fit="contain"]{
    background-size: cover;
    background-position: center;
  }
}

.panel-strip{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.strip-item{ padding: 12px; border-radius: 18px; border:1px solid var(--border); background: rgba(255,255,255,0.62); }
.strip-label{ color: var(--muted); font-weight: 800; font-size: 12px; }
.strip-value{ font-family: var(--font-display); font-weight: 900; font-size: 18px; margin-top: 6px; }
.strip-cta{
  padding: 12px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.62);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 110px;
}
.panel-strip:has(.strip-cta){
  grid-template-columns: 1fr;
}

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-badges{ grid-template-columns: 1fr; }
  .panel-strip{ grid-template-columns: 1fr; }
  .strip-cta{
    align-items: flex-start;
  }
  .strip-cta .btn{
    width: 100%;
  }
}

/* Hero v2 (trust-led) */
.hero-home{
  padding: clamp(44px, 6.5vw, 90px) 0 22px;
}
.hero-inner{
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: stretch;
  gap: clamp(14px, 2vw, 24px);
}
.hero-stage{
  position: relative;
  min-width: 0;
}
.hero-stage-card{
  position: relative;
  min-height: clamp(360px, 60vw, 520px);
  border-color: rgba(54,102,187,0.25);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.86), rgba(11,27,58,0.20));
  box-shadow: 0 28px 60px rgba(11,27,58,0.20);
}
.hero-stage-card::after{
  content:"";
  position:absolute;
  inset:-35% 20%;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.20), rgba(255,255,255,0));
  transform: translateX(-120%);
  animation: heroShimmer 12s var(--ease-out) infinite;
  pointer-events:none;
}
.hero-stage-media{
  height: 100%;
  min-height: clamp(360px, 60vw, 520px);
  background-image:
    linear-gradient(110deg, rgba(11,27,58,0.18), rgba(11,27,58,0.06) 50%, rgba(11,27,58,0.20)),
    var(--img);
}
.hero-stage-media[data-fit="contain"]{
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-stage-overlay{
  position: absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 10px;
  padding: clamp(14px, 2.2vw, 22px);
  color: #f7faff;
}
.hero-stage-overlay::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(7,20,44,0.02) 0%,
      rgba(7,20,44,0.08) 34%,
      rgba(7,20,44,0.18) 66%,
      rgba(7,20,44,0.30) 100%
    );
}
.hero-stage-overlay > *{
  position: relative;
  z-index: 1;
}
.hero-stage-top{
  position: absolute;
  top: clamp(12px, 1.6vw, 18px);
  left: clamp(12px, 1.6vw, 18px);
  right: clamp(12px, 1.6vw, 18px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  z-index: 2;
}
.hero-stage-kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(11,27,58,0.45);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.hero-stage-kicker::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #8bc6ff;
  box-shadow: 0 0 0 6px rgba(139,198,255,0.24);
}
.hero-stage-head-meta{
  display:flex;
  align-items:center;
  gap: 8px;
}
.hero-stage-card .panel-chip{
  background: rgba(11,27,58,0.58);
  border-color: rgba(255,255,255,0.32);
  color: #f7faff;
}
.hero-stage-time{
  min-width: 84px;
  justify-content: center;
}
.hero-stage-sub{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: rgba(243,247,255,0.95);
}
.hero-stage-trust{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(11,27,58,0.44);
  color: rgba(247,250,255,0.95);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  width: fit-content;
}
.hero-stage-title{
  margin: 2px 0 0;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(7,20,44,0.58);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.35px;
  font-size: clamp(23px, 3vw, 33px);
  line-height: 1.08;
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.hero-stage-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(7,20,44,0.52);
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,247,255,0.90);
}
.hero-stage-meta strong{
  color: #ffffff;
}
.hero-stage-stats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
}
.hero-stage-stat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(11,27,58,0.44);
  color: #f7faff;
  font-size: 12px;
  font-weight: 900;
}
.hero-stage-cta{
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  box-shadow: 0 10px 24px rgba(11,27,58,0.24);
}
.hero-stage .panel-rotator{
  padding: 4px 0 0;
}
.hero-copy{
  padding: clamp(14px, 2vw, 18px);
  border-radius: 22px;
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(165deg, rgba(255,255,255,0.94), rgba(255,255,255,0.72));
  box-shadow: var(--shadow-soft);
}
.hero-lead-tight{
  max-width: 52ch;
}
.hero-cta-secondary{
  margin-top: 14px;
}
.hero-cta-secondary .btn{
  border-color: rgba(54,102,187,0.24);
  background: rgba(255,255,255,0.66);
}
.hero-tertiary-link{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--accent-2);
}
.hero-tertiary-link::after{
  content:">";
  font-size: 13px;
  line-height: 1;
}
.hero-legal-line{
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid rgba(54,102,187,0.20);
  background: rgba(54,102,187,0.08);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
}
.hero-proof-strip{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.hero-proof-item{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.74);
}
.hero-proof-icon{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.26);
  background: rgba(54,102,187,0.12);
  color: var(--accent-2);
  display:block;
  font-size: 0;
}
.hero-proof-icon::before{
  content: attr(data-icon);
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-sans);
  line-height: 1;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  transform: translate(0.2px, 0.45px);
}
.hero-proof-item strong{
  display:block;
  font-size: 13px;
  line-height: 1.2;
}
.hero-proof-item span{
  display:block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.hero-panel-strip{
  margin-top: 14px;
}
.hero-panel-strip .strip-cta{
  border-color: rgba(54,102,187,0.24);
  background: linear-gradient(165deg, rgba(255,255,255,0.82), rgba(54,102,187,0.07));
}
.hero-panel-strip .strip-value{
  font-size: clamp(17px, 2vw, 20px);
}
@keyframes heroShimmer{
  0%{ transform: translateX(-120%); opacity: 0; }
  10%{ opacity: 1; }
  45%{ transform: translateX(120%); opacity: 0.85; }
  100%{ transform: translateX(120%); opacity: 0; }
}
@media (min-width: 1024px){
  .hero-home > .container{
    width: min(1260px, 92vw);
  }
  .hero-inner{
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
  }
  .hero-stage-card,
  .hero-stage-media{
    min-height: 500px;
  }
  .hero-stage-overlay{
    padding: 22px;
    gap: 12px;
  }
  .hero-stage-sub,
  .hero-stage-title,
  .hero-stage-meta,
  .hero-stage-stats{
    max-width: 84%;
  }
  .hero-stage-title{
    font-size: clamp(29px, 2.6vw, 40px);
  }
  .hero-stage-meta{
    font-size: 13px;
  }
  .hero-stage-trust{
    display: none;
  }
  .hero-copy{
    min-height: 500px;
    display: flex;
    flex-direction: column;
  }
  .hero-proof-strip{
    margin-top: auto;
  }
}
@media (max-width: 900px){
  .hero-inner{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero-stage{
    order: -1;
  }
  .hero-copy{
    border-radius: 18px;
  }
}
@media (max-width: 640px){
  .hero-stage-card,
  .hero-stage-media{
    min-height: min(55vh, 420px);
  }
  .hero-stage-kicker{
    font-size: 10px;
    padding: 7px 10px;
  }
  .hero-stage-trust{
    font-size: 10px;
    padding: 5px 8px;
  }
  .hero-stage-title{
    font-size: clamp(20px, 8vw, 30px);
  }
  .hero-stage-meta{
    font-size: 12px;
    padding: 5px 8px;
  }
  .hero-legal-line{
    margin-top: 10px;
  }
  .hero-stage-title{
    padding: 5px 8px;
  }
  .hero-stage-top{
    top: 10px;
    left: 10px;
    right: 10px;
  }
  .hero-stage-overlay::before{
    background:
      linear-gradient(
        180deg,
        rgba(7,20,44,0.03) 0%,
        rgba(7,20,44,0.12) 34%,
        rgba(7,20,44,0.24) 68%,
        rgba(7,20,44,0.34) 100%
      );
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-stage-card::after{
    animation: none !important;
  }
}
body.perf-mode .hero-stage-card::after{
  animation: none !important;
}

/* Homepage top redesign: quick links + featured stage */
.home-top-hero{
  padding: clamp(22px, 4vw, 38px) 0 16px;
}

.home-top{
  display: grid;
  gap: 14px;
}

.home-top-head{
  display: flex;
  align-items: center;
  width: min(100%, 920px);
  margin: 0 auto;
}

.home-top-head-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--accent-2);
}

.home-top-head-label::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.home-top-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
}

.quick-links-panel{
  position: relative;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(54,102,187,0.22);
  background: linear-gradient(165deg, rgba(255,255,255,0.93), rgba(241,247,255,0.90));
  box-shadow: 0 16px 34px rgba(11,27,58,0.10);
  overflow: hidden;
  width: min(100%, 920px);
  margin: 0 auto;
}

.quick-links-panel::before{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2b84df, #13c9a2);
  opacity: 0.85;
}

.quick-links-panel-head{
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
}

.quick-links-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--accent-2);
  display: block;
}

.quick-links-sub{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #4d627f;
}

.quick-links-mobile-controls{
  min-width: 0;
}

.quick-links-list{
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
}

.quick-links-list::before{
  display: none;
}

.quick-links-list::after{
  display: none;
}

.quick-link-item{
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.16);
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(233,242,254,0.84));
  box-shadow: 0 8px 18px rgba(11,27,58,0.08);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition:
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background 180ms var(--ease-out);
}

.quick-link-item:hover{
  transform: translateY(-2px);
  border-color: rgba(54,102,187,0.32);
  box-shadow: 0 12px 22px rgba(11,27,58,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,1), rgba(224,237,253,0.92));
}

.quick-link-item:focus-visible{
  outline: 2px solid rgba(43,132,223,0.55);
  outline-offset: 2px;
}

.quick-link-icon{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(54,102,187,0.22);
  background: linear-gradient(150deg, rgba(255,255,255,0.98), rgba(222,235,253,0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
  color: #2b84df;
}

.quick-link-icon svg{
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-link-label{
  min-width: 0;
  line-height: 1.2;
  color: #153a7a;
}

.quick-links-arrow{
  display: none;
}

.featured-panel{
  min-width: 0;
  width: min(100%, 920px);
  margin: 0 auto;
}

.featured-stage{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(54,102,187,0.22);
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(11,27,58,0.17);
  width: 100%;
  aspect-ratio: 16 / 9;
  isolation: isolate;
}

.featured-stage:focus-visible{
  outline: 2px solid rgba(43,132,223,0.65);
  outline-offset: 2px;
}

.featured-stage-media{
  height: 100%;
  min-height: clamp(220px, 28vw, 360px);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}

.featured-stage::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 56% at 76% 18%, rgba(43,132,223,0.18) 0%, rgba(43,132,223,0) 100%),
    linear-gradient(180deg, rgba(7,20,44,0.06) 0%, rgba(7,20,44,0.16) 56%, rgba(7,20,44,0.36) 100%);
}

.featured-stage-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(12px, 1.9vw, 20px);
  pointer-events: none;
}

.featured-stage-overlay > *{
  pointer-events: auto;
}

.featured-stage-shell{
  position: absolute;
  left: clamp(10px, 1.5vw, 16px);
  right: 214px;
  bottom: 56px;
  top: auto;
  display: block;
}

.featured-stage-copy{
  width: 100%;
  min-width: 0;
  max-width: 620px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(155deg, rgba(9,22,46,0.55), rgba(13,30,61,0.30));
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 22px rgba(7,20,44,0.20);
  max-height: 158px;
  overflow: hidden;
}

.featured-stage-kickers{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.featured-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.16);
  color: #eef5ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.featured-chip-time{
  border-color: rgba(98,235,201,0.55);
  background: rgba(19,201,162,0.18);
  display: none;
}

.featured-stage-side{
  position: absolute;
  top: clamp(10px, 1.5vw, 16px);
  right: clamp(10px, 1.5vw, 16px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 48px;
}

.featured-title{
  margin: 0;
  max-width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.4px;
  color: #ffffff;
  text-shadow: 0 4px 14px rgba(0,0,0,0.45);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-price{
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -0.3px;
  color: #e9f3ff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.36);
}

.featured-meta{
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.featured-meta span{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.14);
  color: #eff5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.featured-countdown{
  position: absolute;
  left: clamp(10px, 1.5vw, 16px);
  right: 68px;
  top: clamp(10px, 1.5vw, 16px);
  bottom: auto;
  width: auto;
  max-width: 560px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.30);
  background: linear-gradient(155deg, rgba(9,22,46,0.56), rgba(13,30,61,0.34));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 20px rgba(7,20,44,0.20);
}

.featured-countdown-item{
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
}

.featured-countdown-item strong{
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1;
  letter-spacing: -0.2px;
}

.featured-countdown-item small{
  color: rgba(239,245,255,0.88);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.featured-countdown.is-urgent .featured-countdown-item{
  border-color: rgba(255,188,188,0.44);
  background: rgba(152,31,31,0.20);
}

.featured-countdown.is-ended .featured-countdown-item{
  border-color: rgba(255,255,255,0.20);
  background: rgba(88,97,115,0.32);
}

.featured-stage-actions{
  position: absolute;
  right: clamp(10px, 1.5vw, 16px);
  bottom: 56px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.featured-cta{
  min-width: 176px;
  padding-left: 22px;
  padding-right: 22px;
  box-shadow: 0 10px 24px rgba(11,27,58,0.24);
}

.featured-rotator{
  position: absolute;
  left: clamp(10px, 1.5vw, 16px);
  right: clamp(10px, 1.5vw, 16px);
  bottom: 10px;
  width: auto;
  margin: 0;
  padding: 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(11,27,58,0.44);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(7,20,44,0.20);
}

.featured-rotator .panel-rotator-progress{
  min-width: 84px;
  background: rgba(255,255,255,0.24);
}

.featured-rotator .panel-rotator-dot{
  border-color: rgba(255,255,255,0.64);
}

.featured-rotator .panel-rotator-dot.is-active{
  background: #ffffff;
}

.featured-rotator-btn{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition:
    transform 170ms var(--ease-out),
    background 170ms var(--ease-out),
    border-color 170ms var(--ease-out);
}

.featured-rotator-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.66);
}

.featured-rotator-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.92);
  outline-offset: 2px;
}

.featured-rotator-btn svg{
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.featured-rotator-btn-toggle{
  width: auto;
  min-width: 58px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.featured-rotator[hidden]{
  display: none;
}

@media (min-width: 901px){
  .featured-stage-media[data-fit="contain"]{
    min-height: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

@media (max-width: 1024px){
  .quick-links-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .home-top{
    gap: 8px;
  }

  .home-top-head-label{
    font-size: clamp(22px, 5.2vw, 28px);
  }

  .home-top-grid{
    gap: 12px;
  }

  .home-top-head,
  .featured-panel,
  .quick-links-panel{
    width: 100%;
  }

  .quick-links-panel{
    padding: 12px 10px 14px;
  }

  .quick-links-panel::before{
    left: 12px;
    right: 12px;
  }

  .quick-links-panel-head{
    margin: 0 6px 10px;
  }

  .quick-links-sub{
    display: none;
  }

  .quick-links-mobile-controls{
    position: relative;
    display: block;
    padding-inline: 14px;
  }

  .quick-links-arrow{
    display: inline-flex !important;
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 4px 10px rgba(11,27,58,0.14);
    color: #6f839f;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }

  .quick-links-arrow[data-quick-links-prev]{
    left: -2px;
  }

  .quick-links-arrow[data-quick-links-next]{
    right: -2px;
  }

  .quick-links-arrow svg{
    width: 14px;
    height: 14px;
  }

  .quick-links-arrow:disabled{
    opacity: 0.35;
  }

  .quick-links-list{
    padding: 2px 0 8px;
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 24px) / 4);
    gap: 8px;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
  }

  .quick-links-list::before,
  .quick-links-list::after{
    display: none;
  }

  .quick-link-item{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 86px;
    padding: 8px 6px;
    border: 1px solid rgba(54,102,187,0.16);
    border-radius: 14px;
    background: linear-gradient(158deg, rgba(255,255,255,0.94), rgba(232,241,253,0.78));
    box-shadow: 0 4px 10px rgba(11,27,58,0.07);
    scroll-snap-align: start;
    transform: none !important;
  }

  .quick-link-icon{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(54,102,187,0.22);
    background: linear-gradient(155deg, rgba(255,255,255,0.99), rgba(233,241,252,0.88));
    box-shadow: 0 6px 12px rgba(11,27,58,0.08);
  }

  .quick-link-icon svg{
    width: 17px;
    height: 17px;
  }

  .quick-link-label{
    font-size: 11.5px;
    font-weight: 800;
    color: #2f4f7d;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
    text-wrap: balance;
  }

  .featured-stage-overlay{
    padding: 10px;
  }

  .featured-stage-shell{
    left: 10px;
    right: 186px;
    bottom: 52px;
    top: auto;
  }

  .featured-stage-copy{
    width: 100%;
    max-width: none;
    padding: 9px 10px;
  }

  .featured-title{
    font-size: clamp(22px, 4.6vw, 34px);
  }

  .featured-price{
    font-size: clamp(20px, 4.2vw, 30px);
  }

  .featured-meta{
    margin-top: 8px;
    gap: 5px;
  }

  .featured-meta span{
    font-size: 10px;
    padding: 4px 7px;
  }

  .featured-stage-media{
    min-height: clamp(220px, 58vw, 320px);
  }

  .featured-countdown{
    left: 10px;
    right: 58px;
    top: 10px;
    bottom: auto;
    padding: 5px;
    gap: 4px;
  }

  .featured-countdown-item strong{
    font-size: clamp(13px, 2.5vw, 18px);
  }

  .featured-countdown-item small{
    font-size: 8px;
  }

  .featured-stage-actions{
    right: 10px;
    bottom: 52px;
  }

  .featured-cta{
    width: auto;
    min-width: 162px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .featured-rotator{
    left: 10px;
    right: 10px;
    bottom: 8px;
    gap: 6px;
  }
}

@media (max-width: 520px){
  .home-top-hero{
    padding-top: 8px;
  }

  .quick-links-mobile-controls{
    display: block;
    padding-inline: 12px;
  }

  .quick-link-item{
    gap: 6px;
    min-height: 80px;
    padding: 7px 4px;
  }

  .quick-link-icon{
    width: 36px;
    height: 36px;
  }

  .quick-link-icon svg{
    width: 16px;
    height: 16px;
  }

  .quick-link-label{
    font-size: 11px;
  }

  .quick-links-list{
    grid-auto-columns: calc((100% - 18px) / 4);
    gap: 6px;
    padding: 2px 0 6px;
  }

  .quick-links-arrow{
    width: 22px;
    height: 22px;
  }

  .featured-stage{
    aspect-ratio: 16 / 10;
  }

  .featured-stage-overlay{
    padding: 8px;
  }

  .featured-stage-shell{
    left: 8px;
    right: 150px;
    bottom: 50px;
    top: auto;
    gap: 0;
  }

  .featured-stage-copy{
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 12px;
    max-height: 108px;
    overflow: hidden;
  }

  .featured-stage-kickers{
    gap: 5px;
    margin-bottom: 5px;
  }

  .featured-chip{
    padding: 4px 7px;
    font-size: 9px;
  }

  .featured-chip-time{
    display: none;
  }

  .featured-title{
    font-size: clamp(18px, 6.7vw, 24px);
  }

  .featured-price{
    margin-top: 3px;
    font-size: clamp(17px, 6.2vw, 23px);
  }

  .featured-meta{
    margin-top: 6px;
    gap: 4px;
  }

  .featured-meta span{
    padding: 3px 6px;
    font-size: 8px;
  }

  .featured-meta span:last-child{
    display: none;
  }

  .featured-countdown{
    left: 8px;
    right: 58px;
    top: 8px;
    bottom: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    border-radius: 10px;
    max-width: none;
  }

  .featured-countdown-item{
    padding: 4px 1px;
    border-radius: 7px;
  }

  .featured-countdown-item strong{
    font-size: clamp(11px, 4.1vw, 14px);
  }

  .featured-countdown-item small{
    font-size: 7px;
    letter-spacing: 0.02em;
  }

  .featured-stage-actions{
    right: 8px;
    bottom: 50px;
  }

  .featured-rotator{
    left: 8px;
    right: 8px;
    bottom: 6px;
    padding: 5px 6px;
  }

  .featured-rotator-btn{
    width: 24px;
    height: 24px;
  }

  .featured-rotator-btn svg{
    width: 12px;
    height: 12px;
  }

  .featured-rotator-btn-toggle{
    min-width: 46px;
    padding: 0 8px;
    font-size: 8px;
    letter-spacing: 0.03em;
  }

  .featured-cta{
    width: auto;
    min-width: 134px;
    min-height: 34px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .quick-links-list{
    scroll-behavior: auto !important;
  }

  .quick-link-item{
    transition: none !important;
  }

  .featured-rotator .panel-rotator-progress.is-animating span{
    animation: none !important;
  }
}

/* Featured layout override: timer top-centered, no text block, controls below image */
.featured-panel{
  position: relative;
  padding-top: 24px;
}

.featured-panel .featured-stage{
  overflow: hidden;
}

.featured-panel .featured-stage-shell{
  display: none !important;
}

.featured-panel .featured-countdown{
  position: absolute;
  top: 24px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 72px), 620px);
  max-width: 620px;
  z-index: 6;
}

.featured-panel .featured-stage-side{
  top: 12px;
  right: 12px;
}

.featured-panel .featured-stage-actions{
  left: 50%;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
}

.featured-panel .featured-rotator{
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.featured-panel .featured-rotator .panel-rotator-progress{
  display: none !important;
}

.featured-panel .featured-rotator .panel-rotator-dots{
  display: none !important;
}

.featured-panel .featured-rotator-btn{
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #6f7f99;
}

.featured-panel .featured-rotator-btn:hover{
  transform: none;
  border-color: transparent;
  background: transparent;
  color: #2b84df;
}

.featured-panel .featured-rotator-btn:focus-visible{
  outline: 2px solid rgba(43,132,223,0.45);
  outline-offset: 2px;
}

@media (max-width: 900px){
  .featured-panel{
    padding-top: 0;
  }

  .featured-panel .featured-stage-side{
    display: none;
  }

  .featured-panel .featured-countdown{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 10px;
    padding: 8px;
    gap: 6px;
    border-radius: 14px;
    border: 1px solid rgba(54,102,187,0.2);
    background: linear-gradient(165deg, rgba(255,255,255,0.95), rgba(241,247,255,0.88));
    box-shadow: 0 10px 20px rgba(11,27,58,0.09);
    backdrop-filter: none;
  }

  .featured-panel .featured-countdown-item{
    border-color: rgba(54,102,187,0.22);
    background: rgba(255,255,255,0.84);
    padding: 6px 2px;
    gap: 3px;
  }

  .featured-panel .featured-countdown-item strong{
    color: #163a73;
    font-size: clamp(13px, 2.8vw, 17px);
  }

  .featured-panel .featured-countdown-item small{
    color: #4c5f7f;
    font-size: 8px;
  }

  .featured-panel .featured-stage-actions{
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    justify-content: center;
  }

  .featured-panel .featured-cta{
    width: 100%;
    min-width: 0;
    min-height: 46px;
    font-size: 16px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .featured-panel .featured-rotator{
    margin-top: 8px;
    opacity: 0.85;
  }

  .featured-panel .featured-rotator-btn{
    width: 28px;
    height: 28px;
    color: #7a8daa;
  }
}

@media (max-width: 520px){
  .featured-panel{
    padding-top: 0;
  }

  .featured-panel .featured-countdown{
    margin-top: 8px;
    width: 100%;
    padding: 6px;
    gap: 4px;
    border-radius: 10px;
  }

  .featured-panel .featured-countdown-item{
    padding: 5px 1px;
    border-radius: 7px;
  }

  .featured-panel .featured-countdown-item strong{
    font-size: clamp(11px, 3.8vw, 14px);
  }

  .featured-panel .featured-countdown-item small{
    font-size: 7px;
    letter-spacing: 0.03em;
  }

  .featured-panel .featured-stage-actions{
    left: 50%;
    right: auto;
    bottom: 8px;
    transform: translateX(-50%);
    width: calc(100% - 16px);
  }

  .featured-panel .featured-cta{
    min-height: 44px;
    font-size: 15px;
  }

  .featured-panel .featured-rotator{
    margin-top: 6px;
    padding: 0;
  }
}

/* Page hero (inner pages) */
.page-hero{ padding: 42px 0 10px; }
.page-hero-inner{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; align-items:start; }
@media (max-width: 900px){ .page-hero-inner{ grid-template-columns: 1fr; } }

.notice{
  border:1px solid rgba(54,102,187,0.20);
  background: rgba(54,102,187,0.08);
  padding: 14px;
  border-radius: 18px;
  color: var(--accent-2);
  font-weight: 800;
  line-height: 1.55;
}

/* Competition hero */
.comp-hero{ padding: 46px 0 18px; }
.comp-hero-card{
  position:relative;
  border-radius: calc(var(--radius-lg) + 8px);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,247,244,0.92));
  box-shadow: 0 26px 60px rgba(11,27,58,0.16);
  padding: 26px;
  overflow: visible;
  transition: box-shadow 260ms var(--ease-out);
}
.comp-hero-card::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto -10%;
  height: 240px;
  background: radial-gradient(260px 180px at 35% 25%, rgba(54,102,187,0.22), rgba(255,255,255,0));
  opacity:0.85;
  pointer-events:none;
}
.comp-hero-card::after{
  content:"";
  position:absolute;
  inset:auto -20% -30% 30%;
  height: 220px;
  background: radial-gradient(240px 180px at 40% 40%, rgba(22,58,122,0.18), rgba(255,255,255,0));
  opacity:0.7;
  pointer-events:none;
}
.comp-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: 22px;
  align-items:start;
}
.comp-hero-copy .sub{ max-width: 65ch; }
.comp-hero-note{ margin-top: 16px; }
.comp-hero-controls{ display:flex; flex-direction:column; gap: 14px; }
@media (max-width: 980px){
  .comp-hero{ padding: 36px 0 16px; }
  .comp-hero-card{ padding: 20px; }
  .comp-hero-grid{ grid-template-columns: 1fr; }
}

/* Competitions page refresh */
body.page.page-bg.competitions-page{
  background-color: #eef2fa;
  background-image:
    radial-gradient(980px 620px at -10% -16%, rgba(54,102,187,0.16), rgba(255,255,255,0) 66%),
    radial-gradient(860px 560px at 106% -12%, rgba(22,58,122,0.14), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, #f7f9fd 0%, #f1f5fb 56%, #edf3fb 100%);
  background-repeat: no-repeat;
  background-size: 1080px 680px, 900px 620px, 100% 100%;
  background-position: -260px -180px, calc(100% + 180px) -150px, 0 0;
}

.competitions-main{
  padding: 0 0 30px;
}

.competitions-head{
  padding: 10px 0 4px;
}

.competitions-head .container{
  display: grid;
  gap: 12px;
}

.competitions-page .section.competitions-head{
  padding: 10px 0 0 !important;
}

.competitions-page .section.competitions-grid-wrap{
  padding-top: 0 !important;
  margin-top: 6px;
}

.competitions-title-banner{
  position: relative;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.26);
  background: linear-gradient(135deg, #2b9cf3 0%, #2f6fdf 56%, #2c62cc 100%);
  box-shadow: 0 14px 30px rgba(11,27,58,0.17);
  padding: 18px 24px;
  overflow: hidden;
}

.competitions-title-banner::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width: 48px;
  height: 48px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: #0c3a78;
}

.competitions-title-banner::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width: 28px;
  height: 28px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(195,218,255,0.54));
}

.competitions-title-banner .h1{
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.3px;
}

.draw-filter-panel{
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.20);
  background: linear-gradient(165deg, rgba(255,255,255,0.95), rgba(240,247,255,0.90));
  box-shadow: 0 12px 26px rgba(11,27,58,0.11);
  overflow: hidden;
}

.draw-filter-panel::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0.82;
}

.draw-filter-head{
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
}

.draw-filter-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--accent-2);
}

.draw-filter-sub{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.draw-filter-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.draw-filter-tile{
  appearance: none;
  border: 1px solid rgba(54,102,187,0.16);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,0.98), rgba(228,239,254,0.84));
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(11,27,58,0.08);
  transition:
    border-color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    background 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.draw-filter-tile:hover{
  transform: translateY(-1px);
  border-color: rgba(54,102,187,0.30);
  box-shadow: 0 12px 24px rgba(11,27,58,0.12);
}

.draw-filter-tile.is-active,
.draw-filter-tile[aria-pressed="true"]{
  border-color: rgba(54,102,187,0.42);
  background: linear-gradient(150deg, rgba(255,255,255,1), rgba(213,230,252,0.92));
  box-shadow: 0 0 0 2px rgba(54,102,187,0.14), 0 14px 26px rgba(11,27,58,0.14);
}

.draw-filter-tile:focus-visible{
  outline: 2px solid rgba(54,102,187,0.52);
  outline-offset: 2px;
}

.draw-filter-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(54,102,187,0.24);
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(219,234,252,0.88));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.draw-filter-icon svg{
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.draw-filter-label{
  line-height: 1.2;
  color: var(--accent-2);
}

.competitions-filter-bar{
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) auto;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.20);
  background: linear-gradient(150deg, rgba(255,255,255,0.98), rgba(244,248,255,0.94));
  box-shadow: 0 10px 24px rgba(11,27,58,0.10);
  align-items: end;
}

.competitions-filter-bar .field{
  min-width: 0;
}

.competitions-filter-bar .input,
.competitions-filter-bar .select-trigger{
  min-height: 44px;
}

.competitions-filter-bar .toggle{
  min-height: 44px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  align-self: end;
  justify-content: flex-start;
  gap: 10px;
}

.competitions-filter-bar .toggle-text{
  white-space: nowrap;
  font-size: 13px;
}

.competitions-grid-wrap{
  padding: 0 0 20px;
  margin-top: -2px;
}

.competitions-grid-wrap .container{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.competitions-page .competitions-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
}

@media (min-width: 981px) and (max-width: 1199px){
  .competitions-page .competitions-grid{
    grid-template-columns: repeat(2, minmax(290px, 420px));
    justify-content: center;
    gap: 16px;
  }
}

@media (min-width: 1200px){
  .competitions-page .competitions-grid{
    grid-template-columns: repeat(3, minmax(260px, 340px));
    justify-content: center;
    gap: 16px;
  }
}

.competitions-page #competitionsGrid .draw-card{
  border-radius: 14px;
  border: 1px solid rgba(11,27,58,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.96));
  box-shadow: 0 10px 22px rgba(11,27,58,0.10);
}

.competitions-page #competitionsGrid .draw-media{
  aspect-ratio: 1 / 1;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid rgba(11,27,58,0.16);
  background: #e6ebf5;
}

.competitions-page #competitionsGrid .draw-media img{
  transform: scale(1);
  filter: saturate(1.04);
}

.competitions-page #competitionsGrid .draw-card:hover .draw-media img{
  transform: scale(1.05);
}

.competitions-page #competitionsGrid .draw-ends{
  top: 8px;
  left: 8px;
  padding: 6px 9px;
  border-radius: 10px;
  font-size: 11px;
}

.competitions-page #competitionsGrid .draw-strip{
  padding: 4px 12px 0;
  font-size: 30px;
  line-height: 1;
}

.competitions-page #competitionsGrid .draw-body{
  padding: 8px 12px 8px;
  gap: 8px;
}

.competitions-page #competitionsGrid .draw-sub{
  min-height: calc(1.3em * 2);
  max-height: calc(1.3em * 2);
  font-size: 15px;
  color: #2f4568;
}

.competitions-page #competitionsGrid .draw-price{
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
}

.competitions-page #competitionsGrid .draw-sold{
  font-size: 13px;
  color: #38537a;
}

.competitions-page #competitionsGrid .progress{
  height: 7px;
}

.competitions-page #competitionsGrid [data-comp-card-mode="catalog"] .draw-actions{
  padding: 0 12px 12px;
  display: grid;
  gap: 8px;
}

.competitions-page #competitionsGrid [data-comp-card-mode="catalog"] .draw-actions .btn{
  min-height: 40px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
}

.competitions-page #competitionsGrid .comp-countdown{
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(45,134,225,0.50);
  background: rgba(255,255,255,0.95);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.competitions-page #competitionsGrid .comp-countdown-item{
  display: grid;
  justify-items: center;
  gap: 1px;
}

.competitions-page #competitionsGrid .comp-countdown-item strong{
  font-family: var(--font-display);
  color: var(--accent-2);
  font-size: 14px;
  line-height: 1;
}

.competitions-page #competitionsGrid .comp-countdown-item small{
  font-size: 10px;
  font-weight: 900;
  color: #54709a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.competitions-page #competitionsGrid .comp-countdown.is-ended{
  border-color: rgba(85,99,122,0.30);
}

.competitions-page #competitionsGrid .comp-countdown.is-ended .comp-countdown-item strong{
  color: var(--muted);
}

@media (max-width: 980px){
  .competitions-main{
    padding-top: 2px;
  }

  .competitions-title-banner{
    padding: 14px 18px;
  }

  .competitions-filter-bar{
    grid-template-columns: 1fr;
  }

  .competitions-filter-bar .toggle{
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(11,27,58,0.12);
    background: rgba(246,247,244,0.9);
  }

  .competitions-page .section.competitions-grid-wrap{
    margin-top: 6px;
  }
}

@media (max-width: 620px){
  .competitions-head{
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .competitions-title-banner .h1{
    font-size: 44px;
  }

  .draw-filter-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }

  .draw-filter-tile{
    min-height: 58px;
    padding: 10px 12px;
    gap: 8px;
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .draw-filter-icon{
    width: 32px;
    height: 32px;
  }

  .draw-filter-icon svg{
    width: 17px;
    height: 17px;
  }

  .draw-filter-label{
    font-size: 12px;
  }

  .competitions-grid-wrap .container{
    padding: 0;
    border-radius: 0;
  }

  .competitions-grid-wrap{
    margin-top: -4px;
  }

  .competitions-page .section.competitions-grid-wrap{
    margin-top: 8px;
  }

  .competitions-page #competitionsGrid.competitions-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .competitions-page #competitionsGrid .draw-media{
    margin: 8px;
    aspect-ratio: 16 / 10;
  }

  .competitions-page #competitionsGrid .draw-strip{
    font-size: clamp(17px, 4.4vw, 19px);
    line-height: 1.1;
    padding: 5px 9px 0;
    white-space: normal;
    display: block;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    min-height: 0;
    max-height: none;
    overflow: visible;
    text-overflow: clip;
  }

  .competitions-page #competitionsGrid .draw-body{
    padding: 7px 9px 7px;
  }

  .competitions-page #competitionsGrid .draw-sub{
    font-size: 12px;
  }

  .competitions-page #competitionsGrid .draw-price{
    font-size: 24px;
  }

  .competitions-page #competitionsGrid [data-comp-card-mode="catalog"] .draw-actions{
    padding: 0 9px 9px;
  }

  .competitions-page #competitionsGrid [data-comp-card-mode="catalog"] .draw-actions .btn{
    min-height: 36px;
    font-size: 12px;
  }

  .competitions-page #competitionsGrid .comp-countdown{
    padding: 5px 6px;
    gap: 2px;
  }

  .competitions-page #competitionsGrid .comp-countdown-item strong{
    font-size: 12px;
  }

  .competitions-page #competitionsGrid .comp-countdown-item small{
    font-size: 9px;
  }
}

@media (max-width: 350px){
  .competitions-page #competitionsGrid.competitions-grid{
    grid-template-columns: 1fr;
  }
}

/* Impact page */
.impact-hero-page{ padding: 48px 0 18px; }
.impact-hero-card{
  position:relative;
  border-radius: calc(var(--radius-lg) + 6px);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,247,244,0.92));
  box-shadow: 0 26px 60px rgba(11,27,58,0.16);
  padding: 26px;
  overflow:hidden;
}
.impact-hero-card::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto -10%;
  height: 240px;
  background: radial-gradient(260px 180px at 25% 30%, rgba(54,102,187,0.22), rgba(255,255,255,0));
  opacity:0.85;
  animation: impactPulse 14s ease-in-out infinite;
  pointer-events:none;
}
.impact-hero-card::after{
  content:"";
  position:absolute;
  inset:auto -20% -30% 30%;
  height: 220px;
  background: radial-gradient(240px 180px at 40% 40%, rgba(22,58,122,0.18), rgba(255,255,255,0));
  opacity:0.7;
  animation: impactPulse 18s ease-in-out infinite;
  pointer-events:none;
}
.impact-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 22px;
  align-items:center;
}
.impact-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
.impact-hero-pills{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }
.impact-hero-panel{ display:flex; flex-direction:column; gap: 12px; }
.impact-hero-panel-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.20);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 38px rgba(11,27,58,0.12);
  overflow:hidden;
}
.impact-hero-panel-media{
  height: 180px;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.35), rgba(11,27,58,0.05)),
    var(--img, url("../assets/hero-1.jpg")) center/cover no-repeat;
}
.impact-hero-panel-body{ padding: 14px; }
.impact-hero-panel-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: var(--accent-2);
}
.impact-hero-note{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(54,102,187,0.10);
  color: var(--accent-2);
  font-weight: 800;
  line-height: 1.5;
}

.impact-meter-compact{
  padding: 16px;
}

.impact-content-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.impact-timeline-head,
.impact-spotlight-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.impact-timeline{
  display: grid;
  gap: 12px;
}
.impact-timeline-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.impact-timeline-item{
  border: 1px solid rgba(54,102,187,0.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.78);
  display: grid;
  gap: 6px;
  min-height: 160px;
  scroll-snap-align: start;
}
.impact-timeline-media{
  border-radius: 12px;
  min-height: 120px;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(54,102,187,0.18);
}
.impact-timeline-meta{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.impact-timeline-title{
  font-weight: 900;
  font-size: 16px;
}
.impact-timeline-summary{
  font-size: 12px;
  color: var(--muted);
}
.impact-spotlight{
  display: grid;
  gap: 12px;
}
.impact-spotlight-body{
  display: grid;
  gap: 10px;
}
.impact-spotlight-media{
  border-radius: 16px;
  min-height: 180px;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(54,102,187,0.18);
  box-shadow: var(--shadow-soft);
}
.impact-spotlight-quote{
  font-weight: 800;
  color: var(--accent-2);
  font-size: 13px;
}
.impact-spotlight-meta{
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.impact-badges{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.impact-badge{
  border: 1px dashed rgba(11,27,58,0.2);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(255,255,255,0.7);
}
.impact-badge strong{
  color: var(--text);
  margin-right: 6px;
}
.impact-empty{
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 12px;
}

.impact-vote-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.impact-vote-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 34px rgba(11,27,58,0.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.impact-vote-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(11,27,58,0.12);
  border-color: rgba(54,102,187,0.28);
}
.impact-vote-card.is-selected{
  border-color: rgba(54,102,187,0.36);
  box-shadow: 0 22px 48px rgba(11,27,58,0.14);
}
.impact-vote-media{
  height: 160px;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.35), rgba(11,27,58,0.05)),
    var(--img, url("../assets/hero-2.jpg")) center/cover no-repeat;
}
.impact-vote-body{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
}
.impact-vote-body .btn{
  width:100%;
  margin-top: auto;
}

.impact-vote-results{
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 34px rgba(11,27,58,0.10);
  display:grid;
  gap: 12px;
}
.impact-vote-bar{
  display:grid;
  gap: 6px;
}
.impact-vote-bar > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.impact-vote-percent{ color: var(--accent-2); }
.impact-vote-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,27,58,0.08);
  overflow:hidden;
}
.impact-vote-track span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 420ms var(--ease-out);
}
.impact-vote-status{
  color: var(--muted);
  font-weight: 700;
  margin: 0;
}
.impact-vote-status.is-xp{
  color: var(--accent-2);
  animation: impactXpPulse 1100ms var(--ease-out);
}
@keyframes impactXpPulse{
  0%{ transform: translateY(4px); opacity: 0.3; }
  30%{ transform: translateY(0); opacity: 1; }
  100%{ transform: translateY(0); opacity: 1; }
}

.impact-details-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.impact-detail-card{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 34px rgba(11,27,58,0.10);
}
.impact-detail-card ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6;
}
.impact-back-card{
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(150deg, rgba(54,102,187,0.14), rgba(255,255,255,0.92));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

@keyframes impactPulse{
  0%{ transform: translateY(0); opacity:0.75; }
  50%{ transform: translateY(-10px); opacity:0.95; }
  100%{ transform: translateY(0); opacity:0.75; }
}

@media (max-width: 980px){
  .impact-hero-page{ padding: 36px 0 16px; }
  .impact-hero-card{ padding: 20px; }
  .impact-hero-grid{ grid-template-columns: 1fr; }
  .impact-content-grid{ grid-template-columns: 1fr; }
  .impact-vote-grid{ grid-template-columns: 1fr; }
  .impact-details-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .impact-timeline-track{
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
  }
}

/* Filters */
.filters{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border:1px solid rgba(11,27,58,0.12);
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(11,27,58,0.10);
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field-label{ font-size: 12px; font-weight: 900; letter-spacing:0.08em; text-transform:uppercase; color: var(--muted); }
.filters .field-label{ color: var(--accent-2); }
.filters .input{
  background: rgba(246,247,244,0.92);
  border-color: rgba(11,27,58,0.12);
}
.filters .input:focus{
  border-color: rgba(54,102,187,0.32);
  box-shadow: 0 0 0 6px rgba(54,102,187,0.10);
}
.select-shell{
  position:relative;
  width:100%;
  --select-radius: 12px;
  --select-border: rgba(11,27,58,0.14);
  --select-border-strong: rgba(11,27,58,0.20);
  --select-bg: #ffffff;
  --select-shadow: 0 12px 22px rgba(11,27,58,0.12);
  --select-hover: rgba(11,27,58,0.04);
  --select-selected: rgba(54,102,187,0.10);
}
.select-shell .select-trigger,
.select-shell .select-menu{ display:none; }
.select-shell.is-enhanced .select-trigger{ display:flex; }
.select-shell.is-enhanced .select-menu{ display:grid; }
.select-shell.is-enhanced .select-native{
  position:absolute;
  inset:0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.select-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 11px 14px;
  border-radius: var(--select-radius);
  border: 1px solid var(--select-border);
  background: var(--select-bg);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(11,27,58,0.06);
  transition: box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.select-trigger:hover{
  border-color: var(--select-border-strong);
  box-shadow: 0 10px 22px rgba(11,27,58,0.10);
  transform: translateY(-0.5px);
}
.select-trigger:focus-visible{
  outline: none;
  border-color: rgba(54,102,187,0.32);
  box-shadow: 0 0 0 6px rgba(54,102,187,0.10);
}
.select-shell.is-open .select-trigger{
  border-color: var(--select-border-strong);
  box-shadow: 0 8px 18px rgba(11,27,58,0.10);
  transform: translateY(0);
}
.select-value{
  font-weight: 800;
  letter-spacing:0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-arrow{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(85,99,122,0.92);
  border-bottom: 2px solid rgba(85,99,122,0.92);
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.select-shell.is-open .select-arrow{
  transform: rotate(-135deg);
  border-color: var(--accent-2);
}
.select-menu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 6px;
  border-radius: var(--select-radius);
  border: 1px solid var(--select-border);
  background: #ffffff;
  box-shadow: var(--select-shadow);
  gap: 4px;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  z-index: 1000;
}
.select-shell.is-open .select-menu{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
}
.select-menu:focus,
.select-menu:focus-visible{ outline: none; }
.select-option{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align:left;
  cursor:pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
  overflow: hidden;
}
.select-option-text{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-option:hover,
.select-option.is-active{
  background: var(--select-hover);
}
.select-option[aria-selected="true"]{
  background: var(--select-selected);
  color: var(--accent-2);
  font-weight: 800;
}
.select-option[aria-selected="true"]::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 50%;
  width: 3px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(54,102,187,0.12);
}
.toggle{ display:flex; align-items:center; gap:10px; padding-top: 22px; font-weight: 900; color: var(--text); }
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle-ui{ width: 46px; height: 28px; border-radius: 999px; border:1px solid var(--border); background: rgba(255,255,255,0.70); position:relative; flex:0 0 auto; }
.toggle-ui::after{ content:""; position:absolute; top:4px; left:4px; width: 20px; height: 20px; border-radius:999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); transition: transform 240ms var(--ease-out); }
.toggle input:checked + .toggle-ui::after{ transform: translateX(18px); }
.toggle-text{ font-size: 13px; }
.filters .toggle{
  padding-top: 0;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,27,58,0.12);
  background: rgba(246,247,244,0.92);
}
.filters .toggle-ui{ background: #ffffff; }

/* Competition page layout */
.comp{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 18px; position:relative; }
.comp > *{ min-width: 0; }
.comp-media{
  position:relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: auto;
  min-height: clamp(190px, 52vw, 280px);
  background-image: var(--img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  transition: transform 240ms var(--ease-out);
}
.comp-media[data-tilt]{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.comp-media[data-fit="contain"]{ background-size: contain; background-repeat: no-repeat; }
.comp-media.comp-media-image{
  aspect-ratio: 16 / 9;
  min-height: 0;
  background-image: none;
  background-color: rgba(11,27,58,0.12);
}
.comp-media.comp-media-image .comp-media-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.comp-media.comp-media-image[data-fit="contain"] .comp-media-img{
  object-fit: contain;
  background: linear-gradient(120deg, rgba(11,27,58,0.30), rgba(11,27,58,0.08));
}
.comp-media.comp-media-image[data-media-ready="true"] .comp-media-img{
  opacity: 1;
}
.comp-media-overlay{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(11,27,58,0.65), rgba(11,27,58,0.10) 55%, rgba(11,27,58,0)); }
.comp-media-badges{ position:absolute; left: 14px; bottom: 14px; display:flex; gap:10px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding: 7px 10px; border-radius: 999px; font-weight: 900; font-size: 12px; background: rgba(255,255,255,0.88); border:1px solid rgba(255,255,255,0.34); }
.chip-ghost{ background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.30); }

.comp-body{ padding: 6px 2px 2px; }
.comp-metrics{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.metric{ padding: 12px; border-radius: 18px; border:1px solid var(--border); background: rgba(255,255,255,0.62); }
.metric-label{ font-size: 12px; font-weight: 900; letter-spacing:0.08em; text-transform:uppercase; color: var(--muted); }
.metric-value{ margin-top: 6px; font-family: var(--font-display); font-weight: 900; }
.countdown-urgent{
  border-color: rgba(214, 46, 46, 0.75);
  box-shadow: 0 0 0 1px rgba(214, 46, 46, 0.35);
  animation: countdownPulse 2.4s ease-in-out infinite;
}
@keyframes countdownPulse{
  0%, 100%{ box-shadow: 0 0 0 1px rgba(214, 46, 46, 0.35); }
  50%{ box-shadow: 0 0 0 4px rgba(214, 46, 46, 0.6); }
}
.comp-progress{ margin-top: 12px; }
.comp-progress-top{ display:flex; justify-content:space-between; gap:10px; color: var(--muted); font-weight: 800; font-size: 12px; margin-bottom: 8px; }
.comp-buy{ margin-top: 14px; display:flex; gap: 12px; flex-wrap:wrap; align-items:center; }
.qty-stepper{ display:flex; gap: 10px; align-items:center; }
.qty-input{ width: 110px; text-align:center; font-weight: 900; }
.hint{ color: var(--muted); font-weight: 800; }
@media (max-width: 980px){ .comp{ grid-template-columns: 1fr; } .comp-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.comp-modern{ align-items:start; }
.comp-tabs{
  margin-top: 16px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
}
.tab-btn{
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.tab-btn.is-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  transform: translateY(-1px);
}
.comp-panels{ margin-top: 14px; }
.tab-panel{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.tab-panel.is-active{
  opacity: 1;
  transform: translateY(0);
}

.free-entry{
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.80);
  box-shadow: var(--shadow-soft);
}
.free-entry-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.free-entry-card{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  font-weight: 800;
  color: var(--muted);
}
.free-entry-card h4{
  margin: 0 0 6px;
  font-family: var(--font-display);
  color: var(--text);
}

.comp-details{
  margin-top: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.comp-details.is-in{
  opacity: 1;
  transform: translateY(0);
}
.comp-details-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.terms-card,
.faq-card{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  box-shadow: var(--shadow-soft);
  background: rgba(255,255,255,0.88);
}
.faq-card{
  background: linear-gradient(155deg, rgba(54,102,187,0.16), rgba(255,255,255,0.92));
  border-color: rgba(54,102,187,0.24);
}
.terms-card-head{ max-width: 680px; }
.draw-terms-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.draw-term{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-weight: 900;
}
.draw-term span{
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.draw-terms-actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.faq-card .accordion{
  border-color: rgba(54,102,187,0.22);
  background: rgba(255,255,255,0.82);
}
.faq-card .accordion summary{
  color: var(--accent-2);
}

@media (max-width: 980px){
  .free-entry-grid{ grid-template-columns: 1fr; }
  .draw-terms-grid{ grid-template-columns: 1fr; }
  .comp-details-grid{ grid-template-columns: 1fr; }
}

/* Accordions */
.accordion{ margin-top: 10px; border-radius: 18px; border:1px solid var(--border); background: rgba(255,255,255,0.62); overflow:hidden; }
.accordion summary{
  cursor:pointer;
  list-style:none;
  padding: 12px 14px;
  font-weight: 900;
  position:relative;
  padding-right: 38px;
}
.accordion summary::after{
  content:"+";
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: var(--accent);
}
.accordion[open] summary::after{
  content:"-";
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion-body{
  padding: 0 14px;
  max-height: 0;
  overflow:hidden;
  opacity: 0;
  transform: translateY(-4px);
  color: var(--muted);
  font-weight: 700;
  line-height: 1.65;
  transition: max-height 260ms var(--ease-out), opacity 260ms var(--ease-out), transform 260ms var(--ease-out), padding 260ms var(--ease-out);
}
.accordion[open] .accordion-body{
  padding: 0 14px 14px;
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
}

/* Subtle confetti when a draw ends */
.confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
}
.confetti-piece{
  position:absolute;
  top:-12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--c, var(--accent));
  opacity: 0;
  transform: translate3d(0,-20px,0) rotate(0deg);
  animation: confetti-fall var(--d, 2.8s) var(--delay, 0s) linear forwards;
}
@keyframes confetti-fall{
  0%{ opacity:0; transform: translate3d(0,-20px,0) rotate(0deg); }
  10%{ opacity:0.7; }
  100%{ opacity:0; transform: translate3d(0,260px,0) rotate(180deg); }
}

/* Competition V2 page */
body.page.page-bg.competition-v2-page{
  background-color: #eff3fa;
  background-image:
    radial-gradient(980px 620px at -18% -16%, rgba(54,102,187,0.16), rgba(255,255,255,0) 66%),
    radial-gradient(920px 580px at 116% -20%, rgba(22,58,122,0.14), rgba(255,255,255,0) 68%),
    linear-gradient(180deg, #f8fafd 0%, #f1f5fb 60%, #edf2fa 100%);
  background-repeat: no-repeat;
  background-size: 1180px 700px, 980px 620px, 100% 100%;
  background-position: -280px -180px, calc(100% + 220px) -220px, 0 0;
}

.competition-v2-main{
  padding: 4px 0 30px;
}

.competition-v2-page .section.competition-v2-stage{
  padding: 10px 0 26px;
}

.comp-v2-loading{
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 32px rgba(11,27,58,0.10);
}

.comp-v2-shell{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(160deg, rgba(245,248,253,0.98), rgba(240,245,252,0.92));
  box-shadow: 0 18px 40px rgba(11,27,58,0.12);
  padding: 14px;
}

.comp-v2-shell::after{
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(145deg, #4aa9ff, #2d83dd 65%, #1e5fba);
}

.comp-v2-topline{
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.comp-v2-countdown-bar{
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-bottom: 0;
  max-width: 100%;
}

.comp-v2-countdown-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(54,102,187,0.22);
  border-right: 0;
  border-radius: 9px 0 0 9px;
  overflow: hidden;
  min-width: min(248px, 100%);
}

.comp-v2-countdown-tile{
  padding: 5px 6px 4px;
  background: rgba(255,255,255,0.94);
  border-right: 1px solid rgba(54,102,187,0.18);
  display: grid;
  justify-items: center;
  gap: 2px;
}

.comp-v2-countdown-tile strong{
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  color: var(--accent-2);
  letter-spacing: -0.1px;
}

.comp-v2-countdown-tile small{
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5d7393;
}

.comp-v2-countdown-label{
  min-width: 132px;
  padding: 0 10px;
  border-radius: 0 9px 9px 0;
  border: 1px solid rgba(54,102,187,0.24);
  background: linear-gradient(135deg, var(--accent), #2f79df);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
}

.comp-v2-countdown-bar.is-ended .comp-v2-countdown-label{
  background: linear-gradient(135deg, #6e7f9e, #596a86);
}

.comp-v2-stats-carousel{
  min-height: 40px;
}

.comp-v2-stats-row{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.comp-v2-stat-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}

.comp-v2-stat-icon{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f79df, #2667c4);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 14px rgba(27,66,128,0.2);
}

.comp-v2-stat-icon svg{
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comp-v2-stat-item:last-child .comp-v2-stat-icon svg{
  fill: currentColor;
  stroke: none;
}

.comp-v2-stat-copy{
  display: grid;
  gap: 1px;
}

.comp-v2-stat-copy strong{
  display: block;
  font-size: 26px;
  font-family: var(--font-display);
  line-height: 0.95;
  color: #0f2f60;
  letter-spacing: -0.02em;
}

.comp-v2-stat-copy small{
  display: block;
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 900;
  color: #2f79df;
}

.comp-v2-stat-item-date .comp-v2-stat-copy strong{
  font-size: 19px;
  line-height: 1;
}

@media (min-width: 981px){
  .comp-v2-topline{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: center;
    gap: 10px;
  }

  .comp-v2-stats-carousel{
    min-width: 0;
  }

  .comp-v2-stats-row{
    gap: 12px;
  }

  .comp-v2-countdown-bar{
    width: 100%;
    min-width: 0;
    justify-self: end;
    justify-content: stretch;
  }

  .comp-v2-countdown-grid{
    min-width: 0;
    flex: 1 1 auto;
  }

  .comp-v2-countdown-label{
    min-width: 118px;
    flex: 0 0 118px;
    padding: 0 8px;
  }
}

.comp-v2-main-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 14px;
  align-items: start;
}

.comp-v2-poster{
  border-radius: 14px;
  border: 1px solid rgba(11,27,58,0.16);
  background: rgba(255,255,255,0.86);
  overflow: hidden;
}

.comp-v2-poster img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.comp-v2-side{
  display: grid;
  gap: 10px;
}

.comp-v2-chip-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.comp-v2-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  border: 1px solid rgba(54,102,187,0.30);
}

.comp-v2-chip-date{
  background: #f3cd00;
  border-color: rgba(189,147,0,0.55);
  color: #0b1b3a;
}

.comp-v2-chip-accent{
  background: rgba(255,255,255,0.98);
  color: var(--accent-2);
}

.comp-v2-title-block h1{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.35px;
  line-height: 1.06;
  font-size: clamp(28px, 3.6vw, 42px);
}

.comp-v2-copy{
  margin: 8px 0 0;
  color: #30486b;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}

.comp-v2-price{
  margin: 10px 0 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.comp-v2-price strong{
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: #1f5fd8;
  letter-spacing: -0.3px;
}

.comp-v2-price span{
  color: #6a7d99;
  font-size: 16px;
  font-weight: 900;
}

.comp-v2-progress{
  padding: 10px 0 4px;
}

.comp-v2-progress-top{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: #173d78;
  margin-bottom: 8px;
}

.comp-v2-entry-card{
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.20);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 24px rgba(11,27,58,0.10);
  overflow: hidden;
}

.comp-v2-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(54,102,187,0.18);
}

.comp-v2-tab{
  border: 0;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
  color: #5f7393;
  background: #f6f8fc;
  cursor: pointer;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.comp-v2-tab.is-active{
  background: #ffffff;
  color: #1f4f9d;
}

.comp-v2-panel{
  padding: 14px;
}

.comp-v2-entry-heading{
  margin: 0 0 10px;
  text-align: center;
  font-size: 32px;
  font-family: var(--font-display);
  letter-spacing: -0.28px;
}

.comp-v2-qty-pill{
  width: fit-content;
  margin: 0 auto 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f2f60;
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.comp-v2-slider-row{
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
}

.comp-v2-step-btn{
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(54,102,187,0.20);
  background: #eef3fb;
  color: var(--accent-2);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.comp-v2-step-btn:disabled{
  opacity: 0.45;
  cursor: default;
}

.comp-v2-range{
  width: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
}

.comp-v2-range::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: #d6dde9;
}

.comp-v2-range::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background: #d6dde9;
}

.comp-v2-range::-webkit-slider-thumb{
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: linear-gradient(135deg, #2f79df, #245fb7);
  box-shadow: 0 4px 10px rgba(11,27,58,0.22);
}

.comp-v2-range::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: linear-gradient(135deg, #2f79df, #245fb7);
  box-shadow: 0 4px 10px rgba(11,27,58,0.22);
}

.comp-v2-slider-scale{
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  color: #30486b;
  font-size: 12px;
  font-weight: 900;
}

.comp-v2-qty-summary{
  margin: 10px 0 0;
  text-align: center;
  font-size: 15px;
  color: #173d78;
  font-weight: 800;
}

.comp-v2-qty-limit{
  margin: 2px 0 0;
  text-align: center;
  color: #6a7d99;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 900;
}

.comp-v2-enter-btn{
  width: 100%;
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comp-v2-hint{
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: #4d6383;
}

.comp-v2-postal-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.comp-v2-postal-card{
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(245,248,253,0.92);
}

.comp-v2-postal-card h3{
  margin: 0 0 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #204b93;
}

.comp-v2-postal-card p{
  margin: 0;
  color: #364f72;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.comp-v2-details-compact{
  margin-top: 14px;
}

.comp-v2-details-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.comp-v2-mini-card{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.94);
}

.comp-v2-mini-card h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-family: var(--font-display);
}

.comp-v2-term-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.comp-v2-term-list li{
  display: grid;
  gap: 2px;
}

.comp-v2-term-list span{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #647a98;
  font-weight: 900;
}

.comp-v2-term-list strong{
  font-size: 14px;
}

.comp-v2-fair-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #30486b;
  font-weight: 700;
}

@media (max-width: 980px){
  .competition-v2-main{
    padding-top: 0;
  }

  .competition-v2-page .section.competition-v2-stage{
    padding-top: 6px;
  }

  .comp-v2-stat-copy strong{
    font-size: 23px;
  }

  .comp-v2-main-grid{
    grid-template-columns: 1fr;
  }

  .comp-v2-title-block h1{
    font-size: 34px;
  }

  .comp-v2-postal-grid{
    grid-template-columns: 1fr;
  }

  .comp-v2-details-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px){
  .competition-v2-page .section.competition-v2-stage{
    padding-top: 4px;
  }

  .comp-v2-shell{
    padding: 10px;
    border-radius: 16px;
  }

  .comp-v2-countdown-bar{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .comp-v2-countdown-grid{
    min-width: 0;
    border-right: 1px solid rgba(54,102,187,0.22);
    border-radius: 10px 10px 0 0;
  }

  .comp-v2-countdown-label{
    min-width: 0;
    border-radius: 0 0 10px 10px;
    min-height: 32px;
  }

  .comp-v2-countdown-tile strong{
    font-size: 14px;
  }

  .comp-v2-topline{
    gap: 7px;
  }

  .comp-v2-countdown-bar{
    order: 1;
  }

  .comp-v2-stats-carousel{
    order: 2;
  }

  .comp-v2-stats-carousel{
    min-height: 42px;
  }

  .comp-v2-stats-row{
    gap: 0;
  }

  .comp-v2-stats-carousel.is-fade-carousel{
    overflow: hidden;
    position: relative;
  }

  .comp-v2-stats-carousel.is-fade-carousel .comp-v2-stats-row{
    position: relative;
    min-height: 40px;
  }

  .comp-v2-stats-carousel.is-fade-carousel .comp-v2-stat-item{
    position: absolute;
    inset: 0;
    justify-content: center;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
  }

  .comp-v2-stats-carousel.is-fade-carousel .comp-v2-stat-item.is-active{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .comp-v2-stat-copy strong{
    font-size: 21px;
  }

  .comp-v2-stat-item-date .comp-v2-stat-copy strong{
    font-size: 17px;
  }

  .comp-v2-stat-copy small{
    font-size: 10px;
  }

  .comp-v2-title-block h1{
    font-size: 31px;
  }

  .comp-v2-price strong{
    font-size: 32px;
  }

  .comp-v2-entry-heading{
    font-size: 28px;
  }

  .comp-v2-slider-row{
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
  }

  .comp-v2-step-btn{
    width: 34px;
    height: 34px;
  }

  .comp-v2-panel{
    padding: 10px;
  }
}

/* Insta draw */
.insta-shell{ display:grid; gap: 16px; }
.insta-summary{
  margin: 16px 0 4px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.insta-stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-weight: 800;
}
.insta-stat span{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.insta-stat strong{ font-size: 18px; color: var(--text); }
.insta-buy{ display:flex; gap: 12px; flex-wrap:wrap; align-items:center; margin-top: 14px; }
.insta-prizes{
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-soft);
}
.insta-prizes-head{ display:flex; justify-content:space-between; gap: 12px; align-items:center; flex-wrap:wrap; }
.insta-prize-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.insta-prize-card{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(246,247,244,0.7));
  box-shadow: 0 16px 32px rgba(11,27,58,0.08);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 240ms var(--ease-out);
}
.insta-prize-amount{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--accent-2);
}
.insta-prize-meta{
  display:flex;
  justify-content:space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.insta-prize-meter{
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(54,102,187,0.12);
  overflow:hidden;
}
.insta-prize-meter span{
  display:block;
  height:100%;
  width: var(--w,0%);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 600ms var(--ease-out);
}
.insta-prize-foot{ margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }

.insta-picker-item{
  text-align:left;
  width:100%;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius-md);
  padding:16px;
  cursor:pointer;
  transition:transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.insta-picker-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}

/* Insta Draw V2 alignment */
.insta-v2-page .comp-v2-entry-card.is-closed{
  opacity: 0.9;
}

.insta-v2-page .insta-v2-details{
  margin-top: 14px;
}

.insta-v2-page .insta-v2-details-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insta-v2-live-head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.insta-v2-live-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.insta-v2-live-item{
  display: grid;
  gap: 3px;
}

.insta-v2-live-item span{
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 900;
  color: #5f7393;
}

.insta-v2-live-item strong{
  font-size: 18px;
  line-height: 1.1;
  color: #153a72;
}

.insta-v2-picker{
  display: grid;
  gap: 16px;
}

.insta-v2-picker-head{
  display: grid;
  gap: 6px;
}

.insta-v2-picker-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1.02;
}

.insta-v2-picker-sub{
  margin: 0;
  font-size: 15px;
  color: #425a7b;
  font-weight: 700;
}

.insta-v2-picker-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.insta-v2-picker-item{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(54,102,187,0.2);
  border-radius: 14px;
  background: rgba(255,255,255,0.96);
  padding: 14px;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.insta-v2-picker-item h3{
  margin: 0;
  font-size: 22px;
  line-height: 1.08;
  font-family: var(--font-display);
}

.insta-v2-picker-item p{
  margin: 8px 0 0;
  font-size: 13px;
  color: #425a7b;
  font-weight: 700;
}

.insta-v2-picker-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(11,27,58,0.1);
  border-color: rgba(54,102,187,0.34);
}

.insta-v2-page .insta-prizes{
  margin-top: 14px;
}

.insta-v2-page .insta-prize-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insta-v2-page .fairness-card{
  margin-top: 14px;
}

.insta-v2-sticky .btn{
  min-height: 48px;
}

@media (max-width: 1100px){
  .insta-v2-page .insta-prize-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .insta-v2-page .comp-v2-main-grid{
    grid-template-columns: 1fr;
  }

  .insta-v2-page .insta-v2-details-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px){
  .insta-v2-live-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .insta-v2-page .competition-v2-stage{
    padding-top: 4px;
  }

  .insta-v2-page .insta-prize-grid{
    grid-template-columns: 1fr;
  }

  .insta-v2-picker-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  .insta-summary{ grid-template-columns: 1fr; }
  .insta-prize-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .insta-prize-grid{ grid-template-columns: 1fr; }
  .insta-buy{ flex-direction:column; align-items:stretch; }
}

/* Free draw */
.free-draw-shell{ display:grid; gap: 16px; }
.free-draw-card{
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-soft);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.free-draw-media{
  position:relative;
  min-height: clamp(190px, 52vw, 280px);
  overflow:hidden;
}
.free-draw-badges{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  z-index:1;
}
.free-draw-body{ display:flex; flex-direction:column; gap: 12px; }
.free-draw-greeting{ font-weight: 800; color: var(--muted); }
.free-draw-summary{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.free-draw-stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-weight: 800;
}
.free-draw-stat span{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.free-draw-stat strong{ font-size: 18px; color: var(--text); }
.free-draw-actions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 6px; }
.free-draw-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.free-draw-step{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.72);
  font-weight: 800;
  color: var(--muted);
  box-shadow: 0 10px 24px rgba(11,27,58,0.06);
}
.free-draw-note{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(160deg, rgba(54,102,187,0.10), rgba(255,255,255,0.9));
  box-shadow: var(--shadow-soft);
}
.free-draw-note ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 700;
}
.free-draw-note li{ margin: 6px 0; }

@media (max-width: 980px){
  .free-draw-card{ grid-template-columns: 1fr; }
  .free-draw-summary{ grid-template-columns: 1fr; }
  .free-draw-steps{ grid-template-columns: 1fr; }
}

/* Basket layout */
.basket{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; }
.basket-controls{ margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
.basket-items{ margin-top: 16px; display:grid; gap: 12px; }
.basket-item{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 14px 30px rgba(11,27,58,0.08);
}
.basket-item-media{
  border-radius: 18px;
  min-height: 140px;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.45), rgba(11,27,58,0.05)),
    var(--img, linear-gradient(120deg, rgba(54,102,187,0.25), rgba(255,255,255,0.2)));
  background-size: cover;
  background-position:center;
}
.basket-item-media[data-fit="contain"]{ background-size: contain; background-repeat: no-repeat; }
.basket-item-body{ display:flex; flex-direction:column; gap: 12px; }
.basket-item-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; flex-wrap:wrap; }
.basket-item-meta{ display:flex; gap: 12px; flex-wrap:wrap; color: var(--muted); font-weight: 800; font-size: 12px; }
.basket-item-controls{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.basket-item-total{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
  font-weight: 900;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.basket-actions{ margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; }
.basket-summary{ padding: 14px; border-radius: var(--radius-lg); border:1px solid rgba(54,102,187,0.18); background: rgba(255,255,255,0.68); box-shadow: var(--shadow-soft); transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.summary-line{ display:flex; justify-content:space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-weight: 900; }
.summary-divider{ height: 1px; background: var(--border); margin: 10px 0 12px; }

.purchase-summary{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.68);
  font-weight: 900;
}
.purchase-summary div{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.purchase-summary span{
  font-size: 11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.purchase-summary strong{
  font-family: var(--font-display);
  letter-spacing:-0.2px;
}
.purchase-summary.inline{
  padding: 8px 12px;
}

.sticky-cta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, calc(8px + env(safe-area-inset-bottom)));
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.24);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 36px rgba(11,27,58,0.18);
  backdrop-filter: blur(12px);
}
.sticky-cta-buy{
  flex-wrap: wrap;
}
.sticky-qty-stepper{
  flex: 0 1 186px;
  min-width: 166px;
}
.sticky-qty-stepper .btn{
  flex: 0 0 44px;
  min-width: 44px;
}
.sticky-qty-stepper .qty-input{
  max-width: 72px;
  text-align: center;
}
.sticky-cta-summary{
  display:flex;
  flex-direction:column;
  gap: 2px;
  font-weight: 900;
}
.sticky-cta-summary span{
  font-size: 11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.sticky-cta .btn{
  flex: 1 1 auto;
}
@media (max-width: 900px){ .basket{ grid-template-columns: 1fr; } }
@media (max-width: 780px){
  .basket-item{ grid-template-columns: 1fr; }
  .basket-item-media{ min-height: 180px; }
}

/* Basket + checkout v2 */
body.page.page-bg.basket-v2-page{
  background-color: #eef2f8;
  background-image:
    radial-gradient(940px 620px at -12% -20%, rgba(54,102,187,0.14), rgba(255,255,255,0) 68%),
    radial-gradient(860px 560px at 110% -24%, rgba(22,58,122,0.13), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #f6f9fd 0%, #f1f5fb 58%, #edf2f9 100%);
  background-repeat: no-repeat;
}

.cart-v2-main,
.checkout-v2-main{
  padding: 8px 0 32px;
}

.cart-v2-head{
  padding: 10px 0 6px;
}

.cart-v2-title-banner{
  position: relative;
  max-width: 740px;
  margin: 0 auto;
  padding: 14px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(135deg, #3aa4f4 0%, #2f79df 58%, #2d64cb 100%);
  box-shadow: 0 14px 30px rgba(11,27,58,0.16);
  overflow: hidden;
}

.cart-v2-title-banner::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width: 42px;
  height: 42px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: #123e7e;
}

.cart-v2-title-banner::before{
  content:"";
  position:absolute;
  inset: 0 auto auto 16px;
  width: 88px;
  height: 88px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16), rgba(255,255,255,0));
}

.cart-v2-title-banner .h1{
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-size: clamp(40px, 4vw, 54px);
  letter-spacing: -0.3px;
}

.cart-v2-content{
  padding-top: 8px;
}

/* Tighten basket header spacing */
body.page.page-bg.basket-v2-page .cart-v2-main{
  padding-top: 6px;
}

body.page.page-bg.basket-v2-page .cart-v2-head{
  padding: 6px 0;
}

body.page.page-bg.basket-v2-page .cart-v2-title-banner{
  padding: 8px 18px;
}

body.page.page-bg.basket-v2-page .cart-v2-title-banner .h1{
  line-height: 1.04;
}

body.page.page-bg.basket-v2-page .cart-v2-content{
  padding-top: 6px;
}

.cart-v2-mount{
  max-width: 980px;
  margin: 0 auto;
}

.cart-v2-shell{
  display: grid;
  gap: 12px;
}

.cart-v2-items{
  display: grid;
  gap: 10px;
}

.basket-v2-page .cart-v2-item{
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 18px rgba(11,27,58,0.08);
}

.basket-v2-page .cart-v2-item-media{
  min-height: 98px;
  border-radius: 10px;
  border: 1px solid rgba(11,27,58,0.16);
  background: var(--img, linear-gradient(120deg, rgba(54,102,187,0.25), rgba(255,255,255,0.2))) center/cover no-repeat;
}

.basket-v2-page .cart-v2-item-media[data-fit="contain"]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cart-v2-item-body{
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-left: 4px;
}

.cart-v2-item-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.cart-v2-item-title{
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--accent);
  font-size: clamp(16px, 1.5vw, 24px);
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.14;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-v2-item-line-total{
  font-family: var(--font-display);
  color: #0b1b3a;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1;
  white-space: nowrap;
}

.cart-v2-item-price{
  margin: 0;
  color: #1f5fd8;
  font-weight: 900;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1;
}

.cart-v2-item-price span{
  color: #6f83a0;
  font-size: 12px;
  font-weight: 800;
}

.cart-v2-item-meta{
  margin: 0;
  color: #4f6484;
  font-size: 12px;
  font-weight: 800;
}

.cart-v2-item-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.basket-v2-page .cart-v2-stepper{
  gap: 6px;
}

.basket-v2-page .cart-v2-stepper .btn{
  min-width: 34px;
  min-height: 34px;
  padding: 0;
}

.basket-v2-page .cart-v2-stepper .qty-input{
  width: 72px;
  min-height: 34px;
  font-size: 15px;
}

.cart-v2-remove-link{
  border: 0;
  padding: 0;
  background: transparent;
  color: #173d78;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-v2-tools{
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.86);
  overflow: hidden;
}

.cart-v2-tools-toggle{
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid rgba(54,102,187,0.14);
  background: linear-gradient(135deg, rgba(54,102,187,0.08), rgba(54,102,187,0.02));
  color: #173d78;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.cart-v2-tools-panel{
  display: grid;
  gap: 10px;
  padding: 10px;
}

.cart-v2-summary{
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 12px 24px rgba(11,27,58,0.08);
  padding: 12px;
}

.cart-v2-summary-grid{
  display: grid;
  gap: 6px;
}

.cart-v2-summary-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
  color: #1a427e;
}

.cart-v2-summary-row strong{
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
}

.cart-v2-summary-row.is-total{
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(54,102,187,0.18);
}

.cart-v2-summary-row.is-total strong{
  font-size: 24px;
  color: #0b1b3a;
}

.cart-v2-hint{
  min-height: 16px;
}

.cart-v2-checkout-btn{
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, #5ad98f, #34c97b 55%, #20b86d);
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(18,121,74,0.24);
}

.cart-v2-secondary-actions{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cart-v2-empty{
  display: grid;
  justify-items: center;
  gap: 8px;
}

.cart-v2-empty-icon{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #0d2f5f;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-v2-empty-icon svg{
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-v2-empty-link{
  color: var(--accent);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-v2-empty-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.cart-v2-empty-recs{
  margin-top: 8px;
  width: 100%;
}

.cart-v2-empty-recs-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cart-v2-rec-card{
  border-radius: 10px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.95);
  overflow: hidden;
}

.cart-v2-rec-media{
  display: block;
  aspect-ratio: 1 / 1;
  background: #e6ebf5;
}

.cart-v2-rec-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-v2-rec-body{
  padding: 8px;
  display: grid;
  gap: 4px;
}

.cart-v2-rec-title{
  font-size: 14px;
  color: #12386f;
  font-weight: 900;
  text-decoration: none;
  line-height: 1.25;
}

.cart-v2-rec-meta{
  margin: 0;
  color: #4f6484;
  font-size: 12px;
  font-weight: 800;
}

.checkout-v2-content{
  padding-top: 8px;
}

.checkout-v2-mount{
  max-width: 980px;
  margin: 0 auto;
}

.checkout-v2-cancel-card{
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 14px 26px rgba(11,27,58,0.08);
}

body.checkout-v2-page #successCard{
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 14px 26px rgba(11,27,58,0.09);
  padding: 14px;
}

body.checkout-v2-page #successCard .card{
  border-radius: 12px;
}

@media (max-width: 980px){
  .cart-v2-title-banner{
    max-width: none;
  }

  .cart-v2-empty-recs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px){
  .cart-v2-main,
  .checkout-v2-main{
    padding-top: 4px;
  }

  .cart-v2-title-banner{
    padding: 12px 14px;
  }

  .cart-v2-title-banner .h1{
    font-size: 42px;
  }

  body.page.page-bg.basket-v2-page .cart-v2-main{
    padding-top: 2px;
  }

  body.page.page-bg.basket-v2-page .cart-v2-head{
    padding: 4px 0;
  }

  body.page.page-bg.basket-v2-page .cart-v2-title-banner{
    padding: 8px 12px;
  }

  body.page.page-bg.basket-v2-page .cart-v2-title-banner .h1{
    font-size: 40px;
    line-height: 1;
  }

  body.page.page-bg.basket-v2-page .cart-v2-content{
    padding-top: 4px;
  }

  .basket-v2-page .cart-v2-item{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cart-v2-item-body{
    padding-left: 0;
  }

  .basket-v2-page .cart-v2-item-media{
    min-height: 160px;
  }

  .cart-v2-item-title{
    font-size: 18px;
  }

  .cart-v2-item-line-total{
    font-size: 20px;
  }

  .cart-v2-item-price{
    font-size: 18px;
  }

  .cart-v2-item-controls{
    gap: 8px;
  }

  .cart-v2-checkout-btn{
    font-size: 17px;
  }
}

/* Winners teaser */
.winner-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.winner-tile{ padding: 14px; border-radius: var(--radius-lg); border:1px solid var(--border); background: rgba(255,255,255,0.72); box-shadow: 0 10px 24px rgba(11,27,58,0.06); transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.winner-top{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom: 10px; }
.winner-date{ font-size: 12px; font-weight: 900; color: var(--muted); }
.winner-title{ margin: 0 0 10px; font-family: var(--font-display); font-weight: 900; letter-spacing:-0.2px; }
.winner-meta{ display:grid; gap: 6px; color: var(--muted); font-weight: 800; font-size: 13px; }
.winner-meta code{ font-weight: 900; }
.winner-social-tile{
  border-color: rgba(228,64,95,0.28);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(228,64,95,0.14), rgba(255,255,255,0)),
    radial-gradient(120% 120% at 0% 100%, rgba(54,102,187,0.12), rgba(255,255,255,0)),
    rgba(255,255,255,0.78);
}
.winner-social-link{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(255,255,255,0.82);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}
.winner-social-link:hover{ background: rgba(255,255,255,0.96); }
.winner-social-link svg{
  width: 14px;
  height: 14px;
  color: #e4405f;
}
.winner-social-list{ margin-top: 2px; }
.winner-social-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}
.winner-social-item strong{ color: var(--accent-2); }
@media (max-width: 900px){ .winner-grid{ grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------
   Homepage refresh (live draws, how it works, winners, legal)
------------------------------------------------------------------- */

.section-live{
  position:relative;
  overflow:hidden;
  padding: 64px 0 72px;
}

.home-main{
  position: relative;
}

.home-main .section{
  position: relative;
}

.home-main .section + .section::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(54,102,187,0), var(--home-band-divider), rgba(54,102,187,0));
  pointer-events: none;
}

.home-main .section-live{
  background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.16) 100%);
}

.home-main .section-skill-promo{
  background: linear-gradient(180deg, var(--home-band-live) 0%, var(--home-band-skill) 100%);
}

.home-main .section-winners{
  background: linear-gradient(180deg, var(--home-band-skill) 0%, var(--home-band-winners) 100%);
}

.home-main .section-how{
  background: linear-gradient(180deg, var(--home-band-winners) 0%, var(--home-band-how) 100%);
}

@media (max-width: 900px){
  .home-main .section-live{
    background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.14) 100%);
  }
  .home-main .section-skill-promo{
    background: linear-gradient(180deg, rgba(54,102,187,0.05) 0%, rgba(54,102,187,0.04) 100%);
  }
  .home-main .section-winners{
    background: linear-gradient(180deg, rgba(22,58,122,0.045) 0%, rgba(22,58,122,0.03) 100%);
  }
  .home-main .section-how{
    background: linear-gradient(180deg, rgba(54,102,187,0.03) 0%, rgba(54,102,187,0.02) 100%);
  }
}

.live-head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 18px;
  flex-wrap:wrap;
}

.live-pills{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.live-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  min-width: 260px;
}

.live-stat{
  padding: 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(54,102,187,0.10), rgba(255,255,255,0.86));
  border: 1px solid rgba(54,102,187,0.20);
  box-shadow: var(--shadow-soft);
}

.live-stat-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
  color: var(--muted);
}

.live-stat-value{
  display:block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.3px;
}

.live-stat-bar{
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  background: rgba(11,27,58,0.10);
  overflow:hidden;
}
.live-stat-bar span{
  display:block;
  height:100%;
  width: calc(var(--stat-pct, 0) * 1%);
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: transform 720ms var(--ease-out);
}
.live-stat.is-animated .live-stat-bar span{
  transform: scaleX(1);
}

.live-stat-note{
  display:block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.live-tape{
  position:relative;
  z-index:1;
  overflow:hidden;
  margin: 18px 0 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.68);
}

.live-tape-track{
  display:flex;
  gap: 32px;
  min-width: max-content;
  padding: 10px 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  animation: tape 22s linear infinite;
}

@keyframes tape{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.live-grid-shell{
  position:relative;
  z-index:1;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(54,102,187,0.18);
  box-shadow: 0 18px 40px rgba(11,27,58,0.10);
}

.live-grid{ padding: 8px 0 0; }

.section-live .draw-card{
  background: linear-gradient(160deg, rgba(255,255,255,0.90), rgba(54,102,187,0.08));
  border: 1px solid rgba(54,102,187,0.15);
  box-shadow: 0 18px 38px rgba(11,27,58,0.12);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}

.section-live .draw-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(11,27,58,0.14);
}

.section-live .draw-strip{ font-size: 18px; }
.section-live .draw-sub{ color: var(--text); opacity: 0.9; }

.live-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 16px;
}

@media (max-width: 900px){
  .live-head{ flex-direction:column; }
  .live-stats{ grid-template-columns: 1fr; width:100%; }
}


.section-winners{ position:relative; }

.winners-top{
  display:flex;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.winners-cta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.winners-shell{
  position:relative;
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(900px 380px at 20% 40%, rgba(54,102,187,0.18), rgba(255,255,255,0)),
    rgba(255,255,255,0.82);
  border: 1px solid rgba(54,102,187,0.18);
  box-shadow: 0 18px 40px rgba(11,27,58,0.12);
  overflow:hidden;
}

.winner-feed{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.winner-feed .winner-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.winner-feed .winner-tile{
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(54,102,187,0.08));
  border: 1px solid rgba(54,102,187,0.20);
  box-shadow: 0 16px 38px rgba(11,27,58,0.10);
}

.winner-feed .winner-tile:hover{ transform: translateY(-3px); }

.skeleton-card{
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}

.skeleton-line{
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(11,27,58,0.08), rgba(11,27,58,0.16), rgba(11,27,58,0.08));
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  margin-top: 10px;
}

.skeleton-line.short{ width: 40%; }
.skeleton-line:first-child{ margin-top: 0; }

@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.section-legal{ position:relative; }

.legal-shell{
  position:relative;
  padding: 20px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(54,102,187,0.18);
  box-shadow: 0 20px 44px rgba(11,27,58,0.12);
  overflow:hidden;
}

.legal-shell::before{
  content:"";
  position:absolute;
  inset:-10% -16%;
  background:
    radial-gradient(540px 300px at 15% 10%, rgba(54,102,187,0.16), rgba(255,255,255,0)),
    radial-gradient(520px 320px at 90% 90%, rgba(22,58,122,0.12), rgba(255,255,255,0));
  filter: blur(6px);
  opacity: 0.7;
  pointer-events:none;
}

.legal-head{
  position:relative;
  z-index:1;
  max-width: 780px;
}

.legal-pills{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.legal-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}

.legal-card{
  position:relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(54,102,187,0.08));
  border: 1px solid rgba(54,102,187,0.18);
  min-height: 170px;
}

.legal-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 18px;
}

@media (max-width: 1100px){
  .legal-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px){
  .winners-top{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 620px){
  .legal-grid{ grid-template-columns: 1fr; }
  .live-tape-track{ animation-duration: 18s; }
}

/* Footer (new structure) */
.footer{
  padding: 56px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(160deg, #1a3b7c 0%, #2f66c4 48%, #143061 100%);
  color: #eef3fb;
}
.footer-inner{
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.footer-brand{ display:flex; gap: 14px; align-items:flex-start; }
.footer-brand strong{
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.3px;
  color: #ffffff;
}
.footer-logo{ width: 40px; height: 40px; }
.footer .fineprint{
  color: #d7e1f0;
  font-weight: 600;
  line-height: 1.7;
}
.footer-links{
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}
.footer-head{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #ffffff;
}
.footer-links a{
  display:block;
  padding: 4px 0;
  color: #d7e1f0;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease, text-decoration-color 0.2s ease;
}
.footer-links a:hover{
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.6);
}
.footer-links a:focus-visible{
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 2px;
  border-radius: 4px;
}
.footer-bottom{
  margin-top: 32px;
  padding-top: 18px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: #cbd7ea;
  font-weight: 600;
  font-size: 12px;
}
.footer-bottom .fineprint{ color: #cbd7ea; }
@media (max-width: 1100px){
  .footer-inner{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-links{ grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .footer{ padding: 44px 0 28px; }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: 1fr; gap: 18px; }
  .footer-bottom{ flex-direction: column; align-items:flex-start; }
}

/* ----------------------------
   Ticket lists + long-form docs
----------------------------- */

.ticket-list{
  list-style:none;
  padding:0;
  margin:0;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.62);
  overflow:hidden;
}

.ticket-item{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 900;
}

.ticket-item:last-child{ border-bottom: 0; }
.ticket-code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.doc{
  padding: 18px;
}

.doc h2, .doc h3{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing:-0.2px;
  margin: 18px 0 10px;
}

.doc p{ color: var(--muted); font-weight: 750; line-height: 1.8; margin: 10px 0; }
.doc ul{ margin: 10px 0 10px 18px; color: var(--muted); font-weight: 800; line-height:1.75; }
.doc li{ margin: 6px 0; }

.legal-reader-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 16px;
  align-items:start;
}
.legal-reader-progress{
  grid-column: 1 / -1;
  position: sticky;
  top: 66px;
  z-index: 12;
  height: 4px;
  border-radius: 999px;
  background: rgba(54,102,187,0.16);
  overflow: hidden;
}
.legal-reader-progress span{
  display:block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 140ms linear;
}
.legal-reader-toc{
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 106px);
  overflow: auto;
  padding: 12px;
}
.legal-reader-toc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.legal-reader-toc .kicker{ margin: 0; font-size: 10px; }
.legal-reader-toggle{ display:none; }
.legal-reader-links{
  display:grid;
  gap: 6px;
  min-height: 0;
}
.legal-reader-link{
  display:block;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(11,27,58,0.09);
  background: rgba(255,255,255,0.72);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.legal-reader-link:hover{
  border-color: rgba(54,102,187,0.34);
  color: var(--accent-2);
}
.legal-reader-link[data-active="true"]{
  border-color: rgba(54,102,187,0.42);
  background: rgba(54,102,187,0.12);
  color: var(--accent-2);
}
.doc-legal{
  grid-column: 1;
  grid-row: 2;
  padding: clamp(20px, 2.5vw, 30px);
}
.doc-legal h2,
.doc-legal h3{
  scroll-margin-top: 110px;
}
.doc-legal h2{ margin-top: 24px; }
.doc-legal h2:first-of-type{ margin-top: 0; }
.doc-legal p,
.doc-legal li{
  font-size: 16px;
  line-height: 1.9;
}
.doc-legal ul,
.doc-legal ol{
  margin: 12px 0 14px 22px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.85;
}

/* Terms page spacing tune */
body.page.page-bg.terms-page .page-hero{
  padding: 22px 0 4px;
}

body.page.page-bg.terms-page .section[aria-label="Terms content"]{
  padding-top: 10px;
}

body.page.page-bg.terms-page .legal-reader-layout{
  gap: 12px;
}

@media (max-width: 980px){
  .legal-reader-layout{ grid-template-columns: 1fr; }
  .legal-reader-progress{ top: 62px; }
  .legal-reader-toc{
    grid-column: 1;
    grid-row: auto;
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    z-index: 11;
  }
  .doc-legal{
    grid-row: auto;
  }
  .legal-reader-toggle{ display:inline-flex; }
  .legal-reader-links{ display: none; }
  .legal-reader-toc[data-open="true"] .legal-reader-links{
    display:grid;
    max-height: min(56vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }

  body.page.page-bg.terms-page .page-hero{
    padding: 16px 0 2px;
  }

  body.page.page-bg.terms-page .section[aria-label="Terms content"]{
    padding-top: 8px;
  }
}

.actions-row{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }

/* ----------------------------
   Auth pages
----------------------------- */

.auth-hero{ padding: clamp(50px, 7vw, 90px) 0; }
.auth-grid{
  display:grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 22px;
  align-items:center;
}
.auth-copy{ max-width: 560px; }
.auth-benefits{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

.auth-card{
  position:relative;
  overflow:hidden;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(54,102,187,0.10));
  box-shadow: var(--shadow);
}
.auth-card::before{
  content:"";
  position:absolute;
  inset:-50% -30%;
  background: radial-gradient(circle at 30% 20%, rgba(54,102,187,0.18), rgba(255,255,255,0));
  opacity: 0.7;
  pointer-events:none;
}
.auth-card > *{ position:relative; z-index:1; }
.auth-card-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 12px;
}
.auth-logo{ width: 42px; height: 42px; }
.auth-form{ display:grid; gap: 12px; }
.auth-password-row{
  position: relative;
  display: flex;
  align-items: center;
}
.auth-toggle-pass{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
  min-width: 62px;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 10px;
}
.auth-toggle-pass:hover,
.auth-toggle-pass:active,
.auth-toggle-pass:focus-visible{
  transform: translateY(-50%);
}
.auth-password-row .input{
  padding-right: 84px;
}
.auth-step-indicator{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.reg-step{ display:grid; gap: 12px; }
.reg-step[hidden]{ display:none !important; }
.auth-step-actions{
  display:flex;
  gap: 10px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.auth-code-verify{
  display:grid;
  gap: 10px;
  margin-top: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.74);
}
.auth-code-input{
  text-align: center;
  letter-spacing: 0.25em;
  font-weight: 900;
  font-size: 18px;
}
.auth-input-hint{
  margin: 6px 0 0;
  min-height: 16px;
}
.auth-input-hint[data-state="warn"]{
  color: #8b5a00;
}
.auth-input-hint[data-state="error"]{
  color: #8a1b1b;
}
.auth-verify-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.auth-flow-state{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
}
.auth-flow-state .pill{
  opacity: 0.65;
}
.auth-flow-state .pill.is-done{
  opacity: 1;
  border-color: rgba(54,102,187,0.32);
  background: rgba(54,102,187,0.12);
  color: var(--accent-2);
}
.auth-mobile-explain{
  display:none;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.76);
}
.auth-mobile-explain summary{
  cursor: pointer;
  font-weight: 900;
  color: var(--accent-2);
}
.auth-mobile-explain p{
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}
.auth-footer{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.auth-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  color: var(--muted);
}
.auth-links{
  display:flex;
  justify-content:flex-end;
}
.auth-forgot-btn{
  font-size: 13px;
  font-weight: 900;
  border-color: rgba(54,102,187,0.28);
  background: rgba(54,102,187,0.12);
  color: var(--accent-2);
}
.text-link{
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-2);
}
.text-link:hover{ color: var(--accent); }

.auth-list{
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.7;
}
.auth-list li{ margin: 6px 0; }
.auth-note{
  margin-top: 12px;
  color: var(--muted);
  font-weight: 800;
}

.auth-showcase{
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.84);
  box-shadow: var(--shadow-soft);
  display:grid;
  gap: 12px;
}
.auth-showcase-media{
  height: 180px;
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(54,102,187,0.22), rgba(255,255,255,0)),
    url("../assets/hero-1.jpg") center/cover no-repeat;
}
.auth-showcase-body{ display:grid; gap: 8px; }
.auth-showcase-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.auth-stat{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-weight: 900;
}
.auth-stat span{
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 900px){
  .auth-grid{ grid-template-columns: 1fr; }
  .login-page .field-label{
    font-size: 13px;
    letter-spacing: 0.07em;
  }
  .login-page .input{
    min-height: 50px;
    font-size: 16px;
    padding: 14px 12px;
  }
  .login-page .auth-password-row .input{
    padding-right: 92px;
  }
  .login-page .auth-links{
    justify-content: flex-start;
  }
  .login-page #msg{
    font-size: 14px;
    font-weight: 800;
  }
  .auth-showcase-stats{ grid-template-columns: 1fr; }
  .register-page .auth-copy{ order: 1; }
  .register-page .auth-card{ order: 2; }
  .register-page .auth-copy .sub{ margin-bottom: 10px; }
  .register-page .auth-showcase{ display:none; }
  .register-page .auth-mobile-explain{ display:block; }
  .register-page .auth-list{ margin-top: 8px; }
}

/* ----------------------------
   My Account
----------------------------- */

.tickets-hero{ padding: clamp(50px, 7vw, 90px) 0 24px; }
.tickets-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items:stretch;
}
.tickets-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
.tickets-hero-cta{
  margin-top: 18px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
}
.tickets-hero-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.tickets-hero-panel{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(150deg, rgba(54,102,187,0.18), rgba(255,255,255,0.90));
  box-shadow: var(--shadow);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.tickets-panel-user{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: 800;
  color: var(--muted);
}
.tickets-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.tickets-panel-stats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.tickets-stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight: 900;
}
.tickets-stat span{ color: var(--muted); font-size: 12px; text-transform:uppercase; letter-spacing:0.08em; }
.tickets-panel-note{
  margin-top: 14px;
  color: var(--muted);
  font-weight: 800;
}

.account-layout{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  align-items:start;
}
.account-left{
  display:grid;
  gap: 14px;
}
.account-right{
  display:grid;
  gap: 14px;
}
.account-quick{
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft);
}
.account-quick-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}
.account-quick-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
  .account-signin{
    border: 1px solid rgba(54,102,187,0.18);
    background: rgba(255,255,255,0.86);
    box-shadow: var(--shadow-soft);
  }
  .account-overview{
    display: grid;
    gap: 12px;
    border: 1px solid rgba(54,102,187,0.2);
    background: rgba(255,255,255,0.9);
    box-shadow: var(--shadow-soft);
  }
  .account-level{
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(54,102,187,0.18);
    background: rgba(255,255,255,0.72);
  }
  .account-level-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
  }
  .account-level-week{
    font-size: 12px;
    color: var(--muted);
  }
  .account-meta-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
  }
  .account-meta-grid strong{
    display: block;
    font-size: 14px;
    color: var(--text);
    font-weight: 900;
    word-break: break-word;
  }
  .account-meta-grid .is-wide{
    grid-column: 1 / -1;
  }
  .account-note{
    margin: 0;
    font-size: 12px;
    color: var(--muted);
  }
  .account-recent{
    display:grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(54,102,187,0.16);
    background: rgba(54,102,187,0.06);
  }
  .account-recent-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
  }
  .account-recent-list{
    display:grid;
    gap: 8px;
  }
  .account-recent-item{
    display:grid;
    gap: 3px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(54,102,187,0.16);
    background: rgba(255,255,255,0.9);
  }
  .account-recent-item strong{
    color: var(--accent-2);
    font-size: 13px;
  }
  .account-recent-item span{
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }
  .tickets-shell-head{
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(54,102,187,0.16);
    background: rgba(255,255,255,0.84);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap: 12px;
  flex-wrap:wrap;
}
.tickets-filters{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.tickets-results{ display:grid; gap: 12px; }
#results{ scroll-margin-top: 96px; }
#accountOverview{ scroll-margin-top: 96px; }
.tickets-results.is-focus-target{
  animation: ticketPulse 1100ms var(--ease-out);
}
@keyframes ticketPulse{
  0%{ box-shadow: 0 0 0 rgba(54,102,187,0); }
  35%{ box-shadow: 0 0 0 6px rgba(54,102,187,0.18); }
  100%{ box-shadow: 0 0 0 rgba(54,102,187,0); }
}

.ticket-draw{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.ticket-draw summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.ticket-draw summary::-webkit-details-marker{ display:none; }
.ticket-draw-summary{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.ticket-draw-meta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.ticket-draw-body{
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
}
.ticket-draw-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.ticket-draw-count{
  font-weight: 900;
  color: var(--accent-2);
}
.ticket-numbers{
  margin-top: 12px;
}
.ticket-numbers-head{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-weight: 900;
}
.ticket-number-grid{
  margin-top: 10px;
  display:grid;
  gap: 10px;
}
.ticket-number{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  flex-wrap:wrap;
}
.ticket-number-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 900;
}
.ticket-number-meta{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.ticket-number-prize{
  font-weight: 900;
  color: var(--accent-2);
}
.ticket-ref{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
  font-weight: 800;
}
.ticket-ref code{
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(11,27,58,0.08);
}

.ticket-group{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 14px 30px rgba(11,27,58,0.08);
  padding: 14px;
}
.ticket-group-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.ticket-group-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.ticket-list-modern{ margin-top: 10px; }
.ticket-list-modern{ display:grid; gap: 10px; }
.ticket-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
}
.ticket-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 900;
}
.ticket-meta{ display:flex; gap: 12px; flex-wrap:wrap; color: var(--muted); font-weight: 800; font-size: 12px; }

.ticket-card{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.ticket-card-media{
  position:relative;
  min-height: 220px;
  border-radius: 18px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.50), rgba(11,27,58,0.10)),
    var(--img, url("../assets/hero-1.jpg")) center/cover no-repeat;
}
.ticket-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(400px 220px at 20% 20%, rgba(54,102,187,0.25), rgba(11,27,58,0) 60%);
  opacity: 0.85;
  z-index:0;
  pointer-events:none;
}
.ticket-card-badges{
  position:absolute;
  left: 12px;
  bottom: 12px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  z-index:1;
}
.ticket-card-body{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.ticket-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap:wrap;
}
.ticket-card-sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.ticket-card-meta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.ticket-ref{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(54,102,187,0.24);
  background: rgba(54,102,187,0.08);
  font-weight: 800;
}
.ticket-ref-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticket-ref code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 900;
  color: var(--accent-2);
  font-size: 12px;
  word-break: break-all;
}
.ticket-ref-btn{ margin-left:auto; }

.ticket-numbers{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
}
.ticket-numbers-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  font-weight: 900;
}
.ticket-numbers-count{
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ticket-number-grid{
  list-style:none;
  margin: 10px 0 0;
  padding: 0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.ticket-number{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.14);
  background: rgba(255,255,255,0.82);
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-weight: 900;
}
.ticket-number-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  word-break: break-all;
}
.ticket-number-meta{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.ticket-empty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(54,102,187,0.25);
  background: rgba(255,255,255,0.70);
}

.lookup-card{
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  box-shadow: var(--shadow-soft);
}
.lookup-head{ max-width: 640px; }
.lookup-row{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:end;
}

@media (max-width: 980px){
  .tickets-hero-grid{ grid-template-columns: 1fr; }
  .tickets-panel-stats{ grid-template-columns: 1fr; }
  .account-layout{ grid-template-columns: 1fr; }
  .ticket-card{ grid-template-columns: 1fr; }
  .ticket-card-media{ min-height: 200px; }
}

@media (max-width: 720px){
  .ticket-row{ flex-direction:column; align-items:flex-start; }
  .lookup-row{ grid-template-columns: 1fr; }
  .ticket-empty{ flex-direction:column; align-items:flex-start; }
  .ticket-ref-btn{ width: 100%; }
  .ticket-number-grid{ grid-template-columns: 1fr; }
  .account-quick-grid{ grid-template-columns: 1fr; }
  .tickets-filters .tab-btn{ flex: 1 1 140px; text-align:center; }
  .ticket-draw summary{ flex-direction:column; align-items:flex-start; }
}

/* ----------------------------
   Account v2
----------------------------- */
.account-v2-main{
  padding: clamp(26px, 4vw, 44px) 0 28px;
}
.account-v2-hero{
  display:grid;
  gap: 12px;
  margin-bottom: 14px;
}
.account-v2-hero .h1{
  margin: 0;
}
.account-v2-status{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.24);
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(224,236,255,0.72));
}
.account-v2-status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.30);
  background: rgba(54,102,187,0.12);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-v2-status-chip.is-live{
  border-color: rgba(31,107,79,0.36);
  background: rgba(31,107,79,0.12);
  color: #1f6b4f;
}
.account-v2-status-chip.is-warning{
  border-color: rgba(171,118,0,0.36);
  background: rgba(171,118,0,0.12);
  color: #8a6000;
}
.account-v2-status-text{
  flex: 1 1 280px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.account-v2-shell{
  display:grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.account-v2-rail{
  position: sticky;
  top: 108px;
  display:grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.84);
  box-shadow: var(--shadow-soft);
}
.account-v2-row{
  display:grid;
  grid-template-columns: 34px 1fr auto;
  align-items:center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.14);
  background: rgba(255,255,255,0.74);
  font-weight: 900;
  color: var(--accent-2);
  transition: transform 170ms var(--ease-out), border-color 170ms var(--ease-out), background 170ms var(--ease-out);
}
.account-v2-row:hover{
  transform: translateY(-1px);
  border-color: rgba(54,102,187,0.28);
  background: rgba(255,255,255,0.94);
}
.account-v2-row:focus-visible{
  outline: 2px solid rgba(54,102,187,0.40);
  outline-offset: 2px;
}
.account-v2-row-btn{
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 900;
  color: var(--accent-2);
  line-height: 1;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.account-v2-row.is-active{
  border-color: rgba(54,102,187,0.40);
  background: linear-gradient(145deg, rgba(54,102,187,0.18), rgba(255,255,255,0.95));
}
.account-v2-row-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.28);
  background: rgba(255,255,255,0.82);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: #2a66d4;
}
.account-v2-row-icon svg{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-v2-row-chevron{
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.account-v2-content{
  display:grid;
  gap: 12px;
}
.account-v2-card{
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow-soft);
}
.account-v2-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.account-v2-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.account-v2-kpi{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.76);
  display:grid;
  gap: 3px;
}
.account-v2-kpi strong{
  font-size: 21px;
  line-height: 1;
  color: var(--text);
}
.account-v2-kpi span{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.account-v2-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.account-v2-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.account-v2-split{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
}

@media (max-width: 1100px){
  .account-v2-shell{
    grid-template-columns: 1fr;
  }
  .account-v2-rail{
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px){
  .account-v2-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-v2-grid-2,
  .account-v2-grid-3,
  .account-v2-split{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .account-v2-main{
    padding-top: 18px;
  }
  .account-v2-status{
    padding: 10px 12px;
  }
  .account-v2-row{
    min-height: 50px;
    padding: 9px 10px;
  }
}

/* ----------------------------
   Winners page
----------------------------- */

.winners-hero{ padding: clamp(50px, 7vw, 90px) 0 22px; }
.winners-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items:center;
}
.winners-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }

.winners-hero-media{
  position:relative;
  min-height: 320px;
}
.winners-hero-card{
  position:relative;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow);
  z-index:1;
}
.winners-hero-card-top{ display:flex; gap:8px; flex-wrap:wrap; }
.winners-hero-card-media{
  margin: 12px 0;
  height: 180px;
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(54,102,187,0.22), rgba(255,255,255,0)),
    url("../assets/hero-3.jpg") center/cover no-repeat;
}
.winners-hero-card-body{ padding: 6px 4px; }

.winners-orb{
  position:absolute;
  border-radius: 999px;
  filter: blur(6px);
  opacity: 0.6;
  animation: float 16s var(--ease-out) infinite;
}
.winners-orb-1{
  width: 220px; height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(54,102,187,0.30), rgba(255,255,255,0));
  top: -40px; right: -20px;
}
.winners-orb-2{
  width: 280px; height:280px;
  background: radial-gradient(circle at 30% 30%, rgba(22,58,122,0.22), rgba(255,255,255,0));
  bottom: -80px; left: -40px;
  animation-duration: 20s;
}

.winners-toolbar{
  margin-top: 22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 16px;
  flex-wrap:wrap;
}
.winners-search{
  display:flex;
  gap: 10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.winners-section{ padding-top: 20px; }
.winners-social{
  padding-top: 0;
  padding-bottom: 0;
}

.ig-giveaway-card{
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.2);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(243,99,142,0.12), rgba(255,255,255,0)),
    radial-gradient(120% 120% at 0% 100%, rgba(72,96,226,0.12), rgba(255,255,255,0)),
    rgba(255,255,255,0.88);
  box-shadow: var(--shadow);
}
.ig-giveaway-head{
  display:flex;
  gap: 12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.ig-giveaway-label{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.82);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ig-giveaway-label svg{
  width: 16px;
  height: 16px;
  color: #e4405f;
}
.ig-giveaway-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: 0.9fr 1.1fr;
}
.ig-giveaway-media{
  display:flex;
  flex-direction:column;
}
.ig-giveaway-photo-wrap{
  display:block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(54,102,187,0.25);
  background: linear-gradient(120deg, rgba(54,102,187,0.2), rgba(255,255,255,0.45));
  box-shadow: 0 12px 26px rgba(7, 18, 39, 0.16);
}
.ig-giveaway-photo{
  display: block;
  width: 100%;
  min-height: clamp(220px, 40vw, 300px);
  max-height: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  transition: transform 240ms var(--ease-out);
}
.ig-giveaway-photo-wrap:hover .ig-giveaway-photo{
  transform: scale(1.02);
}
.ig-giveaway-body{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.ig-giveaway-list{
  display:grid;
  gap: 10px;
}
.ig-giveaway-item{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.8);
}
.ig-giveaway-handle{
  font-weight: 900;
  color: var(--accent-2);
}
.ig-giveaway-prize{
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.winner-spotlight{
  margin-bottom: 18px;
}
.winner-spotlight-card{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 240ms var(--ease-out);
}
.winner-spotlight-media{
  border-radius: 18px;
  min-height: 220px;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.55), rgba(11,27,58,0.05)),
    var(--img, linear-gradient(120deg, rgba(54,102,187,0.25), rgba(255,255,255,0.2)));
  background-size: cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight: 900;
  font-size: 34px;
}
.winner-initials{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);
}
.winner-spotlight-body{ display:flex; flex-direction:column; gap: 10px; }
.winner-spotlight-top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.winner-name{ font-weight: 900; font-size: 18px; margin: 0; }
.winner-town{ color: var(--muted); font-weight: 800; margin: 0; }
.winner-meta{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  color: var(--muted);
  font-weight: 800;
}
.winner-date{ font-weight: 800; color: var(--muted); font-size: 12px; }
.winner-quote{
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(54,102,187,0.08);
  border: 1px solid rgba(54,102,187,0.18);
  color: var(--accent-2);
  font-weight: 800;
}

.winners-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.winner-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 14px 30px rgba(11,27,58,0.10);
  overflow:hidden;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 240ms var(--ease-out);
}
.winner-card-media{
  min-height: 160px;
  background:
    linear-gradient(140deg, rgba(11,27,58,0.50), rgba(11,27,58,0.05)),
    var(--img, linear-gradient(120deg, rgba(54,102,187,0.25), rgba(255,255,255,0.2)));
  background-size: cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.winner-card-body{ padding: 12px 14px 16px; display:flex; flex-direction:column; gap: 8px; }
.winner-card-top{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }

@media (max-width: 980px){
  .winners-hero-grid{ grid-template-columns: 1fr; }
  .ig-giveaway-grid{ grid-template-columns: 1fr; }
  .winner-spotlight-card{ grid-template-columns: 1fr; }
}

/* Winners page v2 */
.winners-v2-page{
  padding-bottom: 18px;
}

.winners-v2-hero{
  padding: clamp(48px, 7vw, 90px) 0 12px;
}

.winners-v2-hero-shell{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.winners-v2-hero-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.winners-v2-how-panel{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(255,255,255,0.78);
}

.winners-v2-how-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
}

.winners-v2-trust-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.20);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.94), rgba(245,249,255,0.78));
  padding: 18px;
  box-shadow: 0 10px 24px rgba(11,27,58,0.09);
  display: grid;
  gap: 10px;
}

.winners-v2-trust-card .h3{
  margin: 0;
}

.winners-v2-trust-card .sub{
  margin: 0;
}

.winners-v2-trust-points{
  display: grid;
  gap: 8px;
}

.winners-v2-trust-points span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-2);
}

.winners-v2-trust-points span::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1f6b4f;
}

.winners-v2-results{
  padding-top: 10px;
}

.winners-v2-results-shell{
  display: grid;
  gap: 14px;
}

.winners-v2-controls{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.20);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 22px rgba(11,27,58,0.08);
  padding: 14px;
}

.winners-v2-controls-head{
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.winners-v2-controls-head .h2{
  margin: 0;
}

.winners-v2-controls-head .sub{
  margin: 0;
}

.winners-v2-controls-grid{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  align-items: end;
}

.winners-v2-search-field,
.winners-v2-sort-field{
  display: grid;
}

.winners-v2-search-wrap{
  position: relative;
  display: block;
}

.winners-v2-search-wrap svg{
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  stroke: var(--muted);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}

.winners-v2-search-wrap .input{
  padding-left: 40px;
}

.winners-v2-filter-group{
  display: grid;
  gap: 6px;
}

.winners-v2-filter-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.winners-v2-filter-chip{
  border: 1px solid rgba(54,102,187,0.24);
  background: rgba(255,255,255,0.72);
  color: var(--accent-2);
  font-weight: 900;
  font-size: 12px;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  min-height: 38px;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.winners-v2-filter-chip:hover{
  background: rgba(230,239,252,0.85);
}

.winners-v2-filter-chip.is-active{
  border-color: rgba(54,102,187,0.56);
  background: rgba(54,102,187,0.15);
  color: var(--accent-2);
}

.winners-v2-clear-btn{
  align-self: end;
  justify-self: start;
}

.winners-v2-spotlight{
  margin-top: 4px;
  display: grid;
  gap: 12px;
}

.winners-v2-spotlight-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(11,27,58,0.08);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.winners-v2-spotlight-media{
  min-height: 180px;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(11,27,58,0.48), rgba(11,27,58,0.12)),
    var(--img, linear-gradient(140deg, rgba(54,102,187,0.28), rgba(22,58,122,0.38)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
}

.winners-v2-initials{
  width: 84px;
  height: 84px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.40);
}

.winners-v2-spotlight-body{
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.winners-v2-spotlight-body .winners-v2-row:last-child{
  margin-top: auto;
  padding-top: 2px;
}

.winners-v2-spotlight-body .winners-v2-giveaway-list{
  margin-top: 2px;
}

.winners-v2-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.winners-v2-tag{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.30);
  background: rgba(54,102,187,0.10);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 10px;
}

.winners-v2-tag.is-free{
  border-color: rgba(31,107,79,0.30);
  background: rgba(31,107,79,0.10);
  color: #1f6b4f;
}

.winners-v2-tag.is-instagram{
  border-color: rgba(212,61,112,0.34);
  background: rgba(212,61,112,0.10);
  color: #8e2d5a;
}

.winners-v2-tag.is-giveaway{
  border-color: rgba(212,61,112,0.34);
  background: rgba(212,61,112,0.10);
  color: #8e2d5a;
}

.winners-v2-verify{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1f6b4f;
  font-size: 12px;
  font-weight: 900;
}

.winners-v2-verify svg{
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
}

.winners-v2-kicker{
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.winners-v2-kicker svg{
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.winners-v2-spotlight-body .h3{
  margin: 0;
}

.winners-v2-spotlight-draw{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.winners-v2-spotlight-winner{
  margin: 0;
  color: var(--text);
  font-weight: 900;
}

.winners-v2-date{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.winners-v2-list{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.winners-v2-card{
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.20);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 8px 20px rgba(11,27,58,0.07);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.winners-v2-card .h3{
  margin: 0;
}

.winners-v2-card-sub{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.winners-v2-entry-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.winners-v2-entry-item{
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(248,251,255,0.9);
  padding: 10px 12px;
  font-weight: 800;
  color: var(--accent-2);
}

.winners-v2-giveaway-list{
  display: grid;
  gap: 10px;
}

.winners-v2-giveaway-item{
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(248,251,255,0.92);
  padding: 10px 12px;
}

.winners-v2-giveaway-handle{
  font-weight: 900;
  color: var(--accent-2);
  line-height: 1.2;
}

.winners-v2-giveaway-selection{
  margin-top: 2px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.35;
}

.winners-v2-card-actions{
  margin-top: 2px;
}

.winners-v2-empty{
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.20);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 20px rgba(11,27,58,0.07);
  display: grid;
  gap: 10px;
}

.winners-v2-empty .h3{
  margin: 0;
}

.winners-v2-empty .sub{
  margin: 0;
}

.winners-v2-transparency{
  padding-top: 18px;
}

.winners-v2-transparency-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.20);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 24px rgba(11,27,58,0.08);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.winners-v2-transparency-card .h2{
  margin: 0;
}

.winners-v2-transparency-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.winners-v2-transparency-list li{
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.winners-v2-transparency-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #1f6b4f;
}

.winners-v2-transparency-actions{
  margin-top: 4px;
}

.winners-v2-filter-chip:focus-visible,
.winners-v2-controls .input:focus-visible,
.winners-v2-controls .btn:focus-visible,
.winners-v2-card .btn:focus-visible,
.winners-v2-spotlight-card .btn:focus-visible{
  outline: 3px solid rgba(54,102,187,0.35);
  outline-offset: 2px;
}

@media (min-width: 768px){
  .winners-v2-controls-grid{
    grid-template-columns: 1fr 1fr;
  }
  .winners-v2-search-field{
    grid-column: 1 / -1;
  }
  .winners-v2-clear-btn{
    justify-self: end;
  }
  .winners-v2-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px){
  .winners-v2-hero-shell{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
  .winners-v2-controls{
    position: sticky;
    top: 108px;
    z-index: 10;
  }
  .winners-v2-controls-grid{
    grid-template-columns: 1.6fr 1.2fr 0.8fr auto;
  }
  .winners-v2-search-field{
    grid-column: auto;
  }
  .winners-v2-spotlight-card{
    grid-template-columns: 0.92fr 1.08fr;
    min-height: 336px;
  }
  .winners-v2-spotlight-body .winners-v2-giveaway-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .winners-v2-spotlight-body .winners-v2-giveaway-list > :only-child{
    grid-column: 1 / -1;
  }
  .winners-v2-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .winners-v2-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .winners-v2-hero-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .winners-v2-hero-actions .btn{
    width: 100%;
  }
  .winners-v2-how-panel{
    padding: 12px;
  }
  .winners-v2-spotlight-body{
    padding: 14px;
  }
  .winners-v2-card{
    padding: 12px;
  }
}

/* ----------------------------
   About page
----------------------------- */

.about-hero{ padding: clamp(50px, 7vw, 90px) 0 24px; }
.about-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items:center;
}
.about-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
.about-hero-pills{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

.about-hero-media{ position:relative; min-height: 320px; }
.about-hero-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.about-hero-card-media{
  height: 200px;
  background:
    linear-gradient(120deg, rgba(54,102,187,0.22), rgba(255,255,255,0)),
    url("../assets/family.jpg") center/cover no-repeat;
}
.about-hero-card-body{ padding: 14px; }

.about-orb{
  position:absolute;
  border-radius: 999px;
  filter: blur(6px);
  opacity: 0.55;
  animation: float 18s var(--ease-out) infinite;
}
.about-orb-1{
  width: 220px; height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(54,102,187,0.28), rgba(255,255,255,0));
  top: -40px; right: -30px;
}
.about-orb-2{
  width: 280px; height:280px;
  background: radial-gradient(circle at 30% 30%, rgba(22,58,122,0.22), rgba(255,255,255,0));
  bottom: -90px; left: -40px;
  animation-duration: 22s;
}

.about-stats{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.about-stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight: 800;
}
.about-stat span{ color: var(--muted); font-size: 12px; text-transform:uppercase; letter-spacing:0.08em; }

.about-story-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
.about-story-card{
  position:relative;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(246,247,244,0.88));
  box-shadow: 0 18px 40px rgba(11,27,58,0.10);
  overflow:hidden;
  transition: box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.about-story-card > *{
  position:relative;
  z-index:1;
}
.about-story-card::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height: 200px;
  background: radial-gradient(220px 140px at 30% 30%, rgba(54,102,187,0.18), rgba(255,255,255,0));
  opacity:0.7;
  pointer-events:none;
}
.about-story-card:hover{
  border-color: rgba(54,102,187,0.28);
  box-shadow: 0 22px 46px rgba(11,27,58,0.12);
}
.about-story-body{
  position:relative;
  z-index:1;
  display:grid;
  gap: 12px;
}
.about-gallery{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.about-gallery-item{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(54,102,187,0.18);
  box-shadow: var(--shadow-soft);
  background: #f2f4f8;
  display: flex;
  flex-direction: column;
}
.about-gallery-item picture{
  display:block;
}
.about-gallery-item img{
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: 50% 20%;
  background: #f2f4f8;
}
.about-gallery-item figcaption{
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(255,255,255,0.9);
  border-top: 1px solid rgba(11,27,58,0.08);
}

.about-values-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.about-card{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.80);
  box-shadow: 0 14px 30px rgba(11,27,58,0.08);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 240ms var(--ease-out);
}
.about-card p{ margin: 8px 0 0; color: var(--muted); font-weight: 800; line-height: 1.6; }

.team-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.team-card{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.80);
  box-shadow: 0 14px 30px rgba(11,27,58,0.08);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 240ms var(--ease-out);
}
.team-avatar{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.about-cta{
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.80);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.impact-hero{ max-width: 760px; }
.impact-journey{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
  align-items:start;
}
.impact-visual{
  position: sticky;
  top: 110px;
  perspective: 1200px;
  transform-style: preserve-3d;
  transform: rotateX(var(--ix, 0deg)) rotateY(var(--iy, 0deg));
}
.impact-visual-shell{
  position:relative;
  border-radius: calc(var(--radius-lg) + 4px);
  border: 1px solid rgba(54,102,187,0.24);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 20px 50px rgba(11,27,58,0.14);
  overflow:hidden;
}
.impact-visual-image{
  height: 420px;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.45), rgba(11,27,58,0.08)),
    var(--img, url("../assets/hero-1.jpg")) center/cover no-repeat;
  transform: translateZ(40px);
}
.impact-visual-overlay{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
}
.impact-visual-stat{
  font-weight: 900;
  color: var(--accent-2);
}
.impact-orb{
  position:absolute;
  border-radius: 999px;
  filter: blur(6px);
  opacity: 0.55;
  animation: float 14s var(--ease-out) infinite;
}
.impact-orb-1{
  width: 180px; height:180px;
  background: radial-gradient(circle at 30% 30%, rgba(54,102,187,0.30), rgba(255,255,255,0));
  top: -40px; right: -40px;
}
.impact-orb-2{
  width: 240px; height:240px;
  background: radial-gradient(circle at 30% 30%, rgba(22,58,122,0.25), rgba(255,255,255,0));
  bottom: -80px; left: -50px;
  animation-duration: 18s;
}
.impact-orb-3{
  width: 140px; height:140px;
  background: radial-gradient(circle at 30% 30%, rgba(54,102,187,0.18), rgba(255,255,255,0));
  top: 40%; left: -20px;
  animation-duration: 16s;
}
.impact-track{
  position:relative;
  display:grid;
  gap: 16px;
  padding-left: 26px;
}
.impact-track::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(54,102,187,0.18);
}
.impact-track::after{
  content:"";
  position:absolute;
  left: 10px;
  top: 0;
  width: 2px;
  height: calc(var(--impact-progress, 0) * 100%);
  background: linear-gradient(180deg, var(--accent), rgba(54,102,187,0.15));
  box-shadow: 0 0 14px rgba(54,102,187,0.35);
}
.impact-stage{
  position:relative;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 14px 28px rgba(11,27,58,0.10);
  transform: translateY(calc((1 - var(--p, 1)) * 24px)) rotateX(calc((1 - var(--p, 1)) * 12deg));
  opacity: calc(0.2 + var(--p, 1) * 0.8);
  transition: border 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.impact-stage.is-active{
  border-color: rgba(54,102,187,0.32);
  box-shadow: 0 18px 40px rgba(11,27,58,0.14);
}
.impact-step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.impact-step-num{
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.impact-stage-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 12px;
  align-items:stretch;
}
.impact-stage-card{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  font-weight: 800;
  color: var(--muted);
}
.impact-stage-card h4{
  margin: 0 0 6px;
  font-family: var(--font-display);
  color: var(--text);
}
.impact-tag{
  display:inline-flex;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(54,102,187,0.10);
  color: var(--accent-2);
  font-weight: 900;
  font-size: 12px;
}
.impact-stage-photo{
  border-radius: 16px;
  min-height: 180px;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.45), rgba(11,27,58,0.05)),
    var(--img, url("../assets/hero-2.jpg")) center/cover no-repeat;
  border: 1px solid rgba(54,102,187,0.20);
}
.impact-cta{
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(150deg, rgba(54,102,187,0.16), rgba(255,255,255,0.92));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items:start;
}
.contact-left{
  display:grid;
  gap: 14px;
}
.contact-card{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-soft);
}
.contact-links{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.contact-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  font-weight: 800;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.contact-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(11,27,58,0.10);
}
.contact-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  font-weight: 900;
  font-size: 12px;
}
.contact-map{
  margin-top: 12px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
}
.contact-map iframe{
  width:100%;
  height: 260px;
  border:0;
  display:block;
}
.contact-form{
  display:grid;
  gap: 12px;
}

@media (max-width: 980px){
  .about-hero-grid{ grid-template-columns: 1fr; }
  .about-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-story-grid{ grid-template-columns: 1fr; }
  .about-values-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
  .impact-journey{ grid-template-columns: 1fr; }
  .impact-visual{ position:relative; top:auto; }
  .impact-stage-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .about-stats{ grid-template-columns: 1fr; }
  .about-gallery{ grid-template-columns: 1fr; }
  .about-gallery-item.tall{ grid-row: auto; min-height: 200px; }
}

@media (max-width: 640px){
  .section{ padding: 44px 0; }
  .hero-home{ padding: 40px 0 16px; }
  .page-hero{ padding: 32px 0 8px; }
  .panel-media{ height: 160px; }
  .panel-meta{ flex-direction:column; align-items:flex-start; }
  .panel-stats{ flex-direction:column; align-items:flex-start; }
  .hero-cta,
  .hero-actions,
  .live-actions,
  .tickets-hero-actions,
  .winners-hero-actions,
  .about-hero-actions,
  .impact-cta,
  .legal-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn,
  .hero-actions .btn,
  .live-actions .btn,
  .tickets-hero-actions .btn,
  .winners-hero-actions .btn,
  .about-hero-actions .btn,
  .impact-cta .btn,
  .legal-actions .btn{
    width: 100%;
  }
  .hero-badges,
  .live-pills,
  .how-pills,
  .about-hero-pills,
  .legal-pills{
    flex-direction: column;
    align-items:flex-start;
  }
  .contact-link{ padding: 10px; }
}

@media (max-width: 900px){
  .nav-links{ max-height: none; }
  .nav-links[data-open="true"]{ max-height: none; }
}

@media (max-width: 640px){
  .nav-inner{ gap: 10px; }
  .brand-logo{ height: 24px; }
  .brand-text{ font-size: 14px; }
  .card{ padding: 14px; }
  .doc{ padding: 14px; }
  .notice{ padding: 12px; }
  .nav-links[data-open="true"]{
    width: 100%;
    max-height: none;
  }
  .actions-row,
  .basket-actions,
  .basket-controls,
  .basket-item-controls,
  .winners-search{
    flex-direction: column;
    align-items: stretch;
  }
  .actions-row .btn,
  .basket-actions .btn,
  .basket-controls .btn,
  .basket-item-controls .btn,
  .winners-search .btn{
    width: 100%;
  }
  .winners-search{ width: 100%; }
  .basket-item-total{ width: 100%; }
  .summary-line{ flex-direction: column; align-items:flex-start; }
  .auth-footer{ flex-direction: column; align-items:flex-start; }
  .auth-footer .btn{ width: 100%; }
  .auth-links{ justify-content:flex-start; }
.auth-showcase-media{ height: 150px; }
.tickets-panel-head{ flex-direction: column; align-items:flex-start; }
.comp-buy{ flex-direction: column; align-items: stretch; }
.qty-stepper{ width: 100%; justify-content:space-between; gap: 12px; }
.qty-input{ width: 100%; max-width: 160px; font-size: 16px; }
  .btn,
  .nav-links a,
  .nav-drop-toggle{
    min-height: 44px;
  }
  .qty-stepper .btn{
    min-width: 44px;
  }
  .input{
    font-size: 16px;
  }
  .tab-btn{ flex: 1 1 140px; text-align:center; }
  .impact-visual-image{ height: 280px; }
  .impact-track{ padding-left: 18px; }
  .impact-stage{ padding: 14px; }
  .contact-map iframe{ height: 220px; }
  .sticky-cta{
    display: none;
  }
  body.has-sticky-cta .sticky-cta[data-hidden="false"],
  body.has-sticky-cta .sticky-cta:not([data-hidden]){
    display: flex;
  }
  .sticky-cta-buy{
    gap: 10px;
  }
  .sticky-qty-stepper{
    flex: 1 1 100%;
    min-width: 0;
  }
  .sticky-cta-buy .sticky-cta-summary{
    flex: 1 1 auto;
  }
  .sticky-cta-buy .btn.btn-primary{
    flex-basis: 100%;
  }
  body.has-sticky-cta .content{
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }
  .purchase-summary{
    width: 100%;
    justify-content: space-between;
  }
  .purchase-summary.inline{
    width: 100%;
  }
}

@media (max-width: 520px){
  .brand-logo{ height: 22px; }
  .brand-text{ font-size: 13px; }
  .card{ padding: 12px; }
  .panel-card{ border-radius: 18px; }
  .impact-visual-image{ height: 240px; }
  .contact-map iframe{ height: 200px; }
}

/* ----------------------------
   Instant reveal (success page)
----------------------------- */
.instant-reveal{
  display: grid;
  gap: 14px;
}
.instant-reveal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.instant-reveal-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.chest-card{
  position: relative;
  min-height: 286px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(255,255,255,0.97), rgba(215,230,255,0.7));
  border: 1px solid rgba(54,102,187,0.2);
  overflow: hidden;
  box-shadow: 0 18px 30px rgba(11,27,58,0.12), inset 0 0 0 1px rgba(255,255,255,0.38);
  padding: 16px 14px 14px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  isolation: isolate;
}
.chest-card::before{
  content: "";
  position: absolute;
  inset: auto -22% -58% -22%;
  height: 180px;
  background: radial-gradient(ellipse at center, rgba(58,118,226,0.18), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}
.chest-stage{
  position: relative;
  width: min(220px, 100%);
  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 560px;
  transform-style: preserve-3d;
  z-index: 1;
}
.chest-spark{
  position: absolute;
  left: 50%;
  bottom: 76px;
  width: 148px;
  height: 64px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 65%, rgba(255,255,255,0.82) 0 3px, rgba(255,255,255,0) 4px),
    radial-gradient(circle at 48% 35%, rgba(255,220,150,0.95) 0 5px, rgba(255,220,150,0) 6px),
    radial-gradient(circle at 78% 60%, rgba(255,255,255,0.75) 0 3px, rgba(255,255,255,0) 4px),
    radial-gradient(ellipse at center, rgba(255,228,166,0.55), rgba(255,228,166,0));
  transform: translate(-50%, 8px) scale(0.75);
  opacity: 0;
  filter: blur(0.4px);
}
.chest-base{
  position: absolute;
  bottom: 0;
  width: 152px;
  height: 84px;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(168deg, #be7e2d, #8f5719);
  border: 1px solid rgba(88,46,8,0.55);
  box-shadow: 0 16px 20px rgba(11,27,58,0.22), inset 0 10px 14px rgba(255,215,139,0.22);
}
.chest-base::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 12px;
  background: linear-gradient(180deg, rgba(255,205,129,0.8), rgba(120,63,17,0.7));
  border-top: 1px solid rgba(255,224,167,0.62);
  border-bottom: 1px solid rgba(75,37,10,0.58);
}
.chest-base::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 18px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 5px;
  background: linear-gradient(180deg, #f6d58b, #c59031);
  border: 1px solid rgba(102,63,12,0.56);
  box-shadow: inset 0 0 0 1px rgba(255,238,185,0.44);
}
.chest-lid{
  position: absolute;
  bottom: 62px;
  width: 154px;
  height: 52px;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(164deg, #cd8b35, #965919);
  border: 1px solid rgba(88,46,8,0.55);
  box-shadow: 0 8px 14px rgba(11,27,58,0.2), inset 0 10px 12px rgba(255,216,139,0.22);
  transform-origin: 50% 92%;
  transition: transform 620ms cubic-bezier(.22,.86,.31,1.08);
  will-change: transform;
}
.case-roll-shell{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}
.case-roll-window{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(248,251,255,0.86);
  padding: 6px;
}
.case-roll-track{
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.case-roll-item{
  width: 112px;
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.92);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  display: grid;
  place-items: center;
  padding: 6px 8px;
}
.case-roll-item.is-miss{
  color: var(--muted);
  background: rgba(255,255,255,0.8);
}
.case-roll-item.is-target{
  border-color: rgba(54,102,187,0.62);
  background: rgba(213,230,255,0.86);
}
.case-roll-pointer{
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(50% - 1px);
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(54,102,187,0), rgba(54,102,187,0.9), rgba(54,102,187,0));
  pointer-events: none;
  z-index: 3;
}
.chest-open-btn{
  position: relative;
  z-index: 1;
  justify-self: center;
  min-width: 132px;
}
.chest-result{
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 4px 6px 2px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
}
.chest-ticket{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.chest-prize{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}
.chest-note{
  font-size: 12px;
  color: var(--muted);
}
.chest-card[data-win="true"] .chest-prize{
  color: var(--accent);
}
.chest-card[data-win="false"] .chest-prize{
  color: var(--text);
}
.chest-card.is-rolling .chest-lid{
  transform: translateY(-28px) rotateX(62deg);
}
.chest-card.is-rolling .chest-spark{
  animation: chestSpark 780ms ease-out forwards;
}
.chest-card.is-revealed .chest-lid{
  transform: translateY(-28px) rotateX(62deg);
}
.chest-card.is-revealed .chest-spark{
  opacity: 0.72;
  transform: translate(-50%, -4px) scale(0.96);
}
.chest-card.is-revealed .chest-result{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.chest-card.is-revealed .chest-open-btn{
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
@keyframes chestSpark{
  0%{
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.7);
  }
  28%{
    opacity: 1;
    transform: translate(-50%, 0) scale(1.04);
  }
  100%{
    opacity: 0.72;
    transform: translate(-50%, -4px) scale(0.96);
  }
}
@media (max-width: 700px){
  .instant-reveal-grid{
    grid-template-columns: 1fr;
  }
  .chest-card{
    min-height: 268px;
  }
}
@media (prefers-reduced-motion: reduce){
  .chest-lid,
  .chest-result,
  .chest-open-btn,
  .chest-spark,
  .case-roll-track{
    transition: none !important;
    animation: none !important;
  }
}

/* Content-visibility for large sections (performance) */
.footer,
.comp-details,
.insta-prizes,
.basket{
  content-visibility: auto;
  contain-intrinsic-size: 800px 600px;
}

/* ----------------------------
   Skill games
----------------------------- */
.skill-layout{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items:start;
}
.daily5-logo{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--accent);
}
.neuro-logo{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 14px;
  color: #1f4f9d;
}
.skill-integrity{
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.attempt-history{
  display:flex;
  align-items:center;
  gap: 6px;
}
.attempt-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(11,27,58,0.18);
  background: rgba(255,255,255,0.6);
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}
.attempt-dot.is-used{
  background: rgba(11,27,58,0.18);
}
.attempt-dot.is-win{
  background: rgba(54,102,187,0.9);
  border-color: rgba(54,102,187,0.45);
}
.skill-hint{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.skill-status{
  min-height: 22px;
}
.skill-game{
  display:flex;
  flex-direction:column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(54,102,187,0.08));
  border: 1px solid rgba(54,102,187,0.18);
  box-shadow: 0 18px 36px rgba(11,27,58,0.12);
}
.skill-game.neuro-game{
  background: linear-gradient(155deg, rgba(255,255,255,0.95), rgba(31,79,157,0.1));
  border-color: rgba(31,79,157,0.26);
  isolation: isolate;
}
.skill-game.neuro-game::before{
  content:"";
  position: absolute;
  inset: -30% -10% auto;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60,123,230,0.2), rgba(255,255,255,0));
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}
.skill-game.neuro-game > :not(.neuro-sticky-actions){
  position: relative;
  z-index: 1;
}
.skill-game.neuro-game[data-phase="preview"]{
  box-shadow: 0 20px 38px rgba(11,27,58,0.14), inset 0 0 0 1px rgba(131,182,255,0.24);
}
.skill-game.neuro-game[data-phase="input"]{
  box-shadow: 0 22px 40px rgba(15,53,117,0.2), inset 0 0 0 1px rgba(66,127,229,0.28);
}
.skill-game.neuro-game[data-phase="complete"]{
  box-shadow: 0 20px 38px rgba(11,27,58,0.14), inset 0 0 0 1px rgba(92,166,111,0.22);
}
.skill-game.is-xp-pop{
  animation: skillXpPop 520ms ease-out;
}
@keyframes skillXpPop{
  0%{ box-shadow: 0 18px 36px rgba(11,27,58,0.12); }
  50%{ box-shadow: 0 24px 44px rgba(54,102,187,0.25); }
  100%{ box-shadow: 0 18px 36px rgba(11,27,58,0.12); }
}
.skill-game-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.neuro-head-actions{
  display:flex;
  align-items:center;
  gap: 8px;
}
.neuro-help-btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(31,79,157,0.36);
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(84,137,225,0.16));
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(11,27,58,0.14);
  transition: transform 160ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.neuro-help-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(31,79,157,0.58);
  box-shadow: 0 12px 20px rgba(31,79,157,0.2);
}
.neuro-help-btn:active{
  transform: translateY(0);
}
.neuro-help-btn:focus-visible{
  outline: 2px solid rgba(54,102,187,0.48);
  outline-offset: 2px;
}
.word-grid{
  display:grid;
  gap: 8px;
  position: relative;
}
.word-grid::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 20px;
  background: radial-gradient(circle at 20% 10%, rgba(54,102,187,0.18), rgba(255,255,255,0) 60%);
  pointer-events:none;
  opacity: 0.7;
}
.word-row{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
  position: relative;
  z-index: 1;
}
.word-row.is-reveal .word-cell{
  animation: rowReveal 220ms ease-out;
}
.word-cell{
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.72);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: transform 160ms var(--ease-out), background 200ms var(--ease-out), border 200ms var(--ease-out);
}
.word-cell.is-correct{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color: rgba(54,102,187,0.4);
  animation: cellPop 240ms ease-out;
}
.word-cell.is-present{
  background: rgba(242,201,76,0.30);
  border-color: rgba(242,201,76,0.65);
  animation: cellPop 240ms ease-out;
}
.word-cell.is-absent{
  background: rgba(11,27,58,0.08);
  color: var(--muted);
}
.word-grid[data-state="win"] .word-cell{
  box-shadow: 0 0 0 1px rgba(54,102,187,0.12);
}
.word-grid[data-state="win"]{
  animation: winPulse 240ms ease-out;
}
.word-grid[data-state="lose"]{
  animation: losePulse 220ms ease-out;
}
.word-grid[data-state="lose"] .word-cell{
  opacity: 0.9;
}
.word-cell:empty{
  transform: translateY(0);
}
@keyframes cellPop{
  0%{ transform: scale(0.9); }
  60%{ transform: scale(1.05); }
  100%{ transform: scale(1); }
}
@keyframes rowReveal{
  0%{ opacity: 0.6; transform: translateY(6px); }
  100%{ opacity: 1; transform: translateY(0); }
}
@keyframes winPulse{
  0%{ box-shadow: 0 0 0 0 rgba(54,102,187,0.0); }
  60%{ box-shadow: 0 0 0 8px rgba(54,102,187,0.14); }
  100%{ box-shadow: 0 0 0 0 rgba(54,102,187,0.0); }
}
@keyframes losePulse{
  0%{ box-shadow: 0 0 0 0 rgba(11,27,58,0.0); }
  60%{ box-shadow: 0 0 0 6px rgba(11,27,58,0.1); }
  100%{ box-shadow: 0 0 0 0 rgba(11,27,58,0.0); }
}
.word-keyboard{
  display:grid;
  gap: 8px;
}
.word-keyboard-row{
  display:grid;
  grid-template-columns: repeat(10, minmax(0,1fr));
  gap: 6px;
}
.key{
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.82);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
  touch-action: manipulation;
}
.key:active{ transform: scale(0.98); }
.key.is-wide{ grid-column: span 2; }
.key.is-correct{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color: rgba(54,102,187,0.4);
}
.key.is-present{
  background: rgba(242,201,76,0.30);
  border-color: rgba(242,201,76,0.65);
}
.key.is-absent{
  background: rgba(11,27,58,0.12);
  color: var(--muted);
}
.key.is-used{
  opacity: 0.72;
  filter: saturate(0.7);
}
.key.is-used.is-correct,
.key.is-used.is-present{
  opacity: 1;
  filter: none;
}
.key.is-used.is-absent{
  opacity: 0.55;
  filter: grayscale(0.2) blur(0.4px);
}
.skill-stats{
  display:grid;
  gap: 10px;
}
.neuro-meta-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.neuro-meta-grid div{
  position: relative;
  padding: 10px 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(11,27,58,0.14);
  background: linear-gradient(165deg, rgba(255,255,255,0.9), rgba(223,235,255,0.66));
  display:grid;
  gap: 4px;
  overflow: hidden;
}
.neuro-meta-grid div::before{
  content:"";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(43,106,209,0.8), rgba(43,106,209,0));
  opacity: 0.65;
}
.neuro-meta-grid span{
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.neuro-meta-grid strong{
  font-size: 18px;
  line-height: 1;
}
.neuro-meta-grid strong.is-pop{
  animation: neuroMetaPop 340ms var(--ease-out);
}
.neuro-stage-strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.neuro-stage-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,58,0.12);
  background: rgba(255,255,255,0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.neuro-stage-chip .stage-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,58,0.16);
  background: rgba(255,255,255,0.9);
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--text);
}
.neuro-stage-chip.is-active{
  background: rgba(31,79,157,0.16);
  border-color: rgba(31,79,157,0.45);
  color: var(--accent-2);
  transform: translateY(-1px);
}
.neuro-stage-chip.is-active .stage-dot{
  background: linear-gradient(140deg, #2b6ad1, #4d9fff);
  border-color: rgba(31,79,157,0.55);
  color: #fff;
}
.neuro-stage-chip.is-done{
  background: rgba(54,102,187,0.1);
  border-color: rgba(54,102,187,0.24);
  color: var(--text);
}
.neuro-playfield{
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(31,79,157,0.24);
  background: linear-gradient(160deg, rgba(255,255,255,0.82), rgba(31,79,157,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34);
}
.neuro-round-banner{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}
.neuro-progress{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(11,27,58,0.12);
}
.neuro-progress span{
  display:block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #1f4f9d, #4d9fff 62%, #8ac4ff);
  transition: width 120ms linear;
}
.neuro-grid-shell{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(11,27,58,0.16);
  background: radial-gradient(circle at 10% 0%, rgba(116,172,255,0.2), rgba(255,255,255,0.86) 55%);
  padding: 10px;
  overflow: hidden;
}
.neuro-grid-shell::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.42);
  pointer-events: none;
}
.neuro-grid{
  display:grid;
  grid-template-columns: repeat(var(--neuro-size, 4), minmax(0, 1fr));
  gap: 9px;
  min-height: 240px;
  position: relative;
  z-index: 1;
}
.neuro-grid:not(.is-live){
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px dashed rgba(11,27,58,0.24);
  background: rgba(255,255,255,0.7);
}
.neuro-cell{
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(11,27,58,0.18);
  background: linear-gradient(160deg, #f4f7ff, #e9f1ff);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms var(--ease-out);
  will-change: transform;
}
.neuro-cell:active{
  transform: scale(0.97);
}
.neuro-cell.is-target{
  background: linear-gradient(140deg, #2b6ad1, #4d9fff);
  border-color: rgba(31,79,157,0.65);
  box-shadow: 0 8px 16px rgba(31,79,157,0.25);
}
.neuro-grid[data-phase="preview"] .neuro-cell.is-target{
  animation: neuroCellPulse 700ms ease-in-out infinite alternate;
}
.neuro-cell.is-distractor{
  background: linear-gradient(140deg, #91c5ff, #d7eaff);
  border-color: rgba(31,79,157,0.35);
  filter: saturate(0.9);
}
.neuro-cell.is-selected{
  background: linear-gradient(140deg, #173b77, #2b6ad1);
  border-color: rgba(15,53,117,0.72);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3);
}
.neuro-controls{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.neuro-controls .btn{
  min-height: 46px;
}
.neuro-controls-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.neuro-toggle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(11,27,58,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.neuro-toggle input{
  accent-color: var(--accent-2);
}
.neuro-settings{
  border: 1px solid rgba(11,27,58,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.68);
  padding: 8px 10px;
}
.neuro-settings summary{
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.neuro-settings-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.neuro-settings-grid .field{
  margin: 0;
}
.neuro-settings-grid .field-label{
  display:block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 900;
  color: #4c6282;
}
.neuro-settings-grid .input{
  min-height: 46px;
}
.skill-game.neuro-game[data-control-mode="gesture"] .neuro-grid[data-phase="input"]{
  touch-action: none;
}
.leaderboard-row.is-ready{
  border-color: rgba(40,139,98,0.35);
  background: rgba(40,139,98,0.09);
}
.neuro-sticky-actions{
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translate(-50%, 18px);
  width: min(920px, calc(100% - 20px));
  z-index: 40;
  display:grid;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid rgba(31,79,157,0.22);
  background: linear-gradient(160deg, rgba(250,252,255,0.95), rgba(221,235,255,0.92));
  padding: 10px;
  box-shadow: 0 14px 30px rgba(11,27,58,0.2);
  backdrop-filter: blur(9px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 160ms ease;
}
.neuro-sticky-actions.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.neuro-sticky-info{
  display:flex;
  align-items:center;
  gap: 12px;
}
.neuro-sticky-selected{
  display:grid;
  gap: 3px;
}
.neuro-sticky-selected strong{
  font-size: 16px;
  line-height: 1;
}
.neuro-sticky-buttons{
  display:flex;
  gap: 8px;
}
.neuro-sticky-buttons .btn{
  min-height: 44px;
}
.neuro-sticky-ring{
  --pct: 0%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-2) var(--pct), rgba(11,27,58,0.12) 0);
  display:grid;
  place-items:center;
  position: relative;
}
.neuro-sticky-ring::before{
  content:"";
  position:absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(11,27,58,0.08);
}
.neuro-sticky-ring span{
  position:relative;
  z-index:1;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-2);
}
.neuro-sticky-ring.is-urgent{
  animation: neuroRingWarn 640ms ease-in-out infinite alternate;
}
@keyframes neuroRingWarn{
  from{ box-shadow: 0 0 0 rgba(185,36,28,0); }
  to{ box-shadow: 0 0 0 5px rgba(185,36,28,0.12); }
}
@keyframes neuroCellPulse{
  from{ transform: scale(1); box-shadow: 0 8px 16px rgba(31,79,157,0.25); }
  to{ transform: scale(1.035); box-shadow: 0 12px 22px rgba(31,79,157,0.32); }
}
@keyframes neuroMetaPop{
  0%{ transform: translateY(1px) scale(0.98); }
  55%{ transform: translateY(-1px) scale(1.04); }
  100%{ transform: translateY(0) scale(1); }
}
.neuro-heatmap-grid{
  display:grid;
  grid-template-columns: repeat(var(--neuro-size, 4), minmax(0, 1fr));
  gap: 6px;
}
.neuro-heatmap-cell{
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(11,27,58,0.14);
  background: rgba(54,102,187, calc(0.06 + (var(--i, 0) * 0.68)));
  color: rgba(11,27,58, calc(0.4 + (var(--i, 0) * 0.6)));
  font-size: 12px;
  font-weight: 800;
  display:grid;
  place-items:center;
}
.neuro-loss-card{
  border: 1px solid rgba(185,36,28,0.24);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(185,36,28,0.08));
  padding: 10px 12px;
}
.neuro-guide-modal{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.neuro-guide-modal[hidden]{
  display: none;
}
.neuro-guide-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.neuro-guide-backdrop{
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11,27,58,0.58);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.neuro-guide-dialog{
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: min(90vh, 860px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(31,79,157,0.3);
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(80,130,214,0.12));
  box-shadow: 0 24px 44px rgba(11,27,58,0.28);
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(12px) scale(0.98);
  opacity: 0.96;
  transition: transform 210ms var(--ease-out), opacity 180ms ease;
}
.neuro-guide-modal.is-open .neuro-guide-dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.neuro-guide-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(11,27,58,0.14);
  background: rgba(255,255,255,0.92);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.neuro-guide-steps{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.neuro-guide-step{
  border: 1px solid rgba(11,27,58,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.82);
  padding: 10px;
  display: grid;
  gap: 6px;
}
.neuro-guide-step strong{
  font-size: 13px;
  color: var(--text);
}
.neuro-guide-step p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.neuro-guide-visual{
  margin-top: 12px;
  border: 1px solid rgba(11,27,58,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.84);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.neuro-guide-board{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.neuro-guide-cell{
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(11,27,58,0.16);
  background: #f1f5ff;
}
.neuro-guide-cell.is-target{
  background: linear-gradient(140deg, #2b6ad1, #6cb2ff);
  border-color: rgba(31,79,157,0.58);
}
.neuro-guide-cell.is-selected{
  background: linear-gradient(140deg, #173b77, #2b6ad1);
  border-color: rgba(15,53,117,0.76);
}
.neuro-guide-notes{
  display: grid;
  gap: 5px;
}
.neuro-guide-notes p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.neuro-guide-notes strong{
  color: var(--text);
}
.neuro-guide-toggle{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(11,27,58,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
}
.neuro-guide-toggle input{
  accent-color: var(--accent-2);
}
.neuro-guide-actions{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.neuro-guide-actions .btn{
  min-height: 44px;
}
.modal-open{
  overflow: hidden;
}
.skill-game.neuro-game.is-high-contrast .neuro-cell{
  border-color: rgba(11,27,58,0.45);
}
.skill-game.neuro-game.is-high-contrast .neuro-cell.is-target{
  background: linear-gradient(140deg, #0b2b6a, #0047b3);
  border-color: rgba(2,42,120,0.9);
  box-shadow: 0 8px 18px rgba(2,42,120,0.32);
}
.skill-game.neuro-game.is-high-contrast .neuro-cell.is-selected{
  background: linear-gradient(140deg, #061938, #0f3f8f);
  border-color: rgba(6,25,56,0.95);
}
.neuro-grid.is-color-safe .neuro-cell.is-target{
  background: linear-gradient(140deg, #005f73, #0a9396);
  border-color: rgba(0,95,115,0.8);
}
.neuro-grid.is-color-safe .neuro-cell.is-distractor{
  background: linear-gradient(140deg, #ee9b00, #ffb703);
  border-color: rgba(164,97,0,0.72);
}
.skill-game.neuro-game.is-reduced-motion *,
.skill-game.neuro-game.is-reduced-motion *::before,
.skill-game.neuro-game.is-reduced-motion *::after{
  animation-duration: 0ms !important;
  transition-duration: 0ms !important;
}
@media (prefers-reduced-motion: reduce){
  .neuro-help-btn,
  .neuro-guide-modal,
  .neuro-guide-dialog{
    transition: none !important;
    animation: none !important;
  }
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border:0;
}
.skill-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.skill-badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(54,102,187,0.12);
  font-weight: 800;
  font-size: 12px;
}
.level-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.level-bronze{
  background: rgba(205,127,50,0.2);
  border-color: rgba(205,127,50,0.4);
  color: #7a5227;
}
.level-silver{
  background: rgba(186,193,204,0.25);
  border-color: rgba(186,193,204,0.45);
  color: #586070;
}
.level-gold{
  background: rgba(224,180,74,0.24);
  border-color: rgba(224,180,74,0.5);
  color: #7a5a16;
}
.level-sapphire{
  background: rgba(54,102,187,0.18);
  border-color: rgba(54,102,187,0.45);
  color: #1e3f82;
}
.level-amethyst{
  background: rgba(129,92,229,0.18);
  border-color: rgba(129,92,229,0.45);
  color: #5534b8;
}
.level-diamond{
  background: rgba(125,211,252,0.22);
  border-color: rgba(125,211,252,0.5);
  color: #0c5f86;
}
.level-progress{
  display:grid;
  gap: 6px;
  margin-top: 8px;
}
.level-progress-bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(11,27,58,0.12);
  overflow: hidden;
}
.level-progress-bar span{
  display:block;
  height:100%;
  width: var(--w, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 420ms var(--ease-out);
}
.level-progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 12px;
  color: var(--muted);
}
.skill-arcade-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.skill-arcade-card{
  display:flex;
  flex-direction:column;
  gap: 14px;
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(54,102,187,0.08));
  box-shadow: 0 18px 36px rgba(11,27,58,0.1);
}
.skill-arcade-card.is-neurogrid{
  border-color: rgba(31,79,157,0.24);
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(31,79,157,0.1));
  box-shadow: 0 20px 38px rgba(15,53,117,0.16);
}
.skill-arcade-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.skill-arcade-meta{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,27,58,0.08);
  background: rgba(54,102,187,0.06);
}
.skill-arcade-meta strong{
  font-size: 16px;
}
.skill-arcade-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.section-skill-promo{
  padding-top: 30px;
}
.skill-promo-shell{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: center;
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.14);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(54,102,187,0.10));
  box-shadow: 0 18px 40px rgba(11,27,58,0.12);
}
.skill-promo-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 18px;
}
.skill-promo-card{
  display:grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.2);
  background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(54,102,187,0.08));
  box-shadow: 0 16px 32px rgba(11,27,58,0.16);
}
.skill-promo-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.skill-promo-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.skill-promo-cell{
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(11,27,58,0.12);
  background: rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--text);
}
.skill-promo-cell.is-correct{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color: rgba(54,102,187,0.35);
}
.skill-promo-cell.is-present{
  background: rgba(242,201,76,0.3);
  border-color: rgba(242,201,76,0.6);
}
.skill-promo-note{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 900px){
  .skill-promo-shell{
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .skill-promo-card{
    order: -1;
  }
}
.leaderboard{
  display:grid;
  gap: 8px;
}
.leaderboard-modes{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.leaderboard-mode{
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.68);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 180ms var(--ease-out);
}
.leaderboard-mode:active{
  transform: scale(0.98);
}
.leaderboard-mode.is-active{
  background: rgba(54,102,187,0.16);
  border-color: rgba(54,102,187,0.45);
  color: var(--accent-2);
}
.leaderboard-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  font-weight: 800;
  flex-wrap: wrap;
}
.leaderboard-row.is-self{
  border-color: rgba(54,102,187,0.35);
  background: rgba(54,102,187,0.08);
  box-shadow: inset 0 0 0 1px rgba(54,102,187,0.08);
}
.leaderboard-row span{
  color: var(--muted);
  font-size: 12px;
}
.leaderboard-row .level-badge{
  margin-left: 6px;
  font-size: 10px;
  padding: 4px 8px;
}
.skill-reward-log{
  display:grid;
  gap: 10px;
}
.skill-xp-breakdown{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(54,102,187,0.08);
}
.skill-xp-breakdown-list{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-xp-breakdown-list span{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 800;
}
.xp-fx-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.xp-float-chip{
  position: absolute;
  right: 14px;
  top: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.4);
  background: rgba(255,255,255,0.94);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(11,27,58,0.16);
  animation: xpChipFloat 1200ms var(--ease-out) forwards;
}
@keyframes xpChipFloat{
  0%{ opacity:0; transform: translateY(14px) scale(0.95); }
  15%{ opacity:1; transform: translateY(0) scale(1); }
  85%{ opacity:1; transform: translateY(-12px) scale(1); }
  100%{ opacity:0; transform: translateY(-20px) scale(0.98); }
}

@media (max-width: 900px){
  .skill-layout{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .skill-game{
    gap: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .skill-game-head{
    align-items: flex-start;
  }
  .neuro-meta-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .neuro-stage-strip{
    grid-template-columns: 1fr;
  }
  .neuro-round-banner{
    gap: 6px;
  }
  .neuro-round-banner .pill{
    font-size: 11px;
    padding: 6px 9px;
  }
  .neuro-playfield{
    padding: 8px;
    gap: 8px;
  }
  .neuro-grid-shell{
    padding: 8px;
  }
  .neuro-grid{
    min-height: 220px;
    gap: 7px;
  }
  .neuro-controls{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .neuro-controls .btn{
    width: 100%;
    min-height: 48px;
  }
  #neuroStartBtn,
  #neuroPracticeBtn,
  #neuroSubmitBtn{
    grid-column: 1 / -1;
  }
  .neuro-sticky-actions{
    width: calc(100% - 14px);
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 9px;
  }
  .neuro-sticky-buttons{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .neuro-sticky-buttons .btn{
    min-height: 44px;
  }
  .neuro-settings-grid{
    grid-template-columns: 1fr;
  }
  .neuro-guide-visual{
    grid-template-columns: 1fr;
  }
  .word-keyboard{
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 3;
    padding: 8px;
    border-radius: 14px;
    background: rgba(246,247,244,0.84);
    border: 1px solid rgba(11,27,58,0.1);
    backdrop-filter: blur(6px);
  }
  .word-keyboard-row{
    gap: 5px;
  }
  .key{
    min-height: 44px;
    font-size: 12px;
  }
  .leaderboard-modes{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .word-cell{ font-size: 16px; }
  .word-row{ gap: 6px; }
  .key{ font-size: 11px; padding: 10px 6px; min-height: 46px; }
  .skill-game{
    padding-left: 12px;
    padding-right: 12px;
  }
  .neuro-help-btn{
    width: 34px;
    height: 34px;
  }
  .neuro-stage-chip{
    min-height: 34px;
    font-size: 11px;
  }
}
/* ----------------------------
   Instant prize tiers (admin)
----------------------------- */
.insta-tier-panel{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,27,58,0.08);
  display: grid;
  gap: 10px;
}
.insta-tier-meta{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.insta-tier-list{
  display: grid;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 6px;
  scrollbar-gutter: stable;
}
.insta-tier-head{
  display: grid;
  grid-template-columns: minmax(160px, 1.8fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) minmax(180px, 1.2fr) minmax(110px, 0.6fr) minmax(140px, 0.8fr);
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 800;
  min-width: max-content;
}
.insta-tier-rows{
  display: grid;
  gap: 8px;
  min-width: max-content;
}
.insta-tier-row{
  display: grid;
  grid-template-columns: minmax(160px, 1.8fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) minmax(180px, 1.2fr) minmax(110px, 0.6fr) minmax(140px, 0.8fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.insta-tier-row .input{
  min-width: 0;
  min-height: 44px;
  font-size: 14px;
  padding: 10px 12px;
}
.insta-tier-controls{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.insta-tier-controls .btn{
  min-height: 40px;
  padding: 8px 12px;
}
.insta-tier-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.insta-tier-empty{
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--muted);
}
.pnl-warn{
  color: #a62222;
}
@container (max-width: 820px){
  .insta-tier-head{ display: none; }
  .insta-tier-rows{ min-width: 0; }
  .insta-tier-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .insta-tier-controls{
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@container (max-width: 560px){
  .insta-tier-rows{ min-width: 0; }
  .insta-tier-row{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px){
  .insta-tier-head{ display: none; }
  .insta-tier-rows{ min-width: 0; }
  .insta-tier-row{
    grid-template-columns: 1fr;
  }
  .insta-tier-controls{
    justify-content: flex-start;
  }
}

/* ----------------------------
   Admin winners panel
----------------------------- */
.winner-panel{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,27,58,0.08);
  display: grid;
  gap: 10px;
}
.winner-list,
.winner-pending{
  display: grid;
  gap: 8px;
}
.winner-item,
.winner-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(11,27,58,0.08);
  background: rgba(255,255,255,0.7);
}
.winner-row{
  grid-template-columns: minmax(140px, 1fr) auto;
}
.winner-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.winner-empty{
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--muted);
}
.winner-ticket-map{
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--accent-2);
  word-break: break-word;
}

/* ----------------------------
   Quest + live odds + impact
----------------------------- */
.draw-storyline{
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(54,102,187,0.10);
  color: var(--accent-2);
  font-weight: 700;
  font-style: italic;
}
.comp-highlight-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.live-odds-head,
.impact-meter-head,
.quest-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.live-odds-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.live-odds-grid strong{
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}
.live-odds-foot{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.impact-meter-stats{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.impact-meter-stats strong{
  display: block;
  font-size: 18px;
  color: var(--text);
}
.impact-meter-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.quest-card{
  display: grid;
  gap: 12px;
}
.quest-progress{
  display: grid;
  gap: 8px;
}
.quest-progress-bar{
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(11,27,58,0.08);
  overflow: hidden;
}
.quest-progress-bar span{
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: inherit;
}
.quest-progress-meta{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.quest-bonus{
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-2);
}
.quest-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-2);
}
.quest-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quest-actions .is-claimed{
  background: rgba(54,102,187,0.15);
  border-color: rgba(54,102,187,0.35);
  color: var(--accent-2);
  animation: questPop 0.6s ease-out;
}
.quest-card{
  position: relative;
}
.quest-card.is-claimed{
  animation: questPop 0.6s ease-out;
}
.quest-card .hint{
  font-size: 12px;
  color: var(--muted);
}
.quest-card .hint.is-success{
  color: var(--accent-2);
}
.quest-card .hint.is-error{
  color: #a62222;
}
.quest-card .btn.is-claimed{
  pointer-events: none;
}
.quest-card .btn.is-claimed::after{
  opacity: 0;
}
.quest-card .btn.is-claimed::before{
  content: "✓";
  font-weight: 900;
}
.quest-card .btn.is-claimed{
  gap: 8px;
}
@keyframes questPop{
  0%{ transform: scale(0.98); }
  60%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}
.quest-error{
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

/* ----------------------------
   Fairness explainer
----------------------------- */
.fairness-card{
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.88);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 12px;
}
.fairness-steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 12px;
}
.fairness-step{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(11,27,58,0.08);
}
.fairness-step p{
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.fairness-num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  background: rgba(54,102,187,0.15);
  color: var(--accent-2);
}

/* ----------------------------
   Luck meter + badges
----------------------------- */
.luck-meter{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 12px 34px rgba(11,27,58,0.08);
  display: grid;
  gap: 12px;
}
.luck-meter-empty{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 13px;
}
.luck-meter-score{
  display: grid;
  gap: 8px;
}
.luck-meter-bar{
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(11,27,58,0.08);
  overflow: hidden;
}
.luck-meter-bar span{
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(135deg, #f2c94c, var(--accent));
  border-radius: inherit;
}
.luck-meter-scoreline{
  font-size: 12px;
  color: var(--muted);
}
.luck-entries{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.luck-entry{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
}
.luck-entry.is-win{
  border-color: rgba(54,102,187,0.4);
  background: rgba(54,102,187,0.10);
}
.luck-entry.is-near{
  border-color: rgba(242,201,76,0.45);
  background: rgba(242,201,76,0.15);
}
.luck-entry.is-miss{
  border-color: rgba(11,27,58,0.12);
}
.luck-entry-label{
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
.luck-entry-meta{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.luck-entry-prize{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-2);
  margin-top: 4px;
}
.luck-entry-date{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.ticket-badges{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill-sm{
  font-size: 10px;
  padding: 4px 8px;
}

.tickets-panels{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.personal-stats{
  display: grid;
  gap: 12px;
}
.personal-stats-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
  .personal-stats-grid strong{
    display: block;
    font-size: 18px;
    color: var(--text);
  }
  .skill-perf{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(11,27,58,0.08);
    display: grid;
    gap: 10px;
  }
  .skill-perf-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
  }
  .skill-perf-grid strong{
    display: block;
    font-size: 16px;
    color: var(--text);
  }
  .personal-badges{
    display: flex;
    flex-wrap: wrap;
  gap: 6px;
}
.ticket-countdown{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-2);
  background: rgba(54,102,187,0.12);
  border-radius: 999px;
  padding: 4px 8px;
}
.ticket-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 720px){
  .personal-stats-grid{
    grid-template-columns: 1fr;
  }
  .account-meta-grid{
    grid-template-columns: 1fr;
  }
  .skill-perf-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .impact-meter-stats{
    grid-template-columns: 1fr;
  }
  .quest-progress-meta{
    flex-direction: column;
    align-items: flex-start;
  }
  .luck-entry{
    flex-direction: column;
    align-items: flex-start;
  }
  .luck-entry-date{
    white-space: normal;
  }
}

/* ----------------------------
   How to play guides
----------------------------- */
.guides-hero{
  padding: 44px 0 12px;
}
.guide-breadcrumb{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.guide-breadcrumb a{
  color: var(--accent-2);
}
.guide-overview{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.guide-overview .pill{
  justify-content: flex-start;
}
.guide-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.guide-grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guide-card{
  display: grid;
  gap: 12px;
}
.guide-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.guide-kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
}
.guide-title{
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
}
.guide-step-list{
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
}
.guide-step-list li{
  line-height: 1.5;
}
.guide-callout{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(54,102,187,0.08);
  color: var(--accent-2);
  font-weight: 800;
}
.guide-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.guide-faq{
  display: grid;
  gap: 10px;
}
.guide-related{
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.guide-related a{
  font-weight: 800;
  color: var(--accent-2);
}
@media (max-width: 980px){
  .guide-grid,
  .guide-grid-3,
  .guide-overview{
    grid-template-columns: 1fr;
  }
}

/* ----------------------------
   Admin console refresh
----------------------------- */

.admin-page{
  --bg: #f6f7f4;
  --card: #ffffff;
  --text: #0b1b3a;
  --muted: #55637a;
  --accent: #3666bb;
  --accent-2: #163a7a;
  --border: rgba(11, 27, 58, 0.12);
  --shadow: 0 18px 50px rgba(11, 27, 58, 0.12);
  --shadow-soft: 0 14px 38px rgba(11, 27, 58, 0.10);
  --font-sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg);
}

.admin-page .content{
  position: relative;
}

.admin-shell{
  width: min(1320px, 94vw);
  margin: 24px auto 80px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  position: relative;
}

.admin-shell::before{
  content:"";
  position:absolute;
  inset: -40px -20px auto -40px;
  height: 420px;
  background:
    radial-gradient(320px 200px at 15% 30%, rgba(54, 102, 187, 0.18), rgba(246, 247, 244, 0)),
    radial-gradient(360px 240px at 80% 0%, rgba(22, 58, 122, 0.14), rgba(246, 247, 244, 0));
  z-index: -1;
}

.admin-rail{
  position: sticky;
  top: 18px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-rail-card{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.admin-title{
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
}

.admin-nav{
  display: grid;
  gap: 8px;
}

.admin-nav a{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(11, 27, 58, 0.08);
  background: rgba(255,255,255,0.7);
  font-weight: 700;
  color: var(--muted);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), color 220ms var(--ease-out);
}

.admin-nav a:hover{
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(11, 27, 58, 0.12);
}

.admin-rail-actions{
  display: grid;
  gap: 10px;
}

.admin-main{
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.admin-section{
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(11, 27, 58, 0.10);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-soft);
}

.admin-section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.admin-stats .stat{
  background: rgba(54, 102, 187, 0.08);
  border: 1px solid rgba(11, 27, 58, 0.08);
  border-radius: 18px;
  padding: 14px 16px;
}

.admin-grid{
  display: grid;
  gap: 16px;
}

.admin-grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.admin-split > *{
  min-width: 0;
}

.admin-form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.admin-span-full{
  grid-column: 1 / -1;
}

.admin-stack{
  display: grid;
  gap: 16px;
  margin-top: 16px;
  grid-template-columns: 1fr;
}

.admin-stack-lg{
  display: grid;
  gap: 20px;
}

.admin-page .card{
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.admin-page #drawList{
  grid-template-columns: 1fr;
  min-width: 0;
}

.admin-draw-card{
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  overflow: visible;
  container-type: inline-size;
}

.admin-draw-card .meta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(54, 102, 187, 0.06);
  border: 1px solid rgba(11, 27, 58, 0.08);
  font-size: 12px;
}

.admin-draw-card .meta strong{
  font-weight: 800;
  color: var(--text);
}

.admin-draw-fields{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
  min-width: 0;
}

.admin-draw-fields .field{
  min-width: 0;
}

.admin-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.admin-divider{
  height: 1px;
  background: rgba(11,27,58,0.12);
  margin: 18px 0;
}
.admin-xp-preview{
  margin-top: 12px;
}
.admin-xp-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.admin-xp-grid strong{
  display:block;
  font-size: 14px;
  color: var(--text);
  font-weight: 900;
}

.admin-card-warn{
  border-color: rgba(214, 120, 46, 0.4);
  background: linear-gradient(140deg, rgba(255, 243, 227, 0.9), rgba(255,255,255,0.95));
}

.admin-card-soft{
  background: rgba(245, 248, 248, 0.9);
}

.admin-ledger-row{
  min-width: 0;
}

.admin-ledger-meta > div{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-ledger-break{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-ledger-json{
  border: 1px solid rgba(11, 27, 58, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.64);
  padding: 8px 10px;
}

.admin-ledger-json summary{
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.admin-ledger-json pre{
  margin: 10px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

/* Admin split-mode polish */
.admin-page .admin-section[hidden]{
  display: none !important;
}

.admin-shell{
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 22px;
}

.admin-rail-card{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.96), rgba(231,240,255,0.74)),
    rgba(255,255,255,0.82);
  border-color: rgba(54,102,187,0.22);
}

.admin-mode-switch{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.22);
  background: linear-gradient(155deg, rgba(255,255,255,0.96), rgba(238,244,255,0.84));
  box-shadow: var(--shadow-soft);
}

.admin-mode-btn{
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(255,255,255,0.86);
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  border-radius: 12px;
  min-height: 38px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.admin-mode-btn:hover{
  color: var(--text);
  border-color: rgba(54,102,187,0.34);
}

.admin-mode-btn.is-active{
  color: #ffffff;
  border-color: rgba(255,255,255,0.26);
  background: linear-gradient(138deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 26px rgba(54,102,187,0.30);
}

.admin-mode-btn:focus-visible{
  outline: 2px solid rgba(54,102,187,0.42);
  outline-offset: 2px;
}

.admin-nav{
  gap: 7px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(158deg, rgba(255,255,255,0.93), rgba(244,249,255,0.85));
  box-shadow: var(--shadow-soft);
}

.admin-nav-group{
  margin: 5px 2px 3px;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-nav a{
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(54,102,187,0.14);
  background: rgba(255,255,255,0.86);
  color: #435571;
  box-shadow: none;
}

.admin-nav a:hover{
  background: rgba(237,245,255,0.92);
  border-color: rgba(54,102,187,0.30);
}

.admin-nav a.is-active{
  color: var(--accent-2);
  border-color: rgba(54,102,187,0.40);
  background:
    linear-gradient(142deg, rgba(255,255,255,0.98), rgba(226,238,255,0.86)),
    rgba(255,255,255,0.92);
  box-shadow: inset 3px 0 0 rgba(54,102,187,0.56);
}

.admin-nav a[hidden],
.admin-nav-group[hidden]{
  display: none !important;
}

.admin-main{
  gap: 22px;
}

.admin-section{
  border-color: rgba(54,102,187,0.16);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.96), rgba(246,250,255,0.86)),
    rgba(255,255,255,0.88);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(11,27,58,0.09);
}

.admin-mode-operational .admin-section[data-admin-part="operational"]{
  border-color: rgba(54,102,187,0.30);
}

.admin-mode-extra .admin-section[data-admin-part="extra"]{
  border-color: rgba(31,107,79,0.26);
}

@media (max-width: 1200px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-rail{ position: relative; top: auto; }
}

@media (max-width: 980px){
  .admin-mode-switch{
    grid-template-columns: 1fr;
  }

  .admin-nav{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .admin-nav-group{
    grid-column: 1 / -1;
  }

  .admin-split,
  .admin-grid-2{
    grid-template-columns: 1fr;
  }
  .admin-section{ padding: 18px; }
}

/* -------------------------------------------------------------------
   Homepage winners rebuild (mobile-first stable)
------------------------------------------------------------------- */

.home-winners-v3-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

.home-winners-v3-copy{
  min-width: 0;
}

.home-winners-v3-shell{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(54,102,187,0.22);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.96), rgba(238,245,255,0.82)),
    rgba(255,255,255,0.92);
  box-shadow: 0 16px 34px rgba(11,27,58,0.12);
  padding: 14px;
}

.home-winners-v3-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.home-winners-v3-note{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.home-winners-v3-host{
  min-width: 0;
}

.home-winners-v3-card{
  display: grid;
  gap: 11px;
  min-width: 0;
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.18);
  background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(239,247,255,0.86));
  padding: 14px;
}

.home-winners-v3-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.home-winners-v3-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.24);
  background: rgba(255,255,255,0.88);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.home-winners-v3-badge.is-social{
  border-color: rgba(31,107,79,0.28);
  background: rgba(31,107,79,0.08);
  color: #1f6b4f;
}

.home-winners-v3-updated{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.home-winners-v3-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

.home-winners-v3-sub{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.48;
}

.home-winners-v3-image{
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(54,102,187,0.2);
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.26), rgba(11,27,58,0.06)),
    var(--home-winner-image, url("../assets/FOLLOWER GIVEAWAY.jpg")) center/cover no-repeat;
}

.home-winners-v3-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.home-winners-v3-entry{
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.92);
}

.home-winners-v3-entry-name{
  font-size: clamp(22px, 2.9vw, 30px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--accent-2);
  overflow-wrap: anywhere;
}

.home-winners-v3-entry-detail{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.home-winners-v3-action{
  justify-self: start;
  min-height: 44px;
}

.home-winners-v3-loading{
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.84);
  padding: 13px;
  display: grid;
  gap: 8px;
}

.home-winners-v3-loading-line{
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(11,27,58,0.08), rgba(11,27,58,0.16), rgba(11,27,58,0.08));
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}

.home-winners-v3-loading-line.short{
  width: 42%;
}

@media (max-width: 760px){
  .home-winners-v3-head{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
  }

  .home-winners-v3-head > .btn{
    width: 100%;
    justify-content: center;
  }

  .home-winners-v3-shell{
    border-radius: 18px;
    padding: 12px;
  }

  .home-winners-v3-meta{
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .home-winners-v3-note{
    font-size: 11px;
    line-height: 1.35;
  }

  .home-winners-v3-card{
    padding: 12px;
    border-radius: 16px;
    gap: 10px;
  }

  .home-winners-v3-updated{
    width: 100%;
    font-size: 11px;
  }

  .home-winners-v3-title{
    font-size: clamp(22px, 9vw, 34px);
  }

  .home-winners-v3-sub{
    font-size: 13px;
    line-height: 1.42;
  }

  .home-winners-v3-image{
    max-height: 220px;
  }

  .home-winners-v3-entry{
    padding: 10px 10px;
  }

  .home-winners-v3-entry-name{
    font-size: clamp(18px, 8vw, 27px);
  }

  .home-winners-v3-entry-detail{
    font-size: clamp(14px, 4.8vw, 16px);
  }

  .home-winners-v3-action{
    width: 100%;
    justify-content: center;
  }
}

/* Rewards & Incentives */
.basket-promo{
  width:100%;
  display:grid;
  gap:8px;
  margin-bottom:10px;
}
.basket-promo-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.rewards-card{
  display:grid;
  gap:12px;
}
#rewardsRoot .account-v2-grid-2{
  align-items: stretch;
}
#rewardsRoot .rewards-card{
  align-content: start;
}
.rewards-keyline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.rewards-keyline .pill{
  border-color: rgba(54,102,187,0.22);
  background: rgba(54,102,187,0.10);
  color: var(--accent-2);
}
.account-info-fold{
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  overflow:hidden;
}
.account-info-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-bottom: 1px solid transparent;
  padding:12px 14px;
  text-align:left;
  background: rgba(255,255,255,0.44);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.35;
  transition: background 180ms var(--ease-out), border-color 260ms var(--ease-out);
}
.account-info-toggle:hover,
.account-info-toggle:focus-visible{
  background: rgba(54,102,187,0.14);
}
.account-info-toggle:focus-visible{
  outline: 2px solid rgba(54,102,187,0.38);
  outline-offset: -2px;
}
.account-info-toggle-trail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.account-info-chevron{
  width: 9px;
  height: 9px;
  display:inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 220ms var(--ease-out);
}
.account-info-wrap{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease-out);
}
.account-info-body{
  min-height:0;
  overflow:hidden;
  display:grid;
  gap:12px;
  padding:0 12px;
  opacity:0;
  transform: translateY(-8px);
  transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out), padding 280ms var(--ease-out);
}
.account-info-fold.is-open .account-info-toggle{
  border-bottom-color: var(--line);
}
.account-info-fold.is-open .account-info-wrap{
  grid-template-rows: 1fr;
}
.account-info-fold.is-open .account-info-body{
  padding:12px;
  opacity:1;
  transform: translateY(0);
}
.account-info-fold.is-open .account-info-chevron{
  transform: rotate(225deg);
}
.rewards-referral-box{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}
.rewards-list{
  display:grid;
  gap:8px;
}
.rewards-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.rewards-section-title{
  margin:0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--accent-2);
}
.rewards-section-sub{
  margin:0;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.rewards-empty-state{
  border: 1px dashed rgba(11,27,58,0.22);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.58);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.rewards-store-credit-box{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  display:grid;
  gap:10px;
}
.rewards-store-credit-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.rewards-store-credit-meta span{
  border:1px solid rgba(11,27,58,0.10);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.72);
  font-weight: 800;
}
.rewards-store-credit-meta strong{
  color: var(--accent-2);
}
.rewards-store-credit-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.rewards-promo-item,
.rewards-store-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,.06);
}
.rewards-credit-form{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  display:grid;
  gap:8px;
}
.rewards-credit-form .field-label{
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 900;
}
.rewards-credit-row{
  display:grid;
  grid-template-columns:1fr 90px auto;
  gap:8px;
}
.rewards-status{
  border: 1px solid rgba(11,27,58,0.12);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.rewards-status:empty{
  display:none;
}
.rewards-status[data-state="info"]{
  border-color: rgba(54,102,187,0.24);
  background: rgba(54,102,187,0.08);
  color: var(--accent-2);
}
.rewards-status[data-state="success"]{
  border-color: rgba(31,107,79,0.26);
  background: rgba(31,107,79,0.10);
  color: #1f6b4f;
}
.rewards-status[data-state="warning"]{
  border-color: rgba(171,118,0,0.28);
  background: rgba(171,118,0,0.10);
  color: #8a6000;
}
.rewards-status[data-state="error"]{
  border-color: rgba(163,61,61,0.28);
  background: rgba(163,61,61,0.10);
  color: #8d2f2f;
}
.rewards-event-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  border-bottom:1px dashed var(--line);
  padding:6px 0;
}
@media (max-width: 780px){
  .account-info-toggle{
    align-items:flex-start;
  }
  .account-info-toggle-trail{
    margin-left:auto;
    padding-top:2px;
  }
  .rewards-promo-item,
  .rewards-store-item{
    flex-direction:column;
    align-items:flex-start;
  }
  .rewards-store-credit-form{
    grid-template-columns:1fr;
  }
  .rewards-credit-row,
  .basket-promo-row{
    grid-template-columns:1fr;
  }
}

/* -------------------------------------------------------------------
   Homepage immersive redesign (How, Skill Campaign, Winners, Trust)
------------------------------------------------------------------- */

.section-how{
  padding-top: 52px;
}

.how-journey{
  display: grid;
  gap: 16px;
}

.how-journey-head{
  max-width: 720px;
}

.how-journey-card{
  position: relative;
  padding: 26px 24px 22px;
  border-radius: 24px;
  border: 1px solid rgba(54,102,187,0.24);
  background:
    linear-gradient(90deg, #2b67dc, #1a4aa6) top/100% 6px no-repeat,
    linear-gradient(150deg, rgba(255,255,255,0.97), rgba(243,247,255,0.93));
  box-shadow: 0 24px 52px rgba(11,27,58,0.14);
  overflow: hidden;
}

.how-journey-card::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: linear-gradient(145deg, #2b67dc 0%, #1a4aa6 74%);
  z-index: 2;
  pointer-events: none;
}

.how-journey-card::after{
  content: none;
}

.how-journey-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.how-step-item{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.how-step-item + .how-step-item{
  border-top: 1px solid rgba(54,102,187,0.16);
  padding-top: 14px;
}

.how-step-icon{
  width: 56px;
  height: 56px;
  border-radius: 6px;
  border: 1px solid rgba(54,102,187,0.2);
  background: linear-gradient(150deg, #dbe2eb, #cfd7e2);
  color: #2b67dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.how-step-icon svg{
  width: 26px;
  height: 26px;
}

.how-step-copy{
  min-width: 0;
}

.how-step-copy .h3{
  margin: 0;
  font-size: clamp(27px, 2.4vw, 38px);
  line-height: 1.08;
}

.how-step-copy .sub{
  margin: 6px 0 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.46;
  color: rgba(11,27,58,0.86);
}

.how-step-label{
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2b67dc;
}

.how-journey-actions{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.section-skill-promo{
  padding-top: 28px;
}

.skill-campaign{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 12px 12px;
  border-radius: 20px;
  border: 1px solid rgba(54,102,187,0.14);
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(243,248,255,0.9));
  box-shadow: 0 12px 28px rgba(11,27,58,0.10);
  max-width: 570px;
  margin-inline: auto;
}

.skill-campaign-copy{
  display: grid;
  gap: 10px;
  align-content: start;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}

.skill-campaign-pills{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.skill-campaign-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-campaign-media-wrap{
  display: grid;
  gap: 4px;
  align-content: start;
  order: -1;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}

.skill-campaign-media-kicker{
  margin: 0;
  padding-left: 2px;
}

.skill-campaign-media{
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1755 / 1670;
  border-radius: 18px;
  border: none;
  background: url("../assets/SkillGames.jpg") center/contain no-repeat;
  box-shadow: 0 18px 38px rgba(11,27,58,0.18);
  display: block;
  overflow: hidden;
  margin-inline: auto;
}

.winners-proof-wall{
  border-color: rgba(54,102,187,0.24);
  box-shadow: 0 18px 38px rgba(11,27,58,0.12);
  padding: 14px;
}

.winners-proof-head{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.winners-proof-note{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.winners-proof-wall .winner-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.winners-proof-wall .winner-grid--social-only{
  grid-template-columns: minmax(0, 1fr);
}

.winners-proof-wall .winner-tile{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.20);
  background: linear-gradient(152deg, rgba(255,255,255,0.94), rgba(54,102,187,0.09));
  box-shadow: 0 12px 24px rgba(11,27,58,0.09);
  display: grid;
  gap: 12px;
}

.winners-proof-wall .winner-social-tile{
  border-color: rgba(54,102,187,0.30);
  background:
    linear-gradient(155deg, rgba(235,244,255,0.88), rgba(216,231,255,0.44) 42%, rgba(255,255,255,0.92)),
    rgba(255,255,255,0.94);
}

.winner-tile--featured{
  border-color: rgba(54,102,187,0.36) !important;
  box-shadow: 0 20px 36px rgba(11,27,58,0.15) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(54,102,187,0.14)) !important;
}

.winner-proof-card{
  gap: 12px;
  min-width: 0;
}

.winner-proof-header{
  display: grid;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.winner-proof-status{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.winner-proof-card .winner-proof-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.winner-proof-card .winner-proof-row{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(54,102,187,0.2);
  background: rgba(255,255,255,0.84);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.winner-proof-card .winner-proof-row strong{
  color: var(--accent-2);
}

.winner-verify-chip{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(31,107,79,0.30);
  background: rgba(31,107,79,0.10);
  color: #1f6b4f;
  font-size: 11px;
  font-weight: 900;
}

.winner-verify-chip::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #1f6b4f;
}

.winner-social-visual{
  border-radius: 14px;
  aspect-ratio: 1800 / 860;
  min-height: 210px;
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(54,102,187,0.2);
  justify-self: stretch;
  background:
    linear-gradient(120deg, rgba(11,27,58,0.32), rgba(11,27,58,0.08)),
    var(--winner-proof-image, url("../assets/FOLLOWER GIVEAWAY.jpg")) center/cover no-repeat;
}

.winner-proof-sub{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.winner-proof-results{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.winner-proof-result{
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.16);
  background: rgba(255,255,255,0.88);
  padding: 11px 12px;
  min-width: 0;
}

.winner-proof-result-handle{
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--accent-2);
  overflow-wrap: anywhere;
}

.winner-proof-result-prize{
  margin-top: 3px;
  font-size: 17px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.35;
}

.winner-proof-actions{
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 901px){
  .section-winners .winners-shell.winners-proof-wall{
    max-width: 1020px;
    margin-inline: auto;
    padding: 14px;
  }

  .winner-proof-header{
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .winner-proof-card .winner-proof-meta{
    justify-content: flex-end;
  }

  .winner-proof-results{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .winner-social-visual{
    aspect-ratio: 1800 / 760;
    max-height: 330px;
    width: min(100%, 782px);
    justify-self: center;
  }
}

.legal-hub{
  border-color: rgba(54,102,187,0.26);
  box-shadow: 0 24px 52px rgba(11,27,58,0.16);
}

.legal-hub-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 14px;
  align-items: start;
}

.legal-seal-slot{
  justify-self: end;
  width: 100%;
  max-width: 230px;
  border-radius: 16px;
  border: 1px solid rgba(54,102,187,0.22);
  background: rgba(255,255,255,0.8);
  padding: 10px;
  text-align: center;
  display: grid;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.legal-seal-slot img{
  width: 100%;
  max-width: 110px;
  justify-self: center;
  display: block;
}

.legal-hub-grid{
  margin-top: 16px;
}

.legal-hub-card{
  min-height: 0;
  display: grid;
  gap: 8px;
}

.legal-more{
  margin-top: 2px;
  border-radius: 12px;
  border: 1px solid rgba(54,102,187,0.18);
  background: rgba(255,255,255,0.68);
}

.legal-more summary{
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 900;
  color: var(--accent-2);
  position: relative;
  padding-right: 30px;
}

.legal-more summary::-webkit-details-marker{
  display: none;
}

.legal-more summary::after{
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.legal-more[open] summary::after{
  content: "-";
}

.legal-more-body{
  padding: 0 10px 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 700;
}

.legal-hub-actions{
  border-top: 1px solid rgba(54,102,187,0.16);
  padding-top: 14px;
}

@media (max-width: 1180px){
  .how-step-copy .h3{
    font-size: clamp(24px, 3.2vw, 34px);
  }
  .winners-proof-wall .winner-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-hub-head{
    grid-template-columns: 1fr;
  }
  .legal-seal-slot{
    justify-self: start;
    max-width: 320px;
  }
}

@media (max-width: 900px){
  .how-journey-card{
    padding: 22px 18px 18px;
  }
  .how-journey-head .sub{
    font-size: 15px;
    line-height: 1.55;
  }
  .how-step-item{
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }
  .how-step-icon{
    width: 52px;
    height: 52px;
  }
  .how-step-copy .h3{
    font-size: clamp(22px, 5.4vw, 30px);
  }
  .how-step-copy .sub{
    font-size: 14px;
    line-height: 1.52;
  }
  .skill-campaign{
    grid-template-columns: 1fr;
    padding: 10px 12px 12px;
  }
  .skill-campaign-media-wrap{
    order: -1;
  }
}

@media (max-width: 680px){
  .skill-campaign-media-wrap{
    gap: 4px;
  }
  .skill-campaign-media{
    border-radius: 16px;
  }
}

@media (max-width: 680px){
  .winners-proof-wall{
    overflow-x: clip;
  }
  .how-journey-card{
    padding: 18px 14px 16px;
    border-radius: 20px;
  }
  .how-journey-card::before{
    width: 30px;
    height: 30px;
  }
  .how-journey-head .sub{
    font-size: 14px;
    line-height: 1.5;
  }
  .how-step-item{
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
  }
  .how-step-item + .how-step-item{
    padding-top: 12px;
  }
  .how-step-icon{
    width: 46px;
    height: 46px;
  }
  .how-step-icon svg{
    width: 22px;
    height: 22px;
  }
  .how-step-copy .h3{
    font-size: clamp(20px, 7vw, 28px);
    line-height: 1.1;
  }
  .how-step-copy .sub{
    font-size: 13.5px;
    line-height: 1.45;
  }
  .how-step-label{
    font-size: 10px;
    margin-bottom: 3px;
  }
  .how-journey-actions{
    flex-direction: column;
    align-items: stretch;
    margin-top: 16px;
  }
  .how-journey-actions .btn{
    width: 100%;
  }
  .skill-campaign-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .skill-campaign-actions .btn{
    width: 100%;
  }
  .winners-proof-head{
    align-items: flex-start;
  }
  .winners-proof-wall .winner-grid{
    grid-template-columns: 1fr;
  }
  .winner-proof-card .winner-proof-meta{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .winner-proof-card .winner-proof-row{
    width: 100%;
    justify-content: flex-start;
  }
  .winner-proof-card .winner-proof-meta .winner-social-link{
    width: 100%;
    justify-content: center;
  }
  .winner-proof-result-handle{
    font-size: 22px;
  }
  .winner-proof-result-prize{
    font-size: 16px;
  }
  .winner-social-visual{
    min-height: 180px;
    margin-inline: auto;
  }
  .winner-proof-actions{
    justify-content: stretch;
  }
  .winner-proof-actions .btn{
    width: 100%;
    justify-content: center;
  }
  .legal-hub-pills{
    gap: 8px;
  }
}

@media (max-width: 420px){
  .winners-proof-wall .winner-tile{
    padding: 14px;
  }
  .winner-proof-result-handle{
    font-size: 19px;
  }
  .winner-proof-result-prize{
    font-size: 14.5px;
  }
  .winner-social-visual{
    min-height: 165px;
  }
}

/* Mobile polish: compact nav + cleaner winner feed */
@media (max-width: 680px){
  .nav{
    --nav-main-height: 54px;
    --nav-strip-height: 28px;
  }

  .nav-inner{
    gap: 8px;
    padding: 6px 0;
  }

  .nav-toggle{
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .brand{
    gap: 7px;
  }

  .brand-logo{
    height: 21px;
  }

  .brand-text{
    font-size: clamp(13px, 4vw, 15px);
  }

  .nav-main-actions{
    gap: 6px;
  }

  .nav-account-btn,
  .nav-basket-btn,
  .nav-wallet-btn{
    min-width: 36px;
    min-height: 36px;
  }

  .nav-account-btn svg,
  .nav-basket-btn svg,
  .nav-wallet-btn svg{
    width: 16px;
    height: 16px;
  }

  .nav-basket-btn .badge{
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    top: -2px;
    right: -2px;
  }

  .nav-wallet-panel{
    right: -10px;
    width: min(94vw, 302px);
    padding: 12px;
  }

  .nav-announce-inner{
    gap: 3px;
    padding: 4px 0 5px;
  }

  .nav-announce-item{
    padding: 0 8px;
    font-size: 10px;
  }

  .nav-announce-dots{
    gap: 5px;
    min-height: 6px;
  }

  .nav-announce-dot{
    width: 6px;
    height: 6px;
  }

  .nav-announce-dot.is-active{
    width: 13px;
  }

  .section-winners{
    padding: 38px 0 42px;
  }

  .winners-top{
    gap: 12px;
    align-items: flex-start;
  }

  .winners-cta{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: stretch;
  }

  .winners-cta .btn,
  .winners-cta .pill{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .winners-shell.winners-proof-wall{
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .winners-proof-head{
    gap: 8px;
    margin-bottom: 10px;
  }

  .winners-proof-note{
    font-size: 11px;
    line-height: 1.35;
    max-width: 36ch;
  }

  .winners-proof-wall .winner-tile{
    padding: 13px;
    border-radius: 16px;
    gap: 10px;
  }

  .winner-proof-header{
    gap: 8px;
  }

  .winner-proof-status{
    gap: 6px;
  }

  .winner-proof-card .winner-proof-meta{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }

  .winner-proof-card .winner-proof-row{
    width: auto;
    max-width: 100%;
    padding: 5px 9px;
    font-size: 11px;
  }

  .winner-proof-card .winner-proof-meta .winner-social-link{
    width: auto;
    max-width: 100%;
    justify-content: center;
  }

  .winner-verify-chip{
    gap: 5px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .winner-verify-chip::before{
    width: 6px;
    height: 6px;
  }

  .winner-proof-sub{
    font-size: 13px;
    line-height: 1.45;
  }

  .winner-social-visual{
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: 220px;
  }

  .winner-proof-result{
    padding: 10px 11px;
    border-radius: 11px;
  }

  .winner-proof-result-handle{
    font-size: clamp(20px, 6.2vw, 28px);
    line-height: 1.1;
  }

  .winner-proof-result-prize{
    margin-top: 2px;
    font-size: clamp(15px, 4.7vw, 17px);
    line-height: 1.3;
  }

  .winner-proof-actions .btn{
    min-height: 46px;
    border-radius: 12px;
  }
}

@media (max-width: 420px){
  .winner-proof-card .winner-proof-row{
    font-size: 10px;
  }

  .winners-proof-note{
    font-size: 10.5px;
  }

  .winner-social-visual{
    max-height: 190px;
  }

  .winner-proof-result-handle{
    font-size: 18px;
  }

  .winner-proof-result-prize{
    font-size: 14px;
  }
}

/* ---------------------------------
   NeuroGrid V2 Mobile Game Rework
---------------------------------- */
body.neurogrid-v2-page{
  --neuro-shell-bg: linear-gradient(165deg, rgba(249,252,255,0.97), rgba(229,239,255,0.9));
  --neuro-shell-border: rgba(24,70,147,0.28);
  --neuro-panel-bg: rgba(255,255,255,0.92);
  --neuro-panel-border: rgba(17,47,97,0.14);
  --neuro-hud-bg: linear-gradient(150deg, rgba(23,63,133,0.95), rgba(14,40,92,0.96));
  --neuro-hud-text: #ffffff;
  --neuro-hud-sub: rgba(219,231,255,0.78);
  --neuro-run-dock-h: 0px;
}

.neurogrid-v2-page .neuro-v2-main{
  padding-bottom: 26px;
}

body.neurogrid-v2-page.neuro-run-active .neuro-v2-main{
  padding-bottom: calc(var(--neuro-run-dock-h, 0px) + 18px);
}

.neurogrid-v2-page .section.neuro-v2-hero{
  padding: 18px 0 8px;
}

.neurogrid-v2-page .neuro-v2-hero-strip{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.2);
  background: linear-gradient(155deg, rgba(255,255,255,0.96), rgba(227,238,255,0.86));
  box-shadow: 0 14px 28px rgba(11,27,58,0.1);
}

.neurogrid-v2-page .neuro-v2-hero-main .h2{
  margin: 2px 0 4px;
  font-size: clamp(22px, 4.2vw, 34px);
}

.neurogrid-v2-page .neuro-v2-hero-main .sub{
  margin: 0;
}

.neurogrid-v2-page .neuro-v2-hero-side{
  display: grid;
  gap: 8px;
  justify-items: end;
}

.neurogrid-v2-page .neuro-v2-hero-info{
  width: min(360px, 100%);
  border: 1px solid rgba(17,47,97,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.88);
  padding: 8px 10px;
}

.neurogrid-v2-page .neuro-v2-hero-info summary{
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.neurogrid-v2-page .neuro-v2-hero-info p{
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.neurogrid-v2-page .section.neuro-v2-game-wrap{
  padding: 8px 0 22px;
}

.neurogrid-v2-page .skill-game.neuro-game.neuro-v2-game{
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--neuro-shell-border);
  background: var(--neuro-shell-bg);
  box-shadow: 0 20px 36px rgba(11,27,58,0.14);
}

.neurogrid-v2-page .neuro-topbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.neurogrid-v2-page .neuro-topbar-copy{
  min-width: 0;
}

.neurogrid-v2-page .neuro-topbar-copy .h3{
  margin: 4px 0 0;
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.02;
}

.neurogrid-v2-page .neuro-topbar-copy .skill-integrity{
  margin-top: 5px;
  font-size: 12px;
}

.neurogrid-v2-page .neuro-topbar-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.neurogrid-v2-page .neuro-meta-grid.neuro-hud-core{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.neurogrid-v2-page .neuro-hud-core .neuro-hud-item{
  border: 1px solid rgba(15,42,92,0.4);
  background: var(--neuro-hud-bg);
  color: var(--neuro-hud-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 14px rgba(10,31,72,0.2);
}

.neurogrid-v2-page .neuro-hud-core .neuro-hud-item::before{
  display: none;
}

.neurogrid-v2-page .neuro-hud-core .neuro-hud-item span{
  color: var(--neuro-hud-sub);
  font-size: 10px;
  letter-spacing: 0.09em;
  font-weight: 800;
}

.neurogrid-v2-page .neuro-hud-core .neuro-hud-item strong{
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(18px, 3.4vw, 28px);
  line-height: 0.95;
}

.neurogrid-v2-page .neuro-hud-aux{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.neurogrid-v2-page .neuro-hud-aux .pill{
  background: rgba(13,39,86,0.12);
  border: 1px solid rgba(16,48,102,0.22);
  color: #153a72;
  font-size: 11px;
}

.neurogrid-v2-page .neuro-hud-aux .pill strong{
  margin-left: 4px;
  color: #0f2b58;
}

.neurogrid-v2-page .neuro-stage-strip{
  gap: 6px;
}

.neurogrid-v2-page .neuro-stage-chip{
  justify-content: center;
  background: rgba(255,255,255,0.86);
  border-color: rgba(15,42,92,0.16);
}

.neurogrid-v2-page .neuro-playfield{
  border: 1px solid rgba(15,42,92,0.24);
  background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(230,240,255,0.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  padding: 10px;
}

.neurogrid-v2-page .neuro-round-banner{
  min-height: 30px;
}

.neurogrid-v2-page .neuro-grid-shell{
  border: 1px solid rgba(10,34,77,0.2);
  background: radial-gradient(circle at 50% 0, rgba(121,176,255,0.28), rgba(255,255,255,0.96) 56%);
}

.neurogrid-v2-page .neuro-grid{
  min-height: 250px;
}

.neurogrid-v2-page .neuro-action-dock{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.neurogrid-v2-page .neuro-action-dock.is-hidden{
  display: none;
}

.neurogrid-v2-page #neuroStartBtn,
.neurogrid-v2-page #neuroPracticeBtn,
.neurogrid-v2-page #neuroSubmitBtn{
  grid-column: 1 / -1;
}

.neurogrid-v2-page .neuro-action-dock .btn{
  min-height: 46px;
  font-size: 14px;
}

.neurogrid-v2-page .neuro-status-stack{
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--neuro-panel-border);
  background: var(--neuro-panel-bg);
}

.neurogrid-v2-page .neuro-status-stack #neuroStatus{
  margin: 0;
  font-size: 13px;
}

.neurogrid-v2-page .neuro-status-stack #neuroHint{
  margin: 0;
  font-size: 12px;
}

.neurogrid-v2-page .neuro-v2-sheet-launcher{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.neurogrid-v2-page .neuro-v2-sheet-launcher .btn{
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 999px;
  border-color: rgba(16,48,102,0.24);
  background: rgba(255,255,255,0.9);
  color: #153a72;
}

.neurogrid-v2-page .neuro-v2-sheet-launcher .btn.is-active{
  background: rgba(22,61,130,0.14);
  border-color: rgba(22,61,130,0.38);
}

.neurogrid-v2-page .neuro-drawer,
.neurogrid-v2-page .neuro-sheet-overlay{
  position: fixed;
  inset: 0;
  z-index: 88;
  display: grid;
  align-items: end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.neurogrid-v2-page .neuro-drawer.is-open,
.neurogrid-v2-page .neuro-sheet-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.neurogrid-v2-page .neuro-drawer[hidden],
.neurogrid-v2-page .neuro-sheet-overlay[hidden]{
  display: none;
}

.neurogrid-v2-page .neuro-drawer-backdrop,
.neurogrid-v2-page .neuro-sheet-backdrop{
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(7,19,44,0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.neurogrid-v2-page .neuro-drawer-panel,
.neurogrid-v2-page .neuro-sheet{
  position: relative;
  z-index: 1;
  width: min(860px, calc(100% - 14px));
  margin: 0 auto 8px;
  border-radius: 18px;
  border: 1px solid rgba(16,48,102,0.3);
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(225,237,255,0.9));
  box-shadow: 0 22px 44px rgba(11,27,58,0.24);
  transform: translateY(22px);
  transition: transform 200ms var(--ease-out);
  max-height: min(84vh, 820px);
  overflow: hidden;
}

.neurogrid-v2-page .neuro-drawer.is-open .neuro-drawer-panel,
.neurogrid-v2-page .neuro-sheet-overlay.is-open .neuro-sheet.is-open{
  transform: translateY(0);
}

.neurogrid-v2-page .neuro-sheet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(17,47,97,0.12);
}

.neurogrid-v2-page .neuro-sheet-head .h3{
  margin: 0;
  font-size: 21px;
}

.neurogrid-v2-page .neuro-sheet-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(17,47,97,0.16);
  background: rgba(255,255,255,0.92);
  color: #0e2f63;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.neurogrid-v2-page .neuro-sheet-body{
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
  overflow: auto;
  display: grid;
  gap: 10px;
}

.neurogrid-v2-page .neuro-summary-details{
  margin-top: 8px;
  border: 1px solid rgba(17,47,97,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.86);
  padding: 10px 12px;
}

.neurogrid-v2-page .neuro-summary-details summary{
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #15418a;
}

.neurogrid-v2-page .neuro-summary-details-body{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.neurogrid-v2-page .neuro-summary-section{
  border: 1px solid rgba(17,47,97,0.12);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.76);
}

.neurogrid-v2-page .neuro-summary-section .sub{
  margin: 6px 0 0;
}

.neurogrid-v2-page .neuro-sticky-actions{
  z-index: 72;
  left: 50%;
  width: min(860px, calc(100vw - 8px));
  bottom: calc(8px + env(safe-area-inset-bottom));
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(250,253,255,0.96), rgba(219,234,255,0.94));
  border-color: rgba(18,51,104,0.26);
  box-shadow: 0 16px 30px rgba(11,27,58,0.26);
}

.neurogrid-v2-page .neuro-sticky-info{
  align-items: center;
  justify-content: space-between;
}

.neurogrid-v2-page .neuro-sticky-selected{
  min-width: 0;
}

.neurogrid-v2-page .neuro-sticky-hint{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #173b77;
  letter-spacing: 0.01em;
}

.neurogrid-v2-page .neuro-sticky-buttons{
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 8px;
}

.neurogrid-v2-page .neuro-sticky-buttons .btn{
  min-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  font-size: 14px;
}

.neurogrid-v2-page .neuro-sticky-submit{
  font-size: 15px;
}

body.neurogrid-v2-page.neuro-run-input .neuro-sticky-actions{
  gap: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}

body.neurogrid-v2-page.neuro-run-input .neuro-sticky-hint{
  display: none;
}

.neurogrid-v2-page .neuro-sticky-actions[data-phase="preview"] #neuroStickySubmitBtn{
  opacity: 0.86;
}

.neurogrid-v2-page .neuro-sticky-actions[data-phase="preview"] .neuro-sticky-ring span{
  font-size: 9px;
}

body.neurogrid-v2-page.neuro-run-active .section.neuro-v2-hero{
  display: none;
}

body.neurogrid-v2-page.neuro-run-active .neuro-v2-sheet-launcher{
  display: none;
}

body.neurogrid-v2-page.neuro-run-active .neuro-action-dock{
  display: none;
}

body.neurogrid-v2-page.neuro-run-active .neuro-topbar-copy .skill-integrity{
  display: none;
}

body.neurogrid-v2-page.neuro-run-active .nav{
  box-shadow: 0 8px 20px rgba(7,20,44,0.18);
}

body.neurogrid-v2-page.neuro-run-active .nav .nav-inner{
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

body.neurogrid-v2-page.neuro-run-active .nav .brand-logo{
  width: 34px;
  height: 34px;
}

body.neurogrid-v2-page.neuro-run-active .nav .brand-text{
  font-size: 17px;
}

body.neurogrid-v2-page.neuro-run-active .nav .nav-links{
  gap: 10px;
}

body.neurogrid-v2-page.neuro-run-active .nav .nav-links > a:not(.btn){
  opacity: 0.78;
  font-size: 14px;
}

body.neurogrid-v2-page.neuro-run-active .footer{
  opacity: 0.34;
  pointer-events: none;
}

@media (max-width: 980px){
  .neurogrid-v2-page .neuro-v2-hero-strip{
    grid-template-columns: 1fr;
  }

  .neurogrid-v2-page .neuro-v2-hero-side{
    justify-items: start;
  }

  .neurogrid-v2-page .neuro-meta-grid.neuro-hud-core{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .neurogrid-v2-page .neuro-hud-core .neuro-hud-item:last-child{
    grid-column: span 3;
  }

  .neurogrid-v2-page .neuro-sheet,
  .neurogrid-v2-page .neuro-drawer-panel{
    width: calc(100% - 10px);
    margin-bottom: 5px;
  }
}

@media (max-width: 720px){
  .neurogrid-v2-page .section.neuro-v2-game-wrap{
    padding-top: 4px;
  }

  .neurogrid-v2-page .skill-game.neuro-game.neuro-v2-game{
    padding: 10px;
    border-radius: 16px;
    gap: 10px;
  }

  .neurogrid-v2-page .neuro-topbar{
    align-items: center;
  }

  .neurogrid-v2-page .neuro-topbar-copy .h3{
    font-size: clamp(20px, 7vw, 30px);
  }

  .neurogrid-v2-page .neuro-meta-grid.neuro-hud-core{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .neurogrid-v2-page .neuro-hud-core .neuro-hud-item:last-child{
    grid-column: span 2;
  }

  .neurogrid-v2-page .neuro-stage-strip{
    grid-template-columns: 1fr;
  }

  .neurogrid-v2-page .neuro-grid{
    min-height: 220px;
  }

  body.neurogrid-v2-page.neuro-run-active .neuro-playfield{
    padding: 8px;
    gap: 8px;
  }

  body.neurogrid-v2-page.neuro-run-active .neuro-grid-shell{
    padding: 7px;
  }

  body.neurogrid-v2-page.neuro-run-active .neuro-grid{
    gap: 6px;
    min-height: clamp(164px, calc(100vh - var(--neuro-run-dock-h, 0px) - 292px), 196px);
  }

  .neurogrid-v2-page .neuro-sticky-actions{
    width: calc(100% - 8px);
    border-radius: 14px;
    padding: 7px;
  }

  .neurogrid-v2-page .neuro-sticky-buttons{
    grid-template-columns: 1fr 1fr 1.15fr;
  }
}

@media (max-width: 520px){
  .neurogrid-v2-page .neuro-v2-hero-strip{
    padding: 10px;
    border-radius: 14px;
  }

  .neurogrid-v2-page .neuro-topbar-actions .pill{
    display: none;
  }

  .neurogrid-v2-page .neuro-hud-core .neuro-hud-item strong{
    font-size: 20px;
  }

  .neurogrid-v2-page .neuro-action-dock .btn{
    min-height: 44px;
    font-size: 13px;
  }

  .neurogrid-v2-page .neuro-sheet-head .h3{
    font-size: 18px;
  }

  .neurogrid-v2-page .neuro-sheet-body{
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
  }

  .neurogrid-v2-page .neuro-sticky-buttons .btn{
    font-size: 12px;
    min-height: 46px;
    padding-inline: 8px;
  }

  body.neurogrid-v2-page.neuro-run-active .neuro-grid{
    min-height: clamp(152px, calc(100vh - var(--neuro-run-dock-h, 0px) - 274px), 184px);
  }
}

@media (max-width: 380px){
  .neurogrid-v2-page .neuro-sticky-buttons{
    grid-template-columns: 1fr;
  }

  .neurogrid-v2-page .neuro-sticky-ring{
    width: 48px;
    height: 48px;
  }
}

@media (min-width: 860px){
  .neurogrid-v2-page .neuro-playfield{
    align-items: center;
  }

  .neurogrid-v2-page .neuro-grid-shell{
    width: min(560px, 100%);
    margin-inline: auto;
    padding: 8px;
  }

  .neurogrid-v2-page .neuro-grid{
    max-width: 544px;
    margin-inline: auto;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .neurogrid-v2-page .neuro-sheet-overlay,
  .neurogrid-v2-page .neuro-sheet,
  .neurogrid-v2-page .neuro-drawer,
  .neurogrid-v2-page .neuro-drawer-panel{
    transition: none !important;
    animation: none !important;
  }
}

/* Live Draws page */
.live-draws-page{
  padding-bottom: 12px;
}

.live-draws-hero-copy{
  max-width: 76ch;
}

.live-draws-hero-pills{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-draws-section{
  padding-top: 22px;
}

.live-draws-card{
  padding: clamp(14px, 2vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(54,102,187,0.2);
  background: linear-gradient(155deg, rgba(255,255,255,0.95), rgba(236,245,255,0.86));
  box-shadow: 0 18px 36px rgba(11,27,58,0.12);
  display: grid;
  gap: 16px;
}

.live-draws-card-head{
  display: grid;
  gap: 4px;
}

.live-draws-card-head .h2{
  margin: 0;
}

.live-draws-card-head .sub{
  margin: 0;
}

.live-draws-player-shell{
  display: grid;
  gap: 14px;
}

.live-draws-player-scroll{
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(54,102,187,0.2);
  background: #07142c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.live-draws-player-frame{
  position: relative;
  width: 100%;
  min-width: 400px;
  min-height: 300px;
  aspect-ratio: 16 / 9;
}

.live-draws-player-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.live-draws-fallback{
  min-height: 300px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 20px;
  color: rgba(255,255,255,0.9);
  text-align: center;
}

.live-draws-fallback strong{
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
}

.live-draws-fallback p{
  margin: 0;
  max-width: 56ch;
  color: rgba(224,233,249,0.94);
}

.live-draws-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px){
  .live-draws-card{
    padding: 12px;
    gap: 12px;
  }

  .live-draws-actions{
    display: grid;
    grid-template-columns: 1fr;
  }
}