/* =====================================================================
   Flappy Challenge - site officiel / official website
   Palette et style extraits directement des ressources du jeu Android :
   res/drawable/toast.xml, popup.xml, MainGame.java (bgColor/columnColor)
   ===================================================================== */

/* ------------------------------ Fonts ------------------------------ */
@font-face{
  font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/pressstart2p-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/pressstart2p-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------ Tokens ----------------------------- */
:root{
  color-scheme:light;

  /* couleurs du jeu - res/drawable/toast.xml */
  --orange:#F3971A;
  --orange-lt:#F9C356;
  --orange-lter:#FFDC89;
  --orange-dk:#F1530A;
  --red:#DB1C0A;
  --burnt:#8C2A04;      /* orange sombre : contraste AA sur les fonds clairs */

  /* ciel - Bannière.png + MainGame.bgColor */
  --sky:#47C1FF;
  --sky-lt:#8CD8FF;
  --sky-pale:#B5EBFF;
  --sky-deep:#0F6FB0;

  /* neutres - res/drawable/popup.xml */
  --ink:#0B0B0B;
  --ink-soft:#3A3A3A;
  --panel:#868686;
  --panel-lt:#C4C4C4;
  --panel-dk:#727272;
  --paper:#FFFDF6;
  --cream:#FFF3D6;

  /* accents « fun » */
  --grass:#99CC33;
  --leaf:#B4DE5B;
  --mint:#70D7CA;

  --maxw:1180px;
  --ease-pop:cubic-bezier(.2,1.4,.4,1);
}

/* ---------------------------- Base reset --------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:600;
  font-size:clamp(1rem,.95rem + .25vw,1.115rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--sky-pale);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--sky-deep);text-underline-offset:3px}
a:hover{color:var(--burnt)}
button{font:inherit;color:inherit}
ul{padding-left:1.15em}
section,:target{scroll-margin-top:84px}

.px{image-rendering:pixelated;image-rendering:crisp-edges}

/* ------------------------- Typographie jeu ------------------------- */
h1,h2,h3,.h-px{font-family:'Press Start 2P','Nunito',monospace;font-weight:400;line-height:1.45;margin:0}
h1{font-size:clamp(1.45rem,1rem + 3vw,3rem)}
h2{font-size:clamp(1.02rem,.8rem + 1.4vw,1.8rem)}
h3{font-size:clamp(.8rem,.72rem + .45vw,1rem)}

.stroked{
  color:#fff;
  text-shadow:
    -3px 0 0 #000,3px 0 0 #000,0 -3px 0 #000,0 3px 0 #000,
    -3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,3px 3px 0 #000,
    0 8px 0 rgba(0,0,0,.28);
}
.stroked em{font-style:normal;color:var(--orange-lter)}

.lead{font-size:clamp(1.02rem,.95rem + .5vw,1.28rem);font-weight:700;line-height:1.6}
.eyebrow{
  font-family:'Press Start 2P',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--burnt);
  display:inline-block;margin-bottom:.9rem;
}
.muted{color:var(--ink-soft)}

/* ---------------------------- Utilitaires -------------------------- */
.wrap{width:min(100% - 2rem,var(--maxw));margin-inline:auto}
.center{text-align:center}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip-link{
  position:absolute;left:.5rem;top:-120px;z-index:300;background:#fff;color:#000;
  padding:.7rem 1.1rem;border:4px solid #000;font-family:'Press Start 2P',monospace;font-size:.66rem;
  text-decoration:none;
}
.skip-link:focus{top:.5rem}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:4px solid #0B0B0B;outline-offset:3px;box-shadow:0 0 0 10px var(--orange-lter);
}

