@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700;900&family=Nunito:wght@400;700&display=swap');

/* =====================================================
   Chicken Roll Rush — arcade scoreboard / farm menu poster
   Palette pulled from theme/palette/Palette.kt
   ===================================================== */

:root{
  --rush-yellow:      #FFB300;
  --rush-yellow-l:    #FDD835;
  --rush-cream:       #FFF8E1;
  --rush-cream-hi:    #FFF3D0;
  --rush-cream-lo:    #FFE097;

  --rush-wood:        #C98A00;
  --rush-brown2:      #A07649;
  --rush-brown3:      #8A5A2B;
  --rush-brown4:      #6E4A28;
  --rush-brown-d:     #4E342E;

  --rush-grad-0:      #FFD54F;
  --rush-grad-1:      #FFC107;
  --rush-grad-2:      #D9994A;
  --rush-grad-3:      #A07649;
  --rush-grad-4:      #5D4037;

  --rush-radius-pill: 28px;
  --rush-radius-hud:  18px;
  --rush-radius-card: 22px;
}

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

body{
  font-family:'Nunito', system-ui, sans-serif;
  color:var(--rush-brown-d);
  line-height:1.55;
  background:
    linear-gradient(
      180deg,
      var(--rush-grad-0) 0%,
      var(--rush-grad-1) 22%,
      var(--rush-grad-2) 55%,
      var(--rush-grad-3) 78%,
      var(--rush-grad-4) 100%
    );
  min-height:100vh;
  padding:28px 18px 40px;
}

img{ display:block; max-width:100%; }

/* ========== STAGE ========== */
.rush-stage{
  max-width:960px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:34px;
}

/* ========== CHUNKY PILL (mirrors ChunkyButton + HudChip) ========== */
.rush-pill{
  position:relative;
  border-radius:var(--rush-radius-pill);
  padding-bottom:10px;   /* leaves room for shadow bar */
}
.rush-pill__inner{
  position:relative;
  background:linear-gradient(180deg, var(--rush-cream-hi) 0%, var(--rush-cream-lo) 100%);
  border-radius:var(--rush-radius-pill);
  padding:26px 24px;
  border:3px solid transparent;
  background-clip:padding-box;
  box-shadow:
    inset 0 -6px 0 rgba(201,138,0,.18),
    inset 0 2px 0 rgba(255,255,255,.55);
  z-index:2;
}
/* the 2dp warm-brown gradient border, done as a wrap */
.rush-pill{
  background:linear-gradient(180deg, var(--rush-wood) 0%, var(--rush-brown3) 100%);
  padding:3px 3px 10px;
}
.rush-pill__shadow{
  position:absolute;
  left:6px; right:6px; bottom:0;
  height:10px;
  border-radius:0 0 var(--rush-radius-pill) var(--rush-radius-pill);
  background:linear-gradient(180deg, var(--rush-brown3) 0%, var(--rush-brown-d) 100%);
  z-index:1;
}

/* ========== HERO ========== */
.rush-hero{ padding-top:6px; }
.rush-pill--hero .rush-pill__inner{ padding:32px 26px 34px; }
.rush-hero__inner{ text-align:center; }
.rush-hero__icon-wrap{
  width:168px; height:168px;
  margin:0 auto 18px;
  border-radius:32px;
  background:linear-gradient(180deg, var(--rush-yellow-l), var(--rush-yellow));
  border:3px solid var(--rush-brown3);
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    inset 0 -8px 0 rgba(110,74,40,.22),
    0 8px 0 var(--rush-brown-d);
  overflow:hidden;
}
.rush-hero__icon{
  width:100%; height:100%; object-fit:cover;
  border-radius:28px;
}
.rush-hero__title{
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:clamp(42px, 8vw, 76px);
  line-height:.95;
  letter-spacing:-0.5px;
  margin:6px 0 12px;
  color:var(--rush-brown-d);
  text-shadow:
     0 2px 0 var(--rush-cream),
     0 4px 0 var(--rush-wood),
     0 6px 0 var(--rush-brown4);
}
.rush-hero__tag{
  font-family:'Nunito', sans-serif;
  font-weight:700;
  font-size:clamp(15px, 2.4vw, 20px);
  color:var(--rush-brown4);
  margin:0 auto 22px;
  max-width:520px;
}
.rush-hero__chips{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
}

