@font-face {
    font-family: 'JetBrains Mono';
    src: url("/modules/custom/doritos_keycodes_contest/fonts/JetBrainsMono-Regular.woff2") format('woff2'), url("/modules/custom/doritos_keycodes_contest/fonts/JetBrainsMono-Regular.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url("/modules/custom/doritos_keycodes_contest/fonts/JetBrainsMono-Bold.woff2") format('woff2'), url("/modules/custom/doritos_keycodes_contest/fonts/JetBrainsMono-Bold.woff") format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'DrukWide';
    src: url("/modules/custom/doritos_keycodes_contest/fonts/DrukWide-Bold.woff2") format('woff2'), url("/modules/custom/doritos_keycodes_contest/fonts/DrukWide-Bold.woff") format('woff');
    font-weight: bold;
    font-style: normal;
}

/* -----------------------------------------
   GLOBAL BLUR VARIABLE
   Set to empty in Safari — Safari over-amplifies sub-pixel blur on text.
   Use var(--ui-blur) wherever blur(0.25px) appears.
----------------------------------------- */
:root {
    --ui-blur: blur(0.25px);
}
@supports (-webkit-hyphens: auto) {
    :root {
        --ui-blur: ;
    }
}

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* -----------------------------------------
   BASE BODY (no background here anymore)
----------------------------------------- */
body {
    background-color: #000;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'JetBrains Mono', monospace;
    position: relative;
}

/* -----------------------------------------
   FIXED BACKGROUND (replaces background-attachment: fixed)
----------------------------------------- */
 body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -10;
    background-image: url('/modules/custom/doritos_keycodes_contest/images/bg.png');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none;
} 

/* -----------------------------------------
   WIPE TEXTURE (layer 1)
----------------------------------------- */
 body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-image: url('/modules/custom/doritos_keycodes_contest/images/wipe-screen.png');
    background-repeat: repeat;
    background-size: auto;
    mix-blend-mode: overlay;
    pointer-events: none;
} 

/* -----------------------------------------
   NOISE TEXTURE (layer 2)
----------------------------------------- */
 html::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-image: url('/modules/custom/doritos_keycodes_contest/images/noise.png');
    background-repeat: repeat;
    background-size: auto;
    mix-blend-mode: overlay;
    pointer-events: none;
} 


/* ——— Nav ——— */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2.5rem;
}

.nav-logo-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.keycodes-nav {
    color: var(--red, #ED1C24);
    text-shadow: 0 0 8.1px rgba(237, 29, 36, 0.70);
    font-family: "DrukWide", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.nav-logo {
    height: 65px;
    width: 94px;
}

.btn-clean {
    border: 2px solid var(--red, #ED1C24);
    /* red glow */
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    width: 161px;
height: 40px;
color: #FFF;
text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
font-family: "JetBrains Mono";
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: 3.6px;
text-transform: uppercase;
background-color:transparent;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease, visibility 0.3s ease;
}


.btn-clean.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ——— Hero ——— */
.hero {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    padding: clamp(3rem, 6vh, 6rem) 2rem clamp(2rem, 4vh, 4rem);
    gap: clamp(0.75rem, 1.5vh, 1.5rem);
    text-align: center;
    background-size: 100% 100%;
}

.hero-logo {
    height: clamp(70px, 10vh, 110px);
    width: auto;
}

/* ——— Keycodes ——— */
.keycodes-wrap {
    width: 100%;
    will-change: transform;
}

.arrow-keys,
.hero-body,
.hero-logo {
    will-change: opacity;
}

.keycodes {
    display: block;
}

.keycodes-text {
    font-family: 'DrukWide', sans-serif;
    font-weight: bold;
    font-size: clamp(2rem, 9vw, 16vh);
    line-height: 0.9;
    color: #d42b2b;
    white-space: nowrap;
    letter-spacing: -0.01em;
    display: block;
    margin: 0;
    text-shadow: 0 0 12px rgba(237, 29, 36, 0.7), 0 0 24px rgba(237, 29, 36, 0.5), 0 0 36px rgba(237, 29, 36, 0.35);
    filter: blur(0.3px);
}

/* ——— Body copy ——— */
.hero-body {
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(13px, 1.39vw, 19px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: clamp(0.75rem, 2vh, 2rem);
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1.5px 0 #F00;
    filter: var(--ui-blur);
}

.hero-body-cta sup, #prizes-body sup {
    font-weight: 100;
    font-size: 0.8rem;
}

.hero-body-cta {
    display: block;
    opacity: 0;
    animation: heroCtaFadeIn 1s ease forwards;
    animation-delay: 2s;
}

@keyframes heroCtaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ——— Arrow keys ——— */
.arrow-keys {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 1rem;
}

.arrow-row {
    display: flex;
    gap: 4px;
}

.key {
    width: 35px;
    height: 35px;
    border: 2px solid #d42b2b;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.key svg {
    width: 18px;
    height: 18px;
}

/* ——— Video section ——— */
#video-section {
    position: relative;
}

#video-section.is-active {
    z-index: 9;
}

.video-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}


#video-canvas {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.video-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 220px;
    background: radial-gradient(ellipse 90% 100% at 50% 100%, rgba(180, 20, 20, 0.75) 0%, rgba(130, 10, 10, 0.35) 45%, transparent 72%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

/* ——— Prizes section ——— */
#prizes-section {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  padding: 14rem 4rem 4rem 4rem;
}

.prizes-video {
  width: 100%;
  height: 204px;
  object-fit: cover;
  display: block;
  mix-blend-mode: overlay;
}

/* Text hidden until flicker completes */
#prizes-heading,
#prizes-label,
#prizes-body,
#prizes-disclaimer-text {
  opacity: 0;
}

