/* ───── HOME (restyling): banner medievale, pulsanti rettangolari, barre risorse, box Azrael ───── */
#screen-home .stage { width: min(38vw, 520px); top: 14vh; bottom: 25vh; }

/* testo dei pulsanti */
.hm-rect, .hm-b, .hm-online, .hm-az-t, .hm-az-road, .hm-name, .hm-lvn, .hm-rbar b, .hm-streak { font-family: var(--font); font-weight: 400; text-transform: uppercase; letter-spacing: .6px; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }

/* ── banner appeso in alto al centro ── */
.hm-banner { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: clamp(170px, 27vw, 300px); height: clamp(82px, 24vh, 140px); z-index: 6; cursor: pointer; transition: transform .12s; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.hm-banner:active { transform: translateX(-50%) translateY(2px); }
.hm-banner::before { content: ""; position: absolute; left: 4%; right: 4%; top: 6px; bottom: 0; background: linear-gradient(#ffe7a3, #c8902f 45%, #7a521a); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px)); }
.hm-bn { position: absolute; left: calc(4% + 3px); right: calc(4% + 3px); top: 9px; bottom: 3px; padding: 8px 8px 17px; display: flex; flex-direction: column; justify-content: center; gap: clamp(2px, .8vh, 6px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px));
  background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.14), transparent 60%), linear-gradient(#a3262e, #6a121a 70%, #4a0b11); box-shadow: inset 0 0 0 2px rgba(255,214,120,.35); }
.hm-bn::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 6px); pointer-events: none; }
.hm-rod { position: absolute; left: -2%; right: -2%; top: 0; height: 9px; border-radius: 5px; background: linear-gradient(#a8763a, #5a3b17 60%, #2c1b09); border: 1px solid #120a03; box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,150,.5); z-index: 2; }
.hm-rod::before, .hm-rod::after { content: ""; position: absolute; top: -3px; width: 12px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3bd, #d9a238 55%, #7a521a); border: 1px solid #120a03; }
.hm-rod::before { left: -6px; } .hm-rod::after { right: -6px; }
.hm-ring { position: absolute; top: 4px; width: 9px; height: 11px; border-radius: 50%; border: 2px solid #e9bd5a; background: #2c1b09; z-index: 3; } .hm-ring.l { left: 14%; } .hm-ring.r { right: 14%; }
.hm-who { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.hm-av { flex: none; width: clamp(26px, 7.2vh, 50px); aspect-ratio: 1; border-radius: 50%; border: 2px solid #f2cf86; background: #120c06; box-shadow: 0 0 0 2px #1a0d04, 0 3px 8px rgba(0,0,0,.6); overflow: hidden; }
.hm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-name { font-size: clamp(13px, 3vh, 21px); color: #ffe9b0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-lvl { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; }
.hm-lvn { flex: none; font-size: clamp(10px, 2.2vh, 15px); color: #ffd35a; } .hm-lvn b { font-weight: 400; font-size: 1.25em; color: #fff; }
.hm-xp { flex: 1; height: clamp(7px, 1.7vh, 11px); border-radius: 3px; background: #1a0508; border: 1px solid #f2cf86; overflow: hidden; }
.hm-xp i { display: block; height: 100%; background: linear-gradient(#ffe9a0, #d79a2a); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }

/* ── pulsanti rettangolari: base ── */
.hm-rect, .hm-b, .hm-online { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 5px; color: #f6e2b6;
  background: linear-gradient(#4a3624, #2a1d12 55%, #1b130b); border: 2px solid var(--bronze);
  box-shadow: 0 4px 0 #0c0703, 0 6px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,150,.3), inset 0 0 0 1px rgba(0,0,0,.5); transition: transform .08s, filter .12s; }
.hm-rect:hover, .hm-b:hover, .hm-online:hover { filter: brightness(1.18); }
.hm-rect:active, .hm-b:active, .hm-online:active { transform: translateY(3px); box-shadow: 0 1px 0 #0c0703, 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,150,.3); }
.hm-rect .ico, .hm-b .ico, .hm-online .ico { flex: none; }

/* ── in alto a sinistra: coppe, rank, classifica ── */
.hm-tl { position: absolute; left: calc(1vw + var(--safe-l)); top: calc(.9vh + var(--safe-t)); width: min(35vw, 470px); display: grid; grid-template-columns: .8fr 1.12fr 1.25fr; gap: clamp(3px, .8vw, 8px); z-index: 5; }
.hm-tl .hm-rect { height: clamp(28px, 8.4vh, 46px); padding: 0 clamp(3px, .7vw, 9px); font-size: clamp(9px, min(2.1vh, 1.25vw), 14px); min-width: 0; }
.hm-tl .hm-rect b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hm-ric { display: grid; place-items: center; flex: none; font-size: clamp(14px, 3.6vh, 24px); } .hm-ric .ico { width: 1em; height: 1em; } .hm-ric .rankico { width: clamp(18px, 4.6vh, 30px); height: auto; }
.hm-tr .hm-ric { color: #ffd35a; } .hm-lb .hm-ric { color: #ffd35a; }
.hm-rk { border-color: color-mix(in srgb, var(--rc) 70%, var(--bronze)); }
.hm-rkt { min-width: 0; display: grid; }
.hm-streak { position: absolute; left: 0; top: calc(100% + 5px); display: flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 12px; background: linear-gradient(#5a2a10, #2a1208); border: 2px solid #e48a2a; font-size: clamp(10px, 2.2vh, 14px); color: #ffd35a; }
.hm-streak small { color: #9dff9d; font-size: .85em; }

/* ── in alto a destra: 3 barre risorse una sotto l'altra ── */
.hm-tr-res { position: absolute; right: calc(1vw + var(--safe-r)); top: calc(.9vh + var(--safe-t)); display: flex; align-items: flex-start; gap: 6px; z-index: 5; }
.hm-sq { width: clamp(26px, 7.4vh, 38px); height: clamp(26px, 7.4vh, 38px); border-radius: 5px; display: grid; place-items: center; font-size: clamp(14px, 3.6vh, 22px); background: linear-gradient(#4a3624, #1b130b); border: 2px solid var(--bronze); box-shadow: 0 3px 0 #0c0703, inset 0 1px 0 rgba(255,220,150,.3); }
.hm-sq:active { transform: translateY(2px); }
.hm-resg { display: grid; gap: clamp(2px, .7vh, 5px); width: clamp(118px, 19vw, 190px); }
.hm-res { display: flex; align-items: center; position: relative; height: clamp(15px, 4.2vh, 24px); }
.hm-rico { position: absolute; left: -4px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: clamp(19px, 5.4vh, 30px); height: clamp(19px, 5.4vh, 30px); }
.r-crystals .hm-rico .cico { transform: scale(.55); }
.r-diamonds .hm-rico .cico { transform: scale(.82); }
.hm-rico .cico { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.hm-rbar { position: relative; flex: 1; height: 100%; margin-left: clamp(8px, 2.4vh, 14px); border-radius: 3px; background: #0d0905; border: 2px solid var(--bronze); box-shadow: inset 0 2px 3px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.5); overflow: hidden; }
.hm-rbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffe48a, #e0a020 55%, #a8660a); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); transition: width .5s; }
.r-crystals .hm-rbar i { background: linear-gradient(#e2b6ff, #a05af0 55%, #5e2aa8); }
.r-diamonds .hm-rbar i { background: linear-gradient(#b6f4ff, #35c5ee 55%, #1a7aa8); }
.hm-rbar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(10px, 2.4vh, 15px); color: #fff; font-weight: 400; }

/* ── colonne laterali ── */
.hm-col { position: absolute; top: 19vh; display: flex; flex-direction: column; gap: clamp(4px, 1.3vh, 10px); width: clamp(100px, 16vw, 176px); z-index: 4; }
.hm-col.left { left: calc(1vw + var(--safe-l)); } .hm-col.right { right: calc(1vw + var(--safe-r)); }
.hm-b { height: clamp(30px, 8.8vh, 54px); justify-content: flex-start; padding: 0 clamp(4px, .9vw, 12px); font-size: clamp(9px, min(2.1vh, 1.2vw), 15px); gap: 4px; }
.hm-b .ico { font-size: clamp(15px, 3.8vh, 26px); color: #ffd35a; }
.hm-b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.hm-bd { position: absolute; top: -7px; right: -5px; min-width: 19px; height: 19px; padding: 0 4px; display: grid; place-items: center; border-radius: 10px; font-style: normal; font-size: 12px; background: linear-gradient(#ffe48a, #e0a020); color: #2a1604; border: 2px solid #1a1007; -webkit-text-stroke: 0; text-shadow: none; animation: bob .9s ease-in-out infinite; }
.hm-bd.n { background: linear-gradient(#ff6a6a, #c4202a); color: #fff; }
.hm-bd .ico { width: 13px; height: 13px; filter: none; }

/* ── in basso a destra: box AZRAEL ARISE ── */
.hm-az { position: absolute; right: calc(1vw + var(--safe-r)); bottom: calc(1.6vh + var(--safe-b)); width: clamp(140px, 22vw, 270px); height: clamp(98px, 31vh, 290px); z-index: 3; cursor: pointer; transition: transform .1s; }
.hm-az:active { transform: translateY(2px); }
.hm-az-bg { position: absolute; inset: 0; border-radius: 6px; border: 3px solid #e9bd5a; overflow: hidden; box-shadow: 0 0 0 2px #1a0d04, 0 6px 16px rgba(0,0,0,.7), 0 0 26px rgba(255,70,50,.45), inset 0 0 22px rgba(0,0,0,.7);
  background: radial-gradient(ellipse at 62% 38%, rgba(255,90,60,.75), rgba(150,20,40,.55) 40%, transparent 70%), radial-gradient(ellipse at 50% 100%, rgba(255,190,70,.4), transparent 60%), linear-gradient(#2a0b24, #12040d); }
.hm-az-bg::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 62% 45%, rgba(255,200,120,.09) 0 6deg, transparent 6deg 14deg); }
@keyframes hmspin { to { transform: rotate(360deg); } }
.hm-az-cv { position: absolute; left: 6%; bottom: 0; width: 94%; height: 136%; display: block; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,80,50,.55)); }
.hm-az-t { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(14px, 4.5vh, 30px) 6px 5px; text-align: center; border-radius: 0 0 4px 4px; background: linear-gradient(transparent, rgba(8,2,6,.88) 60%); display: grid; line-height: 1; pointer-events: none; }
.hm-az-t small { font-size: clamp(8px, 1.8vh, 12px); color: #ffd35a; letter-spacing: 2px; }
.hm-az-t b { font-weight: 400; font-size: clamp(15px, 4.2vh, 28px); color: #ff5a4a; -webkit-text-stroke: 3px var(--ink); text-shadow: 0 0 14px rgba(255,80,50,.8), 0 2px 0 var(--ink); }
.hm-az-road { position: absolute; left: 4px; top: 4px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 3px; font-size: clamp(7px, 1.5vh, 10px); color: #f6e2b6; -webkit-text-stroke: 2px var(--ink); background: rgba(14,8,6,.8); border: 1px solid var(--bronze); }
.hm-az-road b { font-weight: 400; color: #ffd35a; }
.hm-az-road .hm-bd { top: -9px; right: -9px; }

/* ── in basso a sinistra: ONLINE ── */
.hm-online { position: absolute; left: calc(1vw + var(--safe-l)); bottom: calc(1.6vh + var(--safe-b)); width: clamp(108px, 16vw, 170px); height: clamp(38px, 11vh, 62px); z-index: 4; font-size: clamp(13px, 3.4vh, 22px); letter-spacing: 1.5px;
  background: linear-gradient(#2f8aa8, #14475e 55%, #0b2a39); border-color: #7cd0e8; box-shadow: 0 4px 0 #05161f, 0 6px 12px rgba(0,0,0,.55), 0 0 18px rgba(80,200,240,.35), inset 0 1px 0 rgba(255,255,255,.4); }
.hm-online .ico { font-size: 1.3em; color: #d6f6ff; }

/* ── centro in basso: modalita' + GIOCA ── */
#screen-home .dock .modebtn { min-width: min(30vw, 260px); }
#screen-home .dock .play-btn { padding: .15em 1.8em .22em; font-size: clamp(26px, 6.4vh, 54px); letter-spacing: 5px; }