/* ========== HUD CHIP (mirrors HudChip 18dp radius, gold border) ========== */
.rush-hudchip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
  color:var(--rush-brown-d);
  background:linear-gradient(180deg, var(--rush-cream-hi) 0%, var(--rush-cream-lo) 100%);
  border:2px solid var(--rush-wood);
  border-radius:var(--rush-radius-hud);
  padding:8px 14px;
  box-shadow: 0 3px 0 var(--rush-brown3);
}
.rush-hudchip--price{ margin-top:14px; }

/* ========== BLOCK / HEADING ========== */
.rush-block{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.rush-heading{
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:clamp(24px, 4.4vw, 34px);
  color:var(--rush-cream);
  text-align:center;
  margin:0;
  letter-spacing:.5px;
  text-shadow:
     0 2px 0 var(--rush-brown3),
     0 4px 0 var(--rush-brown4),
     0 6px 10px rgba(0,0,0,.25);
}
.rush-lede{
  text-align:center;
  font-family:'Nunito', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--rush-cream);
  margin:-4px auto 0;
  max-width:560px;
  text-shadow: 0 1px 0 rgba(94,64,55,.4);
}

/* ========== RUN CARDS (block 2) ========== */
.rush-runcards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.rush-runcard{
  background:var(--rush-cream);
  border:3px solid var(--rush-wood);
  border-radius:var(--rush-radius-card);
  padding:18px 16px 20px;
  text-align:center;
  box-shadow:
    inset 0 -5px 0 rgba(201,138,0,.18),
    0 6px 0 var(--rush-brown-d);
}
.rush-runcard__emoji{
  font-size:34px; display:block; margin-bottom:6px;
}
.rush-runcard__title{
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:20px;
  letter-spacing:1px;
  margin:2px 0 8px;
  color:var(--rush-brown-d);
}
.rush-runcard__body{
  font-family:'Nunito', sans-serif;
  font-weight:400;
  font-size:14px;
  color:var(--rush-brown4);
  margin:0;
}

/* ========== PICKUP LIST (block 3) ========== */
.rush-pickuplist{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:12px;
}
.rush-pickup{
  display:flex; align-items:center; gap:14px;
  background:var(--rush-cream);
  border:3px solid var(--rush-wood);
  border-radius:20px;
  padding:14px 18px;
  box-shadow:
    inset 0 -4px 0 rgba(201,138,0,.15),
    0 5px 0 var(--rush-brown4);
}
.rush-pickup__dot{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--rush-brown-d);
  box-shadow: 0 2px 0 var(--rush-brown-d);
  flex-shrink:0;
}
.rush-pickup__emoji{
  font-size:28px;
  width:44px; text-align:center;
  flex-shrink:0;
}
.rush-pickup__text{ display:flex; flex-direction:column; gap:2px; }
.rush-pickup__text b{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--rush-brown-d);
}
.rush-pickup__text span{
  font-family:'Nunito', sans-serif;
  font-size:14px;
  color:var(--rush-brown4);
}