/* Border flicker animation */
@keyframes borderFlicker {
  0%          { border-color: rgba(255,255,255,0.05); }
  5%          { border-color: rgba(237,28,36,0.9); }
  7%          { border-color: rgba(255,255,255,0.05); }
  22%         { border-color: rgba(255,255,255,0.05); }
  24%         { border-color: rgba(237,28,36,0.8); }
  26%         { border-color: rgba(255,255,255,0.1); }
  28%         { border-color: rgba(237,28,36,0.7); }
  30%         { border-color: rgba(255,255,255,0.05); }
  56%         { border-color: rgba(255,255,255,0.05); }
  58%         { border-color: rgba(237,28,36,1); }
  61%         { border-color: rgba(255,255,255,0.2); }
  64%         { border-color: rgba(237,28,36,0.9); }
  66%         { border-color: rgba(255,255,255,0.05); }
  87%         { border-color: rgba(255,255,255,0.05); }
  90%         { border-color: rgba(237,28,36,0.7); }
  92%         { border-color: rgba(255,255,255,0.2); }
  95%         { border-color: rgba(237,28,36,0.8); }
  100%        { border-color: rgba(255,255,255,0.2); }
}

/* Section-wide glitch animations */
@keyframes sectionGlitch {
  0%      { transform: none; filter: none; }
  4.5%    { transform: none; filter: none; }
  5%      { transform: translateX(-5px) skewX(-0.5deg); filter: brightness(1.5) contrast(1.3); }
  5.5%    { transform: translateX(7px)  skewX(0.5deg);  filter: brightness(0.6) hue-rotate(15deg); }
  6%      { transform: translateX(-3px);                 filter: brightness(1.2); }
  7%      { transform: none; filter: none; }
  21.5%   { transform: none; filter: none; }
  22%     { transform: translateX(5px)  skewX(-1deg);    filter: brightness(1.4) saturate(1.8); }
  24%     { transform: translateX(-6px) skewX(0.8deg);   filter: brightness(0.75) hue-rotate(-10deg); }
  26%     { transform: translateX(3px);                  filter: brightness(1.1); }
  28%     { transform: translateX(-2px) skewX(-0.3deg);  filter: brightness(0.9); }
  30%     { transform: none; filter: none; }
  55.5%   { transform: none; filter: none; }
  56%     { transform: translateX(-8px) skewX(-1.5deg);  filter: brightness(1.7) contrast(1.5) saturate(2); }
  57%     { transform: translateX(9px)  skewX(1.2deg);   filter: brightness(0.5) hue-rotate(20deg); }
  58%     { transform: translateX(-5px);                  filter: brightness(1.4); }
  61%     { transform: translateX(5px);                   filter: brightness(0.8); }
  64%     { transform: translateX(-3px) skewX(-0.4deg);  filter: brightness(1.2) hue-rotate(-5deg); }
  66%     { transform: none; filter: none; }
  86.5%   { transform: none; filter: none; }
  87%     { transform: translateX(4px)  skewX(0.5deg);   filter: brightness(1.3); }
  90%     { transform: translateX(-3px);                  filter: brightness(0.85) hue-rotate(8deg); }
  92%     { transform: translateX(2px);                   filter: brightness(1.15); }
  95%     { transform: translateX(-2px) skewX(-0.2deg);  filter: brightness(0.95); }
  100%    { transform: none; filter: none; }
}

@keyframes glitchScanLine {
  0%, 4%   { opacity: 0; top: -5%; }
  5%       { opacity: 1;   top: 8%; }
  5.5%     { opacity: 0.8; top: 30%; }
  6%       { opacity: 0.5; top: 55%; }
  7%       { opacity: 0;   top: -5%; }
  21%      { opacity: 0;   top: -5%; }
  22%      { opacity: 0.9; top: 12%; }
  24%      { opacity: 0.7; top: 45%; }
  26%      { opacity: 0.4; top: 75%; }
  30%      { opacity: 0;   top: -5%; }
  55%      { opacity: 0;   top: -5%; }
  56%      { opacity: 1;   top: 5%; }
  57%      { opacity: 0.9; top: 25%; }
  58%      { opacity: 0.8; top: 50%; }
  61%      { opacity: 0.6; top: 72%; }
  64%      { opacity: 0.3; top: 90%; }
  66%      { opacity: 0;   top: -5%; }
  86%      { opacity: 0;   top: -5%; }
  87%      { opacity: 0.7; top: 20%; }
  90%      { opacity: 0.5; top: 55%; }
  92%      { opacity: 0.3; top: 80%; }
  95%      { opacity: 0;   top: -5%; }
  100%     { opacity: 0;   top: -5%; }
}

@keyframes glitchRgbShift {
  0%, 4.5%  { opacity: 0; }
  5%        { opacity: 0.65; transform: translateX(-9px);  background: rgba(237, 28, 36, 0.45); }
  5.5%      { opacity: 0.55; transform: translateX(9px);   background: rgba(0, 210, 255, 0.35); }
  6%        { opacity: 0.3;  transform: translateX(-4px);  background: rgba(237, 28, 36, 0.25); }
  7%        { opacity: 0;    transform: translateX(0); }
  21.5%     { opacity: 0; }
  22%       { opacity: 0.55; transform: translateX(7px);   background: rgba(237, 28, 36, 0.4); }
  24%       { opacity: 0.45; transform: translateX(-7px);  background: rgba(0, 210, 255, 0.3); }
  26%       { opacity: 0.3;  transform: translateX(3px);   background: rgba(255, 220, 0, 0.2); }
  28%       { opacity: 0.2;  transform: translateX(-2px);  background: rgba(0, 210, 255, 0.15); }
  30%       { opacity: 0;    transform: translateX(0); }
  55.5%     { opacity: 0; }
  56%       { opacity: 0.75; transform: translateX(-11px); background: rgba(237, 28, 36, 0.55); }
  57%       { opacity: 0.65; transform: translateX(11px);  background: rgba(0, 210, 255, 0.45); }
  58%       { opacity: 0.55; transform: translateX(-6px);  background: rgba(255, 220, 0, 0.35); }
  61%       { opacity: 0.4;  transform: translateX(5px);   background: rgba(237, 28, 36, 0.25); }
  64%       { opacity: 0.25; transform: translateX(-3px);  background: rgba(0, 210, 255, 0.2); }
  66%       { opacity: 0;    transform: translateX(0); }
  86.5%     { opacity: 0; }
  87%       { opacity: 0.5;  transform: translateX(5px);   background: rgba(237, 28, 36, 0.35); }
  90%       { opacity: 0.35; transform: translateX(-4px);  background: rgba(0, 210, 255, 0.25); }
  92%       { opacity: 0.2;  transform: translateX(2px);   background: rgba(237, 28, 36, 0.15); }
  95%       { opacity: 0.1;  transform: translateX(-1px);  background: rgba(0, 210, 255, 0.1); }
  100%      { opacity: 0;    transform: translateX(0); }
}

