/* ============================================================
   Chicken Road — prelander
   Original implementation. No third-party code or assets.
   All art is inline SVG (see ART in script.js).
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:            #0B0C14;
  --bg-deep:        #161824;
  --bg-mid:         #2D324C;
  --bg-high:        #3E4464;

  --road:           #5B6188;
  --road-dark:      #4A506F;
  --road-patch:     rgba(38,42,66,.28);
  --road-edge:      #23263A;
  --divider:        rgba(255,255,255,.55);

  --panel:          #2A2E45;
  --panel-inset:    #383D5A;
  --panel-inset-2:  #333852;

  --green:          #2FC94A;
  --green-hi:       #45E263;
  --green-lo:       #22A639;
  --gold:           #F0B900;
  --gold-hi:        #FFD84D;
  --red:            #E0413C;

  --text:           #FFFFFF;
  --text-dim:       #9AA0BF;
  --text-mute:      #6B7194;

  --mult-stroke:    rgb(38,84,70);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* driven by JS — every dimension derives from lane width */
  --lane-w: 174px;
  --start-w: 174px;
  --chicken-x: 87px;

  --disc:    calc(var(--lane-w) * 0.711);
  --chick:   calc(var(--lane-w) * 0.642);
  --mult-fs: calc(var(--disc) * 0.159);

  --step-ms: 700ms;

  /* one number the whole console scales by; set from JS in UI.resize() so the
     panel grows on a large window instead of stranding as a thin strip, and
     shrinks on a short one instead of squeezing the road */
  --ui: 1;
}

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

