/* ============================================================
   SHOE & FISHING SIMULATOR — interface
   ============================================================ */
:root{
  --bg:#0d1220; --bg2:#141c30; --carte:#18213a; --carte2:#1f2b48;
  --texte:#eaf1ff; --doux:#9fb0cc; --trait:rgba(255,255,255,.10);
  --or:#ffd23f; --vert:#4ad991; --bleu:#41b6ff; --rose:#ff4d8d; --violet:#b06bff;
  --ombre:0 18px 45px rgba(0,0,0,.45);
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--texte);
  font-family:'Baloo 2',Nunito,'Segoe UI',system-ui,sans-serif;user-select:none}
canvas{display:block}
button{font-family:inherit;cursor:pointer;border:0;color:inherit}
#jeu{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.panneau-verre{background:linear-gradient(160deg,rgba(30,42,72,.82),rgba(16,22,40,.86));
  border:1px solid var(--trait);border-radius:var(--r);backdrop-filter:blur(14px);box-shadow:var(--ombre)}

#hg{position:absolute;top:14px;left:14px;padding:12px 14px;min-width:236px;pointer-events:auto}
.ligne-niv{display:flex;align-items:center;gap:9px}
.pastille{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:17px;
  background:linear-gradient(140deg,var(--bleu),var(--violet));box-shadow:0 6px 16px rgba(65,182,255,.35)}
.niv-txt{font-size:11px;color:var(--doux);letter-spacing:.9px;text-transform:uppercase}
.barre{height:8px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:5px;width:150px}
.barre>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--bleu),var(--vert));
  width:0;transition:width .35s cubic-bezier(.2,.9,.3,1)}
#or{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:21px;font-weight:800;color:var(--or)}
#or small{font-size:12px;color:var(--doux);font-weight:600}
.pop{animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

#equipe{margin-top:10px;display:flex;align-items:center;gap:9px;padding:8px;border-radius:12px;background:rgba(255,255,255,.05)}
#equipe .ico{font-size:20px}
#equipe .nom{font-size:12.5px;font-weight:700;line-height:1.15}
#equipe .stats{font-size:10.5px;color:var(--doux);margin-top:2px}
#seau{margin-top:8px;font-size:11.5px;color:var(--doux);display:flex;justify-content:space-between}
#seau b{color:var(--texte)}

/* ---------------- minicarte ---------------- */
#hd{position:absolute;top:14px;right:14px;padding:9px;pointer-events:auto}
#minicarte{width:176px;height:176px;border-radius:12px;display:block;background:rgba(8,12,22,.55)}
#zone-actu{text-align:center;font-size:11.5px;margin-top:6px;color:var(--doux)}
#zone-actu b{color:var(--texte);display:block;font-size:13px}

/* ---------------- boutons ---------------- */
#menus{position:absolute;bottom:14px;right:14px;display:flex;gap:8px;pointer-events:auto}
.btn-rond{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(160deg,rgba(38,52,86,.9),rgba(20,28,50,.92));border:1px solid var(--trait);
  box-shadow:var(--ombre);transition:transform .16s,background .16s;position:relative}
.btn-rond:hover{transform:translateY(-3px);background:linear-gradient(160deg,rgba(52,70,116,.95),rgba(26,36,64,.95))}
.btn-rond:active{transform:translateY(0) scale(.94)}
.btn-rond .k{position:absolute;bottom:3px;right:5px;font-size:9px;color:var(--doux);font-weight:700}

/* ---------------- invite d'action ---------------- */
#invite{position:absolute;bottom:96px;left:50%;transform:translateX(-50%) translateY(14px);
  padding:11px 20px;border-radius:99px;font-size:14.5px;font-weight:700;opacity:0;transition:.22s;
  background:linear-gradient(160deg,rgba(30,42,72,.92),rgba(16,22,40,.94));border:1px solid var(--trait);box-shadow:var(--ombre)}
#invite.on{opacity:1;transform:translateX(-50%) translateY(0)}
#invite .touche{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;margin-right:7px;
  border-radius:7px;background:var(--or);color:#20180a;font-weight:900;font-size:12.5px;vertical-align:2px}

