/* Road To Azrael: pulsante in home, schermata con 5 missioni, Azrael in primo piano e mega barra 0/5 */

/* pulsante in home (al posto della Classifica) */
.side-btn.azr { background: linear-gradient(#e0304f, #5a0a1e 70%, #2a0410); box-shadow: 0 7px 0 #2a0410, 0 7px 0 4px var(--ink), inset 0 3px 0 rgba(255, 160, 170, .45), 0 0 22px rgba(255, 30, 70, .55); }
.side-btn.azr:active { box-shadow: 0 2px 0 #2a0410, 0 2px 0 4px var(--ink), inset 0 3px 0 rgba(255, 160, 170, .4); }
.side-btn.azr .azl { font-size: clamp(10px, 1.9vh, 15px); line-height: 1.05; text-align: center; letter-spacing: .5px; }
.side-btn.azr .azr-face { width: clamp(38px, 8vh, 62px); height: clamp(38px, 8vh, 62px); border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); box-shadow: 0 0 0 2px #ff5a78, 0 0 14px #ff2a4a; background: #2a0410; }
.side-btn.azr .badge.cntb { background: #ffc72c; color: #3a1400; border: 3px solid var(--ink); border-radius: 50%; font-size: 17px; -webkit-text-stroke: 0; }

/* sfondo apocalittico */
.bgfx.azr { background: radial-gradient(ellipse at 50% 75%, #8a1030 0%, #3d0818 38%, #14040c 72%, #05010a 100%); }
.bgfx.azr .rays { background: repeating-conic-gradient(from 0deg, rgba(255, 40, 70, .13) 0 6deg, transparent 6deg 16deg); top: 72%; }
.bgfx.azr .grid { background: repeating-linear-gradient(135deg, rgba(255, 60, 90, .035) 0 36px, transparent 36px 72px); }
.bgfx.azr .dots { filter: hue-rotate(150deg) saturate(2.4) brightness(1.1); opacity: .8; }
#screen-azrael .sub-top h2.az-title { color: #ffd0d6; text-shadow: 0 3px 0 var(--ink), 0 0 24px #ff2a4a; letter-spacing: 1px; }

/* corpo schermata: riquadri in alto, Azrael al centro, barra in basso */
.az-body { position: absolute; left: 0; right: 0; top: calc(60px + var(--safe-t)); bottom: 0; display: flex; flex-direction: column; max-width: 1180px; margin: 0 auto; padding: 0 calc(14px + var(--safe-r)) calc(10px + var(--safe-b, 0px)) calc(14px + var(--safe-l)); }
.az-tiles { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(5px, 1vw, 12px); flex: 0 0 auto; }
.az-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(2px, .6vh, 5px); padding: clamp(5px, 1.2vh, 10px) clamp(5px, .8vw, 10px) clamp(5px, 1.2vh, 10px); border-radius: 14px; border: 3px solid var(--ink); text-align: center;
  background: linear-gradient(rgba(96, 18, 36, .93), rgba(26, 6, 14, .95)); box-shadow: 0 4px 12px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 90, 110, .18); }
.az-t.ready { border-color: #ffd36a; box-shadow: 0 0 22px rgba(255, 200, 80, .6), 0 4px 12px rgba(0, 0, 0, .55); animation: azready 1.3s ease-in-out infinite; }
.az-t.claimed { filter: saturate(.55) brightness(.8); }
@keyframes azready { 50% { transform: translateY(-3px); box-shadow: 0 0 30px rgba(255, 200, 80, .85), 0 6px 14px rgba(0, 0, 0, .55); } }
.az-n { position: absolute; left: -7px; top: -9px; width: clamp(20px, 3.8vh, 28px); height: clamp(20px, 3.8vh, 28px); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ff7a8c, #c4122e); border: 3px solid var(--ink); font-family: var(--font); font-size: clamp(11px, 2vh, 16px); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.az-ic { width: clamp(24px, 5vh, 40px); height: clamp(24px, 5vh, 40px); display: grid; place-items: center; filter: drop-shadow(0 0 7px #ff2a4a); }
.az-ic .ico { width: 100%; height: 100%; }
.az-nm { font-family: var(--font); font-weight: 400; font-size: clamp(11px, 2.2vh, 17px); line-height: 1.05; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; color: #fff; }
.az-d { font-size: clamp(9px, 1.7vh, 13px); line-height: 1.15; color: #ffc9d0; font-weight: 800; min-height: 2.3em; }
.az-mb { width: 100%; height: clamp(15px, 2.8vh, 22px); border-width: 3px; }
.az-mb i { background: linear-gradient(#ffd6a0, #ff5a3a 60%, #c4122e); }
.az-mb b { font-size: clamp(9px, 1.7vh, 13px); -webkit-text-stroke: 2.5px var(--ink); }
.az-rw { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1px 8px; font-family: var(--font); }
.az-rw span { display: flex; align-items: center; gap: 4px; font-size: clamp(11px, 2.2vh, 16px); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.az-rw .cico { height: clamp(15px, 2.9vh, 22px); max-width: 24px; }
.az-rw .azw { flex-direction: column; gap: 0; filter: drop-shadow(0 0 8px #ff3a5a); }
.az-rw .azw .ico, .az-rw .azw svg { width: clamp(24px, 5vh, 38px); height: clamp(24px, 5vh, 38px); }
.az-rw .azw b { font-weight: 400; font-size: clamp(8px, 1.5vh, 11px); line-height: 1; -webkit-text-stroke: 2.5px var(--ink); max-width: 100%; }
.az-b { padding: .3em .9em; font-size: clamp(11px, 2.2vh, 16px); animation: pulse 1.1s ease-in-out infinite; }
.az-s { height: clamp(14px, 3vh, 24px); display: grid; place-items: center; } .az-s .ico { width: clamp(14px, 3vh, 24px); height: clamp(14px, 3vh, 24px); } .az-s:not(.ok) { opacity: .5; }

/* Azrael in primo piano (sprite che respira) */
.az-hero { position: relative; flex: 1 1 0; min-height: 0; z-index: 1; margin-bottom: 4px; }
.az-cv { position: absolute; left: 50%; top: -2%; transform: translateX(-50%); z-index: 2; width: min(66vw, 600px); height: 215%; pointer-events: none; }
.az-aura { position: absolute; left: 50%; top: -20%; width: min(70vw, 640px); height: 150%; transform: translateX(-50%); z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 58%, rgba(255, 40, 80, .6) 0%, rgba(160, 10, 40, .32) 38%, transparent 68%); animation: azaura 3.2s ease-in-out infinite; }
@keyframes azaura { 50% { opacity: .65; transform: translateX(-50%) scale(1.06); } }
.az-body.locked .az-cv { filter: brightness(.62) contrast(1.1) drop-shadow(0 0 16px rgba(255, 30, 70, .55)); }
.az-body.owned .az-cv { filter: drop-shadow(0 0 20px rgba(255, 40, 80, .75)); }

/* mega barra 0/5 */
.az-prog { position: relative; z-index: 4; margin-bottom: clamp(5px, 1vh, 10px); display: flex; align-items: center; gap: clamp(6px, 1.2vw, 12px); flex: 0 0 auto; }
.az-cap { width: clamp(34px, 7vh, 54px); height: clamp(34px, 7vh, 54px); flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ff7a8c, #8a0f26 70%); border: 4px solid var(--ink); box-shadow: 0 4px 0 #2a0410, 0 0 16px rgba(255, 30, 70, .6); }
.az-cap .ico { width: 62%; height: 62%; }
.az-mega { flex: 1; height: clamp(32px, 7vh, 54px); border-radius: 30px; border-width: 5px; background: #12030a; box-shadow: 0 0 0 3px rgba(255, 90, 110, .35), 0 0 26px rgba(255, 30, 70, .45); }
.az-mega i { border-radius: 26px; background: linear-gradient(#ffe0a0 0%, #ff6a3a 35%, #e0183c 70%, #8a0f26 100%); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .5), 0 0 22px rgba(255, 90, 60, .9); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.az-mega b { font-size: clamp(18px, 4vh, 32px); letter-spacing: 2px; -webkit-text-stroke: 5px var(--ink); z-index: 2; }
.az-ticks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.az-ticks u { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: rgba(10, 2, 6, .85); }
.az-ticks u:nth-child(1) { left: 20%; } .az-ticks u:nth-child(2) { left: 40%; } .az-ticks u:nth-child(3) { left: 60%; } .az-ticks u:nth-child(4) { left: 80%; }
.az-prog.full .az-mega { animation: azfull 1.4s ease-in-out infinite; }
@keyframes azfull { 50% { box-shadow: 0 0 0 3px rgba(255, 200, 90, .7), 0 0 44px rgba(255, 90, 60, .95); } }

/* modale di sblocco */
#modal.azr-unlock .modal-box { background: radial-gradient(ellipse at 50% 60%, #7a0e28, #1a040c 75%); border-color: var(--ink); box-shadow: 0 0 60px rgba(255, 30, 70, .7), 0 9px 0 rgba(0, 0, 0, .5); overflow: hidden; }
.azu { position: relative; width: min(86vw, 520px); margin: 0 auto; text-align: center; }
#modal.azr-unlock .modal-box { width: min(92vw, 600px); }
.azu-aura { position: absolute; left: 50%; top: 22%; width: 120%; height: 70%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255, 60, 90, .7), transparent 65%); animation: azaura 2.4s ease-in-out infinite; }
.azu-cv { position: relative; width: 100%; height: min(44vh, 300px); filter: drop-shadow(0 0 22px rgba(255, 40, 80, .8)); }
.azu h2 { position: relative; margin: 0 0 4px; color: #ffd36a; text-shadow: 0 3px 0 var(--ink), 0 0 26px #ff2a4a; }
.azu p { position: relative; margin: 2px 0; color: #ffc9d0; font-size: clamp(13px, 2.4vh, 18px); }
.azu-w { display: flex; align-items: center; justify-content: center; gap: 8px; } .azu-wi { display: inline-grid; filter: drop-shadow(0 0 8px #ff3a5a); }

@media (max-height: 420px) {
  .az-body { top: calc(52px + var(--safe-t)); padding-bottom: 6px; }
  .az-d { min-height: 0; }
  .az-t { gap: 1px; padding: 4px 5px; }
}
@media (max-width: 640px) { .az-d { display: none; } }