html,body{ height:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:999;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:35px; padding:15px;
  background:linear-gradient(180deg,#161824 0%,#2D324C 49%,#3E4464 91%);
  transition:opacity .45s ease;
}
.loader.is-done{ opacity:0; pointer-events:none; }
.loader__logo{ width:100%; max-width:400px; }
.loader__logo svg{ width:100%; height:auto; display:block; }
.loader__bar{
  position:relative; width:100%; max-width:340px; height:28px;
  padding:4px; border-radius:100px;
  background:linear-gradient(to right,#F0B900,#FFF599);
}
.loader__bar::before{
  content:''; position:absolute; left:4px; top:4px;
  width:calc(100% - 8px); height:calc(100% - 8px);
  border-radius:100px; background:#fff;
}
.loader__fill{
  position:relative; z-index:2; width:0; height:100%;
  border-radius:100px;
  background:linear-gradient(to right,#29C839,#6CFC69);
  transition:width .4s ease;
}
@media (max-width:767px){ .loader__bar{ max-width:220px; } }

/* ============================================================
   SHELL
   ============================================================ */
.app{
  display:flex; flex-direction:column; justify-content:center;
  height:100dvh; min-height:100dvh;
  overflow:hidden;
}
.app[hidden]{ display:none; }

/* ---------- top bar ---------- */
.topbar{
  position:relative; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  height:clamp(46px,7.5vh,78px);
  background:var(--ink);
}
.topbar__logo{ height:62%; }
.topbar__logo svg{ height:100%; width:auto; display:block; }

.mute{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; padding:0;
  border:0; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.mute:hover{ background:rgba(255,255,255,.14); }
.mute svg{ width:18px; height:18px; display:block; }

/* ============================================================
   STAGE  (the road)
   ============================================================ */
.stage{
  position:relative; flex:1 1 auto;
  min-height:0; overflow:hidden;
  /* Keep the road proportional to its lanes. Without a ceiling a tall window
     stretches the band, the discs drift up, the grates sink, and the whole
     composition goes hollow - which is exactly what the reference never does. */
  max-height:calc(var(--lane-w) * 2.15);
  background:
    linear-gradient(180deg, var(--road-dark) 0%, var(--road) 10%, var(--road) 86.5%, var(--road-edge) 86.9%, var(--road-edge) 100%);
}
/* faint vignette so the road reads as lit from above */
/* stone courses along the top, the way the reference frames it */
.stage::before{
  content:''; position:absolute; left:0; right:0; top:0; height:8%;
  z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 2px, transparent 2px calc(var(--lane-w) * .26)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 2px, transparent 2px calc(var(--lane-w) * .17)),
    linear-gradient(180deg,#171A2B 0%,#20243A 100%);
}
.stage__sky{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(180deg, rgba(11,12,20,.5) 0%, rgba(11,12,20,0) 16%),
    linear-gradient(0deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 22%),
    radial-gradient(115% 62% at 50% 34%, rgba(255,255,255,.07) 0%, rgba(0,0,0,.26) 100%);
}

/* ---------- the moving field ---------- */
.field{
  position:absolute; top:0; bottom:0; left:0;
  display:flex; align-items:stretch;
  will-change:transform;
  transition:transform var(--step-ms) ease-in-out;
}

/* ---------- start zone (the coop doorway) ---------- */
.startzone{
  position:relative; flex:0 0 var(--start-w);
  background:linear-gradient(180deg,#1B1D2C 0%,#14161F 100%);
}
.startzone::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:3px;
  background:rgba(0,0,0,.45);
}
.startzone__arch{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:13.5%; width:calc(var(--lane-w) * .60); height:calc(var(--lane-w) * .92);
  border-radius:50% 50% 6px 6px / 38% 38% 6px 6px;
  background:linear-gradient(180deg,#0A0B12 0%,#151722 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.05);
}

/* ---------- lane ---------- */
.lane{
  position:relative; flex:0 0 var(--lane-w);
  cursor:default;
}
.lane::after{                       /* dashed centre-line on the right edge */
  content:''; position:absolute; right:0; top:0; bottom:13.5%;
  width:4px; border-radius:2px;
  background:repeating-linear-gradient(
    180deg, var(--divider) 0 26px, transparent 26px 52px);
  opacity:.85;
}
.lane--next{ cursor:pointer; }

/* road texture patches — decorative, move with the field */
.lane__patch{
  position:absolute; border-radius:8px;
  background:var(--road-patch);
  pointer-events:none;
}

/* ---------- multiplier disc ---------- */
.lane__disc{
  position:absolute; left:50%; top:34%;
  width:var(--disc); height:var(--disc);
  transform:translate(-50%,-50%) scale(.95);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, opacity .3s ease, filter .3s ease;
  opacity:.74;
}
.lane__disc svg{ position:absolute; inset:0; width:100%; height:100%; }
.lane__disc-face{ transition:opacity .25s ease; }

.lane__label{
  position:relative; z-index:2;
  font-size:var(--mult-fs); font-weight:800; letter-spacing:.2px;
  color:#fff; white-space:nowrap;
  text-shadow:
    -1px -1px 0 var(--mult-stroke),  1px -1px 0 var(--mult-stroke),
    -1px  1px 0 var(--mult-stroke),  1px  1px 0 var(--mult-stroke),
     0   -2px 0 var(--mult-stroke),  0    2px 0 var(--mult-stroke),
    -2px  0   0 var(--mult-stroke),  2px  0   0 var(--mult-stroke),
    -2px -1px 0 var(--mult-stroke),  2px -1px 0 var(--mult-stroke),
    -2px  1px 0 var(--mult-stroke),  2px  1px 0 var(--mult-stroke),
     0    0   4px rgba(0,0,0,.5);
}

/* disc states */
.lane--next .lane__disc{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.lane--next .lane__disc{ filter:drop-shadow(0 0 14px rgba(120,150,255,.55)); }
.lane--passed .lane__disc{ opacity:1; transform:translate(-50%,-50%) scale(.97); }
.lane--crash  .lane__disc{ opacity:1; transform:translate(-50%,-50%) scale(.96); }

.lane__disc .face-passed,
.lane__disc .face-crash{ opacity:0; }
.lane--passed .lane__disc .face-default{ opacity:0; }
.lane--passed .lane__disc .face-passed { opacity:1; }
.lane--crash  .lane__disc .face-default{ opacity:0; }
.lane--crash  .lane__disc .face-crash  { opacity:1; }

/* gentle pulse on the clickable lane */
@keyframes discPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1.05); }
  50%    { transform:translate(-50%,-50%) scale(1.10); }
}
.lane--next .lane__disc{ animation:discPulse 1.6s ease-in-out infinite; }

/* a passed lane becomes a gold coin — no number on it, as on the reference */
.lane--passed .lane__label{ opacity:0; }

/* the last lane is a golden egg, visible from the start and bigger */
.lane--final .lane__disc{ width:calc(var(--disc) * 1.16); height:calc(var(--disc) * 1.16); }
.lane--final .lane__label{ transform:translateY(6%); }
.lane--final:not(.lane--passed):not(.lane--crash) .lane__disc{
  opacity:1; filter:drop-shadow(0 0 22px rgba(255,196,0,.45));
}

/* ---------- grate + fire ---------- */
.lane__grate{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:14%; width:47%; height:calc(var(--lane-w) * .52);
  border-radius:50% 50% 4px 4px / 40% 40% 4px 4px;
  overflow:hidden;
  background:linear-gradient(180deg,#2A2E42 0%,#1A1D2C 100%);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55);
}
.lane__grate::before{
  content:''; position:absolute; inset:14% 12% 0 12%;
  background:repeating-linear-gradient(
    90deg,#0D0F18 0 4px, #363B52 4px 9px);
  border-radius:46% 46% 0 0 / 30% 30% 0 0;
  opacity:.9;
}
.lane__fire{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:12.5%; width:44%; height:0; opacity:0;
  --fire-h:calc(var(--lane-w) * .34);
  transition:opacity .25s ease;
  pointer-events:none;
}
.lane--next .lane__fire,
.lane--crash .lane__fire{ height:var(--fire-h); opacity:1; }
.lane__fire svg{ width:100%; height:100%; display:block; }

/* ---------- chicken ---------- */
.chicken{
  position:absolute; z-index:4;
  left:var(--chicken-x); transform:translateX(-50%);
  bottom:14%;
  width:var(--chick); height:var(--chick);
  pointer-events:none;
}
.chicken svg{ width:100%; height:100%; display:block; overflow:visible; }
.chicken img{ width:100%; height:100%; display:block; object-fit:contain; object-position:50% 100%; }

@keyframes hop{
  0%  { transform:translateX(-50%) translateY(0)      scaleY(1); }
  18% { transform:translateX(-50%) translateY(4%)     scaleY(.9); }
  50% { transform:translateX(-50%) translateY(-42%)   scaleY(1.06); }
  82% { transform:translateX(-50%) translateY(2%)     scaleY(.94); }
  100%{ transform:translateX(-50%) translateY(0)      scaleY(1); }
}
@keyframes bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(-3%); }
}
.chicken--idle{ animation:bob 1.9s ease-in-out infinite; }
.chicken--hop { animation:hop var(--step-ms) ease-in-out 1; }
.chicken--dead{ animation:none; transform:translateX(-50%) rotate(0deg); }

/* ============================================================
   CONTROL PANEL
   ============================================================ */
.panel{
  flex:0 0 auto;
  display:grid; gap:calc(10px * var(--ui)) calc(16px * var(--ui));
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.45fr);
  grid-template-areas:
    "bet mid  action"
    "bet meta action";
  align-items:center;
  width:100%; max-width:1020px; margin:10px auto 0;
  padding:calc(13px * var(--ui)) calc(15px * var(--ui));
  border-radius:16px;
  background:linear-gradient(180deg,#31364F 0%,var(--panel) 42%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 -6px 22px rgba(0,0,0,.35);
}

.panel__bet{ grid-area:bet; display:flex; flex-direction:column; gap:9px; }
.panel__mid{ grid-area:mid; display:flex; flex-direction:column; gap:9px; align-items:center; }
.panel__meta{ grid-area:meta; display:flex; align-items:baseline; justify-content:center; gap:8px; }
.actions{ align-self:stretch; }

.field-label{
  font-size:calc(13px * var(--ui)); font-weight:700; color:var(--text-dim);
  text-align:center; letter-spacing:.1px;
}

/* ---------- bet stepper ---------- */
.stepper{
  display:flex; align-items:center; gap:6px;
  padding:6px; border-radius:12px; background:var(--panel-inset-2);
}
.stepper__side{
  flex:0 0 auto; min-width:calc(62px * var(--ui)); padding:calc(9px * var(--ui)) calc(12px * var(--ui));
  border:0; border-radius:9px; cursor:pointer;
  background:var(--panel-inset); color:var(--text);
  font-family:var(--font); font-size:calc(12px * var(--ui)); font-weight:800; letter-spacing:.4px;
  transition:background .15s ease, transform .08s ease;
}
.stepper__side:hover{ background:#454B6C; }
.stepper__side:active{ transform:scale(.96); }
.stepper__value{
  flex:1 1 auto; min-width:0; width:100%;
  border:0; background:transparent; outline:none;
  color:var(--text); font-family:var(--font);
  font-size:calc(19px * var(--ui)); font-weight:800; text-align:center;
}
.quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.quick__btn{
  padding:calc(9px * var(--ui)) 4px; border:0; border-radius:9px; cursor:pointer;
  background:var(--panel-inset-2); color:var(--text);
  font-family:var(--font); font-size:calc(12px * var(--ui)); font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:4px;
  transition:background .15s ease, transform .08s ease;
}
.quick__btn:hover{ background:var(--panel-inset); }
.quick__btn:active{ transform:scale(.95); }
.quick__coin{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#5B6188,#464B6E);
  font-size:8px; font-weight:800; color:#CFD4EE;
}

/* ---------- difficulty ---------- */
.difficulty{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  width:100%; padding:4px; border-radius:11px; background:var(--panel-inset-2);
}
.difficulty__btn{
  padding:calc(9px * var(--ui)) 2px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--text-mute);
  font-family:var(--font); font-size:calc(13px * var(--ui)); font-weight:700;
  transition:background .18s ease, color .18s ease;
}
.difficulty__btn:hover:not(.is-on){ color:var(--text-dim); }
.difficulty__btn.is-on{ background:var(--panel-inset); color:var(--text); }
.difficulty.is-locked{ opacity:.5; pointer-events:none; }

.collision{ font-size:calc(15px * var(--ui)); font-weight:800; color:var(--text); }

/* ---------- action button ---------- */
.actions{
  grid-area:action;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:10px;
  align-items:stretch;
}
.action{
  width:100%; padding:calc(17px * var(--ui)) 10px;
  border:0; border-radius:13px; cursor:pointer;
  font-family:var(--font); font-size:calc(20px * var(--ui));
  font-weight:800; letter-spacing:.6px; color:#fff;
  transition:filter .15s ease, transform .08s ease;
  line-height:1.15;
}
.action:active{ transform:scale(.985); }
.action:hover{ filter:brightness(1.07); }
.action--play{
  background:linear-gradient(180deg,var(--green-hi) 0%,var(--green) 45%,var(--green-lo) 100%);
  box-shadow:0 4px 0 #1B8C2F, 0 8px 18px rgba(47,201,74,.28);
}
.action--cashout{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding-left:6px; padding-right:6px;
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 45%,#C99B00 100%);
  box-shadow:0 4px 0 #9A7700, 0 8px 18px rgba(240,185,0,.28);
  color:#2A1F00;
}
.action__label{ font-size:calc(12px * var(--ui)); font-weight:800; line-height:1.15; white-space:nowrap; }
.action__amount{ font-size:calc(17px * var(--ui)); font-weight:800; line-height:1.1; white-space:nowrap; }
.action:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ---------- legal strip ---------- */
.legal{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:calc(7px * var(--ui)) 12px calc(7px * var(--ui) + env(safe-area-inset-bottom));
  font-size:calc(11px * var(--ui)); color:var(--text-mute); text-align:center;
}
.legal__sep{ opacity:.5; }
.legal b{ color:var(--text-dim); font-weight:700; }

/* ============================================================
   OVERLAY
   ============================================================ */
.overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(9,10,17,.88);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fadeIn .25s ease;
}
.overlay[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to  { opacity:1; transform:none; }
}

.overlay__card{
  width:100%; max-width:400px; padding:26px 22px 22px;
  border-radius:20px; text-align:center;
  background:linear-gradient(180deg,#333857 0%,#232739 100%);
  box-shadow:0 22px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
  animation:popIn .3s cubic-bezier(.2,.9,.3,1.2);
}
.overlay__art{ width:104px; height:104px; margin:0 auto 12px; }
.overlay__art svg{ width:100%; height:100%; display:block; }
.overlay__kicker{
  font-size:12px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--text-mute); margin-bottom:8px;
}
.overlay__title{ font-size:21px; font-weight:800; line-height:1.25; margin-bottom:6px; }
.overlay__amount{
  font-size:38px; font-weight:800; line-height:1.1; margin:4px 0 10px;
  color:var(--gold-hi);
  text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 26px rgba(255,216,77,.35);
}
.overlay__text{ font-size:14px; line-height:1.5; color:var(--text-dim); margin-bottom:18px; }
.overlay__cta{
  display:block; width:100%; padding:17px 12px; margin-bottom:10px;
  border:0; border-radius:13px; cursor:pointer;
  font-family:var(--font); font-size:17px; font-weight:800; letter-spacing:.4px;
  color:#fff; text-decoration:none;
  background:linear-gradient(180deg,var(--green-hi) 0%,var(--green) 45%,var(--green-lo) 100%);
  box-shadow:0 4px 0 #1B8C2F, 0 10px 24px rgba(47,201,74,.35);
  animation:ctaPulse 2.1s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.025); }
}
.overlay__ghost{
  display:block; width:100%; padding:12px; border:0; border-radius:11px;
  background:transparent; color:var(--text-mute); cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:700;
}
.overlay__ghost:hover{ color:var(--text-dim); }
.overlay__fine{ margin-top:12px; font-size:10.5px; line-height:1.45; color:var(--text-mute); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .panel{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "meta meta"
      "bet  mid"
      "action action";
    gap:9px 12px;
  }
  .panel__meta{ justify-content:center; }
}
@media (max-width:520px){
  .panel{
    grid-template-columns:1fr;
    grid-template-areas:"meta" "mid" "bet" "action";
    gap:8px; margin:8px 8px 0; padding:10px;
  }
  .stepper__side{ min-width:52px; padding:8px 8px; font-size:11px; }
  .stepper__value{ font-size:17px; }
  .field-label{ font-size:12px; }
  .difficulty__btn{ font-size:12px; padding:8px 2px; }
  .action{ padding:15px 10px; font-size:17px; }
  .actions{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .legal{ font-size:10px; }
}
@media (max-height:640px){
  .panel{ gap:6px 12px; padding:8px 10px; }
  .quick__btn{ padding:7px 4px; }
  .action{ padding:12px 10px; }
}

/* ============================================================
   LOGO  (built in HTML so it survives any font stack)
   ============================================================ */
.logo{
  display:flex; align-items:center; justify-content:center; gap:.06em;
  font-weight:800; letter-spacing:.02em; color:#fff;
  line-height:1; white-space:nowrap;
}
.topbar .logo{ font-size:clamp(19px,3.4vw,34px); }
.loader .logo{ font-size:clamp(26px,7vw,46px); }
.logo__egg{
  display:inline-block;
  width:.78em; height:.95em;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(60% 45% at 38% 28%, #FFF0A8 0%, #FFD447 38%, #E8A600 100%);
  box-shadow:inset -2px -3px 6px rgba(150,90,0,.45), 0 0 12px rgba(255,196,0,.35);
  transform:translateY(.02em);
}

/* ============================================================
   END ZONE  (road keeps filling after the last lane)
   ============================================================ */
.endzone{
  position:relative;
  /* at least a full screen of wall past the finish, whatever the window */
  flex:0 0 max(calc(var(--lane-w) * 4), 100vw);
  /* deliberately no background: the stage's road surface shows through here,
     so the tarmac carries on past the last lane and right up to the gateway */
}
/* the wall only begins after the finish, never underneath it */
.endzone::after{
  content:''; position:absolute; top:0; bottom:0; right:0;
  left:calc(var(--lane-w) * 1.62);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px calc(var(--lane-w) * .26)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 2px, transparent 2px calc(var(--lane-w) * .17)),
    linear-gradient(180deg,#232741 0%,#181B2C 100%);
}
.endzone__gate{
  position:absolute; left:calc(var(--lane-w) * .55); bottom:13.5%;
  width:calc(var(--lane-w) * .9); height:calc(var(--lane-w) * .88);
  border-radius:50% 50% 6px 6px / 34% 34% 6px 6px;
  overflow:hidden;
  background:linear-gradient(180deg,#3A3050 0%,#221C33 100%);
  box-shadow:inset 0 0 0 3px rgba(255,212,71,.35), 0 0 30px rgba(255,196,0,.18);
}
/* The road carries on through the doorway instead of stopping at a dark
   threshold, so the grain sits at the end of the surface the chicken walks. */
.endzone__gate::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:30%;
  background:
    linear-gradient(180deg,
      rgba(91,97,136,0) 0%,
      rgba(91,97,136,.55) 26%,
      rgba(99,105,146,.92) 60%,
      rgba(84,90,126,.98) 100%);
}
/* warm spill from the grain onto that floor */
.endzone__gate::after{
  content:''; position:absolute; left:12%; right:12%; bottom:0; height:22%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,196,0,.30), transparent 70%);
}