#prizes-section.flickering {
  animation: sectionGlitch 0.75s linear forwards;
}

#prizes-section.flickering::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(237, 28, 36, 0.95);
  box-shadow: 0 0 14px 2px rgba(237, 28, 36, 0.85), 0 0 4px rgba(255,255,255,0.6);
  pointer-events: none;
  z-index: 100;
  animation: glitchScanLine 0.75s linear forwards;
  mix-blend-mode: screen;
}

#prizes-section.flickering::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  animation: glitchRgbShift 0.75s linear forwards;
  mix-blend-mode: screen;
}

.prizes-inner.flickering {
  animation: borderFlicker 0.75s linear forwards;
}
.prizes-inner.flickering .prizes-heading-block {
  animation: borderFlicker 0.75s linear 0.05s forwards;
}
.prizes-inner.flickering .prizes-left {
  animation: borderFlicker 0.75s linear 0.3s forwards;
}

.prizes-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border: 2px solid var(--red, #ED1C24);
  box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
filter: var(--ui-blur);

}

.prizes-section-disclaimer {
    max-width: 1200px;
    margin: auto;
}

.prizes-section-disclaimer-container {
    border: 2px solid var(--red, #ED1C24);
    background: rgba(0, 0, 0, 0.80);
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    width: 505px;
    margin-left: auto;
    padding: 3px;
}

.prizes-disclaimer {
    border: 2px solid var(--red, #ED1C24);
    background: rgba(0, 0, 0, 0.80);
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    margin-left: auto;
    padding: 3px;
}

.prizes-disclaimer-container {
    width: 100%;
}

.prizes-section-disclaimer-content, .prizes-disclaimer-content {
    display: flex;
    justify-content: flex-start;
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
}

.prizes-disclaimer-icon, .prizes-icon {
    display: flex;
    background: var(--red, #ED1C24);
    padding: 3px 3px;
}

.prizes-disclaimer-text, .disclaimer-text {
    background: var(--red, #ED1C24);
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: 4px;
    padding: 0 10px;
}

.prizes-disclaimer-text span {
    color: #030202;
    font-family: "JetBrains Mono";
    font-size: clamp(11px, 1.11vw, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.8px;
    filter: var(--ui-blur);
}

.prizes-heading-block {
    border-bottom: 2px solid var(--red, #ED1C24);
  display: flex;
  justify-content: center;
  align-items: center;
  height:245px;
  padding:20px 45px;
  box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
  filter: var(--ui-blur);
}

.prizes-heading-block:before {
    content: "";
    position: absolute;
    bottom: 0;
    top:190px;
    left: 0;
    width: 61px;
    height: 54px;
    background: #ff2b2b;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }

.prizes-heading {
    position: relative;
    margin: 0;
    display: inline-block;
    font-family: "DrukWide";
    font-size: clamp(38px, 4.3vw, 62px);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 50px */
    text-transform: uppercase;
    text-shadow: 13px 0 9.1px rgba(255, 255, 255, 0.10), 0 5px 4px rgba(237, 29, 36, 0.20), 0 -5px 4px rgba(237, 29, 36, 0.20), -3px 0 1px rgba(237, 29, 36, 0.50), 3px 0 2px #ED1D24;
}

.prizes-columns {
  display: flex;
  align-items: stretch;
  height:204px
}

.prizes-left {
  flex: 0 0 50%;
  display: flex;
  border-right: 1px solid var(--red, #ED1C24);
  height: 204px;
  overflow: hidden;
  box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
  filter: var(--ui-blur);
}

.prizes-label-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 123px;
    border-right: 2px solid var(--red, #ED1C24);
}

.prizes-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #FFF;
  text-align: center;
  /* RGB split via filter — text-shadow doesn't render correctly with writing-mode: vertical-rl */
  filter: drop-shadow(0.5px 1px 0px #F00) drop-shadow(0px 0.5px 0px #FF0) var(--ui-blur);
  font-family: "JetBrains Mono";
  font-size: clamp(16px, 1.74vw, 25px);
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.prizes-image-area {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.prizes-carousel-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: transparent;
}

.prizes-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  stroke-width: 2px; stroke: var(--red, #ED1C24); filter: drop-shadow(0 0 19px rgba(237, 29, 36, 0.70)) var(--ui-blur);
  padding: 4px;
}

.prizes-text-box {
  flex: 1;
  padding: 1.5rem 6rem;
  position: relative;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 2px, rgba(0, 0, 0, 0.04) 2px, rgba(0, 0, 0, 0.04) 6px), linear-gradient(to bottom, #ff2a3a 0%, #f3152f 45%, #df0d24 100%);
    clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 80px 100%, 0 calc(100% - 80px));
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25), inset 0 0 80px rgba(255, 0, 30, 0.15), 0 0 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.prizes-text-box p {
  font-family: 'JetBrains Mono', monospace;
  text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
  font-size: clamp(14px, 1.53vw, 23px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* ——— Scroll connector line ——— */
/* Sibling of both sections — not clipped by either overflow:hidden.
   Positioned absolutely inside section.game. JS sets top + height. */
section.game {
  position: relative;
}

#scroll-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: transparent;
  pointer-events: none;
  z-index: 5;
}

#scroll-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ED1C24;
  box-shadow: 0 0 8px rgba(237, 29, 36, 0.9), 0 0 20px rgba(237, 29, 36, 0.4);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

#scroll-line-cross {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 100vw;
  height: 2px;
  background: #ED1C24;
  box-shadow: 0 0 8px rgba(237, 29, 36, 0.9), 0 0 20px rgba(237, 29, 36, 0.4);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#scroll-line-cross.expanded {
  transform: scaleX(1);
}

/* ——— Contest section ——— */
#next-section {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    padding-top: 6rem;
    overflow: hidden;
    padding-bottom: 8rem;
    padding-left: clamp(1rem, 3vw, 3rem);
    padding-right: clamp(1rem, 3vw, 3rem);
}

.contest-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(1.5rem, 3vw, 4rem);
    max-width: 1200px;
    margin: 0 auto;
}

.wipe-heading {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-family: 'DrukWide', sans-serif;
    font-weight: bold;
    font-size: clamp(3rem, 7vw, 4rem);
    line-height: 0.9;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 2rem;
    text-shadow: 13px 0 9.1px rgba(255, 255, 255, 0.10), 0 5px 4px rgba(237, 29, 36, 0.20), 0 -5px 4px rgba(237, 29, 36, 0.20), -3px 0 1px rgba(237, 29, 36, 0.50), 3px 0 2px #ED1D24;
    filter: var(--ui-blur);
}

.contest-right-top {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    min-width: 0;
}

.contest-box-wrapper {
    display: flex;
    flex-direction: column;
}

.contest-columns {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* LEFT COLUMN: single overflow:hidden context for the unified fill animation */
.contest-left-column {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
    height:391px;
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
}

.contest-left-column.height-auto {
    height: auto;
}

.contest-left-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Submit button — slides in on first keystroke */
.contest-left-footer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contest-left-footer.visible {
    max-height: 120px;
}

/* RIGHT COLUMN */
.contest-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contest-right-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 391px;
}

.contest-right-footer {
    flex-shrink: 0;
}

.submit-frame {
    border: 1px solid #d42b2b;
    padding: 8px;
    border-top: none;
    border-right: none;
    height:61px;
}

.btn-submit {
    width: 100%;
    background: #d42b2b;
    border: none;
    color: #000;
    font-family: 'DrukWide', sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0.36rem;
    color: var(--000000, #000);
text-shadow: 6.795px 0 4.757px rgba(255, 255, 255, 0.10), 0 2.614px 2.091px rgba(237, 29, 36, 0.20), 0 -2.614px 2.091px rgba(237, 29, 36, 0.20), -1.568px 0 0.523px rgba(237, 29, 36, 0.50), 1.568px 0 1.045px #ED1D24;
font-size: clamp(22px, 3vw, 35px);
font-style: normal;
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
    /* Hidden until MIN_CHARS threshold is reached */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.btn-submit--active {
    visibility: visible;
    opacity: 1;
    animation: checkbox-pulse 1s ease-in-out infinite;
}

.how-to-enter {
    border: 1px solid #ED1C24;
    flex: 1;
    border-right: none;
}

.steps-container {
    border: 1px solid var(--red, #ED1C24);
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    margin: 15px 8px;
    height: 305px;
}

.how-to-header {
    font-family: 'JetBrains Mono', monospace;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #ED1C24;
    font-size: clamp(16px, 1.74vw, 25px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 25px */
    letter-spacing: -1.25px;
    text-transform: uppercase;
    text-shadow: 0 1.3px 0 #FF0, 0.8px 2.6px 0 #F00;
    filter: var(--ui-blur);
    height:53px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    color:#fff;
}

.step {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--red, #ED1C24);
    height:101px;
    padding: 0 5px;
}

.step:last-child {
    border-bottom: none;
}

.step-icon {
    flex-shrink: 0;
    width: 89px;
    height: 89px;
    background: #d42b2b;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.step-icon img,
.step-icon object {
    width: 71px;
    height: 80px;
    object-fit: contain;
}

.step p {
    color: #FFF;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1.5px 0 #F00;
font-size: clamp(14px, 1.25vw, 18px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 18px */
letter-spacing: -0.9px;
    font-family: 'JetBrains Mono', monospace;
    padding: 0 10px;
}


/* Right column */
.chance-heading {
    color: var(--ed-1-d-24, #FFF);
    text-shadow: 13px 0 9.1px rgba(255, 255, 255, 0.10), 0 5px 4px rgba(237, 29, 36, 0.20), 0 -5px 4px rgba(237, 29, 36, 0.20), -3px 0 1px rgba(237, 29, 36, 0.50), 3px 0 2px #ED1D24;
    font-family: "DrukWide";
    font-size: clamp(22px, 2.22vw, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 31.961px */
    text-transform: uppercase;
    margin-bottom:30px;
}

.disclaimer-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Wiping area */
.wiping-area {
    border: 1px solid #d42b2b;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-direction: column;
}

#daily-limit-message {
    color: var(--ed-1-d-24, #FFF);
    text-align: center;
    text-shadow: 13px 0 9.1px rgba(255, 255, 255, 0.10), 0 5px 4px rgba(237, 29, 36, 0.20), 0 -5px 4px rgba(237, 29, 36, 0.20), -3px 0 1px rgba(237, 29, 36, 0.50), 3px 0 2px #ED1D24;
    font-family: "DrukWide";
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 70%;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.char-limit-disclaimer {
    margin-top: 10px;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1.5px 0 #F00;
}

.btn-start-wiping {
    opacity: 0;
    transition: opacity 1s ease;
    position: relative;
    width: 402px;
    height: 101px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.rect-186 {
    position: absolute;
    inset: 0;
    border: 1px solid #ED1D24;
    background: rgba(0, 0, 0, 0.80);
    filter: var(--ui-blur);
  }
  /* Inner layer — solid red fill with red border + glow */
  .rect-187 {
    position: absolute;
    top: 4.75px;
    left: 5px;
    right: 5px;
    bottom: 5.25px;
    border: 1px solid #ED1D24;
    background: #ED1D24;
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
  }

  .btn-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ed-1-d-24, #FFF);
text-align: center;
text-shadow: 0 0.585px 0 #FF0, 0.585px 1.169px 0 #F00;
font-family: "JetBrains Mono";
font-size: clamp(16px, 1.74vw, 25px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 25px */
letter-spacing: -1.25px;
text-transform: uppercase;
box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
filter: var(--ui-blur);
  } 

.btn-start-wiping:hover {
    background: #b81e1e;
}

/* Disabled state — greyed out until checkbox is checked */
.btn-start-wiping.disabled {
    cursor: not-allowed;
    opacity: 0.5 !important;
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
}
/* .btn-start-wiping.disabled .rect-186 {
    border-color: #555;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.80);
}
.btn-start-wiping.disabled .rect-187 {
    border-color: #555;
    background: #3a3a3a;
    box-shadow: none;
} */
.btn-start-wiping.disabled .btn-label {
   opacity: 0.7;
}
.rect-186, .rect-187 {
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.btn-label {
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Checkbox pulse when button clicked while disabled */
@keyframes checkbox-pulse {
    0%   { box-shadow: 0 0 0 2px #ff1a1a, 0 0 10px #ff0000, 0 0 22px rgba(255,0,0,0.35); }
    40%  { box-shadow: 0 0 0 5px #fff,    0 0 24px #fff,    0 0 48px rgba(255,255,255,0.8); }
    100% { box-shadow: 0 0 0 2px #ff1a1a, 0 0 10px #ff0000, 0 0 22px rgba(255,0,0,0.35); }
}
.legal-row input[type="checkbox"].pulse {
    animation: checkbox-pulse 0.5s ease-in-out 2;
}

.wipe-textarea {
    display: none;
    width: 100%;
    height: 100%;
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    padding: 1rem;
    resize: none;
    outline: none;
    caret-color: transparent;
}

.wiping-area.active .btn-start-wiping,
.wiping-area.active .char-limit-disclaimer {
    display: none;
}
.wiping-area.active .wipe-textarea {
    display: block;
}

#fake-caret {
    position: absolute;
    width: 5px;
    background: #fff;
    pointer-events: none;
    animation: caretBlink 0.8s step-end infinite;
    z-index: 10;
    height: 18px !important;
    display: none;
}

.wiping-area.active #fake-caret {
    display: block;
}

@keyframes caretBlink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Legal */
.legal-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    line-height: 1.5;
    border: 1px solid #d42b2b;
    padding: 0.6rem 0.75rem;
    border-top: none;
    height:61px;
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
}

.legal-check-label {
    color: #FFF;
    /* RBG SPLIT */
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1.5px 0 #F00;
    font-family: "JetBrains Mono";
    font-size: clamp(12px, 1.11vw, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    filter: var(--ui-blur);
}

.legal-check-label a {
    color:#fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-row input[type="checkbox"],
.claim-legal-row input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 3px solid #000;
    box-shadow:
        0 0 0 2px #ff1a1a,
        0 0 10px #ff0000,
        0 0 22px rgba(255, 0, 0, 0.35);
    cursor: pointer;
    flex-shrink: 0;
    margin: auto;
    position: relative;
    image-rendering: pixelated;
}

.legal-row input[type="checkbox"]:checked,
.claim-legal-row input[type="checkbox"]:checked {
    background-color: #c0282a !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='20' viewBox='0 0 23 20' fill='none'><g filter='url(%23filter0_df_0_2387)'><g clip-path='url(%23clip0_0_2387)'><path d='M22.5005 0.5H18.1094V5H22.5005V0.5Z' fill='black'/><path d='M18.0956 5H13.709V9.5H18.0956V5Z' fill='black'/><path d='M13.6958 9.5H9.30469V14H13.6958V9.5Z' fill='black'/><path d='M4.89108 9.5H0.5V14H4.89108V9.5Z' fill='black'/><path d='M9.29537 14H4.9043V18.5H9.29537V14Z' fill='black'/></g></g><defs><filter id='filter0_df_0_2387' x='0' y='0' width='23' height='19.5' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset dx='0.5' dy='1'/><feComposite in2='hardAlpha' operator='out'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_0_2387'/><feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_0_2387' result='shape'/><feGaussianBlur stdDeviation='0.25' result='effect2_foregroundBlur_0_2387'/></filter><clipPath id='clip0_0_2387'><rect width='22' height='18' fill='white' transform='translate(0.5 0.5)'/></clipPath></defs></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 20px;
}

.legal-row a {
    color: #fff;
    text-decoration: underline;
}

.attempt-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 1px;
    position: relative;
    height:54px;
}

.attempt-bar {
    width: 313px;
    display: flex;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.attempt-bar__badge {
    background-image: url('/modules/custom/doritos_keycodes_contest/images/attempt-bar.png');
    width: 257px;
    background-size:100% 100% ;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-start;
    align-items: center;
} 

#attempt-counter {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(14px, 1.39vw, 20px);
    letter-spacing: 2.27px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0.5px 1.5px 0 #FF0000, 0px 0.5px 0 #FFFF00;
    filter: var(--ui-blur);
    white-space: nowrap;
    margin-left: 3.5rem;
    margin-bottom: 13px;
}

.attempt-bar__arrows {
    position: absolute;
    right: -27px;
    height: 41px;
    width: 120px;
}

.attempt-tri {
    fill: none;
    stroke: #ED1C24;
    stroke-width: 1;
    opacity: 0.35;
    transition: opacity 0.2s ease, filter 0.2s ease, stroke-width 0.2s ease;
}


/* Doritos bag */
.doritos-bag {
    position: absolute;
    bottom: 80px;
    right: 2rem;
    height: 260px;
    width: auto;
    pointer-events: none;
    z-index: 99;
}


/* Footer */
.promo-hero {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #000 0%, #111 100%);
    overflow: visible;
  }
  
  .doritos-bag {
    position: absolute;
    right: 40px;
    bottom: -14rem;
    width: clamp(220px, 25vw, 354px);
    height: auto;
    aspect-ratio: 177 / 142;
    transform: scale(1.2);
  }

.promo-footer {
    background: #000;
    padding: 40px 0;
    width: 100%;
    position: relative;
  }

  .footer-inner {
    max-width: 85%;
    padding: 0 clamp(1rem, 3vw, 3rem) 0 clamp(2rem, 4vw, 5rem);
  }

  .footer-inner p {
    color: #fff;
    font-family: "JetBrains Mono";
    font-size: clamp(11px, 1.1vw, 14px);
    width: 95%;
  }

  .trademark-copy {
    font-size: clamp(11px, 1.1vw, 14px);
  }

  .footer-container {
    gap: clamp(1.5rem, 5vw, 8rem);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 90%;
  }
  
  .social-icons {
    display: flex;
    gap: 12px;
  }
  
  .icon {
    width: 42px;
    height: 42px;
    background: #ED1D24;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 0 19px rgba(237, 29, 36, 0.7);
    filter: var(--ui-blur);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .footer-links a {
    color: #fff;
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
    text-shadow: 
      0 0.5px 0 #FF0,
      0.5px 1px 0 #F00;
    filter: var(--ui-blur);
  }
  
  .footer-links .divider {
    color: #fff;
    opacity: 0.5;
  }

/* Checkbox-checked blink animations */
@keyframes blinkerImageAnim {
    0%, 59% { opacity: 1; }
    60%, 100% { opacity: 0; }
}

.wiping-area.blink-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/modules/custom/doritos_keycodes_contest/images/blinker.png') no-repeat center center / cover;
    animation: blinkerImageAnim 1.5s step-end infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes rect186Blink {
    0%, 59% { box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70); }
    60%, 100% { box-shadow: none; }
}

.btn-claim.blink {
    animation: checkbox-pulse 1s ease-in-out infinite;
}

.contest-columns.is-claiming ~ .btn-claim-submit-container .btn-claim-submit {
    animation: checkbox-pulse 1s ease-in-out infinite;
}

.wiping-area.blink-active .rect-186 {
    animation: rect186Blink 1.5s step-end infinite;
    transition: none;
}

/* ——— Analysing state on right panel ——— */

/* Show wipe-screen, hide textarea content */
.wiping-area.is-analysing {
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.wiping-area.is-analysing #fake-caret {
    opacity: 0;
}

/* 2px red scan line sweeping left → right */
@keyframes scanLine {
    from { left: -2px; }
    to   { left: 100%; }
}

.wiping-area.is-analysing::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 2px;
    background: #ED1C24;
    animation: scanLine 0.8s linear infinite;
    pointer-events: none;
    z-index: 6;
}

/* Blinker — reuses existing blinkerImageAnim keyframe */
.wiping-area.is-analysing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/modules/custom/doritos_keycodes_contest/images//blinker.png') no-repeat center center / cover;
    animation: blinkerImageAnim 1.5s step-end infinite;
    pointer-events: none;
    z-index: 5;
}


/* ——— Analysing state ——— */

/* Background: full-height block, starts translated below, slides up on .is-analysing */
.analysing-bg-fill {
    position: absolute;
    inset: 0;
    background: #ED1C24;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.contest-left-column.is-analysing .analysing-bg-fill {
    transform: translateY(0);
}

/* "HOW TO ENTER" fades out when analysing begins */
.how-to-enter {
    transition: opacity 0.2s ease;
}

.contest-left-column.is-analysing .how-to-enter {
    opacity: 0;
    pointer-events: none;
}

/* Analysing content: triangle + label (z-index:2 sits above the z-index:1 fill) */
.analysing-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.1s ease 0.35s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contest-left-column.is-analysing .analysing-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.analysing-triangle {
    width: 185px;
    aspect-ratio: 151 / 158;
    margin: auto;
}

/* .success-fill visibility is controlled entirely by #success-reveal-rect in SVG (see JS) */

.analysing-label {
    margin-top: 1.25rem;
    color: #000;
text-align: center;
font-family: 'DrukWide', sans-serif;
text-shadow: 6.795px 0 4.757px rgba(255, 255, 255, 0.10), 0 2.614px 2.091px rgba(237, 29, 36, 0.20), 0 -2.614px 2.091px rgba(237, 29, 36, 0.20), -1.568px 0 0.523px rgba(237, 29, 36, 0.50), 1.568px 0 1.045px #ED1D24;
font-size: 35.082px;
font-style: normal;
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
margin-bottom: 2rem;
}

/* ——— Success state ——— */

/* Success body: same slide-up as analysing-content but z-index:3 */
.contest-success-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #000;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.1s ease 0.35s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.success-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 4rem 1.5rem;
    background-color:#ED1C24;
}

.contest-left-column.is-success .contest-success-body {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hide analysing content when success kicks in */
.contest-left-column.is-success .analysing-content {
    opacity: 0;
    transform: translateY(-20%);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.success-heading {
    font-family: 'DrukWide', sans-serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 0.95;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 13px 0 9.1px rgba(255,255,255,0.10), 0 5px 4px rgba(237,29,36,0.20), 0 -5px 4px rgba(237,29,36,0.20), -3px 0 1px rgba(237,29,36,0.50), 3px 0 2px #ED1D24;
}

.success-prizes {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.success-prize-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    color:#000;
    font-size: 18px;
    text-shadow: 0.5px 1px 0 #F00;
    font-weight: 700;
    letter-spacing: -0.9px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 100%;
}

.success-message {
    padding: 1.5rem 1rem;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.success-prize-item:last-child {
    border-bottom: none;
}

.prize-number {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    background: #000;
box-shadow: 0.5px 1px 0 0 #F00;
filter: var(--ui-blur);
color:#fff;
font-size: 18px;
}

.prize-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    color: #000;
    text-shadow: 0.5px 1px 0 #F00;
    font-style: normal;
font-weight: 700;
line-height: 100%; /* 18px */
letter-spacing: -0.9px;
}

/* Claim button lives inside contest-success-body, always visible there */
 
.btn-claim-container {
    height: 62px;
    display: flex;
    border: 1px solid var(--red, #ED1C24);
    padding:8px;
    border-right: none;
}


.btn-claim {
    width: 100%;
    font-family: 'DrukWide', sans-serif;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0.36rem;
    font-size: 23px;
    line-height: 100%;
    text-transform: uppercase;
    flex-shrink: 0;
    background: #ED1D24;
box-shadow: 0 0 18.724px 0 rgba(237, 29, 36, 0.70);
filter: var(--ui-blur);
color: #000;
text-shadow: 4.512px 0 3.158px rgba(255, 255, 255, 0.10), 0 1.735px 1.388px rgba(237, 29, 36, 0.20), 0 -1.735px 1.388px rgba(237, 29, 36, 0.20), -1.041px 0 0.347px rgba(237, 29, 36, 0.50), 1.041px 0 0.694px #ED1D24;
font-style: normal;
font-weight: 700;
border:none;
}

/* ——— Prize reveal (right panel success state) ——— */

.prizes-reveal {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 7;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.contest-left-column.is-success ~ .contest-right-column .prizes-reveal {
    visibility: visible;
}

.contest-left-column.is-success ~ .contest-right-column .wipe-textarea,
.contest-left-column.is-success ~ .contest-right-column #fake-caret {
    visibility: hidden;
}

.prize-card {
    position: relative;
    overflow: hidden;
    transform: translateX(120%);
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 248px;
    height: 172px;
    background: var(--red, #ED1C24);
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    padding: 15px;
}

.prize-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Number badge — top-right corner */
.prize-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #000;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.45rem;
    line-height: 1;
}

/* Slide in when left column reaches is-success */
.contest-left-column.is-success ~ .contest-right-column .prize-card-1 {
    transform: translateX(0);
    transition-delay: 0s;
}

.contest-left-column.is-success ~ .contest-right-column .prize-card-2 {
    transform: translateX(0);
    transition-delay: 0.12s;
}

/* Single-prize mode: prize-2 hidden, prize-1 takes full width */
.prizes-reveal.single .prize-card-2 {
    display: none;
}

/* ——— Claim state ——— */

/* Left: red panel slides up above success body */
.contest-claim-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ED1C24;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.1s ease 0.35s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contest-left-column.is-claiming .contest-claim-body {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hide success body when claim panel slides in */
.contest-left-column.is-claiming .contest-success-body {
    opacity: 0;
    transform: translateY(-20%);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.claim-left-inner {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.claim-left-heading {
    font-family: 'DrukWide', sans-serif;
    font-weight: bold;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    line-height: 0.95;
    color: #fff;
    text-transform: uppercase;
}

.claim-left-copy {
    font-family: 'JetBrains Mono', monospace;
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.9px;
}

/* Right: claim form replaces right body/footer in claiming state */
.claim-form-overlay {
    display: none;
    flex-direction: column;
    flex: 1;
    background: #000;
}

.contest-left-column.is-claiming ~ .contest-right-column .contest-right-body,
.contest-left-column.is-claiming ~ .contest-right-column .contest-right-footer {
    display: none;
}

.contest-left-column.is-claiming ~ .contest-right-column .claim-form-overlay {
    display: flex;
}

.claim-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    justify-content: space-between;
    padding-top:20px;
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    border: 1px solid var(--red, #ED1C24);
    overflow: visible;
}

.claim-field {
    border: 1px solid var(--red, #ED1C24);
    background: rgba(0, 0, 0, 0.80);
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    width: 80%;
    margin: auto;
    
}

.claim-field.claim-field-province {
    margin-bottom: 20px;
}

/* Floating label fields */
.claim-field {
    position: relative;
}

.claim-label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.9px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
    filter: var(--ui-blur);
    pointer-events: none;
    transition: top 0.2s ease, transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

/* Float up on focus or when filled */
.claim-input:focus ~ .claim-label,
.claim-input:not(:placeholder-shown) ~ .claim-label {
    top: 0.5rem;
    transform: translateY(0);
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
    font-family: "JetBrains Mono";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    letter-spacing: -0.8px;
    text-transform: uppercase;
    color:#fff;
}

.claim-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 1.6rem 1rem 0.4rem;
    height: 68px;
}

.claim-input::placeholder {
    color: transparent;
}

.claim-input:-webkit-autofill,
.claim-input:-webkit-autofill:hover,
.claim-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.8) inset;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.8) inset;
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}

.claim-input:focus {
    border: 2px solid var(--red, #ED1C24);
background: rgba(237, 28, 36, 0.20);
box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
filter: var(--ui-blur);
}

/* ——— Field valid state ——— */
.claim-field.is-valid {
    border-color: #fff;
}

/* ——— Field error state ——— */
.claim-field.has-error {
    background: rgba(120, 0, 0, 0.45);
}

/* Force label to float up so REQUIRED badge is visible */
.claim-field.has-error .claim-label {
    top: 0.5rem;
    transform: translateY(0);
    font-size: 14px;
}

/* REQUIRED badge — shared styles */
.claim-field.has-error .claim-label::after,
.claim-field.has-error .custom-select-label::after {
    content: 'REQUIRED';
    display: inline-block;
    background: #ED1C24;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 2px 6px;
    margin-left: 8px;
    vertical-align: middle;
    text-shadow: none;
    filter: none;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 16px */
letter-spacing: -0.8px;
text-transform: uppercase;
}

/* Province: force its label to the floated-up position too */
.claim-field.has-error .custom-select-label {
    font-size: 14px;
    letter-spacing: -0.8px;
}

.custom-select-trigger:focus,
.custom-select.open .custom-select-trigger {
    border: 2px solid var(--red, #ED1C24);
    background: rgba(237, 28, 36, 0.20);
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    filter: var(--ui-blur);
    outline: none;
}

.contest-left-column.is-success.is-claiming {
    height:100%;
}

/* Custom province dropdown */
.claim-field-province {
    position: relative;
    filter: none;
}

.custom-select {
    position: relative;
}

.custom-select-label-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-height: 68px;
    padding: 0.5rem 0;
    gap: 0;
}

.custom-select-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.9px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
    filter: var(--ui-blur);
    transition: font-size 0.2s ease, color 0.2s ease, filter 0.2s ease, letter-spacing 0.2s ease;
    line-height: 1;
}

.custom-select-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
    filter: var(--ui-blur);
    display: none;
    margin-top: 0.2rem;
    line-height: 1;
}

/* Float province label when open or has a value */
.custom-select.open .custom-select-label,
.custom-select.has-value .custom-select-label {
    transform: translateY(0);
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
    font-family: "JetBrains Mono";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    letter-spacing: -0.8px;
    text-transform: uppercase;
    color:#fff;
}

.custom-select.has-value .custom-select-value {
    display: block;
    margin-top: 20px;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(237, 28, 36, 0.4);
    user-select: none;
    height: 68px;
}

.custom-select-value.selected {
    color: #fff;
}

.custom-select-arrow {
    color: #ED1C24;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #000;
    border: 1px solid rgba(237, 28, 36, 0.4);
    border-top: none;
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: #555 #000;
}

.custom-select-options::-webkit-scrollbar {
    width: 6px;
}

.custom-select-options::-webkit-scrollbar-track {
    background: #000;
}

.custom-select-options::-webkit-scrollbar-thumb {
    background: #555;
}

.custom-select.open .custom-select-options {
    display: flex;
}

.custom-select-option {
    padding: 0.7rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #fff;
    cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.selected {
    background: #ED1C24;
    color: #000;
}

.claim-legal-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(237, 28, 36, 0.4);
}

#legal-check-mirror {
    pointer-events: none;
}

.btn-claim-submit {
    width: 80%;
    background: #ED1C24;
    border: none;
    color: #000;
    font-family: 'DrukWide', sans-serif;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0.5rem;
    cursor: pointer;
    text-shadow: 6.795px 0 4.757px rgba(255,255,255,0.10), 0 2.614px 2.091px rgba(237,29,36,0.20), 0 -2.614px 2.091px rgba(237,29,36,0.20), -1.568px 0 0.523px rgba(237,29,36,0.50), 1.568px 0 1.045px #ED1D24;
    
}

.btn-claim-submit-container {
    display: none;
    width: 62%;
    margin-left: auto;
    text-align: center;
    margin-top: 10px;
}

.contest-columns.is-claiming ~ .btn-claim-submit-container  {
    display: block;
}



@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Down arrow blink — background fills red and fades */
.key-down {
    animation: keyBlink 0.4s ease-in-out infinite;
}

@keyframes keyBlink {
    0%,
    100% {
        background: transparent;
    }
    50% {
        background: #d42b2b;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE GATE — shown only on small screens (≤ 768px)
   Desktop hides it completely.
   ═══════════════════════════════════════════════════════════ */

   #mobile-gate, .mobile-gate-footer {
    display: none;
   }

   @media (max-width: 1024px) {

    .hero,
        #video-section,
        #prizes-section,
        #scroll-line,
        #next-section,
        .promo-hero,
        .promo-footer,
        .nav,
        #keycodes {
            display: none !important;
        }
 
     /* Show the mobile gate */
   #mobile-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    gap: 0;
    padding-top:2rem;
    background-image: url(/modules/custom/doritos_keycodes_contest/images/bg.png);
    background-size: cover;
}

.mobile-gate-container {
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 
}

.mobile-gate__logo {
    height: 80px;
    width: auto;
    margin-bottom: 1.75rem;
}


.mobile-gate__heading-wrap {
    width: 100%;
    margin-bottom: 1.75rem;
    overflow: hidden;
}


.mobile-gate__keycodes {
    font-size: 9vw !important;
    line-height: 2;
    white-space: nowrap;
}


.mobile-gate__title {
    color: #FFF;
text-align: center;
/* RBG SPLIT */
text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
/* dor/body copy 18px */
font-family: "JetBrains Mono";
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 18px */
letter-spacing: -0.9px;
}


.mobile-gate__body {
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(13px, 3.5vw, 16px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 2rem;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1.5px 0 #F00;
    filter: var(--ui-blur);
}


.mobile-gate__share-btn {
    border: 2px solid var(--red, #ED1C24);
    /* red glow */
    box-shadow: 0 0 19px 0 rgba(237, 29, 36, 0.70);
    color: #FFF;


text-align: center;
/* RBG SPLIT */
text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
font-family: "JetBrains Mono";
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: 3.6px;
text-transform: uppercase;
    filter: var(--ui-blur);
    max-width: 325px;
    padding: 10px;
    background-color: transparent;
}


.mobile-gate__share-btn:active {
    background: rgba(237, 29, 36, 0.15);
}


.mobile-gate-footer {
    width: 100%;
background-color: #000;
padding: 40px;
margin-top: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


.mobile-gate__bag-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top:1.2rem;
}


.mobile-gate__bag {
    width: 65%;
    max-width: 260px;
    height: auto;
    display: block;
}


.mobile-gate__social {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 2rem;
}


.mobile-gate__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}


.mobile-gate__links a {
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    text-shadow: 0 0.5px 0 #FF0, 0.5px 1px 0 #F00;
    filter: var(--ui-blur);
}

.trademark-copy-mb {
    color:#fff;
    margin-top:20px;
    font-size:11px;
}

    }