/* ========== POWER PILLS (block 4) ========== */
.rush-power{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.rush-pill--power .rush-pill__inner{
  padding:22px 22px 20px;
  text-align:center;
}
.rush-power__title{
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:26px;
  color:var(--rush-brown-d);
  margin:0 0 10px;
  letter-spacing:.5px;
}
.rush-power__body{
  font-family:'Nunito', sans-serif;
  font-weight:400;
  font-size:15px;
  color:var(--rush-brown4);
  margin:0;
}

/* ========== WEEKLY BONUS (block 5) ========== */
.rush-week{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
}
.rush-day{
  border-radius:16px;
  padding:14px 6px 12px;
  text-align:center;
  border:3px solid var(--rush-brown3);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.15),
    0 4px 0 var(--rush-brown-d);
  display:flex; flex-direction:column; gap:6px;
  min-height:78px;
  justify-content:center;
}
.rush-day__num{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
}
.rush-day__reward{
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:16px;
}
/* past = green (in-game DayCell claimed) */
.rush-day--past{
  background:linear-gradient(180deg, #B8DE8C 0%, #7CB454 100%);
  color:#2E4A18;
}
/* today = gold (in-game DayCell today) */
.rush-day--today{
  background:linear-gradient(180deg, var(--rush-yellow-l) 0%, var(--rush-yellow) 100%);
  color:var(--rush-brown-d);
  transform:translateY(-2px);
  box-shadow:
    inset 0 -4px 0 rgba(201,138,0,.35),
    0 6px 0 var(--rush-brown-d);
}
/* locked = tan (in-game DayCell locked) */
.rush-day--locked{
  background:linear-gradient(180deg, #E6C29A 0%, #C9A268 100%);
  color:var(--rush-brown-d);
  opacity:.85;
}

/* ========== ROADMAP (block 6) ========== */
.rush-roadmap{
  display:flex;
  gap:10px;
  align-items:center;
  overflow-x:auto;
  padding:6px 4px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--rush-brown3) transparent;
}
.rush-roadmap::-webkit-scrollbar{ height:8px; }
.rush-roadmap::-webkit-scrollbar-thumb{
  background:var(--rush-brown3); border-radius:8px;
}
.rush-tag{
  flex:0 0 auto;
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.5px;
  color:var(--rush-brown-d);
  background:linear-gradient(180deg, var(--rush-cream-hi), var(--rush-cream-lo));
  border:2px solid var(--rush-wood);
  border-radius:14px;
  padding:8px 14px;
  box-shadow: 0 3px 0 var(--rush-brown3);
  white-space:nowrap;
}
.rush-tag__arrow{
  flex:0 0 auto;
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:18px;
  color:var(--rush-cream);
  text-shadow: 0 2px 0 var(--rush-brown-d);
}

/* ========== FOOTER ========== */
.rush-footer{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.rush-footer__card{
  background:var(--rush-cream);
  border:3px solid var(--rush-wood);
  border-radius:20px;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  text-align:center;
  box-shadow: 0 4px 0 var(--rush-brown4);
}
.rush-footer__mark{
  font-family:'Fredoka', sans-serif;
  font-weight:900;
  font-size:16px;
  color:var(--rush-brown-d);
  letter-spacing:.5px;
}
.rush-footer__note{
  font-family:'Nunito', sans-serif;
  font-weight:400;
  font-size:13px;
  color:var(--rush-brown4);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 780px){
  .rush-runcards{ grid-template-columns:1fr; }
  .rush-power{ grid-template-columns:1fr; }
  .rush-week{ grid-template-columns:repeat(7, 1fr); gap:6px; }
  .rush-day{ padding:10px 2px; min-height:68px; }
  .rush-day__num{ font-size:11px; }
  .rush-day__reward{ font-size:13px; }
}

@media (max-width: 480px){
  body{ padding:18px 12px 32px; }
  .rush-stage{ gap:26px; }
  .rush-pill--hero .rush-pill__inner{ padding:24px 18px 26px; }
  .rush-hero__icon-wrap{ width:132px; height:132px; border-radius:26px; }
  .rush-hero__icon{ border-radius:22px; }
  .rush-pickup{ padding:12px 14px; gap:10px; }
  .rush-pickup__emoji{ font-size:24px; width:36px; }
  .rush-pickup__text b{ font-size:16px; }
  .rush-pickup__text span{ font-size:13px; }
}