/*
  REDDY · revisione landing (29/09/2026)
  Caricato dopo la build e dopo reddy-extra.css.
  1. Titoli in un carattere leggibile (Rubik); il pixel resta solo nel marchio.
  2. Testi piccoli (etichette, tab, HUD) ingranditi.
  3. Fascia "Promosso da" più snella.
  4. Ambienti: solo video.
  5. Lucca: banda "promemoria" trasversale + calendario ospiti.
  6. CTA "Gioca ora" dopo Reddy, pulsante fisso su mobile, più evidente su desktop.
*/

:root {
  --font-pixel: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --font-display: "Rubik", "Trebuchet MS", system-ui, sans-serif;
  --rx-head: "Rubik", system-ui, sans-serif;
}

/* ---------------------------------------------------------------
   1. Titoli: meno pixel. Il marchio REDDY resta in pixel art.
   --------------------------------------------------------------- */
.hero__title-main,
.hero__title-tag,
.logo__name,
.reddy__name {
  font-family: var(--font-pixel);
}
.heading {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero__headline,
.attribution__claim {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.step__title,
.why__point h3,
.level-tab__name,
.runner-band__item {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   2. Testi più grandi
   --------------------------------------------------------------- */
.section-label        { font-size: .9rem; }
.section__hint        { font-size: .9rem; }
.hud-chip             { font-size: .8rem; }
.hud-counter__label   { font-size: .8rem; }
.scroll-hud__value    { font-size: .7rem; }
.site-header__promoter-role,
.logo__tag            { font-size: .65rem; }
.site-footer__role,
.site-footer__bottom  { font-size: .8rem; }
.parkour__hud         { font-size: .75rem; }
.attribution__role    { font-size: .8rem; }
.game-video__hint     { font-size: .7rem; }
.hero__eyebrow        { font-size: .85rem; }
.hero__scroll         { font-size: .8rem; }
.hero__body           { font-size: clamp(1.0625rem, 1.6vw, 1.2rem); }
.intro__caption       { font-size: .85rem; line-height: 1.6; }
.section__intro       { font-size: 1.2rem; }
.why__point h3        { font-size: 1.45rem; }
.why__point p,
.step__body           { font-size: 1.0625rem; }
.intro__body p,
.reddy__copy p        { font-size: 1.125rem; }

/* Tab degli ambienti */
.level-tab            { gap: .5rem; min-height: 116px; }
.level-tab__no        { font-size: .8rem; }
.level-tab__name      { font-size: 1.6rem; }
@media (max-width: 1100px) {
  .level-tab__name    { font-size: 1.35rem; }
}
@media (max-width: 560px) {
  .level-tab          { min-height: 104px; padding: .85rem 3rem .85rem .85rem; }
  .level-tab__no      { font-size: .7rem; white-space: nowrap; }
  .level-tab__name    { font-size: 1.1rem; hyphens: auto; overflow-wrap: anywhere; }
  .level-tab__chip    { --tile: 34px !important; right: .5rem; bottom: .5rem; }
}

/* Pulsanti */
.pixel-btn--sm        { font-size: .8rem; }
.pixel-btn--md        { font-size: .9rem; }
.pixel-btn--lg        { font-size: 1.05rem; }

.site-nav ul a,
.pixel-btn            { white-space: nowrap; }
@media (min-width: 1280px) {
  .site-nav ul a      { font-size: .85rem; }
}

/* Modulo "caccia al rischio" */
.rx-counter           { font-size: 13px; padding: 10px 14px; }
.rx-counter__pip      { width: 10px; height: 10px; }
.rx-toast__kicker     { font-size: 13px; }
.rx-toast__text       { font-size: 16px; }
.rx-stun__bubble      { font-size: 12px; }
.rx-complete__title   { font-weight: 800; }
.rx-complete__kicker,
.rx-btn               { font-size: 14px; }

/* ---------------------------------------------------------------
   3. Fascia "Promosso da" più snella
   --------------------------------------------------------------- */
.attribution {
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
}
.attribution__inner {
  gap: clamp(1rem, 2.5vw, 2rem);
}
.attribution__claim {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

/* ---------------------------------------------------------------
   4. Ambienti: solo video
   --------------------------------------------------------------- */
.level-panel__meta { display: none; }

/* ---------------------------------------------------------------
   5. Lucca: banda "promemoria" + calendario ospiti
   --------------------------------------------------------------- */
.section--lucca {
  overflow: hidden;
  padding-block-end: clamp(3rem, 7vw, 5.5rem);
}

.lucca-memo {
  position: relative;
  z-index: 1;
  margin-inline: -4vw;
  margin-block: clamp(.5rem, 2vw, 1.5rem) clamp(3rem, 6vw, 4.5rem);
  rotate: -3deg;
}
.lucca-memo__paper {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: clamp(1.6rem, 4vw, 2.6rem) calc(4vw + var(--gutter));
  text-align: center;
  color: var(--text-on-light);
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(10, 26, 18, .09) 31px 33px),
    var(--c-amber);
  border-block: var(--edge) solid var(--c-black);
  box-shadow: 0 14px 0 rgba(0, 0, 0, .35);
}
/* margine rosso da blocco appunti */
.lucca-memo__paper::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(4vw + var(--gutter) - 1.25rem);
  width: 3px;
  background: var(--c-red);
  opacity: .55;
}
.lucca-memo__tape {
  position: absolute;
  top: -18px;
  width: clamp(80px, 12vw, 140px);
  height: 34px;
  background: rgba(244, 236, 219, .78);
  border: 2px solid rgba(0, 0, 0, .12);
}
.lucca-memo__tape--l { left: 16%; rotate: -5deg; }
.lucca-memo__tape--r { right: 16%; rotate: 6deg; }
.lucca-memo__kicker {
  font-family: var(--font-hud);
  font-size: .85rem;
  letter-spacing: .2em;
  color: var(--c-red-dark);
  border: 2px solid currentColor;
  padding: .35rem .6rem;
  rotate: 2deg;
}
.lucca-memo__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lucca-memo__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.5rem;
  margin: .2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}
.lucca-memo__meta span + span::before {
  content: "✦";
  margin-inline-end: 1.5rem;
  color: var(--c-red);
}

.lucca__intro {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  margin-block-end: 2rem;
}
.lucca__reddy { flex-shrink: 0; }
.lucca__cal-title {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--c-yellow);
}
.lucca__intro .lucca__body {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
}

