:root {
  --gold: #ffd84a; --gold-dark: #b35b00; --pink: #ff5d8f; --pink-dark: #8a1240;
  --panel: rgba(18, 16, 38, 0.92); --line: #3a3d66; --txt: #fff;
  --common: #c9cfd8; --uncommon: #5bd46a; --rare: #3fa9ff; --epic: #c46bff; --legendary: #ffb000;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d0f1a; color: var(--txt);
  font-family: 'Nunito', 'Trebuchet MS', system-ui, sans-serif; user-select: none; }
canvas#game { display: block; width: 100vw; height: 100vh; }
.hidden { display: none !important; }
b { font-weight: 900; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#xpbar { position: absolute; top: 0; left: 0; right: 0; height: 14px; background: rgba(0, 0, 0, .6); border-bottom: 2px solid #000; }
#xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #36d1ff, #7b5cff); box-shadow: 0 0 10px #36d1ff; transition: width .12s; }
#lvl { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font: 22px 'Lilita One', sans-serif; color: #7fe0ff;
  text-shadow: 0 2px 0 #000, 0 0 8px #36d1ff; letter-spacing: 1px; }
#topleft { position: absolute; top: 24px; left: 14px; width: 280px; }
.bar { position: relative; height: 24px; background: rgba(0, 0, 0, .65); border: 3px solid #000; border-radius: 8px; overflow: hidden; }
#hpfill { position: absolute; inset: 0; width: 100%; background: linear-gradient(#ff6d6d, #c21d2d); transition: width .1s; }
#shieldfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(120, 200, 255, .75); }
#hptext { position: absolute; inset: 0; text-align: center; font-size: 13px; line-height: 18px; font-weight: 900; text-shadow: 0 1px 2px #000; }
.slots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.slot { width: 40px; height: 40px; background: rgba(0, 0, 0, .6); border: 2px solid #555; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 21px; position: relative; }
.slot.empty { opacity: .35; border-style: dashed; }
.slot.special { border-color: #ffd000; box-shadow: 0 0 10px rgba(255, 208, 0, .6); }
.slot.tome { width: 32px; height: 32px; font-size: 16px; border-color: #3a4a80; }
.slot.item { width: 30px; height: 30px; font-size: 16px; }
.slot i { position: absolute; right: 2px; bottom: -2px; font-size: 11px; font-style: normal; font-weight: 900; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.r-common { border-color: var(--common) !important; } .r-uncommon { border-color: var(--uncommon) !important; }
.r-rare { border-color: var(--rare) !important; } .r-epic { border-color: var(--epic) !important; } .r-legendary { border-color: var(--legendary) !important; }
#topcenter { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); text-align: center; }
#timer { font: 38px 'Lilita One', sans-serif; letter-spacing: 2px; text-shadow: 0 3px 0 #000, 0 0 12px rgba(0, 0, 0, .6); }
#timer.over { color: #ff4a6a; animation: pulse 1s infinite; }
#relics { margin-top: 4px; font: 20px 'Lilita One', sans-serif; letter-spacing: 1px; color: #ffe066; text-shadow: 0 2px 0 #000, 0 0 8px rgba(255, 200, 60, .6); }
#relics.done { color: #d9a6ff; text-shadow: 0 2px 0 #000, 0 0 10px #c46bff; }
#relics.pop { animation: relicPop .5s ease; }
@keyframes relicPop { 30% { transform: scale(1.35); } }
#stagename { font-size: 13px; opacity: .85; text-shadow: 0 1px 2px #000; }
#topright { position: absolute; top: 24px; right: 14px; text-align: right; }
.counters { display: flex; gap: 16px; justify-content: flex-end; font-size: 20px; text-shadow: 0 2px 2px #000; margin-bottom: 6px; }
#minimap { width: 170px; height: 170px; border: 3px solid #000; border-radius: 12px; background: #222; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
#bossbar { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); width: min(620px, 80vw); height: 24px;
  background: rgba(0, 0, 0, .7); border: 3px solid #000; border-radius: 6px; overflow: hidden; }
#bossfill { height: 100%; width: 100%; background: linear-gradient(#d06bff, #5a13a3); transition: width .15s; }
#bossname { position: absolute; inset: 0; text-align: center; font: 15px/18px 'Lilita One', sans-serif; letter-spacing: 3px; z-index: 1; text-shadow: 0 1px 2px #000; }
#banner { position: absolute; top: 24%; left: 50%; transform: translate(-50%, -50%) scale(.6); text-align: center; opacity: 0; white-space: nowrap; }
#banner.show { animation: bannerIn 3.2s ease forwards; }
#bannerTitle { font: 52px 'Lilita One', sans-serif; color: var(--gold); text-shadow: 0 5px 0 var(--gold-dark), 0 8px 20px rgba(0, 0, 0, .6); letter-spacing: 2px; }
#bannerSub { font-size: 18px; font-weight: 800; text-shadow: 0 2px 3px #000; }
@keyframes bannerIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  16% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
#charge { position: absolute; left: 50%; top: 58%; width: 220px; height: 12px; transform: translateX(-50%); background: rgba(0, 0, 0, .6); border: 2px solid #000; border-radius: 6px; overflow: hidden; }
#chargefill { height: 100%; width: 0; background: linear-gradient(90deg, #6fd8ff, #c46bff); }
#prompt { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%); padding: 8px 18px; background: rgba(0, 0, 0, .7);
  border: 2px solid var(--gold); border-radius: 10px; font-weight: 900; font-size: 17px; }
#speed { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 18px 'Lilita One', sans-serif; opacity: .7; text-shadow: 0 2px 2px #000; }
#speed.fast { color: #7fe0ff; opacity: 1; }
#hint { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); width: min(900px, 92vw); text-align: center; font-size: 14px;
  background: rgba(0, 0, 0, .55); padding: 8px 14px; border-radius: 10px; opacity: 0; transition: opacity .6s; line-height: 1.6; }
#hint.show { opacity: 1; }
#hurt { position: absolute; inset: 0; box-shadow: inset 0 0 140px rgba(255, 0, 0, .85); opacity: 0; transition: opacity .25s; }
#toast { position: fixed; z-index: 40; pointer-events: none; top: 34%; left: 50%; transform: translateX(-50%); font: 26px 'Lilita One', sans-serif; color: #fff;
  text-shadow: 0 3px 0 #000; opacity: 0; transition: opacity .3s; white-space: nowrap; }
#toast.show { opacity: 1; }
#speedlines { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .0) 0deg 4deg, rgba(255, 255, 255, .22) 4deg 4.6deg);
  -webkit-mask-image: radial-gradient(circle at center, transparent 32%, #000 75%); mask-image: radial-gradient(circle at center, transparent 32%, #000 75%); }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; }
#flash.go { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
#fps { position: fixed; bottom: 4px; right: 8px; font-size: 12px; opacity: .7; z-index: 50; }
#dmgnums { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.dn { position: absolute; left: 0; top: 0; font: 17px 'Lilita One', sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 3px #000; white-space: nowrap; will-change: transform; }
.dn.crit { color: var(--gold); font-size: 24px; }
.dn.burn { color: #ff9a4a; font-size: 14px; }
.dn.heal { color: #6f6; font-size: 20px; }
.dn.player { color: #ff4a4a; font-size: 22px; }
.dn.dodge { color: #9fd8ff; font-size: 18px; }
.dn.slap { color: #fff36a; font-size: 30px; font-style: italic; letter-spacing: 1px; text-shadow: 0 3px 0 #c2185b, 0 0 6px #000; }
@keyframes pulse { 50% { transform: scale(1.06); } }

/* ---------------- Overlay e pannelli ---------------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20, 10, 40, .72), rgba(0, 0, 0, .88)); }
.overlay.top { z-index: 20; }
.panel { text-align: center; max-width: 980px; width: 100%; max-height: 100%; overflow-y: auto; padding: 8px; }
.panel.wide { max-width: 1050px; background: var(--panel); border: 3px solid var(--line); border-radius: 18px; padding: 22px; }
.panel.narrow { max-width: 460px; background: var(--panel); border: 3px solid var(--line); border-radius: 18px; padding: 22px; }
.logo { font: clamp(52px, 8vw, 96px) 'Lilita One', sans-serif; letter-spacing: 4px; color: var(--gold); line-height: 1;
  text-shadow: 0 6px 0 var(--gold-dark), 0 12px 24px rgba(0, 0, 0, .6); transform: rotate(-3deg); }
.logo span { color: var(--pink); text-shadow: 0 6px 0 var(--pink-dark), 0 12px 24px rgba(0, 0, 0, .6); }
.logo.small { font-size: 56px; }
.logo .ver { font: 0.28em 'Lilita One', sans-serif; color: #fff; background: #7b5cff; border-radius: 8px; padding: 2px 8px; margin-left: 6px; vertical-align: super; text-shadow: none; letter-spacing: 1px; }
#loading p { margin-top: 18px; opacity: .8; }
.sub { margin: 6px 0 18px; opacity: .85; font-weight: 800; }
h2 { font: 48px 'Lilita One', sans-serif; color: var(--gold); text-shadow: 0 5px 0 var(--gold-dark); letter-spacing: 2px; }
h2.pop { animation: titlePop .5s cubic-bezier(.3, 1.6, .5, 1); }
h2#endTitle.win { color: #7dff9a; text-shadow: 0 5px 0 #177a35; }
@keyframes titlePop { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
h3 { font: 20px 'Lilita One', sans-serif; letter-spacing: 1px; margin: 12px 0 8px; }
h4 { font: 17px 'Lilita One', sans-serif; letter-spacing: 1px; margin: 12px 0 6px; color: #9fb4ff; text-align: left; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.btn { font: 22px 'Lilita One', sans-serif; letter-spacing: 1px; padding: 12px 34px; border: none; border-radius: 12px;
  background: var(--gold); color: #2a1a00; cursor: pointer; box-shadow: 0 5px 0 var(--gold-dark); transition: transform .08s, filter .1s; }
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-dark); }
.stages { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.stages button { font: inherit; font-size: 14px; color: #fff; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.stages button:hover { border-color: rgba(255,255,255,0.45); }
.stages button.sel { background: rgba(255,201,60,0.22); border-color: #ffc93c; }
.menu h3 small { font-weight: 400; opacity: 0.6; font-size: 0.75em; }
.profile-badge { font-family: 'Nunito', 'Noto Color Emoji', sans-serif; font-weight: 800; font-size: 16px; color: #fff; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 4px 14px; margin: 4px 0 2px; cursor: pointer; }
.profile-badge:hover { border-color: #ffc93c; }
.profile-badge small { opacity: 0.65; margin-left: 6px; }
#profile { background: rgba(8, 6, 24, 0.96); }
a.btn { text-decoration: none; display: inline-block; }
.profile-panel { max-width: 460px; }
.pf-field { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 12px 0 0; text-align: left; font-size: 15px; }
.pf-field select, .pf-field input { font: 18px 'Nunito', 'Noto Color Emoji', sans-serif; background: #23264a; color: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; }
.pf-field input:focus, .pf-field select:focus { outline: none; border-color: #ffc93c; }
.pf-msg { min-height: 22px; margin-top: 6px; font-size: 14px; opacity: 0.8; }
.pf-msg.bad { color: #ff7a8a; opacity: 1; } .pf-msg.good { color: #7dffa0; opacity: 1; }
.pf-sugg { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pf-sugg button { font: inherit; font-size: 14px; color: #fff; background: #2a2e5a; border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.pf-note { font-size: 13px; opacity: 0.65; margin: 8px 0 0; }
.pf-note a { color: #7fd8ff; }
.btn.big { font-size: 28px; padding: 10px 56px; margin-top: 10px; }
.btn.small { font-size: 17px; padding: 8px 20px; }
.btn.ghost { background: #3a3d66; color: #fff; box-shadow: 0 5px 0 #202240; }
.btn:disabled { opacity: .4; cursor: default; }
.help { margin-top: 12px; font-size: 13px; opacity: .75; line-height: 1.6; }

/* menu: pannello a sinistra, personaggio 3D a destra */
.overlay.menu { justify-content: flex-start; background: linear-gradient(90deg, rgba(10, 8, 30, .88) 0%, rgba(10, 8, 30, .55) 42%, rgba(0, 0, 0, 0) 62%); }
.menu-panel { width: min(640px, 100%); max-height: 100%; overflow-y: auto; overflow-x: hidden; padding: 18px 34px 10px; text-align: center; }
.menu-panel .logo { font-size: clamp(34px, min(6.5vh, 6.4vw), 76px); white-space: nowrap; letter-spacing: 2px; padding: 6px 0; }
.menu-panel::-webkit-scrollbar { width: 8px; } .menu-panel::-webkit-scrollbar-thumb { background: #3a3d66; border-radius: 4px; }
#saveFile { display: none; }
.records-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 12px; }
.records-table th { text-align: left; font: 14px 'Lilita One', sans-serif; letter-spacing: 1px; color: #9fb4ff; padding: 4px 6px; border-bottom: 2px solid #3a3d66; }
.records-table td { padding: 4px 6px; border-bottom: 1px solid #ffffff14; text-align: left; }
.records-table td.num, .records-table th.num { text-align: right; }
.records-table td.num { font-weight: 900; }
.records-table tr.win td:first-child::after { content: ' 🏆'; }
.records-empty { opacity: .7; margin: 16px 0; }
/* ---------------- dialoghi stile JRPG anni '90 ---------------- */
#dialog { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 16px 16px 5vh;
  background: linear-gradient(transparent 35%, rgba(0, 0, 20, .72)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 4px); cursor: pointer; }
.dlg-title { position: absolute; top: 9vh; left: 50%; transform: translateX(-50%); font: clamp(18px, 3.2vw, 34px) 'Press Start 2P', monospace; color: #ffd84a;
  text-shadow: 3px 3px 0 #b35b00, 6px 6px 0 #000; text-align: center; width: 92vw; line-height: 1.5; }
.dlg-wrap { display: flex; align-items: flex-end; gap: 14px; width: min(1000px, 96vw); }
.dlg-wrap.right { flex-direction: row-reverse; }
.dlg-portrait { flex: 0 0 auto; width: clamp(110px, 17vw, 190px); height: clamp(110px, 17vw, 190px); background: linear-gradient(#3a4ad8, #10186a);
  border: 4px solid #fff; box-shadow: 0 0 0 4px #10186a, 0 0 0 7px #fff, 8px 8px 0 7px #0008; display: flex; align-items: center; justify-content: center; }
.dlg-portrait img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; }
.dlg-portrait.boss { background: linear-gradient(#8a1030, #200008); }
.dlg-portrait.boss img { filter: brightness(.22) contrast(1.4) drop-shadow(0 0 6px #ff2a4a); }
.dlg-portrait.nerd { background: linear-gradient(#2a8a5a, #0a3a20); }
#dlgIcon { font-size: clamp(48px, 8vw, 90px); }
.dlg-box { flex: 1; min-height: clamp(120px, 20vh, 190px); background: linear-gradient(#2233a8, #0a1262); border: 4px solid #fff; border-radius: 6px;
  box-shadow: inset 0 0 0 3px #6a7ad8, 8px 8px 0 #0008; padding: 14px 20px 10px; color: #fff; position: relative; }
.dlg-name { font: 14px 'Press Start 2P', monospace; color: #ffd84a; text-shadow: 2px 2px 0 #000; }
.dlg-role { font: 16px 'VT323', monospace; color: #9fd8ff; margin: 4px 0 6px; }
.dlg-text { font: clamp(20px, 2.4vw, 27px) 'VT323', monospace; line-height: 1.25; text-shadow: 2px 2px 0 #000a; min-height: 3.6em; }
.dlg-foot { display: flex; justify-content: space-between; align-items: center; font: 12px 'Press Start 2P', monospace; color: #9fb4ff; margin-top: 6px; }
#dlgNext { color: #fff; animation: blinkNext .7s steps(2) infinite; }
@keyframes blinkNext { 50% { opacity: 0; } }
body.in-dialog #hud { opacity: .18; transition: opacity .3s; }
.dlg-skip { margin-top: 10px; font: 16px 'VT323', monospace; color: #fffc; text-shadow: 1px 1px 0 #000; }
@media (max-width: 600px) { .dlg-wrap { flex-direction: column; align-items: stretch; } .dlg-wrap.right { flex-direction: column; } .dlg-portrait { align-self: center; } }

/* guida */
.guide { text-align: left; max-width: 1080px; }
.guide h2 { text-align: center; }
.guide section { background: #ffffff08; border: 1px solid #ffffff12; border-radius: 12px; padding: 10px 16px; margin: 10px 0; }
.guide section.g-goal { border-color: #c46bff88; background: #c46bff14; }
.guide h4 { margin: 2px 0 6px; } .guide h4 small { font: 12px 'Nunito', sans-serif; opacity: .6; letter-spacing: 0; }
.guide p, .guide li { font-size: 14px; line-height: 1.55; }
.guide ul { padding-left: 18px; }
.guide section.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.timeline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.timeline span { font-size: 13px; background: #ffffff10; border-radius: 20px; padding: 3px 10px; }
.timeline span.bad { background: #ff4a6a33; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.guide-grid > div { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; align-items: start; background: #ffffff0a; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.guide-grid > div > b { font-size: 14px; } .guide-grid > div > span { grid-column: 2; opacity: .85; line-height: 1.4; }
.guide-grid .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #000; margin-top: 3px; grid-row: 1 / span 2; }
.note { display: inline-block; width: 22px; height: 11px; border-radius: 2px; border: 1px solid #0006; vertical-align: middle; }
.note.n1 { background: #7fd67f; } .note.n2 { background: #5fa8ff; } .note.n3 { background: #ff9a3c; } .note.n4 { background: #c46bff; }
kbd { font: 12px 'Nunito', sans-serif; font-weight: 900; background: #ffffff1c; border: 1px solid #ffffff40; border-bottom-width: 3px; border-radius: 5px; padding: 0 6px; }
/* ---------------- comandi touch ---------------- */
#touch { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#topright { z-index: 2; }  /* pausa e schermo intero sopra l'area che ruota la visuale */
#tStickZone, #tLookZone { position: absolute; top: 18%; bottom: 0; pointer-events: auto; touch-action: none; }
#tStickZone { left: 0; width: 45%; }
#tLookZone { right: 0; width: 55%; }
#tStick { position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 3px solid #ffffff66;
  background: radial-gradient(circle, #ffffff22, #ffffff08); pointer-events: none; }
#tKnob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  background: #ffffffcc; box-shadow: 0 2px 10px #0008; }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; border: 3px solid #ffffff99; border-radius: 50%; color: #fff;
  background: #10122acc; font: 26px 'Lilita One', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 76px; height: 76px; box-shadow: 0 4px 12px #0008; -webkit-user-select: none; user-select: none; }
.tbtn small { font: 10px 'Nunito', sans-serif; font-weight: 900; letter-spacing: 1px; opacity: .85; }
.tbtn.big { width: 104px; height: 104px; font-size: 34px; right: calc(24px + env(safe-area-inset-right)); bottom: calc(40px + env(safe-area-inset-bottom)); background: #ffd84acc; color: #2a1a00; border-color: #fff; }
#tSlide { right: calc(140px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); }
#tUse { right: calc(40px + env(safe-area-inset-right)); bottom: calc(160px + env(safe-area-inset-bottom)); opacity: .45; }
#tUse.ready { opacity: 1; background: #5dff9acc; color: #0a2a14; border-color: #fff; animation: pulse 1s infinite; }
.tbtn.pressed { transform: scale(.9); filter: brightness(1.3); }
.tbar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.tbar .tbtn:not(.always) { display: none; } body.touch .tbar .tbtn { display: flex; }
#tToggle.on { border-color: #ffd84a; }
/* pad direzionale */
#tPad { position: absolute; width: 170px; height: 170px; right: calc(26px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom));
  border-radius: 50%; background: radial-gradient(circle, #10122a99 55%, #10122acc); border: 3px solid #ffffff88; pointer-events: auto; touch-action: none; display: none; }
#tPad .pa { position: absolute; font-size: 26px; color: #fff; opacity: .85; pointer-events: none; transform: translate(-50%, -50%); }
#tPad .up { left: 50%; top: 18%; } #tPad .down { left: 50%; top: 82%; } #tPad .left { left: 18%; top: 50%; } #tPad .right { left: 82%; top: 50%; }
#tPadDot { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #ffffffcc; pointer-events: none; }
#tAuto { right: calc(210px + env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); width: 62px; height: 62px; font-size: 22px; }
#tAuto.on, #autoChip { background: #5dd8ffcc; color: #06202a; border-color: #fff; }
#autoChip { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); font: 14px 'Lilita One', sans-serif; letter-spacing: 1px; padding: 3px 12px; border-radius: 20px; }
/* disposizione "Frecce": pad a destra, tasti a sinistra, visuale trascinando ovunque */
body.pad-arrows #tPad { display: block; }
body.pad-arrows #tStickZone, body.pad-arrows #tStick { display: none !important; }
body.pad-arrows #tLookZone { left: 0; width: 100%; }
body.pad-arrows .tbtn.big { right: auto; left: calc(24px + env(safe-area-inset-left)); }
body.pad-arrows #tSlide { right: auto; left: calc(140px + env(safe-area-inset-left)); }
body.pad-arrows #tUse { right: auto; left: calc(40px + env(safe-area-inset-left)); }
body.pad-arrows #tAuto { right: calc(206px + env(safe-area-inset-right)); bottom: calc(30px + env(safe-area-inset-bottom)); }
.tbtn.mini { position: static; width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
body.touch #crosshair, body.touch #hint { display: none; }
body.touch #speed { bottom: 6px; font-size: 14px; }
body.touch #prompt { bottom: auto; top: 62%; }
body.touch .help kbd, body.touch #choice .help { display: none; }
@media (max-width: 760px), (max-height: 500px) {
  .tbtn.big { width: 88px; height: 88px; }
  #tSlide { right: calc(118px + env(safe-area-inset-right)); }
  #tUse { bottom: calc(132px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) { .guide section.two { grid-template-columns: 1fr; } }
.save-note { font-size: 12px; opacity: .65; margin-top: 8px; }
.cd-soon { margin-top: 6px; font-size: 12px; opacity: .65; text-align: right; }
.menu-panel .sub { margin: 6px 0 4px; }
#chars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.charcard { font: inherit; color: #fff; background: rgba(27, 29, 51, .9); border: 3px solid var(--line); border-radius: 12px; padding: 10px 6px; cursor: pointer;
  transition: transform .1s, border-color .1s; }
.charcard:hover { transform: translateY(-3px); border-color: #8a8dd0; }
.charcard.sel { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 216, 74, .5); }
.charcard.locked { opacity: .55; filter: grayscale(.8); }
.charcard { padding: 6px; }
.charcard .ic { font-size: 26px; }
.charcard .nm { font-weight: 900; font-size: 15px; }
#charDetail { margin-top: 8px; background: rgba(27, 29, 51, .85); border: 2px solid var(--line); border-radius: 12px; padding: 12px 16px; text-align: left; }
.cd-name { font: 24px 'Lilita One', sans-serif; margin-bottom: 6px; }
.cd-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin: 4px 0; }
.cd-row span { opacity: .7; }
.cd-desc { font-size: 13px; opacity: .85; margin-bottom: 6px; text-align: right; }
.missions { margin-top: 14px; text-align: left; background: rgba(27, 29, 51, .7); border-radius: 10px; padding: 8px 14px; font-size: 14px; }
.missions summary { cursor: pointer; font-weight: 900; }
.missions ul { list-style: none; margin-top: 6px; line-height: 1.8; }
.missions li.done { opacity: .6; text-decoration: line-through; }

/* carte di scelta */
.cards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 8px 0 6px; perspective: 900px; }
.card { font: inherit; color: #fff; width: 230px; min-height: 290px; padding: 16px 14px 34px; background: linear-gradient(#23264a, #15172e);
  border: 4px solid var(--common); border-radius: 16px; cursor: pointer; position: relative; text-align: center; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-8px) scale(1.04); }
.card.enter { animation: cardIn .45s cubic-bezier(.2, 1.4, .5, 1) both; }
.card.picked { animation: cardPick .26s ease forwards; }
.card.gone { animation: cardGone .22s ease forwards; }
@keyframes cardIn { 0% { opacity: 0; transform: rotateY(90deg) translateY(40px) scale(.7); } 100% { opacity: 1; transform: rotateY(0) translateY(0) scale(1); } }
@keyframes cardPick { 50% { transform: scale(1.14); filter: brightness(1.5); } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes cardGone { 100% { opacity: 0; transform: translateY(30px) scale(.8); } }
.card .rar { font: 13px 'Lilita One', sans-serif; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.card .ic { font-size: 50px; margin: 6px 0; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
.card .nm { font: 21px 'Lilita One', sans-serif; margin: 4px 0; }
.card .tg { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.card .ds { list-style: none; margin-top: 10px; font-size: 15px; font-weight: 800; line-height: 1.45; }
.card .ds li { color: #9dffb0; }
.card .key { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 12px; opacity: .6; border: 1px solid #fff5; border-radius: 4px; padding: 0 6px; }
.card.r-common .rar { color: var(--common); } .card.r-uncommon .rar { color: var(--uncommon); } .card.r-rare .rar { color: var(--rare); }
.card.r-epic .rar { color: var(--epic); } .card.r-legendary .rar { color: var(--legendary); }
.card.r-rare { box-shadow: 0 0 18px rgba(63, 169, 255, .35); } .card.r-epic { box-shadow: 0 0 22px rgba(196, 107, 255, .45); }
.card.r-legendary { box-shadow: 0 0 30px rgba(255, 176, 0, .6); background: linear-gradient(#3a2a10, #1a1408); }
.card.r-legendary .ic { animation: pulse 1.2s infinite; }

/* pausa e fine */
.pause-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; text-align: left; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; font-size: 14px; }
.statgrid div { display: flex; justify-content: space-between; border-bottom: 1px solid #ffffff14; padding: 2px 0; }
.statgrid span { opacity: .75; }
.statgrid.end { max-width: 520px; margin: 10px auto; font-size: 17px; }
.statgrid .rec { grid-column: 1 / -1; justify-content: center; color: var(--gold); font-weight: 900; }
.wrow { display: flex; flex-direction: column; background: #ffffff0d; border-radius: 8px; padding: 6px 10px; margin-bottom: 5px; }
.wrow small { opacity: .75; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 2px solid; border-radius: 20px; padding: 2px 10px; font-size: 13px; background: #ffffff0d; }
#endWeapons { max-width: 560px; margin: 0 auto; }
.dmgrow { display: grid; grid-template-columns: 170px 1fr 80px; gap: 10px; align-items: center; font-size: 14px; margin: 4px 0; text-align: left; }
.dmgrow .bar { height: 12px; border: none; background: #ffffff14; border-radius: 6px; }
.dmgrow .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd84a, #ff5d8f); border-radius: 6px; }
.dmgrow b { text-align: right; }
label.set { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; font-weight: 800; text-align: left; }
label.set select, label.set input[type=range] { width: 55%; }
label.set.check { justify-content: flex-start; }
select { font: inherit; background: #23264a; color: #fff; border: 2px solid var(--line); border-radius: 8px; padding: 4px 8px; }

/* schermi stretti in verticale (es. Fold chiuso): HUD compatto, timer sotto la fascia alta */
@media (max-width: 520px) {
  #topleft { width: 150px; left: 8px; }
  .slot { width: 30px; height: 30px; font-size: 16px; } .slot.tome, .slot.item { width: 24px; height: 24px; font-size: 13px; }
  #topright { right: 8px; } .counters { font-size: 15px; gap: 10px; } #minimap { width: 96px !important; height: 96px !important; }
  #topcenter { top: 150px; } #timer { font-size: 26px; } #relics { font-size: 14px; } #stagename { font-size: 11px; }
  #lvl { font-size: 16px; } #bossbar { top: 205px; } #banner { top: 36%; } #bannerTitle { font-size: 28px !important; } #bannerSub { font-size: 13px; }
  .tbtn.mini { width: 40px; height: 40px; font-size: 17px; }
}

@media (max-width: 760px) {
  .overlay.menu { background: rgba(10, 8, 30, .85); justify-content: center; }
  #topleft { width: 190px; } #minimap { width: 110px; height: 110px; }
  .card { width: 100%; min-height: 0; }
  .pause-grid { grid-template-columns: 1fr; }
  #bannerTitle { font-size: 34px; }
}