/* the last stretch of road, dashes and all, leading into the gateway */
.endzone::before{
  content:''; position:absolute; top:0; bottom:13.5%; left:0;
  width:4px; border-radius:2px;
  background:repeating-linear-gradient(
    180deg, var(--divider) 0 26px, transparent 26px 52px);
  opacity:.85;
}

/* the grain trail running along the road into the gateway */
.endzone__trail{
  position:absolute; left:0; bottom:13.2%;
  width:calc(var(--lane-w) * .60);
  height:calc(var(--lane-w) * .17);
  pointer-events:none;
}
.endzone__trail svg{ width:100%; height:100%; display:block; }

/* the grain heap sitting in the gateway; --feed-grow is driven from
   UI.paintFeed() so the pile swells as the chicken clears lanes */
.endzone__feed{
  --feed-grow:.44;
  --feed-glow:.18;
  position:absolute; left:50%;
  transform:translateX(-50%) scale(var(--feed-grow));
  transform-origin:50% 100%;
  bottom:5%; width:76%;
  filter:drop-shadow(0 0 16px rgba(255,196,0,var(--feed-glow)));
  transition:transform .55s cubic-bezier(.2,.9,.3,1.15), filter .55s ease;
}
.endzone__feed svg{ width:100%; height:auto; display:block; }

/* disc: the clickable lane gets its own brighter face */
.lane__disc .face-next{ opacity:0; }
.lane--next .lane__disc .face-default{ opacity:0; }
.lane--next .lane__disc .face-next{ opacity:1; }

/* flame flicker */
@keyframes flick{
  0%,100%{ transform:translateX(-50%) scaleY(1)    scaleX(1); }
  33%    { transform:translateX(-50%) scaleY(1.16) scaleX(.92); }
  66%    { transform:translateX(-50%) scaleY(.9)   scaleX(1.07); }
}
.lane--next .lane__fire,
.lane--crash .lane__fire{ animation:flick .45s ease-in-out infinite; transform-origin:50% 100%; }

/* dev banner when no offer URL is configured yet */
.devnote{
  position:fixed; left:50%; bottom:8px; transform:translateX(-50%);
  z-index:300; max-width:92vw;
  padding:7px 13px; border-radius:9px;
  background:rgba(240,185,0,.14); border:1px solid rgba(240,185,0,.4);
  color:#FFD84D; font:600 11.5px/1.4 var(--font); text-align:center;
}