/* Tabi Quest. Style demandé par Hugo le 15/11 : un jeu d'aventure 16 bits de console portable (pixel art),
   avec des dessins et une interface originaux. Règles du système :
   - grille de 4 px : toute bordure, tout décalage, toute ombre vaut 4 px ou un multiple ;
   - aucun arrondi, aucun flou : les coins sont crantés (bordure « en croix » faite avec box-shadow) ;
   - une police pixel pour tout : DotGothic16 (latin et japonais), un seul poids, le gras est simulé ;
   - mouvements par crans (steps), comme un sprite ;
   - couleur : fonds calmes, vif seulement sur les cinq encres et le bouton rouge. */
@font-face{font-family:"Tabi Pixel";src:url(/polices/pixel-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tabi Pixel";src:url(/polices/pixel-latin-ext.woff2) format("woff2");font-display:swap;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:"Tabi Pixel JA";src:url(/polices/pixel-ja.woff2) format("woff2");font-display:swap}
:root{
  --p:4px;
  --t-1:14px; --t0:16px; --t1:20px; --t2:24px; --t3:32px; --t4:40px; --t5:48px;
  /* Une seule palette, de jour : ciel, crème, et des couleurs franches. Pas de thème sombre (Hugo, 15/11 : « tristoune »). */
  --fond:#58b8f0; --fond2:#6cc4f5; --surface:#fffdf0; --surface2:#f6ecc8; --bord:#2b2350; --ombre:#2b235040;
  --texte:#2b2350; --texte2:#5b5285; --texte3:#857ca8; --filet:#2b235026;
  --sumi:#3a3458; --ai:#2f6df0; --shu:#f0443a; --kin:#e89a00; --murasaki:#9a4cf0;
  --rouge:#f0443a; --rouge-creux:#b3261f; --sur-rouge:#fffdf0; --vert:#2fc060; --jaune:#ffd23e; --orange:#ff8a2a; --bleu:#2f6df0; --turquoise:#14b8a6; --rose:#ff5d9e; --violet:#9a4cf0;
  --voile:#2b2350c7; --sur-plein:#fffdf0;
  --cran:steps(4,end);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--fond);background-image:linear-gradient(45deg,var(--fond2) 25%,transparent 25%,transparent 75%,var(--fond2) 75%),linear-gradient(45deg,var(--fond2) 25%,transparent 25%,transparent 75%,var(--fond2) 75%);background-size:16px 16px;background-position:0 0,8px 8px;color:var(--texte);font-family:"Tabi Pixel","Tabi Pixel JA",ui-monospace,Menlo,monospace;font-size:var(--t0);line-height:1.35;overflow:hidden;-webkit-text-size-adjust:100%}
[lang=ja]{font-family:"Tabi Pixel JA","Tabi Pixel",sans-serif;font-weight:400}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit;touch-action:manipulation}
a{color:inherit}
a.btn{text-decoration:none}
:focus-visible{outline:4px solid var(--kin);outline-offset:4px}
h1,h2,h3,p{margin:0;font-weight:600}
p{font-weight:400}
.chiffre{font-variant-numeric:tabular-nums}
.ic{width:40px;height:40px;flex:none;image-rendering:pixelated;object-fit:contain;vertical-align:middle}
.ic.petite{width:22px;height:22px}.ic.grande{width:64px;height:64px}.ic.eteinte{filter:grayscale(1) brightness(.6);opacity:.45}
.ic.saute{animation:saute 1s steps(2,end) infinite}

/* La bordure crantée : une croix de 4 px autour de la boîte, et son ombre dure en dessous. */
.bloc,.btn,.puce,.champ,.tuile,.onglets,.capturer,.rond,.alerte,.toast,.prendre,.choix button,.encres button,.banniere,.fermer{
  box-shadow:0 calc(var(--p)*-1) 0 0 var(--bord),0 var(--p) 0 0 var(--bord),calc(var(--p)*-1) 0 0 0 var(--bord),var(--p) 0 0 0 var(--bord),
    0 calc(var(--p)*2) 0 0 var(--ombre),calc(var(--p)*-1) var(--p) 0 0 var(--ombre),var(--p) var(--p) 0 0 var(--ombre);
}

