/* Chat de gouttière — interface : nuit urbaine chaude, orange chat, lettrage rond */
:root {
  --ink: #fff6ea;
  --dim: rgba(255, 246, 234, .7);
  --panel: rgba(28, 20, 26, .86);
  --line: rgba(255, 246, 234, .18);
  --orange: #ff9a3c;
  --cream: #ffe3b8;
  --red: #ff5c6c;
  --f-title: 'Fredoka', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --f: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c141a; color: var(--ink); font: 600 17px/1.35 var(--f); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
[hidden] { display: none !important; }
#stage { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── Tableau de bord ─────────────────────────────────────────── */
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: 20px; padding: max(10px, env(safe-area-inset-top)) 64px 0 max(14px, env(safe-area-inset-left)); pointer-events: none; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.stat { display: grid; }
.stat small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.stat b { font: 700 1.5rem/1.05 var(--f-title); font-variant-numeric: tabular-nums; }
.stat.dim b { color: var(--dim); font-size: 1.15rem; }
.lives { display: flex; gap: 5px; align-items: center; }
.lives .cat { width: 24px; height: 24px; fill: var(--cream); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.lives b { font: 700 1.5rem/1.05 var(--f-title); font-variant-numeric: tabular-nums; }
.hearts { display: flex; gap: 4px; align-items: center; }
.hearts svg { width: 26px; height: 26px; fill: var(--red); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); transition: opacity .3s, transform .3s; }
.hearts svg.lost { opacity: .18; transform: scale(.8); fill: #fff; }
.timer.late b { color: var(--red); animation: blink .5s steps(2) infinite; }
@keyframes blink { to { opacity: .35; } }
.banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: grid; gap: 6px; text-align: center; pointer-events: none; text-shadow: 0 3px 10px rgba(0, 0, 0, .8); width: max-content; max-width: 96vw; }
.banner b { font: 700 clamp(1.8rem, 7vw, 3.6rem)/1 var(--f-title); color: var(--orange); }
.banner span { font-size: 1.25rem; color: var(--cream); }
.banner.go { animation: pop .5s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ── Commandes tactiles ──────────────────────────────────────── */
.touch { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding: 0 max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); pointer-events: none; }
/* joystick : une zone ronde, un bouton qui suit le pouce */
/* joystick flottant : toute la moitié gauche de l'écran répond ; le cercle vient se placer sous le doigt */
.stickzone { pointer-events: auto; position: fixed; left: 0; bottom: 0; width: 46%; height: 72%; touch-action: none; }
.stick { position: absolute; left: calc(max(14px, env(safe-area-inset-left)) + 85px); top: calc(100% - max(14px, env(safe-area-inset-bottom)) - 85px); width: 170px; height: 170px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(28, 20, 26, .5); border: 2px solid var(--line); opacity: .7; }
.stick.on { opacity: 1; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255, 246, 234, .55); border: 2px solid rgba(255, 246, 234, .8); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.stick.on .knob { background: rgba(255, 154, 60, .7); }
/* bouton Action flottant : toute la moitié droite de l'écran répond, le bouton ne fait que s'allumer */
.jumpzone { pointer-events: auto; position: fixed; right: 0; bottom: 0; width: 54%; height: 72%; touch-action: none; }
.jumpzone .pedal { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
.pedal { pointer-events: auto; width: 86px; height: 86px; display: grid; place-content: center; justify-items: center; gap: 2px; background: var(--panel); border: 2px solid var(--line); border-radius: 22px; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; touch-action: none; }
.pedal svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pedal.jump { width: 110px; height: 110px; border-color: var(--orange); color: var(--orange); }
.pedal.on { background: rgba(255, 154, 60, .28); transform: scale(.96); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; pointer-events: auto; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hud .icon-btn { margin-left: auto; }
.sound { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); z-index: 3; }
.sound .off, .sound[aria-pressed="true"] .on { display: none; }
.sound[aria-pressed="true"] .off { display: block; }
.hint { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); width: max-content; max-width: min(92%, 520px); padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 8px; text-align: center; pointer-events: none; }
.float { position: absolute; transform: translate(-50%, -50%); font: 700 1.25rem/1 var(--f-title); color: var(--cream); white-space: nowrap; opacity: 0; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .7); }
.float.big { font-size: 1.8rem; color: var(--orange); }
.float.bad { color: var(--red); }
.float.go { animation: rise 1.4s ease-out forwards; }
@keyframes rise { 0% { opacity: 0; translate: 0 14px; scale: .7; } 15% { opacity: 1; scale: 1.1; } 30% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -46px; } }
.flash { position: absolute; inset: 0; background: rgba(255, 60, 80, .35); pointer-events: none; opacity: 0; }
.flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ── Menu, feuilles ──────────────────────────────────────────── */
.menu { position: absolute; inset: 0; z-index: 4; display: grid; align-items: center; padding: 20px clamp(18px, 6vw, 70px); background: linear-gradient(90deg, rgba(20, 12, 18, .86), rgba(20, 12, 18, .5) 60%, rgba(20, 12, 18, .15)); overflow: auto; }
.menu-in { max-width: 480px; display: grid; gap: 12px; justify-items: start; }
.menu h1 { margin: 0; font: 700 clamp(2.6rem, 9vw, 5rem)/.92 var(--f-title); color: var(--orange); text-shadow: 3px 3px 0 #2a1208, 0 0 30px rgba(255, 154, 60, .45); letter-spacing: .005em; }
.lead { margin: 0; font-size: 1.15rem; }
.help { margin: 0; color: var(--dim); font-size: .98rem; }
.ver { font-size: .74rem; color: var(--dim); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta { min-height: 54px; padding: 10px 34px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffb45c, var(--orange)); color: #2a1208; font: 700 1.3rem/1 var(--f-title); letter-spacing: .02em; box-shadow: 0 5px 0 #b35f12, 0 12px 24px rgba(0, 0, 0, .4); }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #b35f12; }
.quiet { min-height: 44px; padding: 8px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }

/* choix du chat : trois portraits */
.cats { display: flex; gap: 10px; }
.cat { width: 104px; padding: 8px 6px 6px; display: grid; justify-items: center; gap: 4px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; font-size: .82rem; line-height: 1.15; text-align: center; color: var(--dim); }
.cat canvas { width: 84px; height: 84px; display: block; }
.cat[aria-pressed="true"] { border-color: var(--orange); color: var(--ink); background: rgba(255, 154, 60, .16); }

.veil { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(14, 8, 12, .66); overflow: auto; }
.sheet { width: min(460px, 100%); padding: 22px; display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; text-align: center; justify-items: center; }
.sheet h2 { margin: 0; font: 700 1.9rem/1 var(--f-title); color: var(--orange); }
.sheet p { margin: 0; }
.sheet .big { font: 700 2.6rem/1 var(--f-title); color: var(--cream); }
.sheet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.sheet li { padding-left: 26px; position: relative; line-height: 1.3; }
.sheet li::before { content: ''; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
.sheet li.bad::before { background: var(--red); }
.sheet dl { margin: 0; display: grid; gap: 4px; }
.sheet dt { margin-top: 8px; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.sheet dd { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.sheet small { color: var(--dim); font-weight: 500; }

/* Téléphone tenu debout : on demande de le tourner (la rue a besoin de largeur) */
.rotate { position: absolute; inset: 0; z-index: 8; display: none; place-content: center; justify-items: center; gap: 10px; padding: 28px; background: rgba(20, 12, 18, .95); text-align: center; }
.rotate.show { display: grid; z-index: 40; }                                       /* ordinateur : le jeu s'arrête à cet écran */
.rotate svg { width: 96px; height: 96px; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rotate .phone { transform-origin: 32px 30px; animation: tilt 2.4s ease-in-out infinite; }
.rotate b { font: 700 1.7rem/1.1 var(--f-title); color: var(--orange); }
.rotate span { color: var(--dim); font-size: 1.1rem; }
@keyframes tilt { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { .rotate { display: grid; } }
.fatal { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; gap: 8px; padding: 28px; background: #1c141a; text-align: center; }
.loading { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; gap: 10px; background: #1c141a; text-align: center; color: var(--dim); }
.loading b { font: 700 2rem/1 var(--f-title); color: var(--orange); }
.loading .bar { width: 220px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.loading .bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .2s; }

@media (max-width: 560px) {
  .hud { gap: 12px; }
  .stat b { font-size: 1.2rem; }
  .stat.dim { display: none; }
  .hint { top: 70px; font-size: .95rem; }
}
@media (max-height: 460px) {
  .pedal { width: 64px; height: 64px; border-radius: 16px; } .pedal.jump { width: 84px; height: 84px; } .pedal span { display: none; }
  .stick { width: 140px; height: 140px; left: calc(max(14px, env(safe-area-inset-left)) + 70px); top: calc(100% - max(14px, env(safe-area-inset-bottom)) - 70px); } .stick .knob { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .menu { align-items: start; padding-top: 10px; }
  .menu-in { gap: 8px; }
  .menu h1 { font-size: 2.2rem; }
  .help, .lead { display: none; }
  .cat { width: 84px; padding: 5px 4px 4px; font-size: .74rem; }
  .cat canvas { width: 60px; height: 60px; }
  .cta { min-height: 46px; padding: 8px 26px; font-size: 1.15rem; }
  .mbh { display: none; }
}
@media (prefers-reduced-motion: reduce) { .float.go { animation-duration: .01s; } .rotate .phone { animation: none; transform: rotate(-90deg); } }

/* Hall of fame (classes mbh-*, voir /css/hall.css) : aux couleurs du jeu */
.mbh, .mbh-board, .mbh-toast { --mbh-accent: var(--orange); --mbh-radius: 12px; }
.mbh { max-width: 480px; }
.mbh-title, .mbh-board-head h2 { font-family: var(--f-title); font-weight: 700; }
.mbh-board-head h2 { font-size: 1.7rem; }