/* Oratorio — « Pippo ! », le jeu de soirée (js/pippo-jeu.js) */

/* ---------- écran d'accueil ---------- */
.pj-titre{font-size:clamp(46px,13vw,68px)!important;font-style:italic;color:var(--red);letter-spacing:-.01em;font-variation-settings:"SOFT" 100,"WONK" 1}
.pj-regles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pj-regles li{display:flex;align-items:center;gap:12px;line-height:1.4}
.pj-pastille{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-family:var(--display);font-weight:800;font-size:21px}
.pj-pastille.ok{background:var(--mint);color:var(--paper)}
.pj-pastille.pass{background:var(--sun);color:var(--sun-ink)}
.pj-pastille.badge{background:var(--lilac);color:var(--paper)}
.pj-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.pj-cat{appearance:none;font:inherit;text-align:left;color:var(--ink);background:var(--ground);border:2px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;line-height:1.3;min-height:44px}
.pj-cat b{font-family:var(--display);font-size:19px}
.pj-cat span{font-size:14px;color:var(--muted)}
.pj-cat:hover{border-color:var(--red)}
.pj-cat[aria-checked="true"]{background:var(--sun-soft);border-color:var(--sun)}
.pj-rec{font-family:var(--sc);font-weight:700;letter-spacing:.06em;font-size:13.5px;color:var(--gold)}
.pj-durees{display:flex;gap:8px;flex-wrap:wrap}
.pj-duree{appearance:none;font:inherit;font-weight:700;font-size:17px;color:var(--ink);background:var(--ground);border:2px solid var(--line);border-radius:999px;min-width:76px;min-height:44px;padding:6px 16px;cursor:pointer;font-variant-numeric:tabular-nums}
.pj-duree:hover{border-color:var(--red)}
.pj-duree[aria-checked="true"]{background:var(--sky-soft);border-color:var(--sky);color:var(--sky)}
.pj-cat:focus-visible,.pj-duree:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.pj-go{align-self:flex-start;font-size:20px!important;padding:12px 26px!important;font-family:var(--display)}
.pj-astuce{margin:0;font-size:14.5px;color:var(--muted);line-height:1.45}

/* ---------- plein écran de jeu ---------- */
html.pj-open,html.pj-open body{overflow:hidden}
.pj-ov{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:auto 1fr auto;background:var(--ground);color:var(--ink);
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  font-family:var(--body);overscroll-behavior:contain;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pj-top{display:flex;align-items:center;gap:12px}
.pj-stop{appearance:none;font:inherit;font-family:var(--sc);font-weight:700;letter-spacing:.06em;font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;min-height:44px;cursor:pointer}
.pj-stop:hover{border-color:var(--red);color:var(--red)}
.pj-timer{margin-left:auto;font-family:var(--display);font-weight:800;font-size:clamp(26px,6vmin,40px);line-height:1;font-variant-numeric:tabular-nums lining-nums;min-width:2.2ch;text-align:right}
.pj-timer.is-low{color:var(--red)}
.pj-score{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:999px;background:var(--mint);color:var(--paper);font-family:var(--display);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums lining-nums}
.pj-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:0;outline:none;overflow:hidden}
.pj-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;width:100%;max-width:100%;box-sizing:border-box;padding:0 8px}
.pj-word{margin:0;max-width:100%;font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.01em;text-wrap:balance;color:var(--ink);font-variation-settings:"SOFT" 100,"WONK" 1}
.pj-fin{color:var(--red)}
.pj-front{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(22px,6vmin,40px);line-height:1.15;text-wrap:balance;color:var(--muted)}
.pj-num{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(90px,34vmin,220px);line-height:1;color:var(--red);font-variant-numeric:lining-nums}
.pj-badge{display:inline-block;font-family:var(--sc);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(16px,4.5vmin,26px);padding:6px 18px;border-radius:999px;transform:rotate(-3deg)}
.pj-badge.mime{background:var(--lilac);color:var(--paper)}
.pj-badge.chante{background:var(--sky);color:var(--paper)}
.pj-badge.sm{font-size:11.5px;padding:2px 9px;transform:none;vertical-align:2px}
.pj-flash{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--r);font-family:var(--display);font-weight:800;font-size:clamp(44px,14vmin,110px);opacity:0;pointer-events:none}
.pj-flash.is-ok{opacity:1;background:var(--mint);color:var(--paper)}
.pj-flash.is-pass{opacity:1;background:var(--sun);color:var(--sun-ink)}
.pj-foot{display:flex;flex-direction:column;gap:6px}
.pj-tiltinfo{margin:0;text-align:center;font-family:var(--sc);font-weight:700;letter-spacing:.06em;font-size:13px;color:var(--muted)}
.pj-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pj-btns button{appearance:none;border:0;border-radius:var(--r);font-family:var(--display);font-weight:800;font-size:clamp(22px,5.5vmin,34px);min-height:clamp(60px,14vh,96px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.pj-btns button:focus-visible,.pj-stop:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pj-btns button:active{transform:scale(.98)}
.pj-btns button[disabled]{opacity:.5;cursor:default}
.pj-pass{background:var(--sun);color:var(--sun-ink)}
.pj-ok{background:var(--mint);color:var(--paper)}
.pj-ov.is-count .pj-btns{visibility:hidden}
/* Paysage bas (téléphone couché) : tout se resserre pour laisser la place au mot */
@media (orientation:landscape) and (max-height:500px){
  .pj-stop{min-height:38px;padding:5px 14px}
  .pj-score{height:38px;min-width:38px}
  .pj-tiltinfo{display:none}
  .pj-btns button{min-height:54px}
}

/* ---------- animations (seulement si l'utilisateur ne les refuse pas) ---------- */
@media (prefers-reduced-motion:no-preference){
  .pj-card.pop{animation:pj-pop .28s cubic-bezier(.2,1.4,.4,1)}
  .pj-num{animation:pj-pop .5s cubic-bezier(.2,1.4,.4,1)}
  .pj-flash{transition:opacity .25s ease}
  .pj-flash.is-ok,.pj-flash.is-pass{transition:none;animation:pj-flash .46s ease forwards}
  .pj-timer.is-low{animation:pj-battement 1s ease-in-out infinite}
  @keyframes pj-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
  @keyframes pj-flash{0%{opacity:0;transform:scale(.96)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
  @keyframes pj-battement{50%{transform:scale(1.15)}}
}

/* ---------- résultats ---------- */
.pj-big{margin:0;font-family:var(--display);font-weight:800;font-size:72px;line-height:1;color:var(--red);font-variant-numeric:lining-nums}
.pj-big small{font-size:26px;color:var(--muted);font-weight:700}
.pj-new{margin:0;align-self:flex-start;font-family:var(--sc);font-weight:800;letter-spacing:.08em;background:var(--sun);color:var(--sun-ink);padding:4px 14px;border-radius:999px}
.pj-res .pj-rec{margin:0}
.pj-actions{display:flex;flex-wrap:wrap;gap:8px}
.pj-actions .btn{min-height:44px}
.pj-liste ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pj-liste li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);background:var(--ground)}
.pj-liste li.ok{background:var(--mint-soft)}
.pj-liste li.ko{background:var(--sun-soft)}
.pj-liste b{font-family:var(--display);font-size:18px}
.pj-liste p{margin:2px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.pj-mark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:800;font-size:17px;margin-top:1px}
.pj-liste li.ok .pj-mark{background:var(--mint);color:var(--paper)}
.pj-liste li.ko .pj-mark{background:var(--sun);color:var(--sun-ink)}
.pj-liste .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}