/* ---------------- toasts ---------------- */
#toasts{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;z-index:30;width:min(92vw,420px)}
.toast{padding:11px 16px;border-radius:14px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg,rgba(30,42,72,.94),rgba(16,22,40,.96));border:1px solid var(--trait);
  box-shadow:var(--ombre);animation:toastIn .4s cubic-bezier(.2,1.4,.4,1)}
.toast.sort{animation:toastOut .35s forwards}
.toast .em{font-size:19px}
@keyframes toastIn{from{opacity:0;transform:translateY(-22px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-16px) scale(.95)}}

/* ---------------- mini-jeu de peche ---------------- */
#peche{position:absolute;inset:0;display:none;place-items:center;pointer-events:auto}
#peche.on{display:grid}
#peche .fond{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,14,28,.10),rgba(6,10,20,.55))}
#peche .boite{position:relative;display:flex;gap:20px;align-items:center;padding:20px;border-radius:24px;
  animation:toastIn .35s cubic-bezier(.2,1.4,.4,1)}
#jauge{position:relative;width:74px;height:330px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#0d2338,#123048);border:2px solid rgba(255,255,255,.14)}
#zoneJ{position:absolute;left:5px;right:5px;border-radius:14px;
  background:linear-gradient(180deg,rgba(74,217,145,.85),rgba(45,190,120,.6));
  box-shadow:0 0 22px rgba(74,217,145,.55),inset 0 0 12px rgba(255,255,255,.3)}
#zoneJ.hit{background:linear-gradient(180deg,rgba(255,210,63,.9),rgba(255,160,40,.65));
  box-shadow:0 0 30px rgba(255,210,63,.7),inset 0 0 12px rgba(255,255,255,.4)}
#poissonJ{position:absolute;left:50%;width:44px;height:44px;margin-left:-22px;margin-top:-22px;
  display:grid;place-items:center;font-size:27px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));transition:transform .08s}
#progC{width:22px;height:330px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;
  display:flex;flex-direction:column-reverse}
#progC>i{display:block;width:100%;background:linear-gradient(0deg,var(--vert),var(--bleu));border-radius:99px;height:30%}
#peche .infos{width:190px}
#peche .infos h3{font-size:19px;margin-bottom:3px}
#peche .infos p{font-size:12.5px;color:var(--doux);line-height:1.45}
#peche .aide{margin-top:14px;font-size:12px;color:var(--doux);border-top:1px solid var(--trait);padding-top:10px}
#peche .aide b{color:var(--or)}
#peche.secoue .boite{animation:secoue .3s}
@keyframes secoue{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* attente de la touche */
#attente{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);display:none;text-align:center}
#attente.on{display:block}
#attente .bulle{font-size:52px;animation:flotte 1.3s ease-in-out infinite}
#attente.touche .bulle{animation:touche .28s infinite}
#attente .txt{font-size:13px;color:var(--doux);margin-top:2px}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes touche{0%,100%{transform:scale(1) rotate(-7deg)}50%{transform:scale(1.35) rotate(7deg)}}

/* ---------------- prise ---------------- */
#prise{position:absolute;inset:0;display:none;place-items:center;z-index:25;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(6,10,20,.42) 0%,rgba(6,10,20,0) 58%)}
#prise.on{display:grid}
#prise .carte{padding:26px 34px;border-radius:26px;text-align:center;animation:prise .55s cubic-bezier(.2,1.5,.4,1);position:relative;overflow:hidden}
#prise .em{font-size:74px;display:block;animation:flotte 2s ease-in-out infinite}
#prise h2{font-size:25px;margin:6px 0 2px}
#prise .rar{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
#prise .det{font-size:13.5px;color:var(--doux);margin-top:7px}
#prise .gain{font-size:20px;font-weight:800;color:var(--or);margin-top:9px}
#prise .neuf{display:inline-block;margin-top:9px;padding:4px 12px;border-radius:99px;font-size:11.5px;font-weight:800;
  background:linear-gradient(90deg,var(--rose),var(--violet))}
@keyframes prise{from{opacity:0;transform:scale(.7) translateY(30px)}to{opacity:1;transform:none}}
.rais{position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,255,255,.09) 8deg 16deg);
  animation:tourne 9s linear infinite;z-index:-1}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---------------- fenetres ---------------- */