/* --------------------- Boutons pixel (toast.xml) ------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:.95rem 1.5rem;
  font-family:'Press Start 2P',monospace;font-size:.76rem;line-height:1.4;
  color:#fff;text-decoration:none;text-align:center;
  background:var(--orange);
  border:4px solid #000;
  box-shadow:
    inset 4px 4px 0 var(--orange-lter),
    inset -4px -4px 0 var(--red),
    inset 8px 8px 0 var(--orange-lt),
    inset -8px -8px 0 var(--orange-dk),
    0 6px 0 rgba(0,0,0,.3);
  text-shadow:
    -2px 0 0 #000,2px 0 0 #000,0 -2px 0 #000,0 2px 0 #000,
    -2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,
    0 3px 0 rgba(0,0,0,.45);
  cursor:pointer;
  transition:transform .12s var(--ease-pop),box-shadow .12s ease,filter .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-3px);filter:saturate(1.12) brightness(1.05);color:#fff}
.btn:active{
  transform:translateY(3px);
  box-shadow:
    inset 4px 4px 0 var(--orange-lter),
    inset -4px -4px 0 var(--red),
    inset 8px 8px 0 var(--orange-lt),
    inset -8px -8px 0 var(--orange-dk),
    0 1px 0 rgba(0,0,0,.3);
}
.btn--lg{padding:1.1rem 1.9rem;font-size:.9rem}
.btn--sm{
  padding:.6rem 1rem;font-size:.6rem;
  box-shadow:
    inset 3px 3px 0 var(--orange-lter),
    inset -3px -3px 0 var(--red),
    inset 6px 6px 0 var(--orange-lt),
    inset -6px -6px 0 var(--orange-dk),
    0 4px 0 rgba(0,0,0,.28);
}
.btn--grey{
  background:var(--panel);
  box-shadow:
    inset 4px 4px 0 var(--panel-lt),
    inset -4px -4px 0 var(--panel-dk),
    inset 8px 8px 0 #A7A7A7,
    inset -8px -8px 0 #7D7D7D,
    0 6px 0 rgba(0,0,0,.3);
}
.btn--grey:active{
  box-shadow:
    inset 4px 4px 0 var(--panel-lt),
    inset -4px -4px 0 var(--panel-dk),
    inset 8px 8px 0 #A7A7A7,
    inset -8px -8px 0 #7D7D7D,
    0 1px 0 rgba(0,0,0,.3);
}
.btn__ico{flex:0 0 auto;width:1.6em;height:1.6em}
.btn--play{padding-block:.8rem;text-align:left}
.btn--play .btn__ico{width:2em;height:2em}
.btn--play small{display:block;font-size:.66em;letter-spacing:.06em;opacity:.92;margin-bottom:.35em}
.btn--play b{display:block;font-size:1.1em;font-weight:400}

/* --------------------- Cartes / panneaux pixel --------------------- */
.card{
  position:relative;background:var(--paper);border:4px solid #000;color:var(--ink);
  box-shadow:0 8px 0 rgba(0,0,0,.22);padding:1.35rem;
}

/* ------------------------------ Header ----------------------------- */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  background:rgba(11,11,11,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:4px solid #000;
  transition:transform .3s ease;
}
.js-anim .site-header{transform:translateY(-110%)}
.site-header.is-visible{transform:none}
.site-header__inner{
  position:relative;display:flex;align-items:center;gap:1rem;
  width:min(100% - 1.5rem,var(--maxw));margin-inline:auto;min-height:60px;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;margin-right:auto}
