/* Coquille des jeux : page, canevas et menus. Les couleurs viennent de la configuration du jeu (Shell.init → colors → variables CSS). */

/* POLICE EMBARQUÉE (30 sept. 2026) : Nunito, graisses 800 et 900, licence libre SIL OFL 1.1 (fonts/OFL.txt), fichiers de @fontsource/nunito.
   Même rendu sur PC, iPhone et Android (l'Arial Black des canevas n'existe pas sur iPhone, l'Arial Rounded des menus pas sur Windows).
   Les symboles absents de Nunito (★ ✓ ▶ ↻ ✦, emoji) viennent des polices de secours de la liste. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.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: 800; font-display: swap; src: url(fonts/nunito-latin-ext-800-normal.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: 900; font-display: swap; src: url(fonts/nunito-latin-900-normal.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: 900; font-display: swap; src: url(fonts/nunito-latin-ext-900-normal.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; }

:root {
  --bg-top: #1e293b; --bg-bottom: #0f172a;        /* fond de page autour du canevas 9:16 (écrans plus allongés que 9:16) */
  --primary: #FF4D6D; --primary-dark: #9f1239;    /* bouton principal */
  --secondary: #3B9CFF; --secondary-dark: #1e40af;
  --panel: #FFF9F2; --ink: #7c2d12;               /* panneaux et texte */
  --veil: rgba(20, 10, 5, .45);                   /* voile sur le jeu en pause */
  --font: "Nunito", "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: linear-gradient(var(--bg-top), var(--bg-bottom)); font-family: var(--font); font-weight: 800;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; }
canvas#game { display: block; touch-action: none; }

/* ------------------------------------------------------------ écran de démarrage repris par la page (Shell.init({ splash }), voir shell.js) */
#splash { position: fixed; inset: 0; z-index: 100; background: center / auto 100% no-repeat; transition: opacity .35s ease-out; }   /* à pleine hauteur, comme iOS affiche le sien */
#splash.out { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ superposition des menus */
#shell { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#shell.open { pointer-events: auto; background: var(--veil); animation: fade .18s ease-out; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  box-sizing: border-box; }
.screen.on { display: flex; animation: pop .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fade { from { background-color: transparent; } }   /* le voile seul : le contenu ne dépend jamais d une animation pour être visible */
@keyframes pop { from { transform: scale(.92); } }

h1.logo { margin: 0 0 8vh; font-size: min(15vw, 8vh); line-height: 1; text-align: center; color: #fff; letter-spacing: .02em; text-transform: uppercase;
  text-shadow: 0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 0 10px 18px rgba(0,0,0,.35); max-width: 520px; }
h2 { margin: 0; font-weight: 900; font-size: 30px; color: var(--ink); text-align: center; text-transform: uppercase; }
.panel { width: min(88vw, 420px); background: var(--panel); border-radius: 28px; padding: 26px 22px; box-sizing: border-box; display: flex; flex-direction: column;
  gap: 14px; align-items: stretch; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 20px 40px rgba(0,0,0,.35); border: 4px solid rgba(255,255,255,.7); }
.row { display: flex; gap: 12px; justify-content: center; }
.row > * { flex: 1; }

/* ------------------------------------------------------------ boutons */
.btn { font: inherit; font-weight: 900; font-size: 22px; color: #fff; border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; background: var(--secondary);
  box-shadow: 0 5px 0 var(--secondary-dark); text-transform: uppercase; letter-spacing: .03em; transition: transform .06s; touch-action: manipulation; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--secondary-dark); }
.btn.primary { background: var(--primary); box-shadow: 0 6px 0 var(--primary-dark); }
.btn.primary:active { box-shadow: 0 2px 0 var(--primary-dark); }
.btn.big { font-size: 32px; padding: 18px 26px; min-width: min(70vw, 320px); display: flex; flex-direction: column; align-items: center; }
.btn.big small { font-size: 15px; opacity: .9; margin-top: 2px; }
.btn.icon { width: 58px; height: 58px; padding: 12px; flex: none; display: grid; place-items: center; }
.btn svg { width: 100%; height: 100%; fill: currentColor; }
.btn.danger { background: transparent; color: #b91c1c; box-shadow: none; font-size: 15px; text-transform: none; padding: 8px; }
.title .row { width: min(70vw, 320px); }
.title .btn.big { box-shadow: 0 7px 0 var(--primary-dark), 0 14px 30px rgba(0,0,0,.35); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); } }