#fenetres{position:fixed;inset:0;display:none;place-items:center;z-index:40;
  background:rgba(6,10,20,.6);backdrop-filter:blur(6px);padding:16px}
#fenetres.on{display:grid}
.fenetre{width:min(960px,96vw);max-height:min(88vh,760px);display:none;flex-direction:column;overflow:hidden;
  animation:fen .3s cubic-bezier(.2,1.3,.4,1)}
.fenetre.on{display:flex}
@keyframes fen{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.fen-tete{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--trait)}
.fen-tete h2{font-size:20px;flex:1}
.fen-tete .sous{font-size:12px;color:var(--doux);font-weight:600}
.fermer{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.07);font-size:17px;display:grid;place-items:center}
.fermer:hover{background:var(--rose)}
.onglets{display:flex;gap:6px;padding:11px 16px 0;flex-wrap:wrap}
.onglet{padding:8px 15px;border-radius:11px 11px 0 0;background:rgba(255,255,255,.05);font-size:13px;font-weight:700;color:var(--doux)}
.onglet.on{background:rgba(255,255,255,.12);color:var(--texte)}
.fen-corps{padding:14px 16px 18px;overflow-y:auto;flex:1}
.fen-corps::-webkit-scrollbar{width:9px}
.fen-corps::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:9px}