/* --- charpente --- */
.vue{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.vue.sur-carte{pointer-events:none;overflow:hidden}
.vue.sur-carte>*{pointer-events:auto}
.page{max-width:720px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(128px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}
.page>*{animation:monte .32s var(--cran) both}
.page>*:nth-child(2){animation-delay:.06s}.page>*:nth-child(3){animation-delay:.12s}.page>*:nth-child(n+4){animation-delay:.18s}
.page.calme>*{animation:none}
@keyframes monte{from{opacity:0;transform:translateY(16px)}}
.carte{position:fixed;inset:0;z-index:0;background:var(--surface2)}

/* --- barre de navigation --- */
.verre{background:var(--surface)}
.barre{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:16px;align-items:center;z-index:900;width:min(calc(100% - 32px),480px)}
.onglets{flex:1;display:flex;height:64px;min-width:0;position:relative;background:var(--surface)}
.sel{position:absolute;top:0;bottom:0;left:0;width:25%;background:var(--jaune);transition:transform .2s var(--cran)}
.onglet{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:11.5px;font-weight:600;color:var(--texte2);min-width:0;transition:color .1s .1s}
.onglet b{font-size:24px;line-height:1.15;font-weight:400}
.onglet[aria-current=page]{color:var(--texte)}
.onglet .ic{width:32px;height:32px}
.onglet[aria-current=page] .ic{animation:saute 1s steps(2,end) infinite}
.capturer .ic{width:44px;height:44px;margin-top:-6px}
.onglet:active{transform:translateY(4px)}
.capturer{flex:none;width:64px;height:64px;background:var(--rouge);color:var(--sur-rouge);display:grid;place-items:center;position:relative}
.capturer::after{content:"";position:absolute;inset:auto 0 0 0;height:8px;background:var(--rouge-creux)}
.capturer::before{content:"";position:absolute;left:4px;top:4px;width:12px;height:4px;background:#ffffff8c;box-shadow:-0px 4px 0 0 #ffffff00,0 4px 0 -0px #ffffff00}
.capturer b{font-size:34px;line-height:1;font-weight:400;margin-top:-6px}
.capturer:active{transform:translateY(4px)}

/* --- en-tête : le décor du chapitre --- */
.entete{position:relative;display:flex;flex-direction:column;gap:6px}
.entete .glyphe{display:none}
.banniere{position:relative;aspect-ratio:240/112;background:var(--surface2) center/cover no-repeat;image-rendering:pixelated;overflow:hidden;margin:4px 4px 12px}
.banniere .plaque{position:absolute;left:0;bottom:0;background:var(--bord);color:#fbfaf0;padding:6px 12px 6px 10px;font-size:var(--t2);line-height:1.1;font-weight:700;max-width:100%}
.banniere .kanji{position:absolute;right:8px;top:8px;background:var(--rouge);color:var(--sur-rouge);padding:2px 8px;font-size:var(--t1)}
.sur{font-size:var(--t-1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--texte);background:var(--jaune);padding:2px 8px;align-self:flex-start;margin-left:4px;box-shadow:0 -4px 0 0 var(--bord),0 4px 0 0 var(--bord),-4px 0 0 0 var(--bord),4px 0 0 0 var(--bord)}
.entete h1{font-size:var(--t3);line-height:1.05;font-weight:700;color:#fffdf0;text-shadow:4px 4px 0 var(--bord)}
.banniere h1.plaque{text-shadow:none}
.entete p{color:var(--texte2)}

/* --- boîtes --- */
.bloc{background:var(--surface);padding:16px;margin:0 4px}
.bloc h2{font-size:var(--t0);font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.bloc h2{margin:-16px -16px 14px;padding:8px 12px;background:var(--ruban,var(--bleu));color:#fffdf0;text-shadow:2px 2px 0 #2b235066;box-shadow:0 4px 0 0 var(--bord)}
.bloc h2 .pts{color:#fffdf0}
.page>.bloc:nth-of-type(6n+1){--ruban:var(--bleu)}.page>.bloc:nth-of-type(6n+2){--ruban:var(--rouge)}.page>.bloc:nth-of-type(6n+3){--ruban:var(--vert)}
.page>.bloc:nth-of-type(6n+4){--ruban:var(--violet)}.page>.bloc:nth-of-type(6n+5){--ruban:var(--orange)}.page>.bloc:nth-of-type(6n){--ruban:var(--turquoise)}
.bloc h2 em{font-style:normal;margin-left:auto;text-transform:none;letter-spacing:0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:420px){.duo{grid-template-columns:1fr}}
.grand{font-size:var(--t5);line-height:1;font-weight:700}
.grand small{font-size:var(--t1);font-weight:600;color:var(--texte3)}
.note{color:var(--texte2);font-size:16px}
.petit{font-size:var(--t-1);color:var(--texte3)}

/* Jauge crantée : expérience, carnet commun, classement. */
.jauge{display:block;height:16px;background:var(--surface2);box-shadow:inset 0 0 0 4px var(--bord);padding:4px;margin-top:8px}
.jauge i{display:block;height:100%;background:var(--vert);background-image:linear-gradient(90deg,transparent 0 calc(100% - 4px),#0000002e 0);background-size:12px 100%;transform-origin:left;animation:pousse .6s steps(8,end) both}
.jauge.or i{background-color:var(--kin)}.jauge.rouge i{background-color:var(--rouge)}
@keyframes pousse{from{transform:scaleX(0)}}
.heros{display:flex;gap:14px;align-items:center}
.heros .corps{flex:1;min-width:0}
.avatar{width:64px;height:64px;flex:none;image-rendering:pixelated;object-fit:contain;background:var(--surface2);box-shadow:inset 0 0 0 4px var(--bord)}
.avatar.vide{display:grid;place-items:center;font-size:28px;font-weight:700;color:var(--texte3)}
.niveau{display:inline-block;background:var(--violet);color:#fffdf0;padding:1px 8px;font-size:var(--t-1);font-weight:700}

.mot{display:flex;flex-direction:column;gap:2px}
.mot [lang=ja]{font-size:var(--t4);line-height:1.2}
.mot i{font-style:normal;color:var(--shu);font-weight:700}

/* --- sceau : le tampon d'une encre --- */
.sceau{--c:var(--sumi);flex:none;display:inline-grid;place-items:center;width:44px;height:44px;box-shadow:inset 0 0 0 4px var(--c);color:var(--c);font-size:16px;font-weight:700;line-height:1;background:var(--surface);font-variant-numeric:tabular-nums}
.sceau.plein{background:var(--c);color:var(--sur-plein);box-shadow:inset 0 0 0 4px var(--c),inset 0 0 0 6px var(--sur-plein)}
.sceau.mini{width:32px;height:28px;font-size:13px;box-shadow:inset 0 0 0 2px var(--c)}
.sceau.plein.mini{box-shadow:none}
.sceau.vide{opacity:.4;background:repeating-linear-gradient(45deg,transparent 0 4px,var(--filet) 4px 8px)}
[data-encre=sumi]{--c:var(--sumi)}[data-encre=ai]{--c:var(--ai)}[data-encre=shu]{--c:var(--shu)}[data-encre=kin]{--c:var(--kin)}[data-encre=murasaki]{--c:var(--murasaki)}
.pts{color:var(--c);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pastille{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--surface2);box-shadow:inset 0 0 0 2px var(--bord);font-size:14px;font-weight:700;color:var(--texte2);flex:none;image-rendering:pixelated;object-fit:contain}
.pastille.moi{box-shadow:inset 0 0 0 2px var(--rouge)}

/* --- lignes --- */
.lignes{display:flex;flex-direction:column}
.ligne{display:flex;align-items:center;gap:12px;padding:12px 0;width:100%;border-top:4px dotted var(--filet);min-height:64px}
.ligne:first-child{border-top:0;padding-top:0}.ligne:last-child{padding-bottom:0}
.ligne .corps{flex:1;min-width:0}
.ligne .corps strong{font-weight:600;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ligne .corps span{display:block;font-size:14.5px;color:var(--texte3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne .fin{display:flex;align-items:center;gap:6px;flex:none;font-size:15px;color:var(--texte2)}
.ligne.fait .corps strong{color:var(--texte3)}
button.ligne:active{transform:translateX(4px)}

/* --- boutons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;font-weight:700;background:var(--jaune);border-bottom:6px solid #d9a400;margin:4px;position:relative}
.btn:active{transform:translateY(4px)}
.btn.plein{background:var(--rouge);color:var(--sur-rouge);border-bottom:6px solid var(--rouge-creux)}
.btn.large{width:calc(100% - 8px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.fin{min-height:36px;padding:0 12px;font-size:15px;border-bottom-width:4px}
.rangee{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.puces{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:6px 20px 12px}
.puces::-webkit-scrollbar{display:none}
.puce{flex:none;min-height:36px;padding:0 12px;background:var(--surface);font-weight:600;font-size:16px;color:var(--texte2);display:inline-flex;align-items:center;gap:6px}
.puce:active{transform:translateY(4px)}
.puce.creux{background:var(--surface2)}
.rangee>.puce{margin:4px}
.puce[aria-pressed=true]{background:var(--jaune);color:var(--texte)}
.puce[disabled]{opacity:.7}
.champ{width:calc(100% - 8px);margin:4px;min-height:48px;padding:10px 12px;border:0;background:var(--surface2);outline:none}
.champ:focus{background:var(--surface);box-shadow:0 -4px 0 0 var(--rouge),0 4px 0 0 var(--rouge),-4px 0 0 0 var(--rouge),4px 0 0 0 var(--rouge)}
textarea.champ{resize:none;min-height:88px}
label.etq{display:block;font-size:var(--t-1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--texte2);margin:20px 0 8px}

/* --- défi secret --- */
.secret{position:relative;overflow:hidden}
.secret .cache{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;background:var(--violet);color:#fbfaf0;background-image:repeating-linear-gradient(45deg,#ffffff12 0 8px,transparent 8px 16px);transition:transform .4s steps(6,end)}
.secret .cache b{font-size:48px;line-height:1;color:#f2c744;display:inline-block;animation:saute 1s steps(2,end) infinite}
.secret .cache .petit{color:#fffdf0}
@keyframes saute{50%{transform:translateY(-4px)}}
.secret.ouvert .cache{transform:translateY(-100%);pointer-events:none}
.secret .texte{font-size:var(--t1);line-height:1.25;font-weight:600;min-height:80px;margin-bottom:12px}
.secret .texte::after{content:"▼";display:inline-block;margin-left:8px;color:var(--rouge);font-size:14px;animation:saute 1s steps(2,end) infinite}

/* --- carnet : tuiles photo --- */
.jour-titre{display:flex;align-items:baseline;gap:10px;padding:8px 4px 0}
.jour-titre h3{font-size:var(--t1);font-weight:700;color:#fffdf0;text-shadow:2px 2px 0 var(--bord)}
.jour-titre .petit{color:var(--texte)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:4px}
.tuile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface2);display:block;width:100%}
.tuile:active{transform:translateY(4px)}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tuile .bas{position:absolute;left:0;right:0;bottom:0;z-index:1;background:#27304f;color:#fbfaf0;font-weight:600;font-size:14.5px;line-height:1.15;padding:6px 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tuile .sceau{position:absolute;top:8px;right:8px;z-index:1}
.tuile img.qui{position:absolute;inset:8px auto auto 8px;z-index:1;width:36px;height:36px;background:var(--surface);object-fit:contain}
.tuile span.qui{position:absolute;top:8px;left:8px;z-index:1;width:36px;height:36px;background:var(--surface)}
.tuile .etat{position:absolute;left:8px;bottom:44px;z-index:1;font-size:12.5px;font-weight:700;padding:2px 6px;background:#f2c744;color:#1f2742}
.vide-etat{text-align:center;padding:40px 16px;color:var(--texte);font-weight:700}


/* --- classement --- */
.rang{display:grid;grid-template-columns:24px 56px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-top:4px dotted var(--filet);width:100%}
.rang:first-child{border-top:0;padding-top:0}.rang:last-child{padding-bottom:0}
.rang .avatar{width:56px;height:56px}
.rang .place{font-size:var(--t2);font-weight:700;color:var(--texte3);text-align:center}
.rang.premier .place{color:var(--kin)}
.rang .nom{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rang .total{font-size:var(--t2);font-weight:700;font-variant-numeric:tabular-nums}
.rang .total small{font-size:13px;color:var(--texte3);font-weight:600;margin-left:3px}
.rang:active{transform:translateX(4px)}

/* --- carte --- */
.sur-carte .page{padding-top:calc(env(safe-area-inset-top) + 8px);gap:8px;pointer-events:none}
.sur-carte .page>*{pointer-events:auto}
.outils-carte{position:fixed;right:20px;bottom:calc(112px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;z-index:800}
.rond{width:48px;height:48px;display:grid;place-items:center;color:var(--texte);background:var(--surface)}
.rond svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square;shape-rendering:crispEdges}
.rond:active{transform:translateY(4px)}
.leaflet-container{background:var(--surface2);font:inherit}
.leaflet-control-attribution{font-size:10px!important;background:#000000a0!important;color:#ddd!important}
.leaflet-control-attribution a{color:#fff!important}
.repere .ic{width:26px;height:26px}.repere.boss .ic{width:32px;height:32px}.repere.petit-poi .ic{width:16px;height:16px}
.repere{--c:var(--sumi);width:36px;height:36px;background:var(--surface);box-shadow:inset 0 0 0 4px var(--c),0 4px 0 0 #00000059;color:var(--c);display:grid;place-items:center;font-size:20px}
.repere.fait{background:var(--c);opacity:.6}
.repere.boss{width:44px;height:44px;font-size:24px;animation:saute 1s steps(2,end) infinite}
.repere.petit-poi{width:24px;height:24px;box-shadow:inset 0 0 0 2px var(--c);font-size:13px;opacity:.9}
.moi-point{width:20px;height:20px;background:#3a8dff;box-shadow:0 0 0 4px #fff,0 0 0 8px #3a8dff66}

/* --- feuille (boîte de dialogue du bas) --- */
.voile{position:fixed;inset:0;background:var(--voile);z-index:1000}
.feuille{position:fixed;left:50%;bottom:0;width:min(100%,640px);max-height:92dvh;transform:translateX(-50%);background:var(--surface);z-index:1001;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px calc(24px + env(safe-area-inset-bottom));border-top:4px solid var(--bord);box-shadow:0 -4px 0 0 var(--surface),0 -8px 0 0 var(--bord);animation:leve .24s steps(6,end) both}
@keyframes leve{from{transform:translate(-50%,100%)}}
.feuille .poignee{display:none}
.feuille h2{font-size:var(--t2);line-height:1.1;font-weight:700}
.feuille .tete{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.feuille .tete .corps{flex:1;min-width:0}
.fermer{flex:none;width:36px;height:36px;margin:4px;background:var(--surface2);display:grid;place-items:center;font-size:22px;font-weight:700;color:var(--texte)}
.fermer:active{transform:translateY(4px)}
.feuille .photo{width:calc(100% - 8px);margin:4px 4px 16px;display:block;background:var(--surface2);max-height:60dvh;object-fit:cover;box-shadow:0 -4px 0 0 var(--bord),0 4px 0 0 var(--bord),-4px 0 0 0 var(--bord),4px 0 0 0 var(--bord)}
.feuille section{margin-top:20px}
.feuille h3{font-size:var(--t-1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--texte2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.choix{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:4px}
.choix button{background:var(--surface2);padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;font-weight:600;line-height:1.15;text-align:center;min-height:92px}
.choix button:active,.encres button:active{transform:translateY(4px)}
.encres{display:flex;gap:14px;padding:4px}
.encres button{flex:1;padding:8px 0;background:var(--surface2);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--texte2)}
.encres button[aria-pressed=true]{background:var(--c);color:var(--sur-plein)}
.prendre{width:calc(100% - 8px);margin:4px;aspect-ratio:16/10;display:grid;place-items:center;text-align:center;color:var(--texte2);font-weight:700;overflow:hidden;position:relative;background:var(--surface2)}
.prendre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:4px}
.avatars button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:600;text-align:center;line-height:1.1;padding:6px 2px;background:var(--surface2);box-shadow:0 -4px 0 0 var(--bord),0 4px 0 0 var(--bord),-4px 0 0 0 var(--bord),4px 0 0 0 var(--bord)}
.avatars button[aria-pressed=true]{background:var(--jaune)}
.avatars button:active{transform:translateY(4px)}
.avatars img{width:64px;height:64px;max-width:100%;image-rendering:pixelated;object-fit:contain}

/* --- fête : le tampon tombe --- */
.fete{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:var(--voile);animation:eclair .3s steps(3,end) both}
@keyframes eclair{0%{background:#fff}}
.fete .boite{text-align:center;color:#fbfaf0;padding:16px}
.fete .gros{--c:var(--shu);width:176px;height:176px;background:#fbfaf0;box-shadow:inset 0 0 0 12px var(--c),0 -4px 0 0 #0a0e20,0 4px 0 0 #0a0e20,-4px 0 0 0 #0a0e20,4px 0 0 0 #0a0e20,0 12px 0 0 #00000059;color:var(--c);display:grid;place-items:center;font-size:112px;line-height:1;margin:0 auto 24px;animation:tampon .45s steps(5,end) both}
.fete .gros[data-encre=sumi]{--c:#2b2f3d}.fete .gros[data-encre=ai]{--c:#3458c8}.fete .gros[data-encre=shu]{--c:#e0452f}.fete .gros[data-encre=kin]{--c:#c98f0c}.fete .gros[data-encre=murasaki]{--c:#8b4fd0}
@keyframes tampon{0%{transform:translateY(-120vh)}70%{transform:translateY(0)}85%{transform:translateY(-12px)}100%{transform:translateY(0)}}
.fete .plus{font-size:var(--t5);font-weight:700;animation:monte .3s .4s var(--cran) both}
.fete p{animation:monte .3s .5s var(--cran) both;max-width:300px;margin:6px auto 0}
.fete .monte-niveau{display:inline-block;margin-top:14px;background:#f2c744;color:#1f2742;font-weight:700;padding:4px 12px;font-size:var(--t1);animation:monte .3s .7s var(--cran) both}

.toast{position:fixed;left:50%;top:calc(20px + env(safe-area-inset-top));transform:translate(-50%,-300%);background:var(--surface);color:var(--texte);padding:10px 16px;font-weight:700;font-size:16px;pointer-events:none;transition:transform .2s var(--cran);z-index:3000;max-width:calc(100% - 40px);text-align:center}
.toast.vu{transform:translate(-50%,0)}
.alerte{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);width:min(calc(100% - 32px),480px);z-index:950;background:var(--surface);padding:12px;display:flex;align-items:center;gap:12px;animation:tombe .3s steps(5,end) both}
@keyframes tombe{from{transform:translate(-50%,-160%)}}
.alerte .corps{flex:1;min-width:0}.alerte strong{display:block;line-height:1.2}.alerte span{font-size:14.5px;color:var(--texte3)}
.bandeau{display:flex;align-items:center;gap:10px;font-size:15px;background:#f2c744;color:#1f2742;padding:8px 12px;margin:0 4px;font-weight:600}
.feuille .bandeau{margin:0 0 4px}
.carte-phrase{padding:12px 0;border-top:4px dotted var(--filet)}
.carte-phrase:first-of-type{border-top:0}
.carte-phrase [lang=ja]{font-size:var(--t2);line-height:1.3;display:block}
.carte-phrase i{font-style:normal;color:var(--shu);font-weight:700}
.accueil{position:fixed;inset:0;display:grid;place-items:center;padding:32px;text-align:center}
.accueil b{font-size:112px;line-height:1;color:var(--rouge);display:block;font-weight:400}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}