/* ───── BATTLE PASS ───── */
#screen-pass { display: none; } #screen-pass.active { display: block; }
.pp-strip { position: absolute; left: 0; right: 0; top: calc(70px + var(--safe-t)); max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: clamp(8px, 1.6vw, 16px); padding: 2px calc(18px + var(--safe-r)) 4px calc(18px + var(--safe-l)); z-index: 2; }
.pp-tier { flex: none; display: flex; align-items: baseline; gap: 4px; padding: 3px 14px 4px; border-radius: 6px; background: linear-gradient(#5a3b17, #2a1a08); border: 2px solid #e9bd5a; box-shadow: 0 3px 0 #120a03, inset 0 1px 0 rgba(255,230,160,.4); font-family: var(--font); line-height: 1; }
.pp-tier small { font-size: clamp(9px, 1.8vh, 12px); color: #f2cf86; letter-spacing: 1.5px; }
.pp-tier b { font-weight: 400; font-size: clamp(22px, 5.4vh, 38px); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pp-tier em { font-style: normal; font-size: clamp(10px, 2vh, 14px); color: #bda47a; }
.pp-mid { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pp-bar { height: clamp(17px, 3.6vh, 24px); border-width: 3px; } .pp-bar b { font-size: clamp(10px, 1.9vh, 14px); margin: 0; -webkit-text-stroke: 2.5px var(--ink); }
.pp-mid small { color: #cdb88a; font-size: clamp(10px, 1.9vh, 13px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-mid small b { color: #f2cf86; }
.pp-sea { flex: none; text-align: right; color: #bda47a; font-size: clamp(9px, 1.8vh, 12px); line-height: 1.15; } .pp-sea b { color: #f2cf86; font-size: 1.1em; }
.pp-all { flex: none; padding: 6px 12px; font-size: clamp(12px, 2.2vh, 16px); animation: pulse 1.2s ease-in-out infinite; }
.pp-body, .pt-body { position: absolute; left: 0; right: 0; top: calc(70px + 52px + var(--safe-t)); bottom: 0; }
.pp-body { max-width: 980px; margin: 0 auto; padding: 2px calc(18px + var(--safe-r)) 10px calc(18px + var(--safe-l)); display: flex; flex-direction: column; }
.bpm-note { color: #cdb88a; font-size: clamp(10px, 1.9vh, 13px); padding: 0 2px 6px; } .bpm-note b { color: #f2cf86; }
.bpm-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
.bpm { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 2px solid #3a2d1e; border-left: 6px solid var(--bronze); background: linear-gradient(rgba(52,38,26,.95), rgba(24,17,11,.95)); box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,150,.14); min-width: 0; }
.bpm.k-hero { border-left-color: #4cd964; } .bpm.k-role { border-left-color: #b05cff; } .bpm.k-mode { border-left-color: #ff8a3d; } .bpm.k-fn { border-left-color: #3b9dff; }
.bpm.ready { border-color: #f2cf86; box-shadow: 0 0 16px rgba(242,207,134,.45), 0 3px 8px rgba(0,0,0,.5); }
.bpm-ico { width: clamp(34px, 8.6vh, 52px); height: clamp(34px, 8.6vh, 52px); display: grid; place-items: center; }
.bpm-hero { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; border: 2px solid var(--rc); background: #120c06; }
.bpm-sym { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; font-size: clamp(18px, 4.6vh, 28px); background: radial-gradient(circle at 35% 30%, #fff6, transparent 45%), var(--mc, #3b9dff); border: 3px solid #1a1007; }
.bpm-main { min-width: 0; }
.bpm-main > b { display: block; font-weight: 400; font-size: clamp(11px, 2.3vh, 16px); line-height: 1.12; margin-bottom: 4px; font-family: var(--font); letter-spacing: .3px; }
.bpm-bar { height: clamp(15px, 3vh, 21px); border-width: 2px; } .bpm-bar b { font-size: clamp(9px, 1.7vh, 12px); margin: 0; -webkit-text-stroke: 2px var(--ink); }
.bpm-bar i { background: linear-gradient(#fff, #e0a020); }
.bpm.ready .bpm-bar i { background: linear-gradient(#cfffa8, #3fdc5c); }
.bpm-side { display: grid; justify-items: end; gap: 4px; }
.bpm-pp { font-family: var(--font); font-size: clamp(14px, 3vh, 21px); color: #ffd35a; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; line-height: 1; } .bpm-pp small { font-size: .55em; margin-left: 2px; color: #fff; }
.bpm-b { padding: 4px 10px; font-size: clamp(11px, 2vh, 15px); animation: pulse 1.2s ease-in-out infinite; }
.bpm-rr { width: clamp(22px, 4.4vh, 30px); height: clamp(22px, 4.4vh, 30px); display: grid; place-items: center; border-radius: 5px; border: 2px solid var(--bronze); background: rgba(0,0,0,.35); color: #cdb88a; font-size: clamp(12px, 2.6vh, 17px); }
.bpm-rr:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.12); } .bpm-rr:disabled { opacity: .35; }
.pt-body { overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; padding: 0 calc(24px + var(--safe-r)) 6px calc(24px + var(--safe-l)); -webkit-overflow-scrolling: touch; }
.pt-body .road { padding: 14px 40px 0; }
.rt.cur { box-shadow: 0 0 0 2px #ffd35a, 0 4px 10px rgba(0,0,0,.55); }
@media (max-height: 460px) { .pp-strip { top: calc(58px + var(--safe-t)); } .pp-body, .pt-body { top: calc(58px + 46px + var(--safe-t)); } .bpm { padding: 5px 8px; gap: 8px; } .bpm-note { padding-bottom: 3px; } }
@media (max-width: 700px) { .bpm-grid { grid-template-columns: 1fr; } .pp-sea { display: none; } }

/* ───── FASCIA PRO: ogni tappa ha due ricompense (gratis + Pro) ───── */
.pp-pro { flex: none; padding: 6px 12px; font-size: clamp(12px, 2.2vh, 16px); white-space: nowrap; }
.pp-pro.on { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; border: 2px solid #ffd35a; background: linear-gradient(#8a3ce0, #4a1a8a); color: #ffe6a8; font-family: var(--font); letter-spacing: 1px; box-shadow: 0 0 12px rgba(176, 92, 255, .6); }
.pp-pro.on .ico { width: 1.2em; height: 1.2em; }
.rt.pass { width: clamp(150px, 28vh, 210px); padding: 8px 8px 8px; display: grid; gap: 6px; text-align: left; }
.rt.pass .rt-n { justify-content: center; }
.rt-lane { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 14px 8px 6px; border-radius: 6px; border: 2px solid color-mix(in srgb, var(--rc) 55%, #000); background: rgba(0, 0, 0, .28); }
.rt-lane .rt-r { grid-row: 1 / 3; width: clamp(34px, 7.6vh, 54px); height: clamp(34px, 7.6vh, 54px); border-width: 2px; }
.rt-lane .rt-d { min-height: 0; font-size: clamp(10px, 1.9vh, 13px); text-align: left; place-items: center start; }
.rt-lane .rt-s, .rt-lane .rt-b { grid-column: 2; justify-self: start; height: auto; }
.rt-lane .rt-b { padding: 3px 10px; font-size: clamp(11px, 2vh, 14px); }
.rt-lane .rt-s .ico { width: 20px; height: 20px; }
.rt-tag { position: absolute; left: 6px; top: 1px; font-family: var(--font); font-size: clamp(8px, 1.5vh, 10px); letter-spacing: 1.2px; color: #cdb88a; }
.rt-lane.pro { border-color: #b05cff; background: linear-gradient(rgba(138, 60, 224, .38), rgba(40, 12, 80, .55)); }
.rt-lane.pro .rt-tag { color: #ffd35a; }
.rt-lane.pro.locked { opacity: .78; }
.rt-lane.pro.ready { box-shadow: 0 0 14px rgba(176, 92, 255, .75); }
.rt.pass.locked { filter: none; }