/* grille d'articles */
.grille{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.article{padding:13px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid var(--trait);
  position:relative;overflow:hidden;transition:transform .16s,border-color .16s}
.article:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.article .bandeau{position:absolute;top:0;left:0;right:0;height:3px}
.article .haut{display:flex;align-items:center;gap:9px}
.article .visu{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;background:rgba(0,0,0,.28)}
.article h4{font-size:14px;line-height:1.15}
.article .rar{font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}
.article .desc{font-size:11.5px;color:var(--doux);margin:9px 0;line-height:1.4;min-height:32px;font-style:italic}
.stats-l{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:11.5px;margin-bottom:10px}
.stats-l div{display:flex;justify-content:space-between;color:var(--doux)}
.stats-l b{color:var(--texte);font-variant-numeric:tabular-nums}
.stats-l .up{color:var(--vert)}
.stats-l .down{color:#ff7a7a}
.acts{display:flex;gap:7px}
.btn{flex:1;padding:9px;border-radius:11px;font-size:12.5px;font-weight:800;background:rgba(255,255,255,.09);transition:.16s}
.btn:hover{background:rgba(255,255,255,.17)}
.btn.or{background:linear-gradient(135deg,var(--or),#ffa63f);color:#241a05}
.btn.or:hover{filter:brightness(1.12)}
.btn.vert{background:linear-gradient(135deg,var(--vert),#27b877);color:#04261a}
.btn.bleu{background:linear-gradient(135deg,var(--bleu),#3a7de0);color:#03182e}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.badge-eq{position:absolute;top:9px;right:9px;padding:3px 9px;border-radius:99px;font-size:9.5px;font-weight:900;
  background:var(--vert);color:#04261a;letter-spacing:.6px}
.niv-up{font-size:10.5px;color:var(--doux);margin-bottom:7px}
.niv-up b{color:var(--or)}

/* collection */
.collec{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
.poisson{padding:11px 9px;border-radius:13px;text-align:center;background:rgba(255,255,255,.045);
  border:1px solid var(--trait);position:relative;transition:transform .16s}
.poisson:hover{transform:translateY(-3px)}
.poisson.inconnu{opacity:.42;filter:grayscale(1)}
.poisson .em{font-size:31px;display:block;line-height:1.25}
.poisson .n{font-size:11.5px;font-weight:700;margin-top:3px;line-height:1.2}
.poisson .r{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.poisson .c{font-size:10px;color:var(--doux);margin-top:3px}
.zone-titre{grid-column:1/-1;font-size:13px;font-weight:800;color:var(--doux);margin:12px 0 1px;
  display:flex;align-items:center;gap:9px}
.zone-titre:first-child{margin-top:0}
.zone-titre::after{content:'';flex:1;height:1px;background:var(--trait)}

/* succes */
.succes{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.succ{display:flex;gap:11px;align-items:center;padding:11px;border-radius:13px;background:rgba(255,255,255,.045);
  border:1px solid var(--trait)}
.succ.ok{background:linear-gradient(135deg,rgba(74,217,145,.16),rgba(255,255,255,.045));border-color:rgba(74,217,145,.4)}
.succ .em{font-size:26px;filter:grayscale(1);opacity:.45}
.succ.ok .em{filter:none;opacity:1}
.succ h4{font-size:13px}
.succ p{font-size:11px;color:var(--doux);margin-top:2px;line-height:1.35}

/* carte */
#grandecarte{width:100%;aspect-ratio:1;max-height:56vh;border-radius:16px;background:rgba(8,12,22,.5);display:block;margin:0 auto}
.legende{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px;font-size:12px;color:var(--doux)}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{width:11px;height:11px;border-radius:4px;display:block}

/* progression globale */
.progres{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.stat-b{flex:1;min-width:132px;padding:12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid var(--trait)}
.stat-b .v{font-size:22px;font-weight:800}
.stat-b .l{font-size:11px;color:var(--doux);margin-top:2px}

/* ---------------- titre ---------------- */
#titre{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:radial-gradient(ellipse at 50% 0%,#1d3a5c,#0d1220 62%)}
#titre.parti{animation:sortTitre .55s forwards}
@keyframes sortTitre{to{opacity:0;visibility:hidden}}
#titre .bloc{text-align:center;max-width:560px}
#titre .logo{font-size:clamp(30px,7.4vw,58px);font-weight:900;line-height:1.02;letter-spacing:-1.4px;
  background:linear-gradient(120deg,#ffd23f,#ff8a3d 42%,#ff4d8d 72%,#b06bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 24px rgba(255,77,141,.3))}
#titre .ss{font-size:14px;color:var(--doux);margin-top:9px;line-height:1.55}
#titre .emos{font-size:40px;margin:16px 0 8px;letter-spacing:6px;animation:flotte 3.4s ease-in-out infinite}
#titre .cmds{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0;font-size:12px;color:var(--doux)}
#titre .cmds kbd{background:rgba(255,255,255,.1);border:1px solid var(--trait);border-radius:7px;padding:3px 8px;
  font-family:inherit;font-weight:700;color:var(--texte);margin-right:5px}
#titre .gros{padding:15px 40px;border-radius:16px;font-size:18px;font-weight:900;letter-spacing:.6px;
  background:linear-gradient(135deg,var(--or),#ff8a3d);color:#231705;box-shadow:0 14px 34px rgba(255,140,60,.35);
  transition:transform .18s}
#titre .gros:hover{transform:translateY(-3px) scale(1.03)}
#titre .sec{margin-top:12px;font-size:12.5px;color:var(--doux);background:none;text-decoration:underline}
#titre .repris{font-size:12.5px;color:var(--vert);margin-top:12px;min-height:18px}

/* ---------------- mobile ---------------- */
#tactile{position:fixed;inset:0;z-index:12;display:none;pointer-events:none}
body.tactile #tactile{display:block}
#joy{position:absolute;left:22px;bottom:22px;width:128px;height:128px;border-radius:50%;pointer-events:auto;
  background:rgba(255,255,255,.07);border:1px solid var(--trait);backdrop-filter:blur(6px)}
#joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(255,255,255,.28);box-shadow:0 4px 14px rgba(0,0,0,.35)}
#btA,#btJ{position:absolute;right:22px;width:78px;height:78px;border-radius:50%;pointer-events:auto;
  display:grid;place-items:center;font-size:14px;font-weight:900;background:rgba(255,255,255,.12);
  border:1px solid var(--trait);backdrop-filter:blur(6px)}
#btA{bottom:112px;background:rgba(255,210,63,.28)}
#btJ{bottom:22px}
body.tactile #menus{bottom:auto;top:200px;right:14px;flex-direction:column}

@media (max-width:720px){
  #hg{min-width:0;padding:9px 11px;transform:scale(.9);transform-origin:top left}
  #hd{transform:scale(.82);transform-origin:top right}
  #peche .boite{flex-direction:column;gap:12px;padding:14px}
  #peche .infos{width:min(78vw,300px);text-align:center}
  #jauge,#progC{height:min(46vh,300px)}
  #jauge{width:64px}
  .grille{grid-template-columns:1fr}
  #invite{bottom:210px;font-size:13px}
}