/*====================================================
Sommaire (Table des matières)
1. Conteneur global
2. Toast – base & état
3. Bloc gauche (icône) & variations internes
4. Zone de contenu (droite & textes)
5. Badge
6. Modificateurs d'attention
7. Paliers de style (ach-lvl-1 à ach-lvl-10)
8. Effets décoratifs (burst)
9. Animations (à la fin)
====================================================*/

/* 1. Conteneur global */

.ach-wrap{
  position:fixed;
  right:16px;
  bottom:var(--va-ach-wrap-bottom, 16px);
  z-index:2147483647;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  pointer-events:none;
  transform:scale(var(--site-global-zoom, 1));
  transform-origin:bottom right;
}

/* 2. Toast – base & état */

.ach-toast{
  --ach-icon-size:64px;
  --ach-gap:14px;
  --ach-border-w:3px;
  --ach-border-color:rgba(255,255,255,.18);
  width:min(92vw,440px);
  box-sizing:border-box;
  position:relative;
  display:grid;
  grid-template-columns:var(--ach-icon-size) 1fr;
  column-gap:var(--ach-gap);
  align-items:center;
  padding:18px 20px;
  border:var(--ach-border-w,3px) solid var(--ach-border-color);
  border-radius:18px;
  background:rgba(18,18,20,.88);
  backdrop-filter:blur(10px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 0 1px color-mix(in oklab, var(--ach-border-color) 60%, transparent),
    0 0 14px color-mix(in oklab, var(--ach-border-color) 45%, transparent);
  color:#fff;
  pointer-events:auto;
  transform:translateY(14px);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease, box-shadow .2s ease;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.ach-toast::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    0 0 12px color-mix(in oklab, var(--ach-border-color) 65%, transparent),
    0 0 24px color-mix(in oklab, var(--ach-border-color) 45%, transparent),
    0 0 0 2px color-mix(in oklab, var(--ach-border-color) 55%, transparent),
    0 0 22px color-mix(in oklab, var(--ach-border-color) 40%, transparent);
}
.ach-toast.show{ transform:translateY(0); opacity:1; }
.ach-toast:hover{ box-shadow:
    0 14px 40px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in oklab, var(--ach-border-color) 60%, transparent),
    0 0 14px color-mix(in oklab, var(--ach-border-color) 45%, transparent);
}

/* 3. Bloc gauche (icône) & variations internes */

.ach-left{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:var(--ach-icon-size);
  height:var(--ach-icon-size);
  border-radius:12px;
  background: radial-gradient(120% 120% at 30% 30%, #ffd36b 0%, #ff9f43 100%);
  display:grid;
  place-items:center;
  overflow:hidden;
  border:3px solid rgba(253,253,244,.90);
  box-shadow:0 0 14px rgba(253,253,244,.40), 0 0 28px rgba(253,253,244,.22);
  z-index:1;
}
.ach-left .icon{
  --ach-glyph-scale: 0.45;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  background-size:115%;
  background-position:center;
  font-size:calc(var(--ach-icon-size) * var(--ach-glyph-scale));
}

.ach-left .icon > *{
  transform:scale(var(--ach-glyph-scale));
  transform-origin:center;
}

.ach-left svg,
.ach-left img,
.ach-left [role="img"]{
  width:calc(100% * var(--ach-glyph-scale));
  height:calc(100% * var(--ach-glyph-scale));
  max-width:none;
  max-height:none;
  display:block;
  object-fit:contain;
}

.ach-left .burst{
  display:none;
  mix-blend-mode:soft-light;
  animation:ach-rot 1.8s linear infinite;
}

/* 4. Zone de contenu (droite & textes) */

.right{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--ach-vgap, 10px);
  grid-column:1 / -1;
  padding-left:calc(20px + var(--ach-icon-size) + var(--ach-gap));
  text-align:center;
}
.ach-heading,
.ach-title,
.ach-desc {
  line-height: 1.2;
}
.ach-heading {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 245, 214, 0.88);
  text-align: center;
  margin: 0;
}
.ach-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ach-secret-tag {
  color: #ffd36b;
  -webkit-text-fill-color: #ffd36b;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font: inherit;
  mix-blend-mode: normal;
  filter: none;
  text-shadow:
    0 0 4px rgba(255, 211, 107, 0.65),
    0 0 10px rgba(255, 211, 107, 0.42);
}
.ach-title{
  font-weight:800;font-size:16px;
  text-align:center;
  font-family:'Orbitron',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ach-border-color);
  margin:0;
}