.toggle { display: flex; justify-content: space-between; align-items: center; text-transform: none; background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.toggle:active { box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.toggle b { background: #22c55e; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 16px; }
.toggle.off b { background: #94a3b8; }
.pause .row .toggle { flex-direction: column; gap: 6px; font-size: 18px; }
/* quatre boutons sur la ligne de la pause (son, musique, réglages, accueil ; 21 oct. 2026) : resserrés pour tenir sur un petit Android (360 px) */
.pause .row { gap: 8px; }
.pause .row .toggle { min-width: 0; padding: 10px 4px; font-size: min(15px, 4vw); letter-spacing: 0; }
.pause .row .btn.icon { width: 50px; height: 50px; padding: 11px; }
/* écran de résultat : REJOUER, NIVEAUX et accueil sur une ligne, resserrés de même (la ligne débordait sur un petit Android) */
.result .row { gap: 8px; }
.result .row > .btn:not(.icon) { min-width: 0; padding: 14px 4px; font-size: min(18px, 4.3vw); letter-spacing: 0; white-space: nowrap; }
.result .row .btn.icon { width: 50px; height: 50px; padding: 11px; }
/* écran de résultat plus haut que l'écran (petit Android, texte sur deux lignes, grille du jour) : centré s'il tient, sinon on le fait défiler
   au lieu d'en couper le haut et le bas ; plus serré sur les écrans courts (21 oct. 2026) */
.screen.result { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.result .panel { margin: auto 0; flex-shrink: 0; }
@media (max-height: 800px) { .result .panel { padding-top: 16px; padding-bottom: 16px; gap: 8px; } .result .bigstars { transform: scale(.85); margin: -6px 0; } }

/* bouton pause posé sur le jeu (coin haut gauche du canevas, placé par shell.js) */
.hud-pause { position: fixed; z-index: 5; display: none; box-sizing: border-box; padding: 0; border-radius: 30%; background: rgba(255,255,255,.85); color: var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.hud-pause.on { display: grid; place-items: center; }

/* ------------------------------------------------------------ carte des niveaux */
.levels { justify-content: flex-start; }
.levels header, .settings header { width: min(92vw, 460px); display: flex; align-items: center; gap: 14px; }
.levels header h2, .settings header h2 { color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); flex: 1; text-align: left; }
/* CHEMIN (4 oct. 2026) : niveau 1 en bas, on monte ; les pastilles sont posées en px depuis le bas (shell.js), le tracé est un SVG étiré derrière */
.map { width: min(92vw, 460px); flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.map-in { position: relative; width: 100%; }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-path path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 2 18; }
.node { position: absolute; width: 68px; height: 68px; margin-left: -34px; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); font: inherit; font-size: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(0,0,0,.25); cursor: pointer; padding: 0; }
.node b { line-height: 1; }
.node:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.node .stars i { width: 13px; height: 13px; }
.node.next { background: var(--primary); color: #fff; box-shadow: 0 5px 0 var(--primary-dark), 0 0 0 6px rgba(255,255,255,.55); animation: breathe 1.6s ease-in-out infinite; z-index: 1; }
.node.locked { background: rgba(30, 18, 10, .7); color: rgba(255,255,255,.6); box-shadow: none; cursor: default; }
.node i.lock, .node i.flame { position: absolute; width: 24px; height: 24px; display: block; }
.node i.lock { right: -4px; bottom: -4px; }
.node i.lock svg { fill: #FFC533; width: 100%; height: 100%; }
.node i.flame { right: -6px; top: -8px; width: 28px; height: 28px; background: #fff; border-radius: 50%; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.node i.flame svg { fill: #e11d48; width: 100%; height: 100%; transform: scale(.74); }
.node.hard { box-shadow: 0 5px 0 rgba(0,0,0,.25), inset 0 0 0 4px #e11d48; }
.node.vhard { box-shadow: 0 5px 0 rgba(0,0,0,.25), inset 0 0 0 4px #7c3aed; }
.node.vhard i.flame svg { fill: #7c3aed; }
.node.hard.next { background: #e11d48; box-shadow: 0 5px 0 #881337, 0 0 0 6px rgba(255,255,255,.55); }
.node.vhard.next { background: #7c3aed; box-shadow: 0 5px 0 #4c1d95, 0 0 0 6px rgba(255,255,255,.55); }
.node.locked.hard, .node.locked.vhard { box-shadow: inset 0 0 0 4px rgba(225,29,72,.75); }
.node.locked.vhard { box-shadow: inset 0 0 0 4px rgba(124,58,237,.85); }
.tags { position: absolute; height: 68px; display: flex; flex-direction: column; justify-content: center; gap: 4px; pointer-events: none; }
.tags.right { align-items: flex-start; } .tags.left { align-items: flex-end; }
.tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.5); color: #fff; border-radius: 999px; padding: 4px 10px 4px 6px; font-size: 13px; white-space: nowrap; }
.tag > svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.tag.gift > svg { color: #FFC533; fill: #FFC533; }
.tag.gift.got { background: rgba(22,163,74,.85); } .tag.gift.got > svg { color: #fff; fill: none; }
.tag.hardtag { background: #e11d48; }
.tag.news { background: #1d5fa8; }
.zone-ban { position: absolute; left: 0; right: 0; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.25); text-transform: uppercase; font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,.25); box-sizing: border-box; border: 3px solid rgba(255,255,255,.6); }
.zone-ban small { font-size: 14px; opacity: .9; text-transform: none; }
.zone-ban.locked { background: #2a1d24; border-color: rgba(255,255,255,.25); }
.zone-ban svg { width: 24px; height: 24px; fill: #FFC533; }

/* écran titre : zone en cours et ce qui arrive ; niveau difficile annoncé sur le bouton */
h1.logo { margin-bottom: 4vh; }
.zone { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.5); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 15px; margin-bottom: 2vh; }
.zone i { display: block; width: 90px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.25); overflow: hidden; }
.zone u { display: block; height: 100%; border-radius: 5px; }
.teasers { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.teasers .tag { font-size: 14px; padding: 5px 12px 5px 8px; }
.teasers .tag.news > svg { fill: #FFC533; }
.btn.big.hard { background: #e11d48; box-shadow: 0 7px 0 #881337, 0 14px 30px rgba(0,0,0,.35); }

/* nouveauté et résultat */
.news .panel { align-items: center; text-align: center; }
.news h3 { margin: 0; font-size: 24px; color: #1d5fa8; }
.news p { margin: 0; color: var(--ink); font-size: 18px; }
.news-icon svg { width: 130px; height: 130px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.15)); animation: starin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.nextnews { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 8px 0 2px; padding: 8px 12px; border-radius: 16px; background: rgba(0,0,0,.08); text-align: left; }
.nextnews .ic { flex: none; width: 46px; height: 46px; } .nextnews .ic svg { width: 100%; height: 100%; }
.nextnews div { flex: 1; min-width: 0; } .nextnews b { display: block; font-size: 14px; line-height: 1.2; }
.nextnews i { display: block; height: 10px; margin: 5px 0 3px; border-radius: 5px; background: rgba(0,0,0,.15); overflow: hidden; }
.nextnews u { display: block; height: 100%; border-radius: 5px; background: var(--secondary); }
.nextnews small { display: block; font-size: 12px; opacity: .7; }
.result .extra { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.result .extra .tag { font-size: 14px; }
.result .extra .tag.gift:not(.got) { background: rgba(0,0,0,.4); }
.flycoin { position: fixed; left: 0; top: 0; width: 28px; height: 28px; z-index: 13; pointer-events: none; transition: transform .5s cubic-bezier(.5, -.4, .7, 1); }
.flycoin svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------ étoiles, résultat */
.stars { display: inline-flex; gap: 2px; }
.stars i { display: block; width: 16px; height: 16px; }
.stars svg { width: 100%; height: 100%; fill: rgba(0,0,0,.18); }
.stars i.on svg { fill: #FFC533; stroke: #b45309; stroke-width: 1.2; }
.bigstars { display: flex; justify-content: center; }
.stars.big { gap: 8px; }
.stars.big i { width: 72px; height: 72px; animation: starin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.stars.big i:nth-child(2) { width: 88px; height: 88px; margin-top: -14px; animation-delay: .15s; }
.stars.big i:nth-child(3) { animation-delay: .3s; }
@keyframes starin { from { transform: scale(0) rotate(-40deg); } }
.result p { margin: 0; text-align: center; color: var(--ink); font-size: 20px; }
.result p.best { font-size: 16px; opacity: .75; }
.result p.best.record { opacity: 1; color: #16a34a; font-size: 20px; }

/* réglages : en-tête en haut, panneau qui défile s il dépasse (petits écrans, liste longue) au lieu de pousser le bouton retour hors de l écran */
.settings { justify-content: flex-start; }
.settings .panel { margin-top: 10px; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 10px; padding: 18px 22px; }
.settings .panel > * { flex: none; }
.link { color: var(--ink); text-align: center; font-size: 15px; }
.version { margin: 0; text-align: center; font-size: 12px; color: var(--ink); opacity: .5; }

/* carte des niveaux et réglages : fond plus sombre (le décor du jeu est chargé derrière) */
#shell.open .screen.levels, #shell.open .screen.settings { background: rgba(20, 10, 5, .55); }
.pause .row { align-items: center; }
.pause .row .btn.icon, .result .row .btn.icon { background: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.hud-pause svg { width: 50%; height: 50%; }   /* marge en % = % de la LARGEUR DE L ECRAN : le bouton gonflait (172 px) et l icône tombait à 0 */

/* ------------------------------------------------------------ économie : compteur de pièces, gains, boutique, secours */
.wallet { position: fixed; z-index: 12; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: none; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; padding: 6px 14px 6px 6px; font-size: 20px; pointer-events: none; }
.wallet.on { display: flex; }
.wallet svg { width: 28px; height: 28px; }
.wallet.pop { animation: coinpop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes coinpop { 40% { transform: scale(1.25); } }
.cointxt { display: inline-flex; align-items: center; gap: 4px; }
.cointxt svg.coin, .btn svg.coin { width: 1.1em; height: 1.1em; flex: none; }
.result p.gain { font-size: 26px; font-weight: 800; color: #b45309; }
.btn.ad { display: flex; align-items: center; justify-content: center; gap: 10px; background: #16a34a; box-shadow: 0 5px 0 #14532d; text-transform: none; }
.btn.ad > svg:first-child { width: 26px; height: 26px; flex: none; }
.btn:disabled { opacity: .5; }
.shop { justify-content: flex-start; }
.shop header { width: min(92vw, 460px); display: flex; align-items: center; gap: 14px; }
.shop header h2 { color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); flex: 1; text-align: left; }
#shell.open .screen.shop { background: rgba(20, 10, 5, .55); }
.btn.item { border-radius: 26px; display: flex; align-items: center; gap: 12px; justify-content: space-between; text-transform: none; background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.12); font-size: 22px; }
.btn.item small { display: block; font-size: 13px; opacity: .7; }
.btn.item > span { text-align: left; }
.btn.item b { background: var(--primary); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 17px; white-space: nowrap; }
.btn.item.ad { background: #16a34a; color: #fff; }
.btn.item.ad b, .btn.item.ad .cointxt { color: #fff; }
.rescue .panel h2 { font-size: 32px; }
.rescue p { text-align: center; color: #b91c1c; }
.btn.big small .cointxt svg.coin { width: 1.2em; height: 1.2em; }

/* ------------------------------------------------------------ tutoriel : main animée, onde d'appui, consigne (placés par shell.js, au-dessus du jeu, sous les menus) */
.hint-hand, .hint-ring { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transform-origin: 37.5% 12%; }
.hint-hand svg { width: 100%; height: 100%; fill: #fff; stroke: #1f2937; stroke-width: 3.5; stroke-linejoin: round; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.hint-ring { border-radius: 50%; border: 5px solid #fff; box-sizing: border-box; transform-origin: 50% 50%; }
.hint-cap { position: fixed; z-index: 6; pointer-events: none; opacity: 0; text-align: center; color: #fff; font-weight: 800;
  text-shadow: 0 3px 0 rgba(0,0,0,.55), 2px 0 0 rgba(0,0,0,.55), -2px 0 0 rgba(0,0,0,.55), 0 -2px 0 rgba(0,0,0,.55); transition: opacity .3s;
  transform: translateY(-50%); }   /* centrée verticalement sur textY */
#shell.open .screen.levels { background: rgba(24, 14, 30, .84); }   /* le chemin doit se lire : le jeu derrière est presque masqué */
.tag.hardtag.v { background: #7c3aed; }

/* ------------------------------------------------------------ aides en cours de niveau : rangée posée sur le bas du canevas (placée par shell.js, --bs = taille d un bouton) */
.boosts { position: fixed; z-index: 5; display: none; justify-content: center; gap: calc(var(--bs, 54px) * .3); pointer-events: none; }
.boosts.on { display: flex; }
.boost { position: relative; width: var(--bs, 54px); height: var(--bs, 54px); border: 0; border-radius: 50%; padding: 0; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.28), inset 0 0 0 3px var(--secondary);
  cursor: pointer; pointer-events: auto; font: inherit; touch-action: manipulation; }
.boost:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.28), inset 0 0 0 3px var(--secondary); }
.boost .ic { position: absolute; inset: 14%; display: block; }
.boost .ic svg { width: 100%; height: 100%; }
.boost b { position: absolute; right: -8%; bottom: -8%; min-width: 42%; height: 42%; border-radius: 999px; background: var(--secondary); color: #fff; font-size: calc(var(--bs, 54px) * .3);
  display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.25); box-sizing: border-box; padding: 0 4px; }
.boost b.plus { background: #16a34a; }
.boost.locked { background: rgba(30, 18, 10, .55); box-shadow: none; cursor: default; }
.boost.locked .ic { opacity: .35; filter: grayscale(1); }
.boost.locked i { position: absolute; left: 50%; top: 42%; width: 40%; height: 40%; transform: translate(-50%, -50%); display: block; }
.boost.locked i svg { width: 100%; height: 100%; fill: #FFC533; }
.boost.locked small { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); background: #7c3aed; color: #fff; border-radius: 999px; padding: 1px 7px; white-space: nowrap;
  font-size: calc(var(--bs, 54px) * .2); }
.boost.aim { box-shadow: 0 4px 0 rgba(0,0,0,.28), inset 0 0 0 3px #FFC533, 0 0 0 5px #FFC533; animation: breathe 1s ease-in-out infinite; }
.buy .btn.big { flex-direction: row; gap: 8px; justify-content: center; font-size: 26px; }

/* démo du site (Shell.init({ demo })) : bouton vers l'App Store, note sous l'écran titre */
.btn.store { text-decoration: none; background: #111; box-shadow: 0 6px 0 #000; display: flex; flex-direction: column; align-items: center; line-height: 1.1; font-size: 22px; padding: 10px 26px 12px; margin-top: 6px; }
.btn.store small { font-size: 13px; font-weight: 800; opacity: .85; }
.btn.store.big { font-size: 28px; padding: 14px 30px 16px; min-width: min(70vw, 320px); }
.btn.store.small { font-size: 18px; padding: 8px 20px 10px; align-self: center; }
.btn.store.soon { background: #4b5563; box-shadow: 0 6px 0 #1f2937; cursor: default; }
.btn.store.soon:active { transform: none; box-shadow: 0 6px 0 #1f2937; }
.demo-note { margin: 4px 0 0; max-width: min(80vw, 340px); text-align: center; font-size: 13px; color: #fff; opacity: .85; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* grille du jour (écran titre) : bouton sous JOUER, série de jours en petit */
.title .btn.daily { width: min(70vw, 320px); flex-direction: column; line-height: 1.15; font-size: 17px; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.btn.daily small { display: block; font-size: 12px; opacity: .9; margin-top: 2px; white-space: normal; text-wrap: balance; }   /* la ligne du dessous passe à la ligne plutôt que de dépasser du bouton (iPhone étroit) */
.btn.daily > svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -.12em; margin-right: .3em; display: inline-block; }
.btn.daily.done { filter: saturate(.55); }