/* ============================================================
   סופר נהוראי - the chapters added on top of styles.css
   Same palette, same panels, same gold pills. This file only adds
   the sections that did not exist before: the contest flag, the rank
   ladder, the city, the mini-games, the price of a bad night, the
   rap sheet and the contest itself.
   Every var() below is declared in styles.css - nothing is redefined.
   ============================================================ */

/* ============================================================
   CONTEST FLAG - the first thing on the page
   Deliberately the loudest object on the site: gold on gold with a
   sweep across it. It is a real cash prize with a real deadline, so
   it earns the top strip. Below the deadline it swaps to a dead-calm
   grey line instead of counting into the negative.
   ============================================================ */
.cflag {
  display: block; position: relative; overflow: hidden;
  background: linear-gradient(100deg, #b8963a 0%, #e8c84a 22%, #fff2b8 50%, #e8c84a 78%, #b8963a 100%);
  color: #17130a; text-decoration: none;
  box-shadow: 0 10px 34px rgba(232, 200, 74, .3);
  border-bottom: 2px solid rgba(0, 0, 0, .35);
}
.cflag::before,
.cflag::after {
  content: ''; position: absolute; inset-inline: 0; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 10px, transparent 10px 20px);
}
.cflag::before { top: 0; }
.cflag::after { bottom: 0; }

.cflag-shine {
  position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-160%);
  animation: cflagShine 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cflagShine {
  0%, 62% { transform: translateX(-160%); }
  100%    { transform: translateX(260%); }
}

/* One line, always. The flag is the loudest thing on the page but it is not the
   page - a tall banner pushed the hero below the fold, which is the opposite of
   what it is for. Everything below is sized to keep it on a single row down to
   360px, shedding the least important part first. */