.ach-title .ach-secret-puzzle-sep,
.ach-title .ach-secret-puzzle-text {
  color: #9cff57;
  -webkit-text-fill-color: #9cff57;
  text-shadow:
    0 0 4px rgba(156, 255, 87, 0.55),
    0 0 10px rgba(156, 255, 87, 0.3);
}

.ach-title .ach-secret-puzzle-sep {
  font-style: normal;
}

.ach-title .ach-secret-puzzle-text {
  font-style: italic;
}
.ach-desc{
  font-size:14px;
  opacity:.9;text-align:center;
  margin:0;
}

/* 5. Badge */

.ach-badge{
  position:absolute;
  top:0;
  right:0;
  transform:translate(65%,-20%);
  min-width:38px;
  height:38px;
  padding:0 12px;
  display:none;
  align-items:center;
  justify-content:center;
  background:#ff3b30;
  color:#fff;
  font-weight:800;
  font-size:17px;
  line-height:38px;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  z-index:60;
}
.ach-badge.is-visible{ display:inline-flex; }
.has-ach-badge{ position:relative; }

/* 6. Modificateurs d'attention */

body:not(.ach-dash-fullscreen-open) #tierTiles .ach-notify-loop{
  transform-origin:center;
  will-change:transform;
  animation:ach-attn 1.18s ease-in-out infinite;
}
body:not(.ach-dash-fullscreen-open) #tierTiles .ach-notify-pulse{
  will-change:transform, box-shadow;
  animation:ach-badge-pulse 1.18s ease-in-out infinite;
}

/* 7. Paliers de style (ach-lvl-1 à ach-lvl-10) */

.ach-lvl-1{ --ach-border-color:hsl(0 0% 85%); }
.ach-lvl-2{ --ach-border-color:hsl(25 40% 60%); }
.ach-lvl-3{ --ach-border-color:hsl(110 85% 70%); }
.ach-lvl-4{ --ach-border-color:hsl(190 95% 70%); }
.ach-lvl-5{ --ach-border-color:hsl(350 70% 60%); }
.ach-lvl-6{ --ach-border-color:hsl(249 100% 77%); }
.ach-lvl-7{ --ach-border-color:hsl(310 100% 70%); }
.ach-lvl-8{ --ach-border-color:hsl(30 100% 63%); }
.ach-lvl-9{ --ach-border-color:hsl(210 90% 65%); }
.ach-lvl-10{ --ach-border-color:#a970ff; }
.ach-lvl-10 .ach-title{
  background-image:linear-gradient(90deg,#8a2be2,#ff69b4);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0;
}

/* 8. Effets décoratifs (burst) */

.burst{
  position:absolute;
  inset:-31%;
  background:conic-gradient(from .002turn, rgba(255,255,255,.25), rgba(255,255,255,0) 40%);
  border-radius:50%;
  -webkit-mask-image:radial-gradient(closest-side, #000 88%, transparent 90%);
  mask-image:radial-gradient(closest-side, #000 88%, transparent 90%);
  background-size:101% 101%;
  transform:translateZ(0);
  animation:ach-pulse .65s ease-in-out infinite;
}

/* 9. Animations (à la fin) */

@keyframes ach-rot{ to{ transform:rotate(360deg); } }
@keyframes ach-attn{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.072); }
  65%{ transform:scale(1.028); }
  100%{ transform:scale(1); }
}
@keyframes ach-pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}
@keyframes ach-badge-pulse{
  0%{
    transform:translate(65%,-20%) scale(1);
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  50%{
    transform:translate(65%,-20%) scale(1.13);
    box-shadow:0 6px 18px rgba(255,59,48,.52), 0 2px 6px rgba(0,0,0,.25);
  }
  100%{
    transform:translate(65%,-20%) scale(1);
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
}

@media (prefers-reduced-motion: reduce){
  body:not(.ach-dash-fullscreen-open) #tierTiles .ach-notify-loop,
  body:not(.ach-dash-fullscreen-open) #tierTiles .ach-notify-pulse{
    animation:none;
  }
}