.brand img{width:34px;height:34px;border:2px solid #000}
.brand span{font-family:'Press Start 2P',monospace;font-size:.66rem}
.nav{display:flex;align-items:center;gap:.1rem}
.nav a{
  font-family:'Press Start 2P',monospace;font-size:.58rem;color:#fff;text-decoration:none;
  padding:.65rem .65rem;border:3px solid transparent;
}
.nav a:hover,.nav a:focus-visible{color:var(--orange-lter);border-color:var(--orange)}
.nav .btn{padding:.6rem .85rem;font-size:.58rem;color:#fff;border-color:#000}
.nav-toggle{
  display:none;background:none;border:3px solid #fff;color:#fff;
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle i{display:block;width:20px;height:3px;background:#fff;box-shadow:0 -7px 0 #fff,0 7px 0 #fff}
.nav-toggle[aria-expanded="true"] i{background:var(--orange);box-shadow:0 -7px 0 var(--orange),0 7px 0 var(--orange)}
@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,11,11,.97);border-bottom:4px solid #000;padding:.5rem;display:none;
    max-height:calc(100svh - 60px);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.9rem;border-bottom:2px solid rgba(255,255,255,.12)}
  .nav .btn{margin-top:.5rem;justify-content:center;border-bottom-width:4px}
}

/* ------------------------------- Hero ------------------------------ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(5.5rem,12vh,8rem) 0 clamp(6rem,14vh,9rem);
  overflow:hidden;isolation:isolate;
  background:linear-gradient(#2FA9F5 0%,var(--sky) 34%,var(--sky-lt) 66%,#D6F2FF 100%);
}
.hero__sun{
  position:absolute;top:7%;right:8%;width:min(26vw,190px);aspect-ratio:1;z-index:0;
  background:radial-gradient(circle,#FFF7CC 0 36%,#FFE07A 36% 50%,rgba(255,224,122,0) 72%);
  animation:sunPulse 7s ease-in-out infinite;pointer-events:none;
}
@keyframes sunPulse{50%{transform:scale(1.09)}}
.cloud{position:absolute;z-index:0;pointer-events:none;will-change:transform}
.hero__mount,.hero__ground,.hero__pipes{position:absolute;left:0;width:100%;pointer-events:none}
.hero__mount{
  bottom:0;z-index:0;height:min(48vh,360px);
  background:url('../img/bg/background_misty_mountains.png') repeat-x bottom left/auto 100%;
  image-rendering:pixelated;opacity:.85;
  --travel:calc(min(48vh,360px) * -650 / 365);
  animation:scrollX 90s linear infinite;
}
.hero__ground{
  bottom:0;z-index:1;height:min(27vh,190px);
  background:url('../img/bg/background_country.png') repeat-x bottom left/auto 100%;
  image-rendering:pixelated;
  --travel:calc(min(27vh,190px) * -650 / 365);
  animation:scrollX 38s linear infinite;
}
@keyframes scrollX{to{background-position-x:var(--travel,-1300px)}}
.hero__pipes{inset:0;z-index:1;overflow:hidden}
.pipe{
  position:absolute;width:58px;background:rgba(92,144,194,.42);
  border-inline:3px solid rgba(0,0,0,.12);
}
.pipe::before{
  content:"";position:absolute;left:-6px;right:-6px;top:0;height:22px;
  background:url('../img/bg/column_top_misty_mountains.png') no-repeat center/100% 100%;
  image-rendering:pixelated;opacity:.75;
}
.hero__inner{position:relative;z-index:3;text-align:center;display:grid;gap:1.4rem;justify-items:center}
.hero__logo{
  width:min(116px,24vw);height:auto;border:5px solid #000;
  box-shadow:0 10px 0 rgba(0,0,0,.25);animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-10px) rotate(-2deg)}}
.hero h1{max-width:17ch}
.hero__tagline{
  max-width:36ch;margin:0;font-weight:800;color:#04283F;
  font-size:clamp(1.02rem,.95rem + .65vw,1.4rem);
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hero__note{margin:0;font-size:.92rem;font-weight:800;color:#063553}
.stats{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:.3rem}
.stat{background:rgba(0,0,0,.55);border:3px solid #000;color:#fff;padding:.5rem .8rem;display:flex;align-items:baseline;gap:.45rem}
.stat b{font-family:'Press Start 2P',monospace;font-size:.9rem;color:var(--orange-lter)}
.stat span{font-size:.74rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.scroll-cue{
  position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;z-index:4;
  background:rgba(0,0,0,.55);border:3px solid #000;
  display:grid;justify-items:center;gap:.4rem;
  font-family:'Press Start 2P',monospace;font-size:.55rem;color:#fff;
  text-shadow:2px 2px 0 #000,0 0 10px rgba(0,0,0,.6);text-decoration:none;
  animation:bob 2s ease-in-out infinite;padding:.4rem .6rem;
}
.scroll-cue::after{content:"";width:0;height:0;border:9px solid transparent;border-top-color:#fff;filter:drop-shadow(0 2px 0 #000)}
.flock{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.flyer{position:absolute;will-change:transform}

/* --------------------- Sprite oiseau animé (CSS) ------------------- */
.bird-sprite{
  --frames:2;--fw:68;--fh:60;--scale:1;
  width:calc(var(--fw) * var(--scale) * 1px);
  height:calc(var(--fh) * var(--scale) * 1px);
  background-image:var(--sheet);
  background-repeat:no-repeat;
  background-size:calc(var(--fw) * var(--frames) * var(--scale) * 1px) calc(var(--fh) * var(--scale) * 1px);
  background-position:0 0;
  image-rendering:pixelated;
  animation:flap calc(var(--frames) * .115s) steps(var(--frames)) infinite;
}
@keyframes flap{to{background-position-x:calc(var(--fw) * var(--frames) * var(--scale) * -1px)}}

/* ---------------------------- Sections ----------------------------- */
.section{padding:clamp(3.5rem,8vw,6rem) 0;position:relative}
.section__head{max-width:64ch;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.section__head.center{margin-inline:auto}
.section__head p{margin:.9rem 0 0}
.section--sky{background:linear-gradient(180deg,#D6F2FF,var(--sky-lt))}
.section--cream{background:var(--cream)}
.section--grass{background:linear-gradient(180deg,#E6FBBE,var(--leaf))}
.section--mint{background:linear-gradient(180deg,#D8FAF2,var(--mint))}
.section--night{background:linear-gradient(180deg,#1B2735,#0B1119);color:#F2F7FF}
.section--night .eyebrow{color:var(--orange-lt)}
.section--night .muted{color:#B9CFE3}
.section--night .card .muted,.section--night .feat .muted,.section--night .ach small{color:var(--ink-soft)}
.section--night a{color:var(--sky-lt)}
.section--dusk{background:linear-gradient(180deg,#804F69,#4E2C4C);color:#FFF0F7}
.section--dusk .eyebrow{color:var(--orange-lter)}
.section--dusk .muted{color:#F2D8E5}
.section--dusk .card .muted,.section--dusk .feat .muted,.section--dusk .ach small{color:var(--ink-soft)}
.divider{
  height:30px;border-block:4px solid #000;image-rendering:pixelated;
  background:url('../img/bg/column_top_country.png') repeat-x center/auto 100%;
}
.divider--beach{background-image:url('../img/bg/column_top_blue_beach.png')}
.divider--snow{background-image:url('../img/bg/column_top_snow_forest.png')}
.divider--misty{background-image:url('../img/bg/column_top_misty_mountains.png')}
.divider--dusk{background-image:url('../img/bg/column_top_mountain_dusk.png')}
.divider--sunny{background-image:url('../img/bg/column_top_sunny_land.png')}
.divider--night{background-image:url('../img/bg/column_top_night.png')}

/* ------------------------------ Grilles ---------------------------- */
.grid{display:grid;gap:1.25rem}
.grid--modes{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid--worlds{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.grid--feat{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid--ach{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1rem}
.grid--shots{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* ----------------------------- Modes ------------------------------- */
.mode{
  display:flex;flex-direction:column;gap:.8rem;color:var(--ink);
  border:4px solid #000;background:var(--paper);
  box-shadow:0 8px 0 rgba(0,0,0,.22);padding:1.3rem;
  transition:transform .18s var(--ease-pop),box-shadow .18s ease;
}
.mode:hover{transform:translateY(-6px);box-shadow:0 14px 0 rgba(0,0,0,.22)}
.mode__head{display:flex;align-items:center;gap:.9rem}
.mode__ico{width:60px;height:60px;flex:0 0 auto;border:3px solid #000}
.mode__badge{
  font-family:'Press Start 2P',monospace;font-size:.72rem;color:#fff;
  background:var(--tint,var(--orange));border:3px solid #000;
  padding:.5rem .75rem;
  text-shadow:
    -2px 0 0 #000,2px 0 0 #000,0 -2px 0 #000,0 2px 0 #000,
    -2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
  box-shadow:0 4px 0 rgba(0,0,0,.3);
}
.mode p{margin:0}
.mode__meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem;padding-top:.5rem}
.tag{font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:#000;color:#fff;padding:.28rem .55rem}
.tag--warn{background:var(--red)}
.tag--ok{background:#27761D}
.tag--info{background:var(--sky-deep)}
.tag--xp{background:#C43F06}

/* ------------------------------ Birds ------------------------------ */
.birds-stage{
  position:relative;border:5px solid #000;background:var(--sky-pale);
  box-shadow:0 10px 0 rgba(0,0,0,.22);padding:clamp(1rem,3vw,1.6rem);overflow:hidden;
}
.birds-stage::before{
  content:"";position:absolute;inset-inline:0;bottom:0;height:55%;
  background:url('../img/bg/background_blue_beach.png') repeat-x bottom left/auto 100%;
  image-rendering:pixelated;opacity:.45;pointer-events:none;
}
.bird-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:1.5rem;align-items:center;
}
@media (max-width:780px){.bird-hero{grid-template-columns:1fr}}
.bird-hero__view{display:grid;place-items:center;min-height:190px;position:relative}
.bird-hero__view>div{animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 10px 0 rgba(0,0,0,.16))}
.bird-hero__info{background:rgba(255,253,246,.96);color:var(--ink);border:4px solid #000;padding:1.2rem}
.bird-hero__info h3{margin-bottom:.35rem}
.bird-hero__unlock{font-weight:800;font-size:.9rem;margin:0 0 .9rem}
.statline{display:grid;gap:.55rem;margin:0 0 1.1rem;padding:0;list-style:none}
.statline li{display:grid;grid-template-columns:5rem 1fr 2.6rem;align-items:center;gap:.6rem}
.statline .k{font-family:'Press Start 2P',monospace;font-size:.55rem}
.bar{height:16px;border:3px solid #000;background:#fff;position:relative;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-lter));transition:width .35s var(--ease-pop)}
.bar.is-neg i{background:linear-gradient(90deg,var(--red),#FF8368)}
.statline .v{font-family:'Press Start 2P',monospace;font-size:.58rem;text-align:right}
.bird-hero__flavour{margin:0 0 1rem;font-size:.96rem}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.swatches>span{font-family:'Press Start 2P',monospace;font-size:.5rem;margin-right:.2rem}
.swatch{
  width:52px;height:44px;border:3px solid #000;background:#EAF7FF;
  cursor:pointer;padding:0;position:relative;overflow:hidden;
  transition:transform .14s var(--ease-pop);
}
.swatch i{position:absolute;left:50%;top:50%;translate:-50% -50%;display:block;image-rendering:pixelated}
.swatch[aria-pressed="true"]{background:var(--orange-lter);box-shadow:0 0 0 3px var(--orange-dk);transform:translateY(-2px)}
.bird-strip{
  display:flex;gap:.6rem;overflow-x:auto;padding:1rem .25rem 1.1rem;margin-top:1.2rem;
  scroll-snap-type:x proximity;
}
.bird-chip{
  flex:0 0 auto;scroll-snap-align:center;
  width:106px;height:98px;display:grid;place-items:center;position:relative;
  background:rgba(255,255,255,.78);border:3px solid #000;cursor:pointer;padding:0;
  transition:transform .15s var(--ease-pop),background .15s;
}
.bird-chip:hover{transform:translateY(-4px);background:#fff}
.bird-chip[aria-selected="true"]{background:var(--orange-lter);box-shadow:0 6px 0 rgba(0,0,0,.3)}
.bird-chip .bird-sprite{animation-play-state:paused}
.bird-chip:hover .bird-sprite,.bird-chip[aria-selected="true"] .bird-sprite{animation-play-state:running}
.bird-chip b{
  position:absolute;bottom:2px;left:2px;
  font-family:'Press Start 2P',monospace;font-size:.42rem;background:#000;color:#fff;padding:.22rem .3rem;
}
.bird-chip.is-locked .bird-sprite{filter:brightness(0) opacity(.55)}

/* ------------------------------ Worlds ----------------------------- */
.world{
  position:relative;border:4px solid #000;overflow:hidden;
  box-shadow:0 8px 0 rgba(0,0,0,.22);background:var(--sky-c,#9ED8FF);
  display:flex;flex-direction:column;transition:transform .18s var(--ease-pop);
}
.world:hover{transform:translateY(-6px)}
.world__art{position:relative;aspect-ratio:16/9;overflow:hidden;background-color:var(--sky-c);container-type:size}
.world__layer{
  position:absolute;inset:0;background-repeat:repeat-x;background-position:bottom left;
  background-size:auto 100%;image-rendering:pixelated;
  --travel:calc(100cqh * -650 / var(--ih,365));
}
.world__layer--far{animation:scrollX 64s linear infinite}
.world__layer--near{animation:scrollX 28s linear infinite}
.world:hover .world__layer--far,
.world:focus-within .world__layer--far,
.world.is-fast .world__layer--far{animation-duration:26s}
.world:hover .world__layer--near,
.world:focus-within .world__layer--near,
.world.is-fast .world__layer--near{animation-duration:11s}
.world{cursor:pointer}
.world__bird{position:absolute;left:14%;top:34%;z-index:2;animation:bob 2.4s ease-in-out infinite}
.world__pipe{
  position:absolute;right:16%;bottom:0;width:34px;height:44%;z-index:1;
  background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;
}
.world__label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.85rem 1rem;background:#000;color:#fff}
.world__label b{font-family:'Press Start 2P',monospace;font-size:.62rem}
.world__dot{width:18px;height:18px;border:3px solid #fff;background:var(--sky-c);flex:0 0 auto}

/* --------------------------- Features ------------------------------ */
.feat{
  display:flex;flex-direction:column;gap:.7rem;color:var(--ink);
  border:4px solid #000;background:var(--paper);padding:1.3rem;box-shadow:0 8px 0 rgba(0,0,0,.2);
}
.feat__ico{width:56px;height:56px;display:grid;place-items:center;border:3px solid #000;background:var(--tint,var(--orange-lter))}
.feat__ico img{width:34px;height:34px;object-fit:contain}
.feat h3{font-size:.82rem}
.feat p{margin:0;font-size:.96rem}
.feat ul{margin:0;font-size:.94rem}
.xpbar{height:26px;border:4px solid #000;background:#fff;position:relative;overflow:hidden;margin-top:.5rem}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-lter));transition:width 1.8s var(--ease-pop)}
.xpbar span{position:absolute;inset:0;display:grid;place-items:center;font-family:'Press Start 2P',monospace;font-size:.5rem;color:#000}

/* --------------------------- Achievements -------------------------- */
.ach{
  text-align:center;background:var(--paper);color:var(--ink);border:4px solid #000;padding:.9rem .7rem;
  box-shadow:0 6px 0 rgba(0,0,0,.2);transition:transform .16s var(--ease-pop);
}
.ach:hover{transform:translateY(-5px) rotate(-1.5deg)}
.ach img{width:76px;height:76px;margin:0 auto .55rem;border:3px solid #000}
.ach b{display:block;font-family:'Press Start 2P',monospace;font-size:.52rem;line-height:1.55;margin-bottom:.4rem}
.ach small{display:block;font-size:.8rem;font-weight:700;line-height:1.45;color:var(--ink-soft)}

/* ----------------------------- Music ------------------------------- */
.player{display:grid;gap:.9rem}
.track{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  border:4px solid #000;background:rgba(255,255,255,.07);padding:.85rem 1rem;
}
.track__btn{
  width:52px;height:52px;border:3px solid #000;background:var(--orange);
  display:grid;place-items:center;cursor:pointer;color:#fff;
  box-shadow:inset 3px 3px 0 var(--orange-lter),inset -3px -3px 0 var(--red),0 4px 0 rgba(0,0,0,.45);
}
.track__btn:hover{filter:brightness(1.1)}
.track__btn svg{width:20px;height:20px;fill:#fff}
.track__meta b{display:block;font-family:'Press Start 2P',monospace;font-size:.62rem;margin-bottom:.4rem}
.track__meta small{font-size:.84rem;opacity:.85}
.track__wave{display:flex;gap:3px;align-items:flex-end;height:26px}
.track__wave i{width:4px;background:var(--orange-lt);height:30%}
.track.is-playing .track__wave i{animation:eq .9s ease-in-out infinite}
.track__wave i:nth-child(2){animation-delay:.12s}
.track__wave i:nth-child(3){animation-delay:.24s}
.track__wave i:nth-child(4){animation-delay:.36s}
.track__wave i:nth-child(5){animation-delay:.48s}
@keyframes eq{0%,100%{height:22%}50%{height:100%}}
.track.is-playing{border-color:var(--orange);background:rgba(243,151,26,.18)}
.track.is-error{border-color:var(--red);opacity:.75}
.track.is-error .track__btn{background:var(--panel);box-shadow:none;cursor:not-allowed}
.track__err{display:block;font-size:.78rem;color:#FFB3A6;margin-top:.3rem}
@media (max-width:560px){
  .track{grid-template-columns:auto 1fr}
  .track__wave{display:none}
}

/* ---------------------------- Galerie ------------------------------ */
.shot{
  border:4px solid #000;background:#000;overflow:hidden;padding:0;cursor:zoom-in;
  box-shadow:0 8px 0 rgba(0,0,0,.25);display:block;position:relative;width:100%;
  transition:transform .18s var(--ease-pop);
}
.shot:hover{transform:translateY(-6px)}
.shot img{width:100%;height:auto}
.shot figcaption,.shot .cap{
  position:absolute;inset-inline:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,.86));
  color:#fff;font-weight:800;font-size:.84rem;padding:1.8rem .8rem .65rem;text-align:left;
}
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(4,10,18,.95);
  display:none;place-items:center;padding:1rem;border:0;width:100%;height:100%;max-width:none;max-height:none;
}
.lightbox[open]{display:grid}
.lightbox::backdrop{background:rgba(4,10,18,.92)}
.lightbox img{max-width:min(96vw,1200px);max-height:80vh;width:auto;border:5px solid #000;box-shadow:0 0 0 3px #fff}
.lightbox__cap{color:#fff;font-weight:800;margin-top:.9rem;text-align:center;max-width:60ch}
.lightbox__close{
  position:absolute;top:1rem;right:1rem;width:48px;height:48px;
  background:var(--orange);border:4px solid #000;color:#fff;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:.85rem;
}
.lightbox__nav{
  position:absolute;top:50%;translate:0 -50%;width:50px;height:64px;
  background:rgba(0,0,0,.65);border:4px solid #fff;color:#fff;cursor:pointer;font-size:1.3rem;
}
.lightbox__nav--prev{left:.6rem}
.lightbox__nav--next{right:.6rem}

/* --------------------------- Mini-jeu ------------------------------ */
.game{
  position:relative;border:5px solid #000;background:#47C1FF;
  box-shadow:0 10px 0 rgba(0,0,0,.28);
  aspect-ratio:16/9;max-width:940px;margin-inline:auto;overflow:hidden;touch-action:manipulation;
}
.game canvas{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:pointer}
.game__overlay{
  position:absolute;inset:0;display:grid;place-content:safe center;justify-items:center;gap:1rem;
  background:radial-gradient(ellipse at center,rgba(6,20,34,.34) 0%,rgba(6,20,34,.62) 100%);
  color:#fff;text-align:center;padding:1.2rem;overflow:auto;overscroll-behavior:contain;
}
.game__overlay [data-ov-when]{
  background:rgba(6,16,28,.82);border:4px solid #000;
  box-shadow:0 6px 0 rgba(0,0,0,.4);padding:1.1rem 1.3rem;max-width:44ch;
}
.game__overlay[hidden]{display:none}
.game__overlay h3{font-size:clamp(.86rem,.7rem + 1.1vw,1.35rem)}
.game__overlay p{margin:0;font-weight:800;max-width:36ch}
.game__score{font-family:'Press Start 2P',monospace;font-size:clamp(1.6rem,4vw,3rem);color:var(--orange-lter);text-shadow:4px 4px 0 #000}
.game__hint{margin-top:1rem;text-align:center;font-weight:800}
.game__best{color:var(--burnt)}

/* --------------------------- Download CTA -------------------------- */
.cta{position:relative;overflow:hidden;text-align:center;background:linear-gradient(180deg,#2FA9F5,#9BE0FF);padding:clamp(3.5rem,9vw,6rem) 0 clamp(6rem,12vw,9rem)}
.cta::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:130px;
  background:url('../img/bg/background_sunny_land.png') repeat-x bottom left/auto 100%;
  image-rendering:pixelated;pointer-events:none;
}
.cta__inner{position:relative;z-index:1;display:grid;gap:1.3rem;justify-items:center}
.cta__birds{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-bottom:.3rem}
.cta__birds>div{animation:bob 2.8s ease-in-out infinite}
.cta__birds>div:nth-child(2){animation-delay:.35s}
.cta__birds>div:nth-child(3){animation-delay:.7s}
.cta__birds>div:nth-child(4){animation-delay:1.05s}
.cta__birds>div:nth-child(5){animation-delay:1.4s}

/* ------------------------------ Legal ------------------------------ */
.legal__body{padding:0 1.25rem 1.4rem;font-size:.96rem}
.legal__body h2{font-family:'Press Start 2P',monospace;font-size:.62rem;line-height:1.6;margin:1.7rem 0 .5rem}
.legal__body h2:first-child{margin-top:1.2rem}
.legal__body p,.legal__body ul{margin:.6rem 0}
.legal__updated{font-size:.86rem;color:var(--ink-soft);font-weight:700}

/* ------------------------------ Footer ----------------------------- */
.site-footer{background:#0B1119;color:#CFE3F5;padding:clamp(2.5rem,6vw,4rem) 0 2rem;border-top:5px solid #000}
.site-footer a{color:var(--sky-lt)}
.footer__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer__brand{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.footer__brand img{width:52px;height:52px;border:3px solid #000}
.footer__brand b{font-family:'Press Start 2P',monospace;font-size:.68rem;color:#fff;line-height:1.5}
.site-footer h3{font-size:.62rem;color:#fff;margin-bottom:.85rem}
.footer__list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.94rem}
.footer__bottom{
  margin-top:2.5rem;padding-top:1.4rem;border-top:2px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.86rem;
}

/* --------------------------- Révélations --------------------------- */
.reveal{transition:opacity .55s ease,transform .55s var(--ease-pop)}
.js-anim .reveal{opacity:0;transform:translateY(24px)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}
.reveal-d5{transition-delay:.4s}.reveal-d6{transition-delay:.48s}

/* ------------------------------ i18n ------------------------------- */
[data-lang-block]{display:none}
html[data-lang="en"] [data-lang-block="en"],
html[data-lang="fr"] [data-lang-block="fr"]{display:block}

/* ------------------- Préférences d'accessibilité ------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .bird-sprite{animation:none!important;background-position:0 0!important}
}

@media print{
  .site-header,.hero,.flock,.game,.scroll-cue,.nav,.btn,.divider,.cta{display:none!important}
  body{background:#fff;color:#000}
  .reveal{opacity:1!important;transform:none!important}
  .card{break-inside:avoid;box-shadow:none}
}

/* ==================== Compléments : animations ==================== */
@keyframes driftX{
  from{transform:translateX(0)}
  to{transform:translateX(140vw)}
}
@keyframes driftPipe{
  from{transform:translateX(60vw)}
  to{transform:translateX(-70vw)}
}
@keyframes flyAcross{
  from{transform:translate(0,0)}
  25%{transform:translate(35vw,-3vh)}
  50%{transform:translate(70vw,2vh)}
  75%{transform:translate(105vw,-2vh)}
  to{transform:translate(135vw,0)}
}

/* ==================== Compléments : démo ========================= */
.game__overlay [data-ov-when]{display:none;text-align:center}
.game__overlay [data-ov-when]>*+*{margin-top:.9rem}
.game__overlay[data-ov="idle"] [data-ov-when="idle"],
.game__overlay[data-ov="paused"] [data-ov-when="paused"],
.game__overlay[data-ov="over"] [data-ov-when="over"]{display:block}
.game__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem;margin-top:1.2rem;
}
.game__hint{margin:0}
.demo-sound [data-sound-when]{display:none}
.demo-sound[data-state="off"] [data-sound-when="off"],
.demo-sound[data-state="on"] [data-sound-when="on"]{display:inline}
.demo-sound[data-state="on"]{
  background:var(--orange);
  box-shadow:
    inset 3px 3px 0 var(--orange-lter),
    inset -3px -3px 0 var(--red),
    inset 6px 6px 0 var(--orange-lt),
    inset -6px -6px 0 var(--orange-dk),
    0 4px 0 rgba(0,0,0,.28);
}
.demo-disclaimer{max-width:66ch;margin:1.1rem auto 0;font-size:.9rem}

/* ================ Compléments : divers sections ================== */
.birds-legend{max-width:70ch;margin:1.4rem auto 0;font-size:.92rem}
.bird-hero__hint{margin:.8rem 0 0;font-size:.86rem}
.worlds-hint{margin-top:1.4rem;font-size:.9rem}
.music-credit{margin-top:1.6rem;font-size:.9rem}
.cta__text{max-width:46ch;color:#062A44}


/* ============== Compléments : petits écrans / finitions ============= */
@media (max-width:620px){
  .game{margin-inline:-1rem;border-inline-width:0}
  .game__overlay{padding:.5rem}
  .game__overlay [data-ov-when]{padding:.6rem .7rem;border-width:3px}
  .game__overlay [data-ov-when]>*+*{margin-top:.45rem}
  .game__overlay h3{font-size:.8rem}
  .game__overlay p{font-size:.82rem;line-height:1.4}
  .game__score{font-size:1.1rem}
  .game__overlay .btn--sm{padding:.45rem .7rem;font-size:.55rem}
  .hero__cta .btn{width:100%}
  .stat span{font-size:.7rem}
  .bird-chip{width:92px;height:88px}
  .grid--ach{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .lightbox__nav{width:42px;height:54px}
}
@media (max-width:420px){
  h1{letter-spacing:-.02em}
  .btn{font-size:.68rem;padding:.85rem 1.1rem}
  .btn--lg{font-size:.78rem;padding:1rem 1.2rem}
  .btn--sm{font-size:.6rem;padding:.6rem 1rem}
}

/* ============= Compléments : musique, oiseaux, finitions ============ */
.feat__ico svg{display:block}
.track__num{
  width:52px;height:52px;display:grid;place-items:center;border:3px solid #000;
  background:var(--panel);font-family:'Press Start 2P',monospace;font-size:.7rem;color:#fff;
}
.birds-special{margin:1.4rem auto .2rem;font-weight:800}
.bird-chip.is-special::after{
  content:"★";position:absolute;top:2px;right:4px;color:var(--orange-dk);font-size:.8rem;
  text-shadow:0 0 2px #000;
}

/* le biseau de .btn ecraserait le halo de focus : on le reconduit par variante */
.btn:focus-visible{
  box-shadow:
    inset 4px 4px 0 var(--orange-lter),
    inset -4px -4px 0 var(--red),
    inset 8px 8px 0 var(--orange-lt),
    inset -8px -8px 0 var(--orange-dk),
    0 6px 0 rgba(0,0,0,.3),
    0 0 0 10px var(--orange-lter);
}
.btn--sm:focus-visible{
  box-shadow:
    inset 3px 3px 0 var(--orange-lter),
    inset -3px -3px 0 var(--red),
    inset 6px 6px 0 var(--orange-lt),
    inset -6px -6px 0 var(--orange-dk),
    0 4px 0 rgba(0,0,0,.28),
    0 0 0 10px var(--orange-lter);
}
.btn--grey:focus-visible{
  box-shadow:
    inset 4px 4px 0 var(--panel-lt),
    inset -4px -4px 0 var(--panel-dk),
    inset 8px 8px 0 #A7A7A7,
    inset -8px -8px 0 #7D7D7D,
    0 6px 0 rgba(0,0,0,.3),
    0 0 0 10px var(--orange-lter);
}