.cflag-in {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 14px;
  padding-block: 9px; position: relative; z-index: 2; text-align: center;
}
.cflag-kicker {
  font-weight: 900; font-size: 12.5px; letter-spacing: .05em;
  background: rgba(0,0,0,.26); color: #fff3c4;
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.cflag-title { font-weight: 900; font-size: clamp(15px, 2.1vw, 21px); line-height: 1.2; }
.cflag-title b { font-size: 1.12em; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

.cflag-count { display: flex; gap: 5px; }
.cflag-count i {
  display: flex; align-items: baseline; gap: 3px; font-style: normal;
  background: rgba(0,0,0,.28); border-radius: 8px; padding: 3px 8px;
}
.cflag-count b { font-size: 14.5px; font-weight: 900; color: #fff3c4; font-variant-numeric: tabular-nums; }
.cflag-count em { font-style: normal; font-size: 10.5px; font-weight: 700; color: rgba(255,243,196,.75); }

.cflag-over { font-weight: 900; font-size: 16px; }
.cflag-cta {
  font-weight: 900; font-size: 13px; white-space: nowrap;
  border: 2px solid rgba(0,0,0,.4); border-radius: 999px; padding: 5px 14px;
  transition: background .2s ease;
}
.cflag:hover .cflag-cta { background: rgba(0,0,0,.16); }

.cflag.over {
  background: var(--panel2); color: var(--ink-dim); box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.cflag.over .cflag-shine, .cflag.over .cflag-kicker, .cflag.over::before, .cflag.over::after { display: none; }

/* ============================================================
   HERO POLISH - lighting, not layout
   styles.css is left untouched; this section only relights the top of
   the page. The original hero was a near-black gradient with two black
   skyline layers on it, so the first screen read as a dark rectangle
   with gold text floating in it. The neighbourhood is a night street,
   not a cave: there is a street lamp under him, a lit horizon behind
   the blocks, and a neon sign down the road. All three now actually
   throw light.
   ============================================================ */
.hero {
  background:
    /* the lamp he is standing under */
    radial-gradient(95% 52% at 50% 104%, rgba(255, 205, 110, .26), transparent 60%),
    /* the club sign further up the street */
    radial-gradient(62% 46% at 86% 6%, rgba(255, 43, 214, .17), transparent 72%),
    /* cold light off the sea side */
    radial-gradient(55% 42% at 10% 16%, rgba(70, 198, 192, .11), transparent 74%),
    linear-gradient(180deg, #090a1c 0%, #16143a 38%, #2a1a4e 72%, #3a2059 100%);
}

/* the city glow that sits behind the blocks and separates them from the sky */
.hero::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  inset-inline: 0; bottom: 0; height: 42%;
  background: linear-gradient(0deg, rgba(255, 186, 112, .2) 0%, rgba(255, 186, 112, .07) 38%, transparent 100%);
}

/* lighter sky means the silhouettes can back off and still read */
.skyline.back { opacity: .45; }
.skyline.mid { opacity: .72; }

.hero-stars { opacity: .9; }

.hero-tag-top {
  color: #fff2c0;
  border-color: rgba(232, 200, 74, .5);
  background: rgba(232, 200, 74, .16);
  box-shadow: 0 4px 18px rgba(232, 200, 74, .16);
}

.hero-title { text-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 14px 40px rgba(0, 0, 0, .55); }
.hero-title .l1 { text-shadow: 0 0 34px rgba(180, 200, 255, .28); }
.hero-title .l2 { filter: drop-shadow(0 4px 18px rgba(232, 200, 74, .55)); }

.hero-sub { color: #f4ecd6; }

/* the pool of lamplight on the pavement, and the bounce it throws up on him */
.hero-char img {
  filter:
    drop-shadow(0 20px 30px rgba(0, 0, 0, .55))
    drop-shadow(0 -6px 26px rgba(255, 205, 110, .22))
    drop-shadow(0 0 46px rgba(232, 200, 74, .2));
}
.hero-char .glow {
  width: 96%; height: 32%; bottom: 3%;
  background: radial-gradient(ellipse, rgba(255, 208, 120, .5), rgba(232, 200, 74, .18) 45%, transparent 72%);
  filter: blur(10px);
  animation: lamp 5.5s ease-in-out infinite;
}
@keyframes lamp {
  0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

/* the nav rides on a lit hero now, so it needs its own floor to stay legible */
.nav { background: rgba(9, 10, 26, .55); }
.nav.scrolled { background: rgba(12, 12, 20, .92); }

@media (prefers-reduced-motion: reduce) {
  .hero-char .glow { animation: none; }
}

/* ============================================================
   SHARED - a panel, a section sub-title, a fine-print line
   ============================================================ */
.panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 22px; box-shadow: var(--shadow);
}
.panel-title {
  font-weight: 900; font-size: 18px; color: var(--gold);
  text-align: center; margin-bottom: 18px;
}
.sub-title { font-size: clamp(20px, 3.4vw, 28px); font-weight: 900; }
.fine {
  color: #6a6656; font-size: 13px; line-height: 1.6; margin: 12px 0 0;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06);
}

/* ============================================================
   EVOLUTION - the extra line under the meter, and the phone cards
   The sticky scene itself is styled by styles.css and untouched.
   ============================================================ */
.evo-opens { color: var(--ink-dim); font-size: 14px; line-height: 1.6; margin: 12px 0 0; min-height: 2.8em; }
.evo-opens b { color: var(--ink); font-weight: 700; }

.evo-cards { display: none; padding-block: 40px; }
.evo-card {
  display: grid; grid-template-columns: 86px 1fr; gap: 16px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; margin-bottom: 12px;
}
.evo-card img { width: 86px; height: auto; }
.evo-card h3 { font-size: 19px; font-weight: 900; color: var(--gold); }
.evo-card .need { font-size: 13.5px; font-weight: 900; color: var(--gold); margin: 3px 0 5px; }
.evo-card p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin: 0; }
.evo-card .opens { color: #6a6656; font-size: 13px; margin-top: 6px; }
.evo-card .opens b { color: var(--ink-dim); }

/* ============================================================
   RANK LADDER
   ============================================================ */
.ranks { padding-block: 70px; }
.ladder { list-style: none; display: grid; gap: 7px; }
.ladder li {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(232, 200, 74, .1);
  border-radius: 13px; padding: 11px 15px;
}
.ladder .lt { font-size: 21px; text-align: center; }
.ladder .ln { font-weight: 900; font-size: 16.5px; }
.ladder .lu { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-dim); }
.ladder .lc { color: var(--gold); font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; }
.ladder .crown {
  border-color: rgba(232, 200, 74, .45);
  background: linear-gradient(180deg, rgba(232, 200, 74, .12), rgba(0, 0, 0, .3));
}
/* 🤫 The ranks past the crown exist in the game and are shown there as ??? until you
   reach them. This row keeps that promise instead of spoiling three endings. */
.ladder .secret { border-style: dashed; opacity: .6; }
.ladder .secret .ln { color: var(--ink-dim); }

/* ============================================================
   THE CITY
   ============================================================ */
.city { padding-block: 70px; background: var(--bg2); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tab {
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
  font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tab[aria-selected='true'] { background: var(--gold); border-color: var(--gold); color: #17130a; font-weight: 900; }

.places { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.place {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 16px; border-inline-start: 3px solid var(--gold-deep);
}
.place.open { border-inline-start-color: var(--green); }
.place b { display: block; font-size: 16px; }

.trips { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.trip {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
}
.trip b { display: block; font-size: 18px; font-weight: 900; margin-bottom: 5px; }
.trip p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin: 0 0 9px; }
.trip .fare { color: var(--green); font-weight: 900; font-size: 14px; }

/* ============================================================
   MINI-GAMES
   The registry holds 83 entries. Printing all of them at once reads
   like a stock list, so the page prints where they live and lets you
   pull one at a time.
   ============================================================ */
/* 🎲 the shuffler is the whole section now that the category list is gone, so it gets
   the room the list used to take instead of sitting in the middle of an empty band. */
.mg { padding-block: 70px 78px; }
.mg-roll {
  text-align: center; margin-bottom: 0;
  max-width: 560px; margin-inline: auto;
  padding-block: 34px;
}
.mg-cat { color: var(--ink-dim); font-size: 14px; margin-bottom: 6px; letter-spacing: .03em; }
.mg-name {
  font-size: clamp(28px, 6vw, 44px); font-weight: 900; color: var(--gold);
  margin-bottom: 22px; min-height: 1.25em; line-height: 1.25;
}


/* ============================================================
   THE PRICE OF A BAD NIGHT
   ============================================================ */
.price { padding-block: 70px; background: var(--bg2); }
.chain { list-style: none; display: grid; gap: 12px; margin-bottom: 34px; }
.chain-step {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; border-inline-start: 3px solid var(--red);
}
.chain-ico { font-size: 26px; display: block; margin-bottom: 8px; }
.chain-step h3 { font-size: 18px; font-weight: 900; margin-bottom: 7px; }
.chain-step p { color: var(--ink-dim); font-size: 15px; line-height: 1.65; margin: 0; }

.trio { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.tile h3 { font-size: 17px; font-weight: 900; color: var(--gold); margin-bottom: 8px; }
.tile p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* ============================================================
   RAP SHEET
   ============================================================ */
.rap { padding-block: 70px; }
.rap-wrap { display: grid; gap: 24px; align-items: center; }
.rap-form label { display: block; color: var(--ink-dim); font-size: 14.5px; margin-bottom: 9px; }
.rap-row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.rap-row input {
  flex: 1; min-width: 170px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 13px 20px; font-family: inherit; font-size: 17px; color: var(--ink);
}
.rap-row input::placeholder { color: #6a6656; }
.rap-row input:focus { border-color: var(--gold); outline: none; }
#rapCanvas {
  width: min(360px, 100%); height: auto; margin-inline: auto;
  border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow);
}

/* ============================================================
   CONTEST
   ============================================================ */
.contest { padding-block: 70px; background: var(--bg2); }
.contest-panel {
  text-align: center;
  border-color: rgba(232, 200, 74, .42);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(232, 200, 74, .13), transparent 62%),
    linear-gradient(180deg, var(--panel2), var(--panel));
}
.count { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.count-cell {
  min-width: 76px; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px;
}
.count-cell b {
  display: block; font-size: 30px; font-weight: 900; color: var(--gold);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.count-cell span { font-size: 12px; color: #6a6656; }
.count-over { font-size: 22px; font-weight: 900; color: var(--ink-dim); margin-bottom: 8px; }
.count-until { font-size: 13.5px; color: #6a6656; margin-bottom: 24px; }

.prizes { list-style: none; display: grid; gap: 8px; max-width: 460px; margin: 0 auto 20px; }
.prizes li {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  background: rgba(0, 0, 0, .32); border: 1px solid var(--line);
  border-radius: 13px; padding: 12px 16px; text-align: start;
}
.prizes li:first-child {
  border-color: rgba(232, 200, 74, .5);
  background: linear-gradient(180deg, rgba(232, 200, 74, .12), rgba(0, 0, 0, .32));
}
.prizes .pe { font-size: 21px; }
.prizes .pp { font-weight: 900; }
.prizes .pv { color: var(--gold); font-weight: 900; }

.how { list-style: none; display: grid; gap: 7px; max-width: 460px; margin: 0 auto 20px; text-align: start; }
.how li { font-size: 15px; line-height: 1.6; color: var(--ink-dim); padding-inline-start: 22px; position: relative; }
.how li::before { content: '←'; position: absolute; inset-inline-start: 0; color: var(--gold); }
.how b { color: var(--ink); }
.fair { color: var(--green); font-size: 14.5px; margin-bottom: 18px; }

/* ⚖️ The rules are a legal obligation, not a selling point - they used to sit here as a
   full ghost pill, which read like an invitation. Fine print is the honest weight for a
   document that mostly limits the player, so it stays reachable and stops shouting. */
.fine-print { font-size: 11.5px; line-height: 1.6; color: var(--ink-dim); opacity: .72; margin: 0 auto; max-width: 420px; }
.fine-print a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; }
.fine-print a:hover { color: var(--gold); }

/* ============================================================
   RESPONSIVE
   Matches the breakpoints already used in styles.css (900 / 560 / 380).
   ============================================================ */
@media (min-width: 901px) {
  .rap-wrap { grid-template-columns: 1fr 380px; }
  .chain { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .cflag-in { gap: 6px 10px; }
  /* the seconds cell is the first thing to go: nobody plans around it */
  .cflag-count i:last-child { display: none; }
}

@media (max-width: 560px) {
  .cflag-kicker { display: none; }
  .cflag-title { font-size: 15px; }
  .cflag-cta { font-size: 12px; padding: 4px 11px; }
  .cflag-count b { font-size: 13.5px; }
  .places, .trio, .trips { grid-template-columns: 1fr; }
  .ladder li { grid-template-columns: 32px 1fr auto; gap: 9px; padding: 10px 12px; }
  .ladder .lt { font-size: 18px; }
  .ladder .ln { font-size: 15px; }
  .count-cell { min-width: 64px; padding: 10px 6px; }
  .count-cell b { font-size: 24px; }
}

/* ⚠️ היה כאן גם max-width: 900px, כלומר בטלפון הסצנה הנדבקת הוחלפה בפריסה של
   חמישה כרטיסים — והאבולוציה, שהיא הרגע הכי חזק בעמוד, נראתה שם כמו טבלה.
   הנימוק המקורי ("הסצנה נלחמת בסרגלי הדפדפן") כבר לא תקף: .evo-sticky עברה
   מזמן ל-100svh, שזו בדיוק היחידה שמודדת את הגובה *בלי* הסרגלים.
   הפריסה נשארת בתור מה שהיא באמת — נגישות: קורא שביקש פחות תנועה מקבל את
   חמשת השלבים גלויים בבת אחת, בלי שום דבר שמסתתר מאחורי מחווה. */
@media (prefers-reduced-motion: reduce) {
  .evo .evo-sticky { display: none; }
  .evo { height: auto !important; }
  .evo-cards { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .cflag-shine { animation: none; display: none; }
}