.lucca-cal {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lucca-day {
  display: grid;
  align-content: start;
  background: var(--bg-raised);
  border: var(--edge) solid var(--c-black);
  box-shadow: var(--shadow-block-sm);
}
.lucca-day__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num wd" "num month";
  align-items: center;
  column-gap: .6rem;
  margin: 0;
  padding: .8rem 1rem;
  background: var(--c-yellow);
  color: var(--text-on-light);
  border-block-end: var(--edge) solid var(--c-black);
}
.lucca-day__num {
  grid-area: num;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
}
.lucca-day__wd,
.lucca-day__month {
  font-family: var(--font-hud);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lucca-day__wd { grid-area: wd; align-self: end; }
.lucca-day__month { grid-area: month; align-self: start; }
.lucca-day__slots {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 1rem;
  list-style: none;
}
.lucca-slot {
  display: grid;
  gap: .2rem;
  padding-inline-start: .75rem;
  border-inline-start: 3px solid var(--c-cyan);
}
.lucca-slot__time {
  font-family: var(--font-hud);
  font-size: .8rem;
  color: var(--c-cyan);
}
.lucca-slot__name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.lucca-slot.is-tbc { border-inline-start-style: dashed; }
.lucca-slot.is-tbc .lucca-slot__name { color: var(--text-muted); font-weight: 500; }

.section--lucca .lucca__pending {
  margin-block-start: 1.25rem;
  font-size: .8rem;
}

@media (max-width: 1023px) {
  .lucca-cal { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 560px) {
  .lucca-memo { rotate: -4deg; margin-inline: -12vw; }
  .lucca-memo__paper { padding-inline: calc(12vw + var(--gutter)); }
  .lucca-memo__paper::before { left: calc(12vw + var(--gutter) - .75rem); }
  .lucca-memo__meta { flex-direction: column; gap: .25rem; }
  .lucca-memo__meta span + span::before { content: none; }
  .lucca__intro { align-items: center; }
  .lucca__reddy { --sprite-w: 48px !important; --sprite-h: 72px !important; }
  .lucca-cal { grid-template-columns: 1fr; }
  .lucca-day { grid-template-columns: 110px 1fr; }
  .lucca-day__head {
    grid-template-columns: 1fr;
    grid-template-areas: "wd" "num" "month";
    justify-items: center;
    align-content: center;
    row-gap: .15rem;
    border-block-end: 0;
    border-inline-end: var(--edge) solid var(--c-black);
  }
}

/* ---------------------------------------------------------------
   6. "Gioca ora"
   --------------------------------------------------------------- */

/* CTA dopo la presentazione di Reddy */
.play-cta {
  position: relative;
  background: var(--c-yellow);
  color: var(--text-on-light);
  border-block: var(--edge) solid var(--c-black);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  overflow: hidden;
}
.play-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(0, 0, 0, .05) 22px 44px);
  pointer-events: none;
}
.play-cta__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  text-align: left;
}
.play-cta__copy { max-width: 30ch; }
.play-cta__kicker {
  margin: 0 0 .35rem;
  font-family: var(--font-hud);
  font-size: .85rem;
  letter-spacing: .14em;
  color: var(--c-red-dark);
}
.play-cta__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.play-cta .pixel-btn.play-cta__btn {
  --btn-bg: var(--c-red);
  --btn-fg: var(--c-white);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  padding: 1.35rem 2.4rem;
  box-shadow: 8px 8px 0 var(--c-black);
}
.play-cta .pixel-btn.play-cta__btn:hover {
  background: #e51a36;
  box-shadow: 10px 10px 0 var(--c-black);
}
.play-cta :focus-visible { outline-color: var(--text-on-light); }

/* Desktop: "Gioca ora" nell'header più evidente */
@media (min-width: 1024px) {
  .site-header__play .pixel-btn {
    --btn-bg: var(--c-red);
    --btn-fg: var(--c-white);
    font-size: .9rem;
    padding: .85rem 1.2rem;
    animation: rv-pulse 2.4s steps(2, end) infinite;
  }
  .site-header__play .pixel-btn:hover { background: #e51a36; animation: none; }
}
@keyframes rv-pulse {
  0%, 70%, 100% { box-shadow: var(--shadow-block-sm); }
  80% { box-shadow: var(--shadow-block-sm), 0 0 0 5px rgba(252, 175, 2, .9); }
}

/* Mobile: pulsante fisso per tutto lo scorrimento */
.play-sticky { display: none; }
@media (max-width: 1023px) {
  .play-sticky {
    position: fixed;
    z-index: 35;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: calc(var(--sticky-h) + env(safe-area-inset-bottom));
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--bg-sunken);
    border-block-start: 2px solid var(--line);
  }
  :root { --sticky-h: 76px; }
  .play-sticky .pixel-btn {
    --btn-bg: var(--c-red);
    --btn-fg: var(--c-white);
    width: 100%;
    height: 100%;
    font-size: 1.05rem;
    padding-block: 0;
  }
  /* la pista del corridore e il fumetto salgono sopra la barra */
  .parkour { bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
  .rx-toast { bottom: calc(var(--sticky-h) + 76px); }
  .site-footer { padding-block-end: calc(var(--sticky-h) + 5rem); }
  /* il pulsante nell'header diventa superfluo accanto a quello fisso */
  .site-header__play { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__play .pixel-btn { animation: none; }
}
@media print {
  .play-sticky { display: none !important; }
}

/* Footer: credito */
.site-footer__credit { margin: 0; }
.site-footer__credit a {
  color: var(--c-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__credit a:hover { color: var(--text); }