/* ═══════════════ Hero's Pace — Stile Pergamena Fantasy ═══════════════ */
:root {
--parchment: #efe0c3;
--parchment-dark: #e2cda2;
--ink: #3b2a1a;
--ink-light: #6b543a;
--leather: #5a3d24;
--gold: #c9932e;
--gold-bright: #e8b64c;
--emerald: #2e8b57;
--magic: #6a4fc9;
--danger: #a33327;
--rar-comune: #8a7a5f;
--rar-raro: #2e6fb0;
--rar-epico: #7b3fbf;
--rar-leggendario: #d9822b;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: #1a0f05; }
html, body { height: 100%; }
body {
font-family: 'Crimson Pro', Georgia, serif;
background: #241a10 radial-gradient(ellipse at 50% 0%, #3b2a1a 0%, #241a10 70%);
color: var(--ink);
overscroll-behavior: none;
}
.hidden { display: none !important; }
.screen { min-height: 100dvh; display: flex; flex-direction: column; }
/* ── Pergamena ── */
.parchment {
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
linear-gradient(160deg, var(--parchment) 0%, var(--parchment-dark) 100%);
border: 3px solid var(--leather);
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 0 40px rgba(90,61,36,.25);
margin: max(16px, env(safe-area-inset-top)) 12px 16px;
padding: 24px 18px;
flex: 1;
max-width: 520px;
width: calc(100% - 24px);
align-self: center;
}
.center-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.game-title {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 2.4rem;
color: var(--leather);
text-shadow: 0 2px 0 rgba(255,255,255,.4);
letter-spacing: 2px;
}
.subtitle { color: var(--ink-light); margin-top: -8px; }
.section-title {
font-family: 'Cinzel', serif;
font-size: 1.2rem;
color: var(--leather);
margin: 10px 0 10px;
display: flex; align-items: center; gap: 10px;
white-space: nowrap;
}
.section-title::before,
.section-title::after {
content: ''; flex: 1; height: 1px; min-width: 8px;
}
.section-title::before { background: linear-gradient(to right, transparent, var(--gold)); }
.section-title::after { background: linear-gradient(to left, transparent, var(--gold)); }
.lore-box {
background: rgba(90,61,36,.12);
border-left: 4px solid var(--gold);
border-radius: 6px;
padding: 10px 12px;
font-style: italic;
font-weight: 500;
color: var(--ink);
font-size: .95rem;
}
.muted { color: #4e3b28; }
.small { font-size: .85rem; }
.panel .muted { color: var(--ink); }
.panel .small { font-size: .9rem; }
.center { text-align: center; }
.row { display: flex; }
.gap { gap: 10px; }
.empty-state {
display: flex; flex-direction: column; align-items: center;
gap: 8px; padding: 32px 16px; opacity: .7;
}
.empty-state-icon { font-size: 2.6rem; filter: grayscale(1); }
.empty-state-text { font-size: .85rem; color: #4e3b28; text-align: center; }
.wide { width: 100%; }
/* ── Bottoni ── */
.btn {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: .95rem;
padding: 12px 18px;
border-radius: 10px;
border: 2px solid var(--leather);
background: linear-gradient(180deg, #f4e7cd, #dfc99f);
color: var(--ink);
cursor: pointer;
box-shadow: 0 3px 0 rgba(59,42,26,.5);
transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(59,42,26,.5); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary {
background: linear-gradient(180deg, var(--gold-bright), var(--gold));
border-color: #7a5a1a;
color: #2a1d08;
}
.btn-small { padding: 8px 12px; font-size: .8rem; }
.btn.big { font-size: 1.1rem; padding: 16px; margin-top: 12px; }
/* ── Input ── */
.input {
width: 100%;
padding: 12px;
font-family: inherit;
font-size: 1.05rem;
border: 2px solid var(--leather);
border-radius: 8px;
background: rgba(255,255,255,.55);
color: var(--ink);
}
.field-label {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: .85rem;
color: var(--leather);
align-self: flex-start;
margin-top: 8px;
}
/* ── Profili ── */
#profile-list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.profile-card {
display: flex; align-items: center; gap: 14px;
background:
radial-gradient(ellipse at 0% 50%, var(--phero-glow, rgba(200,150,46,.12)) 0%, transparent 55%),
rgba(255,255,255,.38);
border: 2px solid var(--leather);
border-left: 4px solid var(--phero-accent, var(--leather));
border-radius: 14px;
padding: 12px 14px;
cursor: pointer;
transition: transform .12s, box-shadow .12s;
}
.profile-card:active { transform: scale(.975); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.profile-avatar, .avatar-emoji {
width: 72px; height: 72px; border-radius: 50%;
border: 2px solid var(--phero-accent, var(--gold));
object-fit: cover;
display: flex; align-items: center; justify-content: center;
font-size: 2rem; background: #fff8ec;
flex-shrink: 0;
}
.profile-info { flex: 1; min-width: 0; }
.profile-hero-name { display: block; font-size: 1rem; }
.profile-hero-class { display: block; font-size: .72rem; font-family: 'Cinzel', serif; letter-spacing: .5px; color: var(--phero-accent, var(--gold)); opacity: .85; margin-top: 1px; }
.profile-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.profile-chip { font-family: 'Cinzel', serif; font-size: .65rem; padding: 2px 9px; border-radius: 20px; background: rgba(0,0,0,.28); color: #d9c39a; border: 1px solid rgba(180,140,60,.35); }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.avatar-choice {
width: 54px; height: 54px; font-size: 1.8rem;
border-radius: 50%; border: 2px solid var(--leather);
background: #fff8ec; cursor: pointer; object-fit: cover;
}
.avatar-choice.selected { border: 3px solid var(--gold); box-shadow: 0 0 10px var(--gold-bright); }
/* ── HUD ── */
#screen-game { background: transparent; height: 100dvh; overflow: hidden; }
#hud {
position: relative; z-index: 10;
display: flex; justify-content: space-between; align-items: center;
gap: 8px;
padding: calc(13px + env(safe-area-inset-top)) 12px 20px;
background:
/* vignette scuro ai bordi */
linear-gradient(180deg,
rgba(18,10,3,.75) 0%,
rgba(40,22,8,.25) 18%,
rgba(60,36,12,.08) 40%,
rgba(55,33,11,.12) 62%,
rgba(35,20,6,.35) 82%,
rgba(16,9,2,.65) 100%
),
/* venatura orizzontale del legno */
repeating-linear-gradient(180deg,
transparent 0px, transparent 4px,
rgba(0,0,0,.045) 4px, rgba(0,0,0,.045) 5px,
transparent 5px, transparent 9px,
rgba(255,210,80,.025) 9px, rgba(255,210,80,.025) 10px
),
/* alone caldo al centro */
radial-gradient(ellipse 70% 70% at 50% 55%, rgba(200,130,30,.18) 0%, transparent 75%),
/* base ambrata del legno */
linear-gradient(180deg,
#3a2008 0%, #6a3e18 10%,
#9a5c28 22%, #b07030 38%,
#a86828 54%, #8a5020 72%,
#683c18 88%, #3a2008 100%
);
color: #f4e7cd;
}
.hud-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.hud-avatar { flex-shrink: 0; }
.hud-avatar-inner, .hud-avatar .avatar-emoji {
width: 46px; height: 46px; border-radius: 50%;
border: 2px solid var(--gold); object-fit: cover; object-position: 50% 0%;
transform: scale(2.4); transform-origin: 50% 8%;
font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
background: #fff8ec;
}
.hud-avatar { overflow: hidden; border-radius: 50%; transition: box-shadow .4s; }
.hud-info { min-width: 0; flex: 1; }
.hud-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-titolo { font-size: .72rem; color: #d9c39a; }
.xpbar {
position: relative; width: 100%; height: 14px;
background: rgba(0,0,0,.5); border: 1px solid var(--gold);
border-radius: 7px; overflow: hidden; margin-top: 3px;
transition: box-shadow .4s;
}
.xpbar-fill { height: 100%; background: linear-gradient(90deg, var(--emerald), #58c98b); transition: width .6s; }
.xpbar-text {
position: absolute; inset: 0; font-size: .62rem; text-align: center;
line-height: 13px; color: #fff; text-shadow: 0 1px 2px #000;
}
.hud-right { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; text-align: right; flex-shrink: 0; }
.res { white-space: nowrap; }
/* ── Contenuto tab ── */
#tab-content {
flex: 1; min-height: 0; overflow-y: auto;
padding: 14px 12px calc(130px + env(safe-area-inset-bottom));
max-width: 560px; width: 100%; align-self: center;
}
#tab-content .section-title { color: var(--gold-bright); }
#tab-content .section-title::before { background: linear-gradient(to right, transparent, var(--gold-bright)); }
#tab-content .section-title::after { background: linear-gradient(to left, transparent, var(--gold-bright)); }
#tab-content > .muted, #tab-content > p.muted { color: #c9b48f; }
.panel {
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
linear-gradient(160deg, var(--parchment) 0%, var(--parchment-dark) 100%);
border: 2px solid var(--leather);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,.4);
padding: 14px;
margin-bottom: 14px;
display: flex; flex-direction: column; gap: 8px;
}
.panel-title { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--ink); }
.camp-panel-thumb { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; display: block; }
.serra-danger-warn { font-size: .8rem; font-weight: 600; color: #e05050; margin-bottom: 4px; }
.panel.panel-featured {
background:
radial-gradient(ellipse at 30% 15%, rgba(255,220,130,.25), transparent 55%),
linear-gradient(160deg, #f5e6c0 0%, #e8d099 100%);
border-color: var(--gold);
box-shadow: 0 4px 20px rgba(0,0,0,.45), 0 0 14px rgba(232,182,76,.25);
}
/* ── Rifugio ── */
.camp-scene { text-align: center; margin-bottom: 14px; }
.camp-emoji { font-size: 4.5rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.camp-desc { color: #d9c39a; font-style: italic; margin-top: 6px; }
.membar {
position: relative; height: 22px;
background: rgba(59,42,26,.3); border: 2px solid var(--leather);
border-radius: 11px; overflow: hidden;
}
.membar-fill {
height: 100%; transition: width .6s;
background: linear-gradient(90deg, var(--magic), #9a7ff0);
position: relative; overflow: hidden;
}
.membar-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
animation: membar-shimmer 2.4s ease-in-out infinite;
}
.membar-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.membar-fill.danger { background: linear-gradient(90deg, var(--danger), #d9764a); }
.membar span {
position: absolute; inset: 0; text-align: center; line-height: 19px;
font-size: .75rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000;
z-index: 1;
}
@keyframes membar-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
.cantiere-panel { padding-left: 22px; }
.cantiere-section-title {
font-size: 1rem; font-weight: 700; color: var(--leather);
margin: 14px 0 8px; padding-bottom: 6px;
border-bottom: 1px solid rgba(90,61,36,.25);
}
.build-row, .mission-row {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.35);
border: 1px solid rgba(90,61,36,.4);
border-radius: 10px; padding: 8px 10px;
}
.build-row.built { opacity: .65; }
.build-icon { font-size: 1.6rem; }
.build-mid, .mission-mid { flex: 1; min-width: 0; }
.mission-row.done { color: var(--ink-light); }
.tag {
display: inline-block; font-size: .68rem; font-weight: 700;
padding: 1px 7px; border-radius: 8px;
background: var(--leather); color: #f4e7cd;
text-transform: uppercase; letter-spacing: .5px;
}
.active-mission { border-color: var(--gold); box-shadow: 0 0 14px rgba(201,147,46,.5); }
.event-panel { border-color: var(--magic); }
/* ── Allenamento ── */
.act-row { display: flex; gap: 10px; margin: 8px 0; }
.act-choice {
flex: 1; padding: 14px 6px; text-align: center;
font-family: inherit; font-size: .82rem; line-height: 1.4;
border: 2px solid var(--leather); border-radius: 12px;
background: rgba(255,255,255,.4); cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 4px;
min-height: 112px; justify-content: center;
transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.act-choice:active { transform: scale(.96); }
.act-choice.selected {
border-color: var(--gold);
background: rgba(232,182,76,.28);
box-shadow: 0 0 14px rgba(201,147,46,.5), inset 0 0 20px rgba(232,182,76,.07);
transform: translateY(-2px);
}
.act-label { font-family: 'Cinzel', serif; font-size: .88rem; font-weight: 700; color: var(--ink); }
.act-xp-badge {
font-size: .62rem; color: var(--gold-bright);
background: rgba(0,0,0,.68); border-radius: 10px; padding: 1px 7px;
}
.act-bonus-badge {
font-size: .6rem; color: #9af0b8;
background: rgba(46,139,87,.3); border-radius: 10px; padding: 1px 7px;
}
/* Daily goal progress bar in train tab */
.train-daily-goal {
margin-bottom: 10px; padding: 10px 12px;
background: rgba(0,0,0,.18); border-radius: 10px;
border: 1px solid rgba(201,147,46,.3);
}
.train-goal-label { font-size: .72rem; color: #c9b48f; margin-bottom: 5px; }
.train-goal-bar { height: 10px; background: rgba(0,0,0,.35); border-radius: 5px; overflow: hidden; }
.train-goal-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width .5s; }
.log-date-header { padding: 10px 0 4px; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #c9b48f; opacity: .75; }
.log-row { padding: 4px 0; border-bottom: 1px dashed rgba(90,61,36,.3); font-size: .92rem; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px dashed rgba(90,61,36,.3); }
.stat-row-label { display: flex; align-items: center; gap: 8px; }
.stat-row-icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
/* ── Report allenamento ── */
.report-header {
text-align: center; padding: 8px 0 14px;
border-bottom: 1px solid rgba(200,150,60,.25); margin-bottom: 14px;
}
.report-act-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 4px; }
.report-km-big {
font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700;
color: var(--gold-bright); text-shadow: 0 0 12px rgba(232,182,76,.5);
line-height: 1.1;
}
.report-act-label { font-size: .82rem; color: #c9b48f; margin-top: 2px; }
.report-bonus { color: var(--gold-bright); font-weight: 700; }
.report-xp-wrap { margin: 0 0 14px; }
.report-xp-label { font-family: 'Cinzel', serif; font-size: .72rem; color: #c9b48f; margin-bottom: 5px; }
.report-xp-track {
position: relative; height: 24px;
background: rgba(0,0,0,.4); border: 1px solid rgba(200,150,60,.4);
border-radius: 12px; overflow: hidden;
}
.report-xp-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--emerald), #58c98b, #9af0b8);
border-radius: 12px;
transition: width 1s cubic-bezier(0.25,0.46,0.45,0.94);
position: relative; overflow: hidden;
}
.report-xp-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
animation: membar-shimmer 1.8s ease-in-out infinite;
}
.report-xp-text {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000;
}
.report-xp-sub { font-size: .68rem; color: #9a8870; text-align: right; margin-top: 3px; }
.report-rewards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.rpt-reward {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 4px; border-radius: 12px;
background: rgba(0,0,0,.2); border: 1px solid rgba(200,150,60,.3);
}
.rpt-reward.star { background: rgba(60,120,60,.18); border-color: rgba(90,180,90,.4); }
.rpt-reward.gold { background: rgba(140,100,10,.2); border-color: rgba(200,150,40,.4); }
.rpt-reward.wood { background: rgba(80,50,10,.2); border-color: rgba(150,100,40,.4); }
.rpt-reward.stone { background: rgba(60,60,70,.22); border-color: rgba(120,120,140,.4); }
.rpt-rew-icon { font-size: 1.3rem; line-height: 1; }
.rpt-rew-val { font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700; color: #f0ddb8; }
.rpt-rew-label { font-size: .6rem; color: #9a8870; }
.report-levelup {
position: relative; text-align: center;
padding: 14px 12px; margin: 8px 0 12px; border-radius: 14px;
background: radial-gradient(ellipse at 50% 50%, rgba(232,182,76,.22) 0%, rgba(140,100,10,.1) 100%);
border: 2px solid var(--gold); overflow: hidden;
animation: levelupPulse 1.6s ease-in-out infinite;
}
.report-levelup-text {
font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 900;
color: var(--gold-bright); text-shadow: 0 0 16px rgba(232,182,76,.8);
letter-spacing: 1px;
}
.report-levelup-title { font-size: .82rem; color: #d9c39a; margin-top: 3px; }
@keyframes levelupPulse {
0%,100% { box-shadow: 0 0 8px rgba(232,182,76,.3); }
50% { box-shadow: 0 0 22px rgba(232,182,76,.7), inset 0 0 12px rgba(232,182,76,.08); }
}
/* Legacy compat */
.reward-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.reward {
text-align: center; font-weight: 700; padding: 8px 4px;
background: rgba(255,255,255,.45); border: 1px solid var(--leather); border-radius: 10px;
font-size: .9rem;
}
.big-news {
font-family: 'Cinzel', serif; font-weight: 700; text-align: center;
color: var(--magic); margin: 10px 0; font-size: 1.05rem;
}
.loot-list { display: flex; flex-direction: column; gap: 7px; margin: 6px 0; }
.loot {
padding: 9px 12px;
border-radius: 10px;
background:
linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 100%),
linear-gradient(160deg, var(--parchment-dark), #c8ad82);
border: 1.5px solid rgba(90,61,36,.35);
border-left: 4px solid;
font-size: .9rem;
box-shadow:
0 2px 8px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(90,61,36,.15);
position: relative;
overflow: hidden;
transition: transform .1s, box-shadow .1s;
}
.loot.rar-comune {
border-left-color: var(--rar-comune);
}
.loot.rar-raro {
border-left-color: var(--rar-raro);
box-shadow:
0 2px 10px rgba(0,0,0,.35),
-2px 0 12px rgba(46,111,176,.3),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(90,61,36,.15);
}
.loot.rar-epico {
border-left-color: var(--rar-epico);
box-shadow:
0 2px 10px rgba(0,0,0,.35),
-2px 0 14px rgba(123,63,191,.4),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(90,61,36,.15);
}
.loot.rar-leggendario {
border-left-color: var(--rar-leggendario);
background:
linear-gradient(160deg, rgba(255,220,120,.22) 0%, rgba(217,130,43,.12) 100%),
linear-gradient(160deg, #d4b87a, #b89050);
box-shadow:
0 3px 14px rgba(0,0,0,.4),
-2px 0 18px rgba(217,130,43,.45),
inset 0 1px 0 rgba(255,255,200,.6),
inset 0 -1px 0 rgba(120,70,10,.25);
}
/* ── Carte ── */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tcard, .card-reveal {
border: 3px solid; border-radius: 14px;
padding: 14px 10px; text-align: center;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5), transparent 70%),
linear-gradient(160deg, var(--parchment), var(--parchment-dark));
box-shadow: 0 4px 14px rgba(0,0,0,.4);
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.card-reveal { margin: 12px 0; animation: cardIn .6s ease; }
@keyframes cardIn {
from { transform: scale(.5) rotate(-6deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
.tcard.locked { filter: grayscale(1); opacity: .55; }
.card-icon { font-size: 2.6rem; }
.lore { font-style: italic; font-weight: 500; color: var(--ink); }
.tcard.rar-comune, .card-reveal.rar-comune { border-color: var(--rar-comune); }
.tcard.rar-raro, .card-reveal.rar-raro { border-color: var(--rar-raro); }
.tcard.rar-epico, .card-reveal.rar-epico { border-color: var(--rar-epico); box-shadow: 0 0 14px rgba(123,63,191,.4); }
.tcard.rar-leggendario, .card-reveal.rar-leggendario { border-color: var(--rar-leggendario); box-shadow: 0 0 18px rgba(217,130,43,.6); }
/* ── Banda di rarità a sinistra ── */
.tcard::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 5px; border-radius: 11px 0 0 11px;
}
.tcard.rar-comune::before { background: var(--rar-comune); }
.tcard.rar-raro::before { background: var(--rar-raro); box-shadow: 0 0 6px rgba(62,124,209,.5); }
.tcard.rar-epico::before { background: var(--rar-epico); box-shadow: 0 0 8px rgba(123,63,191,.7); }
.tcard.rar-leggendario::before { background: linear-gradient(180deg, #f5d062, var(--rar-leggendario), #f5d062); box-shadow: 0 0 10px rgba(217,130,43,.8); }
/* ── Font medievale per i nomi degli eroi ── */
.font-medieval, .input-medieval, .hud-name, .hero-name-plate, .profile-info b {
font-family: 'Uncial Antiqua', 'Cinzel', Georgia, serif;
letter-spacing: 1px;
}
.input-medieval {
font-size: 1.25rem;
text-align: center;
color: var(--leather);
}
.input-medieval::placeholder { opacity: .45; font-size: 1rem; }
/* ── Scheda Eroe su pergamena ── */
#tab-content.bg-parchment {
background-color: #2a1d0e;
background:
linear-gradient(180deg, rgba(20,14,8,.08) 0%, rgba(20,14,8,.18) 100%),
url('assets/backgrounds/pergamena.webp') center top / cover no-repeat;
}
/* ── Rifugio ── */
#tab-content.bg-rifugio {
background-color: #0e0703;
background:
linear-gradient(180deg, rgba(5,3,2,.60) 0%, rgba(10,6,3,.35) 40%, rgba(5,3,2,.58) 100%),
url('assets/backgrounds/bg-camp-fire.webp');
background-size: cover; background-position: center 30%;
}
/* ── Mappa ── */
#tab-content.bg-map {
background-color: #090b12;
background:
linear-gradient(180deg, rgba(5,6,10,.62) 0%, rgba(8,9,14,.40) 45%, rgba(5,6,10,.60) 100%),
url('assets/backgrounds/bg-map.webp');
background-size: cover; background-position: center 30%;
}
/* ── Allenati ── */
#tab-content.bg-train {
background-color: #100602;
background:
linear-gradient(180deg, rgba(8,4,2,.62) 0%, rgba(12,6,3,.40) 45%, rgba(8,4,2,.60) 100%),
url('assets/backgrounds/bg-train.webp');
background-size: cover; background-position: center 20%;
}
/* ── Mercato ── */
#tab-content.bg-market {
background: #0c0918;
}
.hero-showcase { padding: 12px 0 4px; }
.hero-fullbody {
max-width: 90%;
max-height: 54dvh;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
animation: heroIn .5s ease;
}
.hero-fullbody-big {
max-width: 100%;
max-height: 58dvh;
}
@keyframes heroIn {
from { transform: translateY(14px) scale(.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.hero-name-plate {
font-family: 'Cinzel', serif;
font-size: 1.35rem;
color: var(--ink);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
margin-top: 6px;
}
.hero-title-plate { color: var(--ink-light); }
.bg-parchment .section-title.on-parchment-title {
color: var(--leather);
border-color: var(--leather);
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.panel.on-parchment {
background: rgba(255, 250, 238, .93);
border-color: rgba(90,61,36,.55);
box-shadow: 0 2px 10px rgba(0,0,0,.2);
backdrop-filter: blur(2px);
}
/* Senza immagine di sfondo il tab Eroe resta leggibile sul tema scuro */
#tab-content:not(.bg-parchment) .hero-name-plate { color: #f4e7cd; text-shadow: none; }
#tab-content:not(.bg-parchment) .hero-title-plate { color: #c9b48f; }
.hero-avatar, .panel .avatar-emoji.hero-avatar {
width: 110px; height: 110px; border-radius: 50%;
border: 4px solid var(--gold); object-fit: cover;
font-size: 4rem; display: flex; align-items: center; justify-content: center;
background: #fff8ec;
}
/* ── Tab bar: tavola di legno scolpita ── */
#tabbar {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
display: flex; justify-content: space-around; align-items: flex-end;
padding: calc(16px + 4px) 4px calc(env(safe-area-inset-bottom) + 13px);
transition: opacity .18s ease;
background:
linear-gradient(180deg,
rgba(18,10,3,.8) 0%, rgba(40,22,8,.28) 18%,
rgba(60,36,12,.10) 40%, rgba(55,33,11,.14) 62%,
rgba(35,20,6,.38) 82%, rgba(16,9,2,.72) 100%
),
repeating-linear-gradient(180deg,
transparent 0px, transparent 4px,
rgba(0,0,0,.045) 4px, rgba(0,0,0,.045) 5px,
transparent 5px, transparent 9px,
rgba(255,210,80,.025) 9px, rgba(255,210,80,.025) 10px
),
radial-gradient(ellipse 70% 55% at 50% 45%, rgba(200,130,30,.18) 0%, transparent 75%),
linear-gradient(180deg,
#3a2008 0%, #6a3e18 10%, #9a5c28 22%, #b07030 38%,
#a86828 54%, #8a5020 72%, #683c18 88%, #3a2008 100%
);
border-top: none;
box-shadow: 0 -4px 20px rgba(0,0,0,.8), 0 -1px 0 rgba(220,170,60,.18);
overflow: visible;
}
#tabbar.tab-hidden { opacity: 0; pointer-events: none; }
/* Banda a nodo celtico in cima — specchio esatto del bordo inferiore dell'header */
#tabbar::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 16px;
background:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSIxNiI+CiAgPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjE2IiBmaWxsPSIjN2E1MDEwIi8+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZjBjMDUwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iI2M4ODAyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2YTQwMTAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0wIDEyIEMxMiAxMiAyNCA0IDI0IDQgQzM2IDQgNDggMTIgNDggMTIiIHN0cm9rZT0iIzFlMGMwNCIgc3Ryb2tlLXdpZHRoPSI2IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMCAxMiBDMTIgMTIgMjQgNCAyNCA0IEMzNiA0IDQ4IDEyIDQ4IDEyIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHJlY3QgeD0iOCIgeT0iMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjE2IiBmaWxsPSIjN2E1MDEwIi8+CiAgPHBhdGggZD0iTTAgNCBDMTIgNCAyNCAxMiAyNCAxMiBDMzYgMTIgNDggNCA0OCA0IiBzdHJva2U9IiMxZTBjMDQiIHN0cm9rZS13aWR0aD0iNiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTAgNCBDMTIgNCAyNCAxMiAyNCAxMiBDMzYgMTIgNDggNCA0OCA0IiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHJlY3QgeD0iMzAiIHk9IjAiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzdhNTAxMCIvPgogIDxwYXRoIGQ9Ik0yNCA0IEMzNiA0IDQ4IDEyIDQ4IDEyIiBzdHJva2U9IiMxZTBjMDQiIHN0cm9rZS13aWR0aD0iNiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTI0IDQgQzM2IDQgNDggMTIgNDggMTIiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSI0IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iMS41IiBmaWxsPSIjZDRhMDQwIiBvcGFjaXR5PSIuNSIvPgogIDxyZWN0IHk9IjE0LjUiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxLjUiIGZpbGw9IiMxZTBjMDQiIG9wYWNpdHk9Ii41NSIvPgo8L3N2Zz4=") repeat-x left top / 48px 16px;
pointer-events: none; z-index: 2;
}
/* Borchie metalliche in fondo (dentro la safe area) */
#tabbar::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0;
height: calc(13px + env(safe-area-inset-bottom));
background:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIxMyI+CiAgPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjEzIiBmaWxsPSIjMWExMjA4Ii8+CiAgPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InIiIGN4PSIzNSUiIGN5PSIzMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNmE1ODMwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMzAyODE4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0MTAwOCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iMTYiIGN5PSI2LjUiIHI9IjUiIGZpbGw9IiMwZTBhMDYiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjYuNSIgcj0iNC41IiBmaWxsPSJ1cmwoI3IpIi8+CiAgPGVsbGlwc2UgY3g9IjE0LjUiIGN5PSI1IiByeD0iMS41IiByeT0iMSIgZmlsbD0icmdiYSgyMTAsMTc1LDg1LDAuMykiLz4KPC9zdmc+") repeat-x left top / 32px 13px;
pointer-events: none; z-index: 2;
}
.tab {
flex: 1; background: none; border: none; cursor: pointer; position: relative;
font-size: 1.5rem; color: #6a5030;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 0 4px; border-radius: 0;
transition: color .2s;
}
.tab span {
font-family: 'Cinzel', serif; font-size: .55rem; font-weight: 700;
letter-spacing: .04em; color: #c4956a; opacity: .92; transition: opacity .2s, color .2s;
}
.tab.active { color: var(--gold-bright); text-shadow: 0 0 12px rgba(232,182,76,.8); }
.tab.active span { opacity: 1; color: var(--gold-bright); }
.tab-main { font-size: 2rem; }
/* ── Modal ── */
.modal {
position: fixed; inset: 0; z-index: 50;
background: rgba(20,12,5,.75);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.modal-box {
max-height: 85dvh; overflow-y: auto;
flex: none; margin: 0; width: 100%; max-width: 420px;
}
.modal-box.modal-opening {
animation: modal-box-in .3s cubic-bezier(0.34, 1.42, 0.64, 1) both;
}
@keyframes modal-box-in {
from { opacity: 0; transform: translateY(32px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Toast medievale ── */
#toast {
position: fixed; bottom: calc(108px + env(safe-area-inset-bottom));
left: 50%; transform: translateX(-50%) translateY(16px);
background: linear-gradient(135deg, #2e1d0a 0%, #3d2812 50%, #2a1808 100%);
color: #f4e7cd;
border: 1px solid rgba(232,182,76,.55);
border-radius: 14px;
box-shadow:
0 8px 28px rgba(0,0,0,.65),
0 0 0 1px rgba(232,182,76,.18),
inset 0 1px 0 rgba(255,255,255,.07);
padding: 0; max-width: 88%; min-width: 200px;
display: flex; align-items: stretch;
opacity: 0; transition: opacity .25s ease, transform .25s cubic-bezier(0.34,1.4,0.64,1);
pointer-events: none; z-index: 60; overflow: hidden;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-icon {
font-size: 1.35rem; padding: 12px 12px 12px 14px;
display: flex; align-items: center;
border-right: 1px solid rgba(232,182,76,.2);
background: rgba(232,182,76,.08);
line-height: 1;
}
.toast-text {
font-family: 'Cinzel', serif; font-size: .8rem; font-weight: 500;
color: #f0ddb8; letter-spacing: .3px; line-height: 1.3;
padding: 11px 16px 11px 13px;
display: flex; align-items: center;
}
@keyframes res-bump {
0% { transform: scale(1); }
35% { transform: scale(1.45); color: #fff; text-shadow: 0 0 8px var(--gold-bright); }
100% { transform: scale(1); }
}
.res-bump { animation: res-bump .38s cubic-bezier(0.34,1.4,0.64,1); }
.res { position: relative; }
.res-float {
position: absolute; top: -2px; right: 0;
font-size: .68rem; font-weight: 700; color: var(--gold-bright);
pointer-events: none; white-space: nowrap;
animation: res-float-up .95s ease-out forwards;
}
@keyframes res-float-up {
0% { opacity: 1; transform: translateY(0); }
60% { opacity: 1; }
100% { opacity: 0; transform: translateY(-20px); }
}
/* ── Report streak line ── */
.report-streak-line {
text-align: center; font-size: .88rem; color: var(--ink);
background: rgba(232,182,76,.15); border: 1px solid rgba(232,182,76,.4);
border-radius: 8px; padding: 5px 10px; margin: 4px 0;
}
/* ── Weekly summary bars ── */
.week-row {
display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.week-row-label { font-size: .85rem; color: var(--ink); width: 88px; flex-shrink: 0; }
.week-bar-wrap {
flex: 1; height: 10px; border-radius: 6px;
background: rgba(59,42,26,.12);
}
.week-bar-fill {
height: 100%; border-radius: 6px;
transition: width .5s cubic-bezier(.2,.8,.4,1);
min-width: 3px;
}
.week-row-val { font-size: .82rem; font-weight: 700; color: var(--ink); min-width: 32px; text-align: right; }
/* ═══════════════════════════════════════════════════════════════
LIVELLO GRAFICO AVANZATO — texture, bagliori e animazioni
═══════════════════════════════════════════════════════════════ */
/* ── Texture: legno scuro per il fondo, grana per la pergamena ── */
body {
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at 50% -10%, #4a3520 0%, #2c1f12 55%, #1c1309 100%);
background-attachment: fixed;
}
.panel, .parchment, .modal-box, .tcard, .card-reveal {
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.4), transparent 60%),
linear-gradient(160deg, var(--parchment) 0%, var(--parchment-dark) 100%);
}
.panel.on-parchment {
background-image: none;
background-color: rgba(255, 250, 238, .93);
}
/* ── Pannelli: doppio bordo con filo dorato interno ── */
.panel, .parchment, .modal-box {
box-shadow:
0 6px 22px rgba(0,0,0,.5),
inset 0 0 0 2px rgba(201,147,46,.45),
inset 0 0 34px rgba(90,61,36,.22);
}
/* ── Titoli con fregi: le linee sono già definite nella sezione base ── */
/* ── Bottoni: metallo dorato cesellato ── */
.btn {
background:
linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
linear-gradient(180deg, #f4e7cd, #d9c193);
box-shadow:
0 3px 0 rgba(59,42,26,.55),
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -2px 4px rgba(90,61,36,.25);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
overflow: hidden;
}
.btn-primary {
background:
linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 45%),
linear-gradient(180deg, var(--gold-bright), #b57f1e);
box-shadow:
0 3px 0 #6b4c12,
inset 0 1px 0 rgba(255,255,230,.7),
inset 0 -2px 5px rgba(90,50,10,.4),
0 0 12px rgba(232,182,76,.35);
text-shadow: 0 1px 0 rgba(255,240,200,.6);
}
.btn.big { animation: pulseGlow 2.4s ease-in-out infinite; }
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 3px 0 #6b4c12, inset 0 1px 0 rgba(255,255,230,.7), 0 0 10px rgba(232,182,76,.3); }
50% { box-shadow: 0 3px 0 #6b4c12, inset 0 1px 0 rgba(255,255,230,.7), 0 0 26px rgba(232,182,76,.75); }
}
/* ── HUD: tavola di legno con borchie e nodo celtico ── */
#hud {
box-shadow: 0 4px 20px rgba(0,0,0,.75), 0 1px 0 rgba(220,170,60,.2);
}
/* Borchie metalliche in cima */
#hud::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: calc(13px + env(safe-area-inset-top));
background:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIxMyI+CiAgPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjEzIiBmaWxsPSIjMWExMjA4Ii8+CiAgPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9InIiIGN4PSIzNSUiIGN5PSIzMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNmE1ODMwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMzAyODE4Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0MTAwOCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICA8L2RlZnM+CiAgPGNpcmNsZSBjeD0iMTYiIGN5PSI2LjUiIHI9IjUiIGZpbGw9IiMwZTBhMDYiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjYuNSIgcj0iNC41IiBmaWxsPSJ1cmwoI3IpIi8+CiAgPGVsbGlwc2UgY3g9IjE0LjUiIGN5PSI1IiByeD0iMS41IiByeT0iMSIgZmlsbD0icmdiYSgyMTAsMTc1LDg1LDAuMykiLz4KPC9zdmc+") repeat-x left bottom / 32px 13px;
pointer-events: none; z-index: 2;
}
/* Banda a nodo celtico in fondo */
#hud::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 16px;
background:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSIxNiI+CiAgPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjE2IiBmaWxsPSIjN2E1MDEwIi8+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZjBjMDUwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC4zNSIgc3RvcC1jb2xvcj0iI2M4ODAyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2YTQwMTAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0wIDEyIEMxMiAxMiAyNCA0IDI0IDQgQzM2IDQgNDggMTIgNDggMTIiIHN0cm9rZT0iIzFlMGMwNCIgc3Ryb2tlLXdpZHRoPSI2IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMCAxMiBDMTIgMTIgMjQgNCAyNCA0IEMzNiA0IDQ4IDEyIDQ4IDEyIiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHJlY3QgeD0iOCIgeT0iMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjE2IiBmaWxsPSIjN2E1MDEwIi8+CiAgPHBhdGggZD0iTTAgNCBDMTIgNCAyNCAxMiAyNCAxMiBDMzYgMTIgNDggNCA0OCA0IiBzdHJva2U9IiMxZTBjMDQiIHN0cm9rZS13aWR0aD0iNiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTAgNCBDMTIgNCAyNCAxMiAyNCAxMiBDMzYgMTIgNDggNCA0OCA0IiBzdHJva2U9InVybCgjZykiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHJlY3QgeD0iMzAiIHk9IjAiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzdhNTAxMCIvPgogIDxwYXRoIGQ9Ik0yNCA0IEMzNiA0IDQ4IDEyIDQ4IDEyIiBzdHJva2U9IiMxZTBjMDQiIHN0cm9rZS13aWR0aD0iNiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTI0IDQgQzM2IDQgNDggMTIgNDggMTIiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSI0IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iMS41IiBmaWxsPSIjZDRhMDQwIiBvcGFjaXR5PSIuNSIvPgogIDxyZWN0IHk9IjE0LjUiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxLjUiIGZpbGw9IiMxZTBjMDQiIG9wYWNpdHk9Ii41NSIvPgo8L3N2Zz4=") repeat-x left top / 48px 16px;
pointer-events: none; z-index: 2;
}
.res {
background: rgba(0,0,0,.35);
border: 1px solid rgba(201,147,46,.5);
border-radius: 10px;
padding: 1px 8px;
}
.xpbar {
box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 6px rgba(201,147,46,.3);
}
.xpbar-fill { position: relative; overflow: hidden; }
.xpbar-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
animation: shine 3s linear infinite;
}
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* ── Rifugio: scena notturna con fuoco vivo ── */
.camp-scene {
position: relative;
border-radius: 14px;
border: 2px solid rgba(201,147,46,.4);
padding: 26px 14px 18px;
overflow: hidden;
background:
radial-gradient(2px 2px at 15% 20%, rgba(255,255,255,.9), transparent 60%),
radial-gradient(1.5px 1.5px at 75% 12%, rgba(255,255,255,.8), transparent 60%),
radial-gradient(1.5px 1.5px at 55% 30%, rgba(255,255,255,.7), transparent 60%),
radial-gradient(2px 2px at 88% 38%, rgba(255,255,255,.6), transparent 60%),
radial-gradient(1.5px 1.5px at 30% 42%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(180deg, #101d33 0%, #1d2b45 46%, #23331f 78%, #182312 100%);
box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.45);
}
.camp-scene::after {
content: ''; position: absolute; left: 50%; bottom: 6px;
width: 190px; height: 110px; transform: translateX(-50%);
background: radial-gradient(ellipse at 50% 85%, rgba(255,166,48,.55) 0%, rgba(255,120,30,.25) 45%, transparent 75%);
animation: fireGlow 2.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes fireGlow {
0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
40% { opacity: 1; transform: translateX(-50%) scale(1.08); }
70% { opacity: .85; transform: translateX(-50%) scale(.97); }
}
.camp-emoji {
position: relative; z-index: 1;
animation: flicker 2.8s ease-in-out infinite;
}
@keyframes flicker {
0%, 100% { transform: scale(1); }
35% { transform: scale(1.035) rotate(-.6deg); }
65% { transform: scale(.985) rotate(.5deg); }
}
.camp-desc { position: relative; z-index: 1; color: #e8dcc0; }
.camp-companion-img {
position: relative; z-index: 1;
width: 64px; height: 64px; object-fit: contain;
vertical-align: middle; margin: 0 4px;
filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
.camp-companion-emoji {
position: relative; z-index: 1;
font-size: 2.6rem; vertical-align: middle; margin: 0 4px;
}
/* ── Camp Panorama (sistema layered 2:1) ── */
.camp-panorama {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 14px;
border: 3px solid #c9932e;
box-shadow:
0 0 0 1px #7a4f10,
0 0 12px 3px rgba(201,147,46,.45),
0 6px 28px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,220,140,.18);
margin-bottom: 10px;
background: #0a1020;
}
/* Background stage — figlio z:3 */
.camp-bg-img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 3;
}
/* Filtro giorno/notte sull'immagine di sfondo — tutti gli stage */
.camp-bg-stage-img {
transition: filter 4s ease;
}
.camp-panorama[data-phase="day"] .camp-bg-stage-img { filter: brightness(1.0) saturate(1.0); }
.camp-panorama[data-phase="dawn"] .camp-bg-stage-img { filter: brightness(0.82) saturate(0.85) hue-rotate(-12deg); }
.camp-panorama[data-phase="dusk"] .camp-bg-stage-img { filter: brightness(0.58) saturate(0.75) hue-rotate(12deg) sepia(0.15); }
.camp-panorama[data-phase="night"] .camp-bg-stage-img { filter: brightness(0.42) saturate(0.4) hue-rotate(195deg); }
/* Sky gradient — cambia con data-phase */
.camp-sky {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
transition: background 3s ease;
}
.camp-panorama[data-phase="day"] .camp-sky { background: linear-gradient(180deg, #0d2d5a 0%, #1e5799 38%, #5b9fd8 68%, #a8d5ea 100%); }
.camp-panorama[data-phase="dawn"] .camp-sky { background: linear-gradient(180deg, #2d1545 0%, #8b3a1e 32%, #e8883a 62%, #f5c86a 100%); }
.camp-panorama[data-phase="dusk"] .camp-sky { background: linear-gradient(180deg, #1a0e2e 0%, #7a2e12 28%, #e06030 54%, #f0a848 78%, #f5d878 100%); }
.camp-panorama[data-phase="night"] .camp-sky { background: linear-gradient(180deg, #040810 0%, #0a1628 42%, #101f3a 72%, #192235 100%); }
/* Canvas stelle */
.camp-stars {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
z-index: 6; pointer-events: none;
}
/* Velo notturno */
.camp-night-veil {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; pointer-events: none;
opacity: 0; transition: opacity 1.2s ease;
background: linear-gradient(180deg, rgba(4,8,20,.0) 0%, rgba(4,8,20,.5) 100%);
}
.camp-panorama[data-phase="night"] .camp-night-veil { opacity: 1; }
.camp-panorama[data-phase="dusk"] .camp-night-veil { opacity: 0.5; }
/* Layer PNG generici */
.camp-layer {
position: absolute;
pointer-events: none;
height: auto;
image-rendering: auto;
}
img.camp-layer {
object-fit: contain;
object-position: bottom center;
max-height: 100%;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.65));
}
/* Campfire wrapper (per SVG fallback) */
.camp-campfire-wrap { display: flex; align-items: flex-end; justify-content: center; }
.camp-campfire-img { width: 100%; height: auto; display: block; object-fit: contain; }
/* Cavalcatura */
.camp-mount-layer { object-fit: contain; object-position: bottom center; max-height: 80%; filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)); }
.camp-mount-emoji { pointer-events: none; }
/* Famiglio */
.camp-pet-layer { object-fit: contain; object-position: bottom center; max-height: 70%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.camp-pet-emoji { pointer-events: none; }
/* Layer notturni */
.camp-night-layer { transition: opacity 1s ease; opacity: .9; }
/* Layer appear animation */
@keyframes camp-layer-in {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.camp-layer-appear { animation: camp-layer-in .5s ease-out both; }
/* Drag & pinch-to-resize */
.camp-layer-draggable {
pointer-events: auto !important;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.camp-drag-active {
cursor: grabbing !important;
filter: drop-shadow(0 10px 24px rgba(0,0,0,.85)) brightness(1.12) !important;
animation: none !important;
}
/* Tap-to-resize bubble */
.camp-resize-bubble {
display: flex;
align-items: center;
gap: 6px;
background: rgba(10, 8, 4, 0.9);
border: 1.5px solid rgba(201, 147, 46, 0.65);
border-radius: 24px;
padding: 5px 10px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 18px rgba(0,0,0,.7);
animation: camp-layer-in .18s ease-out both;
}
.crb-btn, .crb-close {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1.5px solid;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
font-size: 1.05rem;
flex-shrink: 0;
}
.crb-btn {
border-color: rgba(201, 147, 46, 0.7);
background: rgba(201, 147, 46, 0.15);
color: #f0c04a;
}
.crb-btn:active { background: rgba(201, 147, 46, 0.4); }
.crb-close {
border-color: rgba(80, 200, 80, 0.7);
background: rgba(80, 200, 80, 0.15);
color: #6de66d;
font-size: .85rem;
}
.crb-close:active { background: rgba(80, 200, 80, 0.4); }
.crb-label {
font-size: .72rem;
color: rgba(255,255,255,.65);
min-width: 28px;
text-align: center;
user-select: none;
}
/* Barra hint layout */
.camp-layout-bar {
display: flex; align-items: center; justify-content: center;
gap: 10px; margin: 2px 0 6px;
}
.camp-layout-hint {
font-size: .75rem;
font-weight: 600;
color: #111;
text-shadow:
-1px -1px 0 #f5e6c0,
1px -1px 0 #f5e6c0,
-1px 1px 0 #f5e6c0,
1px 1px 0 #f5e6c0,
-2px 0 0 #f5e6c0,
2px 0 0 #f5e6c0,
0 -2px 0 #f5e6c0,
0 2px 0 #f5e6c0;
}
.camp-layout-reset { font-size: .75rem; padding: 2px 10px; }
/* Lucciole */
@keyframes ff-drift {
0% { transform: translate(0,0); opacity: 0; }
18% { opacity: 1; }
80% { opacity: .75; }
100% { transform: translate(var(--ff-dx,4%),var(--ff-dy,-3%)); opacity: 0; }
}
.camp-firefly {
position: absolute; width: 4px; height: 4px; border-radius: 50%;
background: #b8ffb0; box-shadow: 0 0 5px #80ff60, 0 0 10px rgba(128,255,96,.35);
animation: ff-drift 4.5s var(--ff-delay,0s) ease-in-out infinite;
z-index: 22; pointer-events: none;
}
/* Overlay badge meteo e fase */
.camp-overlay-badge {
position: absolute; bottom: 7px; z-index: 30;
background: rgba(0,0,0,.52); backdrop-filter: blur(5px);
border-radius: 20px; padding: 3px 9px;
font-size: .72rem; color: #f0e6c8;
display: flex; align-items: center; gap: 4px; line-height: 1.4;
white-space: nowrap;
}
.camp-wx-badge { left: 7px; }
.camp-phase-badge { bottom: auto; top: 30px; left: 8px; right: auto; }
.camp-xp-bonus { color: #ffe96e; font-weight: 700; }
/* Stage label in alto a sx */
.camp-stage-label {
position: absolute; top: 7px; left: 8px; z-index: 30;
background: rgba(0,0,0,.42); backdrop-filter: blur(4px);
border-radius: 12px; padding: 2px 9px;
font-size: .68rem; color: rgba(240,220,180,.8); letter-spacing: .05em;
}
/* Camp desc sotto panorama */
.camp-desc {
color: #d9c39a; font-style: italic;
margin: 0 0 12px; text-align: center; font-size: .87rem;
}
/* ── Carte: riflesso olografico su epiche e leggendarie ── */
.tcard, .card-reveal { position: relative; overflow: hidden; }
.tcard.rar-epico::after, .tcard.rar-leggendario::after,
.card-reveal.rar-epico::after, .card-reveal.rar-leggendario::after {
content: ''; position: absolute; inset: -40%;
background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 48%, rgba(180,140,255,.35) 52%, transparent 62%);
animation: holo 3.6s linear infinite;
pointer-events: none;
}
.tcard.locked::after { display: none; }
@keyframes holo { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.tcard .tag, .card-reveal .tag { z-index: 1; }
/* ── Tab bar: legno intagliato ── */
/* Alcova scolpita per i 4 tab laterali */
.tab:not(.tab-main)::after {
content: '';
position: absolute; inset: 4px 8% 0;
border-radius: 10px 10px 0 0;
background:
linear-gradient(180deg,
rgba(0,0,0,.52) 0%,
rgba(18,9,2,.30) 55%,
rgba(0,0,0,.08) 100%
);
box-shadow:
inset 0 3px 10px rgba(0,0,0,.78),
inset 0 -1px 4px rgba(255,255,255,.04),
inset 2px 0 6px rgba(0,0,0,.38),
inset -2px 0 6px rgba(0,0,0,.38);
z-index: 0; pointer-events: none;
transition: background .2s, box-shadow .2s;
}
.tab:not(.tab-main).active::after {
background:
linear-gradient(180deg,
rgba(201,147,46,.24) 0%,
rgba(160,100,20,.13) 50%,
rgba(80,48,8,.05) 100%
);
box-shadow:
inset 0 3px 8px rgba(0,0,0,.55),
inset 0 -1px 4px rgba(255,255,255,.06),
0 0 20px rgba(232,182,76,.22);
}
/* Striscia luminosa dorata sul tab attivo */
.tab:not(.tab-main).active::before {
content: '';
position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
box-shadow: 0 0 10px rgba(232,182,76,.95), 0 0 4px rgba(232,182,76,.6);
border-radius: 0 0 2px 2px; z-index: 2;
}
/* Contenuto tab sopra all'alcova — escluso il badge che ha position: absolute proprio */
.tab:not(.tab-main) > *:not(.tab-badge) { position: relative; z-index: 1; }
/* ── Tab centrale ⚔️: medaglione di legno rialzato ── */
.tab.tab-main {
transform: translateY(-18px);
z-index: 3;
will-change: transform;
}
/* Medaglione: stesso legno dell'header, leggermente più chiaro */
.tab.tab-main::before {
content: '';
position: absolute; inset: -12px -8px -2px;
border-radius: 50% 50% 16px 16px;
background:
radial-gradient(ellipse 70% 60% at 50% 40%, rgba(200,130,30,.22) 0%, transparent 70%),
repeating-linear-gradient(180deg,
transparent 0px, transparent 4px,
rgba(0,0,0,.04) 4px, rgba(0,0,0,.04) 5px,
transparent 5px, transparent 9px,
rgba(255,210,80,.022) 9px, rgba(255,210,80,.022) 10px
),
linear-gradient(180deg,
#4a2c10 0%, #7a4a20 15%, #a8622a 30%, #bc7232 48%,
#aa6828 62%, #8c5020 78%, #6a3c16 90%, #3e2008 100%
);
border: 2px solid rgba(140,90,20,.8);
box-shadow:
0 -8px 22px rgba(0,0,0,.85),
0 -2px 8px rgba(0,0,0,.6),
inset 0 -4px 12px rgba(0,0,0,.65),
inset 0 2px 5px rgba(255,200,80,.12);
z-index: -1;
}
.tab.tab-main.active::before {
border-color: var(--gold-bright);
box-shadow:
0 -8px 28px rgba(232,182,76,.42),
0 -2px 12px rgba(232,182,76,.28),
0 0 38px rgba(232,182,76,.18),
inset 0 -4px 12px rgba(0,0,0,.55),
inset 0 2px 5px rgba(255,220,80,.20);
}
.tab.tab-main.active {
filter: drop-shadow(0 -8px 16px rgba(232,182,76,.65));
}
.tab.tab-main::after { display: none; }
/* ── Tab content animations ── */
@keyframes tab-content-in {
from { opacity: 0; transform: translateY(12px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tab-slide-from-right {
from { opacity: 0; transform: translateX(48px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes tab-slide-from-left {
from { opacity: 0; transform: translateX(-48px); }
to { opacity: 1; transform: translateX(0); }
}
#tab-content.tab-in { animation: tab-content-in .22s cubic-bezier(.2,.8,.4,1) both; }
#tab-content.tab-slide-left { animation: tab-slide-from-right .22s cubic-bezier(.2,.8,.4,1) both; }
#tab-content.tab-slide-right { animation: tab-slide-from-left .22s cubic-bezier(.2,.8,.4,1) both; }
.tab img.tab-icon {
width: 34px; height: 34px; object-fit: contain;
filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.tab.tab-main img.tab-icon { width: 44px; height: 44px; }
/* ── Icone risorse HUD — dimensione uniforme per emoji e immagini ── */
.res-ico {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
font-size: 1.05rem;
text-align: center;
vertical-align: middle;
flex-shrink: 0;
}
.res img.res-icon {
width: 22px;
height: 22px;
object-fit: contain;
vertical-align: middle;
display: block;
}
img.fiche-inline {
width: 18px;
height: 18px;
object-fit: contain;
vertical-align: middle;
display: inline-block;
}
/* ── Avatar full-body: leggera levitazione ── */
.hero-fullbody { animation: heroFloat 4.5s ease-in-out infinite; }
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
/* ── Icone di gioco in legno (dai fogli generati con l'IA) ── */
.act-icon-holder { font-size: 1.6rem; min-height: 46px; display: flex; align-items: center; justify-content: center; }
.act-icon { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.btn-plaque {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 4px 0 !important;
animation: none;
}
.btn-plaque .plaque-img {
width: min(78%, 300px);
display: block; margin: 0 auto;
filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
transition: transform .1s;
}
.btn-plaque:active .plaque-img { transform: scale(.96); }
.btn-plaque .plaque-caption {
font-family: 'Cinzel', serif; font-weight: 700; font-size: .8rem;
color: var(--gold-bright); margin-top: 4px; letter-spacing: 1px;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#tab-content .btn-plaque .plaque-caption { color: var(--gold-bright); }
.btn-plaque-small {
background: none !important; border: none !important;
box-shadow: none !important; padding: 0 !important;
}
.btn-plaque-small .plaque-img-small {
width: 92px; display: block;
filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
transition: transform .1s;
}
.btn-plaque-small:active .plaque-img-small { transform: scale(.94); }
.btn-plaque-small:disabled .plaque-img-small { filter: grayscale(1) opacity(.5); }
/* ═══════════ BESTIARIO ═══════════ */
.coll-switch { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; }
.coll-btn {
flex: 1; flex-shrink: 0; min-width: 72px; padding: 10px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
font-family: 'Cinzel', serif; font-weight: 700; font-size: .85rem;
border: 2px solid var(--leather); border-radius: 10px;
background: rgba(0,0,0,.25); color: #c9b48f; cursor: pointer;
}
.coll-btn-emoji { font-size: 1.8rem; }
.coll-btn.active {
background: linear-gradient(180deg, var(--gold-bright), #b57f1e);
color: #2a1d08; border-color: #7a5a1a;
box-shadow: 0 0 10px rgba(232,182,76,.4);
}
.bestiary-progress { margin-bottom: 14px; }
.bestiary-prog-bar {
height: 6px; border-radius: 3px; background: rgba(201,147,46,.15); overflow: hidden; margin-bottom: 4px;
}
.bestiary-prog-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-bright));
transition: width .6s ease;
}
.bestiary-prog-label { text-align: center; font-weight: 700; color: var(--gold-bright); font-size: .9rem; }
.bestiary-zone-header {
display: flex; justify-content: space-between; align-items: center;
font-family: 'Cinzel', serif; font-size: .95rem;
color: var(--gold-bright); margin: 14px 0 8px;
text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.bestiary-zone-count { font-family: inherit; }
.bestiary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.beast {
border: 2px solid var(--leather); border-radius: 12px;
padding: 8px 6px 10px; text-align: center;
background: linear-gradient(160deg, var(--parchment), var(--parchment-dark));
box-shadow: 0 3px 10px rgba(0,0,0,.4);
display: flex; flex-direction: column; align-items: center; gap: 3px;
position: relative; overflow: hidden; cursor: pointer;
transition: transform .15s, box-shadow .15s;
}
.beast:active { transform: scale(.96); }
.beast.known { border-color: rgba(201,147,46,.7); }
.beast.known::after {
content: '✓'; position: absolute; top: 4px; right: 5px;
font-size: .55rem; font-weight: 700; background: rgba(46,139,87,.8); color: #9af0b8;
border-radius: 50%; width: 14px; height: 14px; line-height: 14px; text-align: center;
}
.beast.boss { border-color: var(--danger); box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 10px rgba(163,51,39,.3); }
.beast.boss.known { border-color: var(--gold); box-shadow: 0 3px 10px rgba(0,0,0,.5), 0 0 12px rgba(200,150,40,.3); }
.beast.boss.known::after { background: rgba(180,130,20,.8); color: var(--gold-bright); }
.beast-img-wrap { height: 90px; display: flex; align-items: flex-end; justify-content: center; }
.beast-img { max-height: 90px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
.beast-silhouette { filter: brightness(0) opacity(.35) !important; }
.beast.known .beast-img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.beast-emoji { font-size: 2.8rem; }
.beast.unknown .beast-emoji { filter: grayscale(1) opacity(.4); }
.beast-name { font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 700; line-height: 1.2; }
.beast-weak-inline { color: var(--ink-light); font-size: .66rem; }
.beast-boss-tag { margin-top: 2px; }
.beast-weak { color: var(--ink-light); font-size: .72rem; }
.tag-boss { background: var(--danger); }
/* Beast detail modal */
.beast-detail { text-align: center; padding: 4px 0; }
.bd-fig { min-height: 160px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; }
.bd-img { max-height: 160px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.bd-unknown { filter: brightness(0) opacity(.3); }
.bd-emoji { font-size: 5rem; line-height: 1; }
.bd-boss-tag { margin-bottom: 4px; }
.bd-name { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 900; margin: 6px 0 2px; }
.bd-zone { margin-bottom: 10px; }
.bd-weak {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(201,147,46,.12); border: 1px solid rgba(201,147,46,.35);
border-radius: 20px; padding: 4px 14px; margin: 6px 0;
}
.bd-weak-label { font-size: .72rem; color: var(--ink-light); }
.bd-lore { color: var(--ink); font-weight: 500; line-height: 1.5; margin: 10px 0 14px; text-align: left; }
.bd-locked { margin: 14px 0; }
/* Avvistamento nel report */
.sighting {
display: flex; align-items: center; gap: 12px;
background: rgba(106,79,201,.12);
border: 2px solid var(--magic); border-radius: 12px;
padding: 8px 12px; margin: 10px 0;
animation: cardIn .5s ease;
text-align: left;
}
.sighting.boss-defeated { border-color: var(--danger); background: rgba(163,51,39,.1); }
.sighting-img { height: 74px; max-width: 84px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
/* ── Etichetta versione ── */
.version-tag { font-size: .72rem; color: var(--ink-light); opacity: .7; margin-top: auto; }
/* ═══════════ v2.0: Mercato, Slot, Scrigni, Storie ═══════════ */
/* ── Cancellazione profili ── */
.btn-delete {
background: none; border: none; font-size: 1.2rem; cursor: pointer;
padding: 8px; opacity: .7; flex-shrink: 0;
}
.btn-danger {
background: linear-gradient(180deg, #c9524a, var(--danger)) !important;
border-color: #6b1f16 !important; color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* ── Avatar grandi nella creazione ── */
.avatar-choice-big {
width: 110px; height: 110px; border-radius: 16px;
object-fit: contain; background: #fff8ec;
padding: 6px;
}
/* ── Niente rimbalzo: eroe fermo e fiero ── */
.hero-fullbody { animation: none; }
/* ── Bioma banner e atlante ── */
.biome-banner {
text-align: center; padding: 12px;
background: linear-gradient(160deg, rgba(232,182,76,.25), rgba(90,61,36,.35));
border: 2px solid var(--gold); border-radius: 12px;
color: #f4e7cd; margin-bottom: 14px;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.biome-row {
padding: 6px 8px; border-bottom: 1px dashed rgba(90,61,36,.3);
font-size: .92rem;
}
.biome-row.locked { opacity: .5; }
.biome-row.current {
background: rgba(232,182,76,.25); border-radius: 8px;
border: 1px solid var(--gold);
}
/* ── Incursione ── */
.incursion-panel {
border-color: var(--danger);
box-shadow: 0 0 16px rgba(163,51,39,.5);
animation: incPulse 2s ease-in-out infinite;
}
@keyframes incPulse {
0%, 100% { box-shadow: 0 0 10px rgba(163,51,39,.4); }
50% { box-shadow: 0 0 22px rgba(163,51,39,.75); }
}
.incursion-img { max-height: 90px; align-self: center; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.membar-fill.danger { background: linear-gradient(90deg, var(--danger), #d9764a); }
.lost-chest {
font-size: 3.5rem; text-align: center;
animation: fadeChest 2.5s ease-in-out infinite;
filter: grayscale(.7);
}
@keyframes fadeChest {
0%, 100% { opacity: .9; transform: scale(1); }
50% { opacity: .25; transform: scale(.92); }
}
/* ── Mappa del Tesoro (tappa a tappe) ── */
.treasure-map-panel { overflow: hidden; }
.tm-track {
display: flex; align-items: center;
padding: 10px 4px 6px; gap: 0;
}
.tm-medal-wrap {
position: relative; flex-shrink: 0;
width: 58px; display: flex; justify-content: center;
}
.tm-medal {
width: 52px; height: 52px; border-radius: 50%;
border: 3px solid var(--leather);
overflow: hidden; background: rgba(0,0,0,.25);
display: flex; align-items: center; justify-content: center;
transition: box-shadow .2s;
}
.tm-medal.done { border-color: var(--gold); box-shadow: 0 0 10px rgba(201,147,46,.5); }
.tm-medal.claimed{ border-color: var(--gold-bright); box-shadow: 0 0 6px rgba(232,182,76,.3); filter: brightness(.8); }
.tm-medal.locked { filter: grayscale(.7) brightness(.6); }
.tm-medal img { width: 100%; height: 100%; object-fit: cover; }
.tm-badge {
position: absolute; top: -4px; right: 2px;
width: 18px; height: 18px; border-radius: 50%;
font-size: .65rem; font-weight: 900; line-height: 18px;
text-align: center; border: 2px solid var(--bg);
}
.tm-badge.ready { background: var(--gold); color: #1c1209; }
.tm-badge.claimed { background: #6fcf97; color: #0e2218; }
.tm-segment {
flex: 1; height: 8px; position: relative;
overflow: visible;
}
.tm-segment img {
position: absolute; inset: -6px 0; width: 100%; height: 20px;
object-fit: cover; object-position: center;
opacity: .7;
}
.tm-flag {
position: absolute; top: -14px;
transform: translateX(-50%);
font-size: 1.1rem; line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.tm-labels {
display: flex; justify-content: space-between;
padding: 2px 4px 6px;
}
.tm-label {
width: 58px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tm-reward {
font-size: .72rem; color: var(--ink-light);
white-space: nowrap;
}
.tm-reward.ready { color: var(--gold-bright); font-weight: 700; }
.tm-km-label { font-size: .72rem; color: var(--ink-light); opacity: .7; }
.tm-claimed-label { font-size: .72rem; color: #6fcf97; }
.tm-claim-btn {
font-size: .7rem; padding: 3px 7px; border-radius: 6px;
background: var(--gold); color: #1c1209;
border: none; cursor: pointer; font-weight: 700;
white-space: nowrap;
}
.tm-claim-btn.reveal-active { background: var(--magic); color: #fff; }
.tm-progress-label {
font-size: .76rem; color: var(--ink-light); opacity: .75;
text-align: center; padding-bottom: 6px;
}
/* ── Tesoro giornaliero ── */
.streak-row { display: flex; gap: 6px; justify-content: center; margin: 10px 0; }
.streak-day {
width: 36px; height: 36px; border-radius: 8px;
border: 2px solid var(--leather);
display: flex; align-items: center; justify-content: center;
font-weight: 700; background: rgba(0,0,0,.15); color: var(--ink-light);
}
.streak-day.filled {
background: linear-gradient(180deg, var(--gold-bright), var(--gold));
color: #2a1d08; box-shadow: 0 0 8px rgba(232,182,76,.5);
}
.streak-day.special { border-color: var(--magic); }
/* ── Scrigno ── */
.chest-zone { text-align: center; margin: 14px 0; }
.chest-btn {
width: 5rem; height: 5rem; background: none; border: none; cursor: pointer; padding: 0;
filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
animation: chestBounce 1.6s ease-in-out infinite;
display: inline-block;
}
.chest-btn img { width: 100%; height: 100%; display: block; }
@keyframes chestBounce {
0%, 100% { transform: translateY(0) rotate(0); }
25% { transform: translateY(-4px) rotate(-3deg); }
75% { transform: translateY(-4px) rotate(3deg); }
}
.chest-btn.opening { animation: chestShake .9s ease-in-out; }
@keyframes chestShake {
0%, 100% { transform: rotate(0) scale(1); }
20% { transform: rotate(-8deg) scale(1.05); }
40% { transform: rotate(8deg) scale(1.1); }
60% { transform: rotate(-10deg) scale(1.15); }
80% { transform: rotate(10deg) scale(1.25); }
}
.chest-burst {
font-size: 3rem; text-align: center;
animation: burst .8s ease-out;
}
@keyframes burst {
from { transform: scale(.3); opacity: 0; }
60% { transform: scale(1.6); opacity: 1; }
to { transform: scale(1); }
}
/* ── Loot con descrizione ── */
.loot { display: flex; flex-direction: column; gap: 3px; }
.loot-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.loot.rar-non_comune {
border-left-color: #4a9948;
box-shadow: 0 2px 10px rgba(0,0,0,.35), -2px 0 12px rgba(74,153,72,.3), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(90,61,36,.15);
}
.loot.rar-divino {
border-left-color: #e8d44c;
background: linear-gradient(160deg, rgba(255,245,150,.25) 0%, rgba(232,212,76,.12) 100%), linear-gradient(160deg, #d4c870, #b8a840);
box-shadow: 0 3px 14px rgba(0,0,0,.4), -2px 0 20px rgba(232,212,76,.45), inset 0 1px 0 rgba(255,255,200,.65), inset 0 -1px 0 rgba(120,100,10,.25);
}
.loot.rar-oscuro {
border-left-color: #7a1fa0;
background: linear-gradient(160deg, rgba(180,80,255,.14) 0%, rgba(60,10,80,.1) 100%), linear-gradient(160deg, #b08890, #907080);
box-shadow: 0 3px 14px rgba(0,0,0,.4), -2px 0 18px rgba(122,31,160,.5), inset 0 1px 0 rgba(200,150,255,.35), inset 0 -1px 0 rgba(60,10,80,.25);
}
.loot.pickable { cursor: pointer; }
.loot.pickable:active { transform: scale(.975) translateX(3px); }
.loot.equipped {
outline: 2px solid var(--gold-bright);
outline-offset: -2px;
box-shadow: 0 0 14px rgba(232,182,76,.5), inset 0 1px 0 rgba(255,240,150,.55);
}
/* ── Mercato ── */
.mount-row {
display: flex; align-items: center; gap: 10px;
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
linear-gradient(160deg, var(--parchment), var(--parchment-dark));
border: 2px solid var(--leather); border-radius: 12px;
padding: 10px 12px; margin-bottom: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.mount-row.locked { opacity: .55; }
.mount-row.active-mount { border-color: var(--gold); box-shadow: 0 0 12px rgba(232,182,76,.4); }
.mount-emoji { font-size: 2rem; width: 44px; text-align: center; }
.mount-mid { flex: 1; min-width: 0; }
/* ── Eroe: slot equipaggiamento ── */
/* ── Hero banner ── */
.hero-banner {
border-radius: 16px; padding: 14px 16px 12px;
margin-bottom: 8px; border: 1px solid rgba(201,147,46,.35);
display: flex; align-items: center; gap: 14px;
}
.hero-banner-avatar {
width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;
object-fit: cover; object-position: center top;
border: 2px solid var(--hb-accent, var(--gold));
box-shadow: 0 0 12px var(--hb-accent, rgba(200,150,46,.4));
overflow: hidden; background: rgba(0,0,0,.2);
}
.hero-banner-avatar img, .hero-banner-avatar div {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.hero-banner-info { flex: 1; min-width: 0; }
.hero-banner-name {
font-family: 'Uncial Antiqua', 'Cinzel', serif; font-size: 1.05rem;
color: var(--hb-accent, var(--gold-bright)); letter-spacing: .5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-banner-class {
font-family: 'Cinzel', serif; font-size: .68rem; opacity: .75;
letter-spacing: .06em; margin-bottom: 3px;
}
.hero-banner-level { font-size: .78rem; color: var(--ink-light); }
/* ── Hero banner avatar sizing ── */
.hero-banner-av-img { width: 64px; height: 64px; object-fit: cover; object-position: center top; border-radius: 10px; }
.hero-banner-av-emoji { width: 64px; height: 64px; font-size: 2.4rem; display: flex; align-items: center; justify-content: center; }
.hero-banner .hero-settings-btn { margin-left: auto; align-self: flex-start; }
/* ── Item preview modal ── */
.item-preview-val {
font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--gold-bright);
text-align: center; margin: 6px 0 12px;
}
.item-preview-warn { color: var(--danger); font-weight: 700; }
.hero-rig {
display: flex; align-items: center; justify-content: center;
gap: 8px; margin: 10px 0 4px;
}
.slot-col { display: flex; flex-direction: column; gap: 12px; }
.hero-center { flex: 1; display: flex; justify-content: center; align-items: flex-end; }
.hero-bottom-slots {
display: flex; justify-content: center; gap: 16px;
margin: 0 0 10px;
}
.equip-slot {
width: 64px; height: 64px; border-radius: 12px;
border: 2px solid var(--leather);
background: rgba(0,0,0,.25);
display: flex; flex-direction: column; align-items: center; justify-content: center;
cursor: pointer; gap: 1px;
box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
}
.bg-parchment .equip-slot { background: rgba(90,61,36,.2); }
.equip-slot .equip-icon { font-size: 1.5rem; }
.equip-slot .equip-icon.empty { opacity: .45; filter: grayscale(1); }
.equip-slot .equip-label { font-size: .58rem; font-weight: 700; color: #c9b48f; }
.bg-parchment .equip-slot .equip-label { color: var(--ink-light); }
.equip-slot.filled { background: rgba(232,182,76,.2); }
.rar-border-comune { border-color: var(--rar-comune) !important; }
.rar-border-non_comune { border-color: #4a9948 !important; }
.rar-border-raro { border-color: var(--rar-raro) !important; box-shadow: 0 0 8px rgba(46,111,176,.5); }
.rar-border-epico { border-color: var(--rar-epico) !important; box-shadow: 0 0 8px rgba(123,63,191,.5); }
.rar-border-leggendario { border-color: var(--rar-leggendario) !important; box-shadow: 0 0 10px rgba(217,130,43,.6); }
.rar-border-divino { border-color: #e8d44c !important; box-shadow: 0 0 12px rgba(232,212,76,.7); }
.rar-border-oscuro { border-color: #7a1fa0 !important; box-shadow: 0 0 12px rgba(122,31,160,.7); }
.equip-total { color: #c9b48f; }
.bg-parchment .equip-total { color: var(--ink-light); }
.hero-submenu { display: flex; gap: 8px; margin: 12px 0; }
.hero-submenu .btn { flex: 1; font-size: .78rem; padding: 10px 4px; }
/* ── Storia ── */
.story-panel { align-items: center; }
.story-avatar {
width: 130px; height: 130px; object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.story-text {
font-size: 1.02rem; line-height: 1.65; text-align: justify;
font-style: italic; font-weight: 500; color: var(--ink);
}
.story-text::first-letter {
font-family: 'Uncial Antiqua', serif;
font-size: 2.2rem; float: left; line-height: 1;
padding: 2px 6px 0 0; color: var(--leather);
}
/* ── Selezione avatar a 6 con etichette ── */
.avatar-box {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px; border-radius: 14px; cursor: pointer;
border: 2px solid transparent;
}
.avatar-box.selected {
border-color: var(--gold);
background: rgba(232,182,76,.2);
box-shadow: 0 0 12px rgba(232,182,76,.4);
}
.avatar-box .avatar-choice-big { width: 92px; height: 92px; border: none; box-shadow: none; background: none; }
.avatar-label {
font-family: 'Cinzel', serif; font-weight: 700; font-size: .68rem;
color: var(--leather);
}
/* ── NPC del Mercato ── */
/* Filtri rarità — Contrabbando */
.nero-filters {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.nero-chip {
font-size: .72rem; padding: 4px 10px; border-radius: 20px;
border: 1px solid var(--leather); background: var(--parchment-dark);
color: var(--ink-light); cursor: pointer; transition: background .15s, color .15s;
}
.nero-chip.active {
background: var(--gold); color: #1a0d00; border-color: var(--gold);
font-weight: 700;
}
.npc-banner {
display: flex; align-items: center; gap: 12px;
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
linear-gradient(160deg, var(--parchment), var(--parchment-dark));
border: 2px solid var(--leather); border-radius: 12px;
padding: 10px 12px; margin-bottom: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.npc-img { height: 140px; width: auto; max-width: 130px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.npc-banner-lg .npc-img { height: 150px; max-width: 140px; }
.npc-quote { flex: 1; font-style: italic; font-weight: 500; color: var(--ink); }
/* ── Talenti di classe ── */
.avatar-talent {
font-size: .62rem; color: var(--ink-light);
text-align: center; max-width: 120px; line-height: 1.3;
}
.talent-line { color: #c9b48f; }
.bg-parchment .talent-line { color: var(--ink-light); }
.talent-box {
margin-top: 12px; padding: 10px 14px; text-align: center;
border: 2px solid var(--gold); border-radius: 12px;
background: rgba(232,182,76,.18);
font-family: 'Cinzel', serif;
}
/* ── Creazione eroe — Card Cinematografica ── */
.create-cinematic {
display: flex; flex-direction: column;
min-height: 100dvh; background: #060402; overflow: hidden;
padding-top: env(safe-area-inset-top, 0px);
}
.create-topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px 8px;
border-bottom: 1px solid rgba(232,182,76,.15);
}
.create-back-pill, .hero-back-pill {
font-family: 'Cinzel', serif; font-size: .76rem; font-weight: 700;
color: #e8c97c; letter-spacing: .05em;
background: rgba(232,182,76,.15); border: 1px solid rgba(232,182,76,.5);
border-radius: 20px; padding: 6px 14px;
cursor: pointer; transition: background .15s;
}
.create-back-pill:active, .hero-back-pill:active { background: rgba(232,182,76,.28); }
.hero-back-pill { margin-bottom: 12px; display: inline-block; }
.create-ornament {
display: flex; align-items: center; gap: 0;
width: 90px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(232,182,76,.45) 30%, rgba(232,182,76,.45) 70%, transparent);
position: relative;
}
.create-ornament::before {
content: '◆';
position: absolute; left: 50%; transform: translateX(-50%);
font-size: .45rem; color: rgba(232,182,76,.55);
line-height: 1; top: 50%; margin-top: -.45em;
}
.create-topbar-spacer { width: 72px; }
.create-card-zone {
position: relative; flex: 1; min-height: 0;
max-height: 54vh;
display: flex; align-items: center; justify-content: center;
transition: background 0.5s ease;
overflow: hidden;
}
.create-card-zone::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 55%, #060402 100%);
pointer-events: none;
}
.create-portrait {
position: absolute; inset: 0;
display: flex; align-items: flex-end; justify-content: center;
overflow: hidden;
transition: opacity 0.15s ease;
}
@keyframes portrait-shimmer {
0%, 100% { filter: drop-shadow(0 8px 28px rgba(0,0,0,.7)); }
50% { filter: drop-shadow(0 8px 28px rgba(0,0,0,.6))
drop-shadow(0 0 22px var(--portrait-glow, #c9932e)); }
}
.create-portrait-img {
max-height: min(100%, 340px); max-width: 100%;
object-fit: contain; object-position: bottom center;
display: block; user-select: none; pointer-events: none;
animation: portrait-shimmer 3.5s ease-in-out infinite;
}
.create-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15);
color: #e8c97c; font-size: 2rem; line-height: 1;
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; cursor: pointer; z-index: 10;
transition: background .2s;
}
.create-arrow:active { background: rgba(232,182,76,.3); }
.create-arrow-l { left: 12px; }
.create-arrow-r { right: 12px; }
.create-info {
padding: 0 20px 8px; text-align: center; position: relative; z-index: 2;
}
.create-class-name {
font-family: 'Cinzel', serif; font-weight: 900;
font-size: 1.55rem; color: #e8c97c; letter-spacing: .04em;
text-shadow: 0 2px 12px rgba(0,0,0,.8);
margin-bottom: 6px;
}
.create-lore {
font-family: 'Crimson Pro', serif; font-style: italic;
font-size: .88rem; color: rgba(255,255,255,.5);
text-align: center; line-height: 1.4;
margin-bottom: 6px; min-height: 1.2em;
}
.create-counter {
font-family: 'Cinzel', serif; font-size: .68rem; font-weight: 700;
color: rgba(232,182,76,.5); letter-spacing: .12em;
text-align: center; margin-bottom: 8px;
}
.create-talent-box {
display: flex; flex-direction: column; gap: 2px;
background: rgba(0,0,0,.4); border: 1px solid rgba(232,182,76,.3);
border-radius: 10px; padding: 8px 14px;
}
.create-talent-tag {
font-family: 'Cinzel', serif; font-size: .78rem; font-weight: 700;
color: #e8c97c;
}
.create-talent-text {
font-family: 'Crimson Pro', serif; font-size: .9rem;
color: rgba(255,255,255,.75); line-height: 1.4;
}
.create-form {
padding: 12px 20px max(env(safe-area-inset-bottom, 0px), 16px);
display: flex; flex-direction: column; gap: 10px;
background: linear-gradient(to top, #060402 80%, transparent);
position: relative; z-index: 2;
}
.create-input-label {
font-family: 'Cinzel', serif; font-size: .78rem; color: rgba(255,255,255,.5);
letter-spacing: .06em; text-transform: uppercase;
}
.create-name-input {
width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 1.05rem;
background: rgba(255,255,255,.07); border: 1.5px solid rgba(232,182,76,.35);
color: #f0e6c8; font-family: 'Crimson Pro', serif;
outline: none; box-sizing: border-box;
transition: border-color .2s;
}
.create-name-input::placeholder { color: rgba(255,255,255,.3); }
.create-name-input:focus { border-color: #e8c97c; background: rgba(255,255,255,.1); }
.create-name-error {
font-family: 'Crimson Pro', serif; font-size: .88rem;
color: #e05050; min-height: 0;
opacity: 0; transform: translateY(-4px);
transition: opacity .2s, transform .2s;
padding: 0 4px; margin-top: -4px;
}
.create-name-error.visible { opacity: 1; transform: translateY(0); }
.tag-distilled { background: #2e7d32; }
/* ═══════════ v2.4: loot, cavalcature, mappa, rifiniture ═══════════ */
/* ── Icone loot ── */
.item-icon { width: 34px; height: 34px; object-fit: contain; vertical-align: -10px; border-radius: 6px; }
.item-icon-big { width: 58px; height: 58px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
.loot-with-img { flex-direction: row !important; align-items: center; gap: 10px; }
.loot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* ── Popup risorse ── */
.res { cursor: pointer; }
.res-detail {
display: flex; align-items: center; gap: 12px;
padding: 10px 6px; border-bottom: 1px dashed rgba(90,61,36,.35);
}
.res-detail > div { flex: 1; }
.res-detail-icon { font-size: 1.8rem; }
.res-detail-qty { font-size: 1.3rem; color: var(--leather); }
/* ── Scheda Eroe: pergamena allineata al titolo, eroe più grande ── */
#tab-content.bg-parchment {
background-position: center -52px;
background-size: 100% auto;
padding-top: 6px;
}
.bg-parchment .hero-rig { margin-top: 0; }
/* ── Slot equipaggiamento: neri e ben visibili ── */
.equip-slot {
width: 68px; height: 68px;
border: 3px solid #1c1209;
background: rgba(20, 12, 5, .82);
box-shadow: inset 0 2px 8px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
}
.bg-parchment .equip-slot {
background: rgba(20, 12, 5, .82);
border-color: #1c1209;
}
.equip-slot .equip-icon { font-size: 1.6rem; }
.equip-slot .equip-icon.empty { opacity: .9; filter: none; }
.equip-slot .equip-label {
font-size: .6rem; font-weight: 800; letter-spacing: .3px;
color: #f4e7cd; text-shadow: 0 1px 2px #000;
}
.bg-parchment .equip-slot .equip-label { color: #f4e7cd; }
.equip-img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; }
.equip-icon-img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.equip-icon-img.empty { opacity: .55; filter: grayscale(.6); }
.bg-parchment .hero-name-plate, .bg-parchment .hero-title-plate { text-shadow: 0 1px 0 rgba(255,255,255,.55); }
/* ── Mappa v2 ── */
.biome-hero {
text-align: center; padding: 16px 14px 12px;
background:
radial-gradient(ellipse at 50% 0%, rgba(232,182,76,.3), transparent 70%),
linear-gradient(170deg, rgba(59,42,26,.9), rgba(28,18,9,.9));
border: 2px solid var(--gold); border-radius: 14px;
color: #f4e7cd; margin-bottom: 14px;
box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 20px rgba(232,182,76,.15);
}
.biome-hero-icon { font-size: 3rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.biome-hero-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.25rem; color: var(--gold-bright); }
.biome-hero-lv { color: #c9b48f; margin-bottom: 8px; }
.membar.slim { height: 16px; }
.membar.slim span { line-height: 14px; font-size: .74rem; font-weight: 700; }
.done-strip { text-align: center; padding: 10px; }
.mission-zone-icon { font-size: 1.4rem; }
.biome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.biome-cell {
text-align: center; padding: 8px 2px;
background: rgba(255,255,255,.35);
border: 1px solid rgba(90,61,36,.45); border-radius: 10px;
}
.biome-cell.locked { opacity: .45; filter: grayscale(.6); }
.biome-cell.current {
border: 2px solid var(--gold);
background: rgba(232,182,76,.3);
box-shadow: 0 0 8px rgba(201,147,46,.5);
}
.biome-cell-icon { font-size: 1.5rem; }
.biome-cell-name { font-size: .58rem; font-weight: 700; line-height: 1.15; min-height: 2.1em; }
.biome-cell-lv { font-size: .6rem; color: var(--ink-light); }
/* ── Stalla v2: griglia con miniature sempre visibili ── */
.mount-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mount-card {
text-align: center; padding: 10px 6px; cursor: pointer;
background:
radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.4), transparent 65%),
linear-gradient(160deg, var(--parchment), var(--parchment-dark));
border: 2px solid var(--leather); border-radius: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,.4);
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mount-card:active { transform: scale(.97); }
.mount-card.locked .mount-thumb { filter: grayscale(.85) brightness(.75); }
.mount-card.locked { opacity: .85; }
.mount-card.active-mount { border-color: var(--gold); box-shadow: 0 0 14px rgba(232,182,76,.5); }
.mount-thumb { height: 120px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.mount-emoji-big { font-size: 3.5rem; }
.mount-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .78rem; line-height: 1.2; }
.mount-req { color: var(--ink-light); }
.mount-sheet { display: flex; flex-direction: column; gap: 8px; }
.mount-sheet-img {
max-height: 240px; object-fit: contain; align-self: center;
filter: drop-shadow(0 8px 14px rgba(0,0,0,.4));
}
.mount-locked-img { filter: grayscale(.85) brightness(.75) drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mount-bio {
font-style: italic; font-weight: 500; line-height: 1.6; text-align: justify;
background: rgba(90,61,36,.1);
border-left: 4px solid var(--gold);
border-radius: 8px; padding: 10px 12px;
font-size: .95rem;
}
/* ═══════════ v2.6: Scheda Eroe potenziata ═══════════ */
.hero-rig { position: relative; margin: 6px 0 0; }
.slot-col { z-index: 2; }
.hero-title-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hero-settings-btn {
background: none; border: none; cursor: pointer;
font-size: 1.1rem; line-height: 1; padding: 2px 4px;
opacity: .75; transition: opacity .15s, transform .15s;
flex-shrink: 0;
}
.hero-settings-btn:hover, .hero-settings-btn:active { opacity: 1; transform: rotate(45deg); }
/* Titolo "Scheda dell'Eroe" su banda scura, sempre leggibile */
.bg-parchment .section-title.on-parchment-title,
#tab-content .section-title.on-parchment-title {
color: var(--gold-bright);
background: linear-gradient(90deg, transparent, rgba(20,12,5,.75) 18%, rgba(20,12,5,.75) 82%, transparent);
border: none;
border-radius: 12px;
padding: 8px 6px;
text-shadow: 0 2px 4px #000, 0 0 10px rgba(0,0,0,.9);
}
/* Scritte sotto l'eroe: grassetto e contrasto forte */
.hero-name-plate {
font-weight: 800;
font-size: 1.5rem;
color: #1c1209;
text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 10px rgba(255,248,230,.7);
}
.hero-title-plate, .bg-parchment .hero-title-plate {
font-weight: 700;
font-style: normal;
color: #2a1d08;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.equip-total, .bg-parchment .equip-total {
font-weight: 700;
color: #2a1d08;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.talent-line, .bg-parchment .talent-line {
font-weight: 700;
color: #2a1d08;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
#tab-content:not(.bg-parchment) .hero-name-plate { color: #f4e7cd; text-shadow: 0 1px 3px #000; }
#tab-content:not(.bg-parchment) .hero-title-plate,
#tab-content:not(.bg-parchment) .equip-total,
#tab-content:not(.bg-parchment) .talent-line { color: #e8dcc0; text-shadow: 0 1px 3px #000; }
/* Righe sotto l'eroe: chip scuri, testo chiaro sempre leggibile */
.bg-parchment .hero-name-plate,
#tab-content .hero-name-plate {
color: #f4e7cd;
background: linear-gradient(90deg, transparent, rgba(20,12,5,.78) 15%, rgba(20,12,5,.78) 85%, transparent);
border-radius: 10px;
padding: 4px 14px;
text-shadow: 0 2px 4px #000;
display: block;
}
.bg-parchment .hero-title-plate, #tab-content .hero-title-plate,
.bg-parchment .equip-total, #tab-content .equip-total,
.bg-parchment .talent-line, #tab-content .talent-line {
color: #f4e7cd !important;
background: linear-gradient(90deg, transparent, rgba(20,12,5,.68) 12%, rgba(20,12,5,.68) 88%, transparent);
border-radius: 8px;
padding: 3px 12px;
margin: 3px 0;
text-shadow: 0 1px 3px #000;
display: block;
}
.hero-title-plate b, .equip-total b, .talent-line b { color: var(--gold-bright); }
/* ═══════════ v2.7: UX & FOMO ═══════════ */
/* Badge rossi sulla tab bar */
.tab { position: relative; }
.tab-badge {
position: absolute; top: -5px; right: 16%;
width: 12px; height: 12px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ff7a6e, #c62828);
border: 2px solid #241809;
animation: badgePulse 1.6s ease-in-out infinite;
z-index: 4;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); box-shadow: 0 0 8px rgba(230,60,50,.8); }
}
/* Prossimo sblocco nell'header */
.hud-next {
font-size: .68rem; color: #c9b48f; margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 200px;
}
.hud-next b { color: var(--gold-bright); }
.hud-next-in { opacity: .7; }
.hud-next.hot {
color: var(--gold-bright);
animation: hotText 1.2s ease-in-out infinite;
}
@keyframes hotText {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
/* Barra XP "esplosiva" vicino al level-up */
.xpbar.almost {
border-color: var(--gold-bright);
animation: xpAlmost 1.2s ease-in-out infinite;
}
.xpbar.almost .xpbar-fill { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
@keyframes xpAlmost {
0%, 100% { box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 4px rgba(232,182,76,.4); }
50% { box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 14px rgba(232,182,76,.95); }
}
/* Countdown */
.cd-hot { color: var(--danger); }
[data-cd] { font-variant-numeric: tabular-nums; }
/* Occasione della Fucina */
.special-offer {
border: 2px solid var(--danger) !important;
background: rgba(163,51,39,.12) !important;
animation: incPulse 2s ease-in-out infinite;
}
.tag-sale { background: var(--danger); animation: hotText 1.3s ease-in-out infinite; }
/* Riepilogo giornaliero */
.today-row {
display: flex; gap: 10px; align-items: flex-start;
padding: 8px 4px; border-bottom: 1px dashed rgba(90,61,36,.3);
font-size: .98rem;
}
.today-row > div { flex: 1; }
/* Anteprima biomi */
.biome-cell { cursor: pointer; }
.biome-cell:active { transform: scale(.94); }
.preview-beasts {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
margin: 8px 0;
}
.preview-beast {
height: 64px; max-width: 70px; object-fit: contain;
font-size: 2.4rem; display: flex; align-items: center; justify-content: center;
}
.preview-beast.shadow { filter: brightness(0) opacity(.55); }
/* ═══════════ v2.8: L'Arena — Battaglia stile videogioco ═══════════ */
.arena-panel { border-color: var(--danger); }
.arena-tokens {
text-align: center; font-family: 'Cinzel', serif;
color: var(--ink); font-weight: 700; padding: 4px;
}
/* ── Il Covo dell'Orda ── */
/* ── Dungeon Encounter (text-adventure) ── */
.denc-wrap { display:flex; flex-direction:column; gap:10px; padding:2px 0; }
.denc-header { text-align:center; }
.denc-step-badge {
font-family:'Cinzel',serif; font-size:.72rem; font-weight:700;
letter-spacing:.1em; color:rgba(232,182,76,.75);
border:1px solid rgba(232,182,76,.3); border-radius:20px; padding:3px 12px;
}
.denc-step-badge.boss { color:#ff9040; border-color:rgba(255,144,64,.45); background:rgba(255,144,64,.08); }
.denc-enemy-zone { display:flex; flex-direction:column; align-items:center; gap:5px; }
.denc-enemy-img { height:80px; max-width:100%; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.denc-enemy-emoji { font-size:3.5rem; text-align:center; }
.denc-enemy-name { font-family:'Cinzel',serif; font-weight:700; font-size:.92rem; color:var(--gold); }
.denc-weak { font-size:.76rem; color:rgba(59,42,26,.55); }
.denc-hpbar-wrap {
width:100%; height:8px; background:rgba(59,42,26,.12); border-radius:4px; overflow:hidden;
}
.denc-hpfill { height:100%; border-radius:4px; transition:width .45s ease; }
.enemy-fill { background:linear-gradient(90deg,#c93030,#e84545); }
.hero-fill { background:linear-gradient(90deg,#2ea848,#50d468); }
.denc-hp-num { font-size:.73rem; color:rgba(59,42,26,.5); }
.denc-buffs {
font-size:.76rem; color:#7a5a18;
background:rgba(201,147,46,.12); border-radius:8px; padding:5px 10px; text-align:center;
}
.denc-scenario {
font-family:'Crimson Pro',serif; font-size:1.05rem; font-style:italic; font-weight:600;
color:rgba(59,42,26,.88); text-align:center; line-height:1.5;
padding:4px 6px; min-height:2.6em;
}
.denc-result {
display:flex; justify-content:center; gap:18px;
font-family:'Cinzel',serif; font-size:.85rem; font-weight:700; text-align:center;
}
.denc-result.hidden { display:none; }
.denc-hit-text { color:#c93030; }
.denc-dmg-text { color:#8a5c10; }
@keyframes denc-flash { 0%,100%{opacity:0;transform:translateY(4px) scale(.9)} 15%,75%{opacity:1;transform:translateY(0) scale(1)} }
.denc-result.denc-show .denc-hit-text { animation:denc-flash 1.2s ease both; }
.denc-result.denc-show .denc-dmg-text { animation:denc-flash 1.2s ease .1s both; }
.denc-hero-row { display:flex; align-items:center; gap:8px; }
.denc-hero-row .denc-hpbar-wrap { flex:1; }
.denc-hp-label { font-size:.95rem; }
.hero-num { font-size:.73rem; color:rgba(59,42,26,.5); white-space:nowrap; }
.denc-choices { display:flex; flex-direction:column; gap:7px; }
.denc-choice {
display:flex; align-items:center; gap:10px;
width:100%; padding:11px 14px;
background:rgba(59,42,26,.06); border:1px solid rgba(201,147,46,.35);
border-radius:10px; cursor:pointer; text-align:left;
transition:background .15s, border-color .15s;
font-family:'Crimson Pro',serif; font-size:1rem; font-weight:600; color:var(--ink);
}
.denc-choice:hover:not(:disabled) { background:rgba(201,147,46,.14); border-color:rgba(201,147,46,.6); }
.denc-choice:active:not(:disabled) { background:rgba(201,147,46,.22); }
.denc-choice:disabled { opacity:.35; cursor:default; }
.denc-ch-icon { font-size:1.3rem; flex-shrink:0; }
.denc-flee { width:100%; margin-top:2px; font-size:.8rem; opacity:.5; border-color:rgba(59,42,26,.18); }
.dungeon-strip {
margin-top: 10px; padding: 10px 12px;
border: 1px solid var(--leather); border-radius: 10px;
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, rgba(100,50,10,.15), rgba(60,30,5,.08));
gap: 10px;
}
.dungeon-strip.dungeon-done { opacity: .6; }
.dungeon-strip-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.dungeon-strip-icon { font-size: 1.6rem; flex-shrink: 0; }
.dungeon-strip-title { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--gold-bright); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.dungeon-strip-sub { color: var(--ink); font-size: .82rem; line-height: 1.35; }
.dungeon-strip-btn { min-width: 72px; flex-shrink: 0; }
/* Strip personalizzate */
.strip-covo {
border-color: rgba(180,50,50,.45);
background: linear-gradient(135deg, rgba(120,20,10,.2), rgba(70,10,5,.1));
}
.strip-covo .dungeon-strip-title { color: #e87070; }
.strip-covo .dungeon-strip-icon { filter: hue-rotate(180deg) saturate(1.5); }
.strip-scalata {
border-color: rgba(80,150,210,.4);
background: linear-gradient(135deg, rgba(10,50,90,.2), rgba(5,25,55,.1));
}
.strip-scalata .dungeon-strip-title { color: #80c4e8; }
.strip-scalata .dungeon-strip-icon { filter: hue-rotate(120deg) saturate(1.3); }
.dungeon-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dungeon-intro-icon { font-size: 3.5rem; }
.dungeon-intro-rules {
width: 100%; border: 1px solid rgba(201,147,46,.25); border-radius: 10px;
padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
font-size: .85rem; color: var(--ink-light);
}
.dungeon-step { position: relative; }
.dungeon-step-badge {
font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 700;
letter-spacing: .1em; color: var(--gold-bright); text-align: center;
padding: 3px 12px; border-radius: 20px; border: 1px solid rgba(201,147,46,.4);
background: rgba(201,147,46,.1); margin-bottom: 4px;
}
.dungeon-buffs {
width: 100%; background: rgba(0,100,50,.1); border: 1px solid rgba(46,139,87,.3);
border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px;
}
.dungeon-buff-line { font-size: .82rem; color: #6fcf97; }
.dungeon-enemy-img { max-height: 160px; }
.dungeon-choice { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dungeon-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.dungeon-choice-btn {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 14px 8px; border-radius: 12px;
border: 2px solid var(--leather); background: linear-gradient(160deg, var(--parchment), var(--parchment-dark));
cursor: pointer; text-align: center; transition: border-color .15s, transform .1s;
}
.dungeon-choice-btn:active { transform: scale(.96); border-color: var(--gold); }
.dc-icon { font-size: 2rem; }
.dc-label { font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700; line-height: 1.2; }
.dc-desc { line-height: 1.4; }
.dungeon-reward, .dungeon-defeat { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dungeon-reward-star {
font-size: 3.5rem;
animation: lup-pop .5s cubic-bezier(.17,.67,.35,1.3) both;
}
.dungeon-epic-label {
font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .1em;
color: var(--gold-bright); text-transform: uppercase; margin-top: 6px;
}
/* ── La Scalata dell'Eroe — full redesign ──────────────────────────────── */
/* Shared record badges */
.scalata-record-note { font-size: .8rem; color: rgba(255,255,255,.42); text-align: center; padding: 4px 0; }
.scalata-new-record {
font-family: 'Cinzel', serif; font-size: .9rem; font-weight: 700; color: var(--gold-bright);
background: rgba(201,147,46,.12); border: 1px solid rgba(201,147,46,.35);
padding: 6px 16px; border-radius: 20px; text-align: center;
animation: lup-pop .5s cubic-bezier(.17,.67,.35,1.3) both;
}
/* Dark modal override */
.scalata-dark-modal {
background-image: none !important;
background-color: #0f0b07 !important;
box-shadow: 0 8px 30px rgba(0,0,0,.85) !important;
}
/* ── openScalata ─────────────────────────────────────────────────────────── */
.sc-open { display: flex; flex-direction: column; gap: 10px; }
.sc-open-banner {
background: linear-gradient(170deg, #0e0608 0%, #1a0c0a 55%, #251208 100%);
border: 1px solid rgba(201,147,46,.28); border-radius: 14px;
padding: 20px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
position: relative; overflow: hidden;
}
.sc-open-banner::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(201,147,46,.12) 0%, transparent 65%);
pointer-events: none;
}
.sc-open-tower-img {
width: 80px; height: 80px; object-fit: contain;
filter: drop-shadow(0 4px 16px rgba(201,147,46,.6));
}
.sc-open-tower-fallback { font-size: 3rem; line-height: 1; filter: drop-shadow(0 2px 8px rgba(201,147,46,.5)); }
.sc-open-title {
font-family: 'Cinzel', serif; font-size: 1.08rem; font-weight: 700;
color: #e8b64c; text-align: center; letter-spacing: .07em;
}
.sc-open-sub { font-size: .77rem; color: rgba(255,255,255,.45); text-align: center; line-height: 1.4; }
.sc-open-records { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-open-rec {
background: rgba(255,255,255,.04); border: 1px solid rgba(201,147,46,.18);
border-radius: 10px; padding: 11px 8px; text-align: center;
display: flex; flex-direction: column; gap: 4px;
}
.sc-open-rec-val {
font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700;
color: #e8b64c; font-variant-numeric: tabular-nums;
}
.sc-open-rec-lbl { font-size: .6rem; color: rgba(255,255,255,.32); letter-spacing: .08em; text-transform: uppercase; }
.sc-open-first {
display: flex; align-items: center; gap: 10px;
background: rgba(201,147,46,.07); border: 1px solid rgba(201,147,46,.22);
border-radius: 10px; padding: 10px 14px;
}
.sc-open-first-badge {
font-family: 'Cinzel', serif; font-size: .7rem; font-weight: 700;
color: #e8b64c; letter-spacing: .05em; white-space: nowrap;
}
.sc-open-first-txt { font-size: .75rem; color: rgba(255,255,255,.5); font-style: italic; }
.sc-open-rules {
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
}
.sc-open-rule { font-size: .8rem; color: rgba(255,255,255,.6); display: flex; align-items: flex-start; gap: 8px; }
.sc-rule-ico { flex-shrink: 0; }
.sc-enter-btn {
width: 100%; padding: 16px; border-radius: 12px; border: none; cursor: pointer;
font-family: 'Cinzel', serif; font-size: .95rem; font-weight: 700; letter-spacing: .09em;
color: #1a0d00;
background: linear-gradient(180deg, #f6e47e 0%, #dba22a 60%, #c47c12 100%);
box-shadow: 0 4px 0 #7a4f0a, 0 6px 18px rgba(201,147,46,.4);
transition: transform .1s, box-shadow .1s, filter .15s;
user-select: none; -webkit-tap-highlight-color: transparent;
}
.sc-enter-btn:hover { filter: brightness(1.07); }
.sc-enter-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a4f0a, 0 2px 6px rgba(201,147,46,.2); }
.sc-later-btn {
background: transparent; border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.4); font-size: .8rem; padding: 10px;
border-radius: 10px; cursor: pointer; width: 100%; text-align: center;
}
.sc-later-btn:hover { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.55); }
/* ── showScalataFloor ────────────────────────────────────────────────────── */
.sc-floor { display: flex; flex-direction: column; gap: 10px; color: rgba(255,255,255,.87); }
.sc-floor-hdr { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-floor-info { display: flex; flex-direction: column; gap: 1px; }
.sc-floor-label { font-family: 'Cinzel', serif; font-size: .86rem; font-weight: 700; color: #e8b64c; }
.sc-floor-label.boss { color: #ff9040; }
.sc-floor-round { font-size: .63rem; color: rgba(255,255,255,.3); letter-spacing: .08em; }
.sc-hero-hp { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.sc-hero-hp-text { font-size: .7rem; color: rgba(255,255,255,.48); font-variant-numeric: tabular-nums; }
.sc-hero-hp-text.crit { color: #e87070; font-weight: 700; }
.sc-hero-hpbar { width: 80px; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.sc-hero-hpfill { height: 100%; background: linear-gradient(90deg, #4cde7a, #2fa855); border-radius: 2px; transition: width .4s; }
.sc-hero-hpfill.crit { background: #e84545; }
.sc-sep {
display: flex; align-items: center; gap: 8px;
font-family: 'Cinzel', serif; font-size: .58rem; font-weight: 700;
color: rgba(201,147,46,.5); letter-spacing: .14em; margin: 2px 0;
}
.sc-sep::before, .sc-sep::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,147,46,.35), transparent);
}
/* Enemy card — parchment */
.sc-enemy {
background: #f5eada; border: 2px solid rgba(180,140,80,.4);
border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
color: #3a2410;
}
.sc-enemy.boss { border-color: rgba(255,100,32,.55); }
.sc-enemy-top { display: flex; align-items: center; gap: 10px; }
.sc-enemy-emoji { font-size: 2.3rem; line-height: 1; flex-shrink: 0; }
.sc-enemy-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-enemy-name { font-weight: 700; font-size: .9rem; color: #2a1208; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-enemy-zone { font-size: .67rem; color: rgba(58,36,16,.52); }
.sc-enemy-hprow { display: flex; flex-direction: column; gap: 3px; }
.sc-enemy-hpbar { height: 6px; background: rgba(58,36,16,.15); border-radius: 3px; overflow: hidden; }
.sc-enemy-hpfill { height: 100%; background: linear-gradient(90deg, #c0392b, #e84545); border-radius: 3px; transition: width .4s; }
.sc-enemy-hpnum { font-size: .63rem; color: rgba(58,36,16,.5); font-variant-numeric: tabular-nums; }
.sc-enemy-tells {
background: rgba(58,36,16,.07); border: 1px solid rgba(58,36,16,.18);
border-radius: 8px; padding: 6px 10px; font-size: .8rem; color: #4a3020;
}
.sc-enemy-tells-lbl { font-size: .57rem; font-weight: 700; letter-spacing: .08em; color: #c0392b; text-transform: uppercase; margin-bottom: 2px; }
.sc-enemy-tells.double { background: rgba(192,57,43,.12); border-color: rgba(232,80,70,.35); }
.sc-enemy-tells.poison { background: rgba(140,40,190,.1); border-color: rgba(170,70,220,.3); }
.sc-enemy-tells.guard { background: rgba(26,79,168,.1); border-color: rgba(74,159,216,.3); }
.sc-enemy-tells.rage { background: rgba(200,100,0,.12); border-color: rgba(255,140,0,.3); }
.sc-enemy-tells-lbl.double { color: #ff6b5b; }
.sc-enemy-tells-lbl.poison { color: #c060e0; }
.sc-enemy-tells-lbl.guard { color: #4a9fd8; }
.sc-enemy-tells-lbl.rage { color: #ff9040; }
.sc-poison-badge {
display: inline-block; font-size: .6rem; padding: 1px 5px; border-radius: 8px;
background: rgba(150,50,200,.2); border: 1px solid rgba(180,80,240,.4);
color: #c060e0; font-weight: 700; vertical-align: middle; margin-left: 4px;
}
.sc-boss-tag {
font-size: .54rem; font-family: 'Cinzel', serif; letter-spacing: .06em;
background: rgba(255,100,32,.12); border: 1px solid rgba(255,100,32,.45); color: #e85020;
border-radius: 5px; padding: 1px 5px; vertical-align: middle; margin-left: 4px;
}
/* Combat log */
.sc-log { background: rgba(0,0,0,.28); border-radius: 8px; padding: 8px 10px; }
.sc-log.hidden { display: none; }
.sc-log-rows { display: flex; flex-direction: column; gap: 4px; }
.sc-log-row { font-size: .82rem; padding: 2px 0; }
/* Dice section */
.sc-dice-section { display: flex; flex-direction: column; gap: 10px; }
.sc-dice-label {
font-family: 'Cinzel', serif; font-size: .66rem; font-weight: 700;
color: rgba(255,255,255,.35); text-align: center; letter-spacing: .14em;
}
.sc-dice-row {
display: flex; justify-content: center; gap: 10px;
padding-bottom: 26px;
}
/* Physical dice */
.sc-die {
width: 56px; height: 56px; flex-shrink: 0;
border-radius: 10px; border: 2px solid;
display: flex; flex-direction: column; align-items: center; justify-content: center;
cursor: pointer; position: relative;
transition: transform .15s, box-shadow .15s, filter .12s;
user-select: none; -webkit-tap-highlight-color: transparent;
}
.sc-die:nth-child(1) { transform: rotate(-3deg); }
.sc-die:nth-child(2) { transform: rotate(1.5deg); }
.sc-die:nth-child(3) { transform: rotate(-2deg); }
.sc-die:nth-child(4) { transform: rotate(3deg); }
.sc-die:hover { transform: scale(1.1) rotate(0deg) !important; filter: brightness(1.12); }
.sc-die:active { transform: scale(.9) rotate(0deg) !important; }
.sc-die.libero {
background: linear-gradient(145deg, #2a2018, #1a1408);
border-color: rgba(201,147,46,.3);
box-shadow: 0 4px 0 #0a0804, 0 6px 12px rgba(0,0,0,.4);
color: rgba(201,147,46,.5);
}
.sc-die.atk {
background: linear-gradient(145deg, #d44444, #8b1a1a);
border-color: #ff6b5b;
box-shadow: 0 4px 0 #5a0a0a, 0 6px 12px rgba(139,26,26,.5), inset 0 1px 2px rgba(255,180,180,.4);
color: #fff;
}
.sc-die.def {
background: linear-gradient(145deg, #2288cc, #1a4fa8);
border-color: #4a9fd8;
box-shadow: 0 4px 0 #0a205a, 0 6px 12px rgba(26,79,168,.5), inset 0 1px 2px rgba(150,210,255,.3);
color: #fff;
}
.sc-die.mag {
background: linear-gradient(145deg, #aa44cc, #7b1fa8);
border-color: #b06ae0;
box-shadow: 0 4px 0 #3a0a5a, 0 6px 12px rgba(123,31,168,.5), inset 0 1px 2px rgba(220,170,255,.3);
color: #fff;
}
.sc-die-emoji { font-size: 1.45rem; line-height: 1; }
.sc-die-assign {
position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
font-size: .53rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; white-space: nowrap; opacity: .85; pointer-events: none;
}
.sc-die.libero .sc-die-assign { color: rgba(201,147,46,.55); }
.sc-die.atk .sc-die-assign { color: #ff8878; }
.sc-die.def .sc-die-assign { color: #6abce8; }
.sc-die.mag .sc-die-assign { color: #c080f0; }
.sc-die.jolly {
background: linear-gradient(145deg, #1e8040, #0d4820);
border-color: #42d46e;
box-shadow: 0 4px 0 #071f10, 0 6px 12px rgba(10,100,40,.55), inset 0 1px 2px rgba(100,255,150,.3);
color: #fff;
}
.sc-die.jolly .sc-die-assign { color: #6afa96; }
/* Buckets */
.sc-buckets { display: flex; gap: 6px; }
.sc-bucket {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 8px 4px; border-radius: 8px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.sc-bucket.atk { border-color: rgba(232,107,91,.28); }
.sc-bucket.def { border-color: rgba(74,159,216,.28); }
.sc-bucket.mag { border-color: rgba(176,106,224,.28); }
.sc-bucket-icon { font-size: .9rem; line-height: 1; }
.sc-bucket-val {
font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700;
color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; min-height: 1.1em;
}
.sc-bucket-lbl { font-size: .52rem; color: rgba(255,255,255,.25); letter-spacing: .07em; }
/* Preview strip */
.sc-preview {
display: flex; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
border-radius: 8px; overflow: hidden;
}
.sc-prev-item {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 7px 4px;
}
.sc-prev-item + .sc-prev-item { border-left: 1px solid rgba(255,255,255,.08); }
.sc-prev-label { font-size: .52rem; color: rgba(255,255,255,.3); letter-spacing: .07em; text-transform: uppercase; }
.sc-prev-val { font-family: 'Cinzel', serif; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.75); }
.sc-prev-val.safe { color: #4cde7a; }
.sc-prev-val.danger { color: #e87070; }
/* Net result */
.sc-net { font-size: .78rem; color: rgba(255,255,255,.4); text-align: center; }
.sc-net.safe { color: #4cde7a; font-weight: 700; }
.sc-net.danger { color: #e87070; }
/* Confirm button */
.sc-confirm {
width: 100%; padding: 14px; border-radius: 11px; border: none; cursor: pointer;
font-family: 'Cinzel', serif; font-size: .88rem; font-weight: 700; letter-spacing: .1em;
color: #2a1a08;
background: linear-gradient(180deg, #f4e07c, #c9932e);
box-shadow: 0 4px 0 #7a5010, 0 6px 14px rgba(201,147,46,.3);
transition: transform .1s, box-shadow .1s, filter .15s;
user-select: none; -webkit-tap-highlight-color: transparent;
}
.sc-confirm:disabled { opacity: .25; cursor: default; box-shadow: 0 2px 0 #5a3a0a; }
.sc-confirm:not(:disabled):hover { filter: brightness(1.08); }
.sc-confirm:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5010; }
/* Retreat */
.sc-retreat {
width: 100%; padding: 8px; border-radius: 8px; background: transparent;
border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.26);
font-size: .73rem; cursor: pointer; transition: color .2s, border-color .2s;
}
.sc-retreat:hover { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.2); }
/* ── showScalataInterlude ────────────────────────────────────────────────── */
.sc-int { display: flex; flex-direction: column; gap: 12px; color: rgba(255,255,255,.87); }
.sc-int-banner {
background: linear-gradient(135deg, #0a1a0a, #1a2a10);
border: 1px solid rgba(63,207,106,.25); border-radius: 12px;
padding: 14px; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.sc-int-check { font-size: 2.2rem; line-height: 1; }
.sc-int-title { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: #3fcf6a; text-align: center; }
.sc-int-next { font-size: .79rem; color: rgba(255,255,255,.45); text-align: center; }
.sc-int-next.boss { color: #ff9040; font-weight: 700; }
.sc-int-stats { display: flex; gap: 6px; }
.sc-int-stat {
flex: 1; text-align: center; background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
padding: 7px 4px; display: flex; flex-direction: column; gap: 2px;
}
.sc-int-stat-val { font-family: 'Cinzel', serif; font-size: .84rem; font-weight: 700; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.sc-int-stat-lbl { font-size: .52rem; color: rgba(255,255,255,.28); letter-spacing: .06em; }
.sc-int-hp {
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.sc-int-hp-row { display: flex; justify-content: space-between; align-items: center; }
.sc-int-hp-val { font-size: .82rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
.sc-int-hp-val.crit { color: #e87070; font-weight: 700; }
.sc-int-hp-note { font-size: .66rem; color: rgba(255,255,255,.35); }
.sc-int-hpbar { height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.sc-int-hpfill { height: 100%; background: linear-gradient(90deg, #4cde7a, #2fa855); border-radius: 3px; transition: width .4s; }
.sc-int-hpfill.crit { background: #e84545; }
.sc-int-choices-label { font-family: 'Cinzel', serif; font-size: .64rem; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: .14em; }
.sc-int-choices { display: flex; flex-direction: column; gap: 8px; }
.sc-int-choice {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 13px 14px; border-radius: 10px; text-align: left; cursor: pointer;
border: 1px solid; transition: filter .15s, transform .1s;
user-select: none; -webkit-tap-highlight-color: transparent;
}
.sc-int-choice:hover { filter: brightness(1.14); }
.sc-int-choice:active { transform: scale(.97); }
.sc-int-choice.heal { background: rgba(10,50,20,.7); border-color: rgba(63,207,106,.3); }
.sc-int-choice.attack{ background: rgba(50,10,10,.7); border-color: rgba(192,57,43,.3); }
.sc-int-choice.scout { background: rgba(30,10,50,.7); border-color: rgba(176,106,224,.3); }
.sc-int-choice-badge {
font-size: .57rem; font-weight: 700; padding: 2px 6px; border-radius: 20px;
text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
}
.heal .sc-int-choice-badge { background: rgba(63,207,106,.15); color: #3fcf6a; border: 1px solid rgba(63,207,106,.3); }
.attack .sc-int-choice-badge { background: rgba(192,57,43,.15); color: #ff6b5b; border: 1px solid rgba(192,57,43,.3); }
.scout .sc-int-choice-badge { background: rgba(176,106,224,.15);color: #c080f0; border: 1px solid rgba(176,106,224,.3); }
.sc-int-choice-icon { font-size: 1.55rem; flex-shrink: 0; line-height: 1; }
.sc-int-choice-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sc-int-choice-name { font-weight: 700; font-size: .9rem; color: rgba(255,255,255,.9); }
.sc-int-choice-desc { font-size: .76rem; color: rgba(255,255,255,.45); }
/* Shop styles */
.sc-shop-gold {
font-size: .82rem; color: rgba(255,255,255,.55); text-align: center;
margin-top: -4px; margin-bottom: 2px;
}
.sc-shop-gold b { color: #e8c04c; }
.sc-shop-items { display: flex; flex-direction: column; gap: 7px; }
.sc-shop-item {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 10px 12px;
}
.sc-shop-item-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.sc-shop-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sc-shop-item-name { font-weight: 700; font-size: .86rem; color: rgba(255,255,255,.88); }
.sc-shop-item-desc { font-size: .72rem; color: rgba(255,255,255,.4); }
.sc-shop-buy {
flex-shrink: 0; font-size: .76rem; font-weight: 700; padding: 5px 10px;
border-radius: 8px; background: rgba(201,147,46,.2); border: 1px solid rgba(201,147,46,.4);
color: #e8c04c; cursor: pointer; transition: background .15s, opacity .15s;
white-space: nowrap;
}
.sc-shop-buy:hover:not(:disabled) { background: rgba(201,147,46,.35); }
.sc-shop-buy:disabled { cursor: default; }
.sc-shop-continue {
width: 100%; padding: 13px; border-radius: 10px; font-weight: 700; font-size: .9rem;
background: linear-gradient(135deg, #4a7a2a, #2a4a14); border: 1px solid rgba(106,218,106,.25);
color: #8adc8a; cursor: pointer; transition: filter .15s;
font-family: 'Cinzel', serif; letter-spacing: .06em;
}
.sc-shop-continue:hover { filter: brightness(1.12); }
/* ── showScalataEnd ──────────────────────────────────────────────────────── */
.sc-end { display: flex; flex-direction: column; gap: 12px; }
.sc-end-banner {
background: linear-gradient(160deg, #0e0a04, #1a0a04);
border: 1px solid rgba(192,57,43,.3); border-radius: 14px;
padding: 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.sc-end-icon { font-size: 2.8rem; line-height: 1; }
.sc-end-floor-num {
font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 700;
color: #e8b64c; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 4px;
}
.sc-end-floor-lbl { font-size: .66rem; color: rgba(255,255,255,.35); letter-spacing: .1em; text-transform: uppercase; }
.sc-end-defeated-by { font-size: .78rem; color: rgba(255,255,255,.45); text-align: center; margin-top: 2px; }
.sc-end-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-end-stat {
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 10px 8px; text-align: center;
display: flex; flex-direction: column; gap: 3px;
}
.sc-end-stat-ico { font-size: 1.3rem; line-height: 1; }
.sc-end-stat-val {
font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 700;
color: #e8b64c; font-variant-numeric: tabular-nums;
}
.sc-end-stat-lbl { font-size: .62rem; color: rgba(255,255,255,.35); letter-spacing: .06em; }
.sc-end-record {
font-family: 'Cinzel', serif; font-size: .88rem; font-weight: 700; color: #e8b64c;
background: rgba(201,147,46,.12); border: 1px solid rgba(201,147,46,.4);
padding: 8px 16px; border-radius: 20px; text-align: center;
animation: lup-pop .5s cubic-bezier(.17,.67,.35,1.3) both;
}
/* placeholder (unused, kept for compatibility) */
.scalata-intro { display: none; }
/* Intro sfidante */
.arena-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.arena-intro-img {
max-height: 200px; object-fit: contain;
filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
animation: villainAppear .6s ease;
}
@keyframes villainAppear {
from { transform: scale(.4) translateY(-30px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
/* Overlay a schermo intero */
.battle-screen {
position: fixed; inset: 0; z-index: 100;
background:
linear-gradient(180deg, rgba(10,6,8,.35), rgba(5,3,4,.7)),
url('assets/backgrounds/arena-bg.webp');
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
transition: background-image .4s ease;
}
.battle-arena {
width: 100%; max-width: 480px;
display: flex; flex-direction: column; gap: 6px;
}
.battle-header-frame {
background:
linear-gradient(180deg, rgba(20,10,6,.72) 0%, rgba(10,5,3,.55) 100%),
url('assets/backgrounds/template-header.webp');
background-size: cover; background-position: center top;
border-radius: 12px 12px 6px 6px;
border: 2px solid rgba(200,160,80,.45);
padding: 8px 10px;
display: flex; flex-direction: column; gap: 6px;
box-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.battle-footer-frame {
background:
linear-gradient(0deg, rgba(20,10,6,.78) 0%, rgba(10,5,3,.55) 100%),
url('assets/backgrounds/template-footer.webp');
background-size: cover; background-position: center bottom;
border-radius: 6px 6px 12px 12px;
border: 2px solid rgba(200,160,80,.45);
padding: 8px 10px 10px;
display: flex; flex-direction: column; gap: 6px;
box-shadow: 0 -2px 12px rgba(0,0,0,.6);
}
.battle-arena.shake { animation: arenaShake .3s; }
@keyframes arenaShake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-8px); }
40% { transform: translateX(7px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(4px); }
}
.battle-topbar {
display: flex; align-items: center; justify-content: space-between;
color: #f4e7cd;
}
.battle-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .9rem; text-shadow: 0 1px 3px #000; }
.battle-name.right { text-align: right; }
/* Barre HP grandi */
.hpbar-lg {
position: relative; height: 22px;
background: rgba(0,0,0,.6);
border: 2px solid #000; border-radius: 6px;
overflow: hidden;
box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
}
.hpbar-fill { height: 100%; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.hpbar-fill.v { background: linear-gradient(180deg, #ff6a5a, #b3241a); }
.hpbar-fill.h { background: linear-gradient(180deg, #6ad06a, #2c8b3c); }
.hpbar-lg span {
position: absolute; inset: 0; text-align: center; line-height: 20px;
font-size: .72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000;
}
/* Palco */
.battle-stage {
display: grid; grid-template-columns: 1fr 1fr;
grid-template-areas: "villain villain" "hero center";
align-items: center; gap: 4px;
min-height: 300px;
position: relative;
}
.stage-slot { position: relative; display: flex; justify-content: center; }
.stage-slot.villain { grid-area: villain; justify-content: flex-end; padding-right: 8px; }
.stage-slot.hero { grid-area: hero; justify-content: flex-start; padding-left: 8px; }
.battle-villain-img {
max-height: 190px; object-fit: contain;
filter: drop-shadow(0 8px 14px rgba(0,0,0,.6));
animation: idleFloat 3s ease-in-out infinite;
}
.battle-hero-img {
max-height: 175px; object-fit: contain;
filter: drop-shadow(0 8px 14px rgba(0,0,0,.6));
transform: scaleX(-1);
animation: idleFloat 3.4s ease-in-out infinite;
}
.battle-hero-emoji { font-size: 5rem; }
.battle-emoji { font-size: 5rem; }
.battle-emoji.big { font-size: 8rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
@keyframes idleFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.battle-hero-img { transform: translateY(0) scaleX(-1); }
@keyframes idleFloatH {
0%,100% { transform: translateY(0) scaleX(-1); }
50% { transform: translateY(-8px) scaleX(-1); }
}
.stage-slot.hit { animation: hitFlash .4s; }
@keyframes hitFlash {
0%,100% { filter: none; }
30% { filter: brightness(2.5) sepia(1) saturate(6) hue-rotate(-30deg); transform: scale(.94); }
}
.stage-slot.defeated { animation: defeatFade 1.2s forwards; }
@keyframes defeatFade {
to { filter: grayscale(1) brightness(.4); transform: rotate(8deg) translateY(20px); opacity: .3; }
}
.dmg-float {
position: absolute; top: 20%; left: 50%;
font-family: 'Cinzel', serif; font-weight: 900; font-size: 2rem;
color: #ff5a4a; text-shadow: 0 2px 4px #000, 0 0 8px rgba(255,60,40,.8);
pointer-events: none; animation: dmgUp .9s ease-out forwards;
}
@keyframes dmgUp {
from { transform: translate(-50%, 0) scale(.5); opacity: 0; }
30% { transform: translate(-50%, -20px) scale(1.3); opacity: 1; }
to { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}
/* Centro: round + rivelazione mosse */
.battle-center {
grid-area: center; text-align: center; color: #f4e7cd;
min-height: 90px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
}
.battle-round { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem; color: var(--gold-bright); }
.battle-weak { color: #d9a; opacity: .85; }
.reveal { display: flex; align-items: center; gap: 8px; animation: clashIn .3s ease; }
.reveal-move { font-size: 2.2rem; filter: drop-shadow(0 2px 4px #000); }
.reveal-move.hero-move { animation: clashL .5s ease; }
.reveal-move.villain-move { animation: clashR .5s ease; }
.reveal-vs { font-family: 'Cinzel', serif; font-weight: 900; color: #ff5a4a; font-size: 1.1rem; }
@keyframes clashIn { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes clashL { 0% { transform: translateX(-30px); } 60% { transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes clashR { 0% { transform: translateX(30px); } 60% { transform: translateX(-6px); } 100% { transform: translateX(0); } }
.res-txt { font-weight: 700; font-size: .85rem; margin-top: 4px; }
.res-txt.win { color: #6ad06a; }
.res-txt.lose { color: #ff6a5a; }
.res-txt.tie { color: #d9c39a; }
.battle-result {
font-family: 'Cinzel', serif; font-weight: 900; font-size: 2rem;
animation: resultPop .6s ease;
}
.battle-result.win { color: var(--gold-bright); text-shadow: 0 0 16px rgba(232,182,76,.8); }
.battle-result.lose { color: #ff5a4a; text-shadow: 0 0 12px rgba(255,60,40,.7); }
@keyframes resultPop {
0% { transform: scale(.2) rotate(-8deg); opacity: 0; }
60% { transform: scale(1.3); opacity: 1; }
100% { transform: scale(1) rotate(0); }
}
/* Pip round (best of 3) */
.pips { display: flex; gap: 5px; }
.pip {
width: 13px; height: 13px; border-radius: 50%;
background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.35);
}
.pip.on { background: radial-gradient(circle at 35% 30%, #ffe08a, #d9a021); border-color: #ffe08a; box-shadow: 0 0 8px rgba(232,182,76,.7); }
/* Pulsanti mossa */
.battle-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.battle-moves.locked { pointer-events: none; opacity: .5; }
.move-btn {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 14px 4px;
background: linear-gradient(180deg, rgba(60,42,26,.95), rgba(30,20,10,.95));
border: 2px solid var(--gold); border-radius: 14px;
color: #f4e7cd; cursor: pointer;
box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255,255,255,.15);
transition: transform .08s;
}
.move-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #000; }
.move-icon { font-size: 1.8rem; }
.move-label { font-family: 'Cinzel', serif; font-weight: 700; font-size: .72rem; }
/* ═══════════ v2.9: Biomi rinominati + integrazione asset multipli ═══════════ */
/* Banner del bioma con diorama di sfondo */
.biome-hero {
background-size: cover; background-position: center;
transition: background-image .4s ease;
}
.biome-hero.has-diorama .biome-hero-name,
.biome-hero.has-diorama .biome-hero-lv {
text-shadow: 0 2px 5px #000, 0 0 10px rgba(0,0,0,.8);
}
/* Icone dell'Atlante */
.biome-cell-icon-img { width: 44px; height: 44px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
/* Anteprima diorama nel popup bioma */
.preview-diorama {
display: block; margin: 0 auto; max-width: 220px; max-height: 150px; object-fit: contain;
border-radius: 10px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.preview-diorama.locked-diorama { filter: grayscale(.85) brightness(.6); }
/* Icone dei sotto-tab Mercato */
.coll-btn-icon { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
/* Icona del titolo Eroe */
.title-icon { width: 28px; height: 28px; object-fit: contain; vertical-align: -7px; margin-right: 2px; }
/* Sottomenù Eroe con icone quadrate */
.submenu-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; }
.submenu-icon { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.submenu-emoji { font-size: 1.6rem; }
/* Icone di costruzione nel Rifugio */
.build-icon-img { width: 40px; height: 40px; object-fit: contain; }
.panel-title-icon { width: 24px; height: 24px; object-fit: contain; vertical-align: -6px; margin-right: 2px; }
/* Pulsante Fuggi sempre visibile durante la battaglia */
.battle-flee {
position: absolute; top: calc(6px + env(safe-area-inset-top)); right: 6px;
z-index: 5;
background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3);
color: #f4e7cd; font-size: .75rem; font-weight: 700;
padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.battle-flee:active { background: rgba(0,0,0,.8); }
/* Il Santuario dei Famigli */
.pet-portrait { font-size: 4rem; text-align: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.loot.equipped { border-left-color: var(--gold-bright); box-shadow: 0 0 16px rgba(232,182,76,.55), inset 0 1px 0 rgba(255,240,150,.55); }
.pet-portrait-wrap { position: relative; display: flex; justify-content: center; margin: 4px 0 6px; }
.pet-portrait-img { max-width: 65%; max-height: 180px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.pet-accessory-badge {
position: absolute; top: 4px; right: 24%;
font-size: 1.3rem; background: rgba(0,0,0,.5); border: 1px solid var(--gold);
border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.pet-stage-tag { text-align: center; color: #c9b48f; margin-bottom: 4px; }
.pet-name-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pet-rename-btn { padding: 2px 8px; font-size: .8rem; opacity: .7; }
.pet-xp-wrap { width: 100%; padding: 0 8px; }
.pet-xp-label { text-align: center; margin-bottom: 3px; }
.pet-rested-badge { text-align: center; font-size: .82rem; color: #5bb4ff; font-weight: 600; background: rgba(91,180,255,.12); border-radius: 8px; padding: 3px 8px; }
.pet-thumb { display: block; max-width: 100px; max-height: 100px; object-fit: contain; margin: 4px auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.santuario-teaser { text-align: center; }
/* Bottega dell'Arredamento */
.furniture-set-row { padding: 10px; }
.furniture-set-row.pickable { cursor: pointer; }
.furniture-set-row.pickable:active { transform: scale(.98); }
.furniture-set-row.locked { opacity: .6; }
.furniture-set-row.complete { border-left: 4px solid var(--gold-bright); box-shadow: 0 0 10px rgba(232,182,76,.3); }
.furniture-set-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.furniture-set-icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.furniture-set-icon.locked-icon { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.furniture-set-mid { flex: 1; min-width: 0; }
.set-bonus-active { color: var(--gold-bright); font-weight: 700; }
.furniture-item-row.equipped { opacity: .75; }
.furniture-fallback-icon { font-size: 2rem; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; }
/* Le Imprese del Viandante — 100 traguardi */
.section-title.small-title { font-size: 1rem; margin-top: 16px; }
.achievement-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.achievement-row {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.55); border-left: 4px solid var(--gold);
border-radius: 8px; padding: 10px 10px;
}
.achievement-mid .small { font-size: .82rem; color: var(--ink); }
.achievement-row.locked { opacity: .55; border-left-color: rgba(90,61,36,.3); }
.achievement-row.epic { border-left-color: var(--rar-leggendario, #d9822b); background: rgba(217,130,43,.15); }
.achievement-icon { font-size: 1.6rem; width: 34px; text-align: center; flex-shrink: 0; }
.achievement-mid { flex: 1; min-width: 0; }
.achievement-side { flex-shrink: 0; }
/* ── Categorie Imprese ── */
.achiev-cat-header {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: linear-gradient(135deg, rgba(90,61,36,.18), rgba(90,61,36,.06));
border: 2px solid var(--leather); border-radius: 10px;
padding: 10px 12px; cursor: pointer; width: 100%;
font-family: 'Cinzel', serif; font-size: .85rem;
color: var(--ink); user-select: none;
}
.achiev-cat-header:active { transform: scale(.99); }
.achiev-cat-left { display: flex; align-items: center; gap: 8px; }
.achiev-cat-icon { font-size: 1.3rem; flex-shrink: 0; }
.achiev-cat-name { font-weight: 700; }
.achiev-cat-meta { font-size: .75rem; color: var(--ink); font-family: 'Crimson Pro', serif; }
.achiev-cat-badge {
background: var(--gold); color: #fff;
font-size: .7rem; font-weight: 700;
border-radius: 999px; padding: 1px 7px;
font-family: 'Crimson Pro', serif;
white-space: nowrap;
}
.achiev-cat-badge.done { background: var(--emerald); }
.achiev-cat-toggle { font-size: .8rem; color: var(--ink-light); flex-shrink: 0; }
.achiev-cat-body { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.achiev-cat-body.collapsed { display: none; }
.achiev-cat-section { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
/* ── Statistiche Totali ── */
.stats-diary {
background: rgba(255,255,255,.4); border: 2px solid var(--leather);
border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.stats-diary-title { font-family: 'Cinzel', serif; font-size: .9rem; font-weight: 700; color: var(--leather); margin-bottom: 8px; }
.stats-diary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stats-diary-item { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.5); border-radius: 8px; padding: 7px; }
.stats-diary-val { font-size: 1.2rem; font-weight: 700; color: var(--leather); }
.stats-diary-lbl { font-size: .7rem; color: var(--ink-light); text-align: center; }
/* ── Pannello Comandi Rapidi ── */
.shortcut-panel { border: 2px solid #555ecc; }
.shortcut-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.shortcut-apple-icon { font-size: 2rem; flex-shrink: 0; }
.shortcut-launch-btn {
background: linear-gradient(135deg, #555ecc, #7b61ff);
color: #fff; border: none; font-weight: 700;
font-family: 'Cinzel', serif; font-size: .9rem;
padding: 13px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 4px 14px rgba(85,94,204,.4);
margin-bottom: 8px;
}
.shortcut-launch-btn:active { transform: scale(.97); }
.shortcut-import-btn {
background: linear-gradient(135deg, #2a7a2a, #3daa3d);
color: #fff; border: none; font-weight: 700;
font-family: 'Cinzel', serif; font-size: .9rem;
padding: 12px 16px; border-radius: 10px; margin-bottom: 8px;
box-shadow: 0 4px 14px rgba(42,122,42,.4);
}
.shortcut-import-btn:active { transform: scale(.97); }
.shortcut-steps {
display: flex; flex-direction: column; gap: 8px; margin: 8px 0;
background: rgba(255,255,255,.55); border-radius: 10px;
padding: 10px 12px;
border: 1px solid rgba(90,61,36,.2);
}
.shortcut-step { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--ink); }
.step-num {
flex-shrink: 0; width: 22px; height: 22px;
background: #555ecc; color: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .72rem; margin-top: 2px;
}
.shortcut-icon { font-size: 1.3rem; }
/* ── Strip incolla-passi inline nel tab Allenati ── */
.step-sync-strip {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(90deg, rgba(30,15,5,.88), rgba(45,22,8,.82));
border: 1px solid rgba(201,147,46,.38);
border-radius: 12px; padding: 8px 12px; margin-bottom: 4px;
}
.sss-label {
font-family: 'Cinzel', serif; font-size: .65rem; font-weight: 700;
color: var(--gold-bright); white-space: nowrap; letter-spacing: .04em;
text-shadow: 0 0 8px rgba(232,182,76,.4);
}
.sss-input {
flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(201,147,46,.3);
border-radius: 8px; padding: 7px 10px; color: #f4e7cd;
font-size: .9rem; outline: none;
}
.sss-input:focus { border-color: var(--gold-bright); background: rgba(255,255,255,.12); }
.sss-input::placeholder { color: rgba(196,149,106,.55); font-size: .78rem; }
/* ── Atlas: pannello di ingresso e subview ── */
.atlas-entry-panel { padding: 10px 14px; }
.atlas-entry-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.atlas-entry-title { font-family: 'Cinzel', serif; font-size: .88rem; font-weight: 700; color: var(--gold-bright); }
.atlas-open-btn { flex-shrink: 0; }
/* ── Pantheon dei Campioni: entry panel e subview ── */
.pantheon-entry-panel { border-color: #7b3fbf !important; }
.pantheon-entry-title { color: #7b3fbf; }
/* ── Santuario dei Famigli (teaser bloccato) ── */
.santuario-entry-panel { border-color: rgba(80,200,120,.5) !important; opacity: .85; }
.santuario-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.santuario-entry-title { color: #3a9e60; }
.santuario-lock-badge { font-size: 1.3rem; }
.santuario-teaser-quote { font-style: italic; font-weight: 500; line-height: 1.5; margin-bottom: 8px; }
.santuario-locked-btn { opacity: .5; cursor: not-allowed; }
.santuario-thumb { filter: brightness(.75) saturate(.6); }
.pantheon-rank-chip {
display: inline-block; margin-bottom: 4px;
font-size: .68rem; font-weight: 700;
background: rgba(123,63,191,.15); border: 1px solid rgba(123,63,191,.4);
border-radius: 20px; padding: 1px 8px; color: #7b3fbf;
}
/* ── Shared subview hero banner (Avamposto, Pantheon, …) ── */
.subview-hero-banner {
width: 100%; height: 140px;
border-radius: 12px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 12px;
background: #1a1008 center/cover no-repeat;
}
.subview-hero-banner::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to bottom,
rgba(0,0,0,.08) 0%,
rgba(0,0,0,.60) 55%,
rgba(0,0,0,.85) 100%);
pointer-events: none;
}
.subview-back-btn {
position: relative; z-index: 1;
background: rgba(0,0,0,.55) !important;
color: #fff !important;
border-color: rgba(255,255,255,.25) !important;
align-self: flex-start;
}
.subview-banner-title {
position: relative; z-index: 1;
color: #fff !important;
text-shadow: 0 2px 8px rgba(0,0,0,.8);
margin: 0;
}
/* ── Avamposto delle Spedizioni ── */
.avamposto-entry-panel { border-color: #8a6a30 !important; }
.avamposto-hero-banner {
background-image: url('assets/ui/avamposto-header.webp');
background-position: center 30%;
}
/* ── Pantheon dei Campioni ── */
.pantheon-hero-banner {
background-image: url('assets/ui/pantheon-header.webp');
background-position: center 40%;
}
.pantheon-title { color: #fff !important; }
.clipboard-sync-banner {
position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; right: 12px;
background: linear-gradient(135deg, #1e3d12, #2d5a1b);
color: #fff; border-radius: 16px;
border: 1.5px solid rgba(100,200,60,.4);
box-shadow: 0 4px 20px rgba(0,0,0,.5);
z-index: 500; padding: 10px 12px;
animation: bannerPop .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes bannerPop { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.csb-label { font-size: .78rem; font-weight: 700; display: block; margin-bottom: 6px; }
.csb-input {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
border-radius: 8px; padding: 10px 12px; color: #fff; font-size: 1rem;
outline: none;
}
.csb-input::placeholder { color: rgba(255,255,255,.55); }
.shortcut-open-app {
color: #555ecc; background: rgba(85,94,204,.1);
border: 1.5px solid rgba(85,94,204,.3);
font-size: .8rem; margin-bottom: 12px;
}
/* ── Tab iOS / Android ── */
.sync-tab-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.sync-tab {
flex: 1; padding: 8px; border-radius: 8px; cursor: pointer;
border: 2px solid var(--leather); background: rgba(90,61,36,.1);
font-family: 'Crimson Pro', serif; font-size: .9rem; color: var(--ink);
font-weight: 600; transition: all .2s;
}
.sync-tab.active { background: #555ecc; border-color: #555ecc; color: #fff; }
.sync-pane { display: flex; flex-direction: column; gap: 8px; }
.sync-pane.hidden { display: none; }
.shortcut-manual-toggle {
width: 100%; background: rgba(90,61,36,.15); border: 1.5px solid var(--leather);
border-radius: 8px; padding: 9px 12px; cursor: pointer;
font-family: 'Crimson Pro', serif; font-size: .9rem; color: var(--ink);
text-align: left; display: flex; justify-content: space-between; align-items: center;
margin-bottom: 0;
}
.shortcut-manual-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.shortcut-manual-body.collapsed { display: none; }
.shortcut-type-row { display: flex; gap: 8px; }
.shortcut-type-btn {
flex: 1; background: rgba(255,255,255,.5); border: 2px solid var(--leather);
border-radius: 10px; padding: 10px 6px; cursor: pointer;
font-size: 1.3rem; text-align: center; line-height: 1.4;
}
.shortcut-type-btn.selected { border-color: #555ecc; background: rgba(85,94,204,.15); }
.shortcut-type-btn:active { transform: scale(.95); }
.tiny { font-size: .65rem; font-family: 'Crimson Pro', serif; }
.shortcut-url-box {
background: rgba(255,255,255,.6); border-radius: 8px; padding: 10px 12px;
border: 1px solid rgba(90,61,36,.25); color: var(--ink);
}
.shortcut-url-code {
display: block; font-size: .72rem; word-break: break-all;
background: rgba(0,0,0,.08); padding: 6px 8px; border-radius: 6px;
font-family: monospace; color: var(--leather);
}
/* ── Splash Screen ── */
.splash-screen {
background: url('assets/icons/watermarked_img_6703389115759478461.webp') center / cover no-repeat;
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
padding: 0 0 9dvh;
}
.splash-logo-area { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.splash-logo-img {
max-width: 72%; filter: drop-shadow(0 8px 22px rgba(0,0,0,.85));
animation: splashLogoIn .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes splashLogoIn {
from { opacity: 0; transform: scale(.88) translateY(-12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.splash-tagline {
font-family: 'Cinzel', serif; font-size: .8rem; color: var(--gold-bright);
text-shadow: 0 2px 8px rgba(0,0,0,.95); letter-spacing: .1em;
animation: splashLogoIn .7s .15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.splash-fadeout { opacity: 0 !important; transition: opacity .42s ease !important; pointer-events: none; }
.splash-progress-wrap { width: 82%; max-width: 340px; text-align: center; }
.splash-progress-track {
height: 14px; border-radius: 8px; background: rgba(0,0,0,.5);
border: 1px solid rgba(232,182,76,.5); overflow: hidden;
}
.splash-progress-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--gold), var(--gold-bright));
transition: width .06s ease-out;
}
.splash-progress-text {
margin-top: 8px; font-family: 'Cinzel', serif; font-weight: 700; font-size: .78rem;
color: var(--gold-bright); text-shadow: 0 2px 6px rgba(0,0,0,.9);
letter-spacing: .04em; line-height: 1.4;
}
.game-logo { max-width: 78%; margin: 0 auto 4px; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
/* ── Transizione tra schermate ── */
@keyframes screen-enter {
from { opacity: 0; }
to { opacity: 1; }
}
.screen-enter { animation: screen-enter .25s ease both; }
/* ── Uovo del Famiglio: vista centrata ── */
.egg-view-wrap {
display: flex; flex-direction: column; align-items: center;
padding: 8px 16px 0; text-align: center;
}
.egg-view-title {
font-family: var(--font-head); font-size: 1rem; letter-spacing: .08em;
color: var(--gold); text-transform: uppercase; margin-bottom: 12px;
}
.egg-img-wrap {
width: 100%; display: flex; justify-content: center; align-items: center;
margin-bottom: 12px;
}
.egg-portrait {
max-width: 75%; max-height: 260px; object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
}
.egg-portrait-fallback { font-size: 6rem; }
.egg-name {
font-family: var(--font-head); font-size: 1.25rem; font-weight: 700;
color: var(--ink); margin-bottom: 8px;
}
.egg-desc { font-size: .88rem; color: #c9b48f; max-width: 340px; line-height: 1.5; }
/* Bonus specie nel pannello famiglio */
.pet-species-bonus {
text-align: center; color: var(--gold); margin: 2px 0 6px;
font-style: italic; letter-spacing: .02em;
}
.pet-leg-locked {
color: var(--gold); text-align: center; line-height: 1.45;
background: rgba(200,147,46,.08); border-radius: 6px;
padding: 6px 10px; border: 1px solid rgba(200,147,46,.25);
}
/* ── Virtù del Famiglio ── */
.pet-virtue-grid { display: flex; flex-direction: column; gap: 10px; }
.pet-virtue-row { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.pet-virtue-row.dominant { border-color: rgba(201,147,46,.35); background: rgba(201,147,46,.06); }
.pet-virtue-head {
display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.pet-virtue-icon { font-size: 1.05rem; line-height: 1; }
.pet-virtue-name { font-weight: 700; font-size: .82rem; flex: 1; }
.pet-virtue-val { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--gold); }
.pet-virtue-dom { color: var(--gold); font-size: .82rem; font-weight: 700; margin-left: 2px; }
.pet-virtue-bar { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.pet-virtue-fill { height: 100%; border-radius: 3px; transition: width .5s; }
[data-virtue="coraggio"] { background: linear-gradient(90deg, #e8604c, #ff9070); }
[data-virtue="astuzia"] { background: linear-gradient(90deg, #9b59b6, #c080f0); }
[data-virtue="lealta"] { background: linear-gradient(90deg, #27ae60, #55d98a); }
.pet-virtue-desc { font-size: .7rem; color: var(--ink-light); }
.pet-synergy-info {
margin-top: 8px; padding: 8px 10px; border-radius: 8px;
background: rgba(201,147,46,.07); border: 1px solid rgba(201,147,46,.2);
font-size: .8rem; color: rgba(255,255,255,.72); line-height: 1.5;
}
/* ── Zone spedizione ── */
.pet-zone-grid { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.pet-zone-btn {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 11px 12px; border-radius: 10px; text-align: left; cursor: pointer;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
transition: background .15s, transform .1s;
}
.pet-zone-btn:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.pet-zone-btn:active:not(:disabled) { transform: scale(.97); }
.pet-zone-btn:disabled { opacity: .4; cursor: default; }
.pet-zone-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.pet-zone-body { display: flex; flex-direction: column; gap: 2px; }
.pet-zone-name { font-weight: 700; font-size: .88rem; }
.pet-zone-desc { font-size: .72rem; color: rgba(255,255,255,.4); }
/* ── Memorie del Famiglio ── */
.pet-memories { display: flex; flex-direction: column; gap: 6px; }
.pet-memory-row { font-size: .78rem; line-height: 1.45; }
.pet-memory-date { font-size: .65rem; color: rgba(255,255,255,.3); margin-right: 4px; }
.pet-memory-text { color: rgba(255,255,255,.6); font-style: italic; }
/* ── Sinergia in Scalata ── */
.sc-synergy-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 10px 14px; border-radius: 10px;
background: linear-gradient(135deg, rgba(201,147,46,.18), rgba(201,147,46,.08));
border: 1px solid rgba(201,147,46,.35); color: #e8c04c;
font-weight: 700; font-size: .86rem; cursor: pointer;
transition: filter .15s; font-family: inherit;
}
.sc-synergy-btn:hover { filter: brightness(1.15); }
.sc-synergy-badge {
font-size: .56rem; padding: 2px 6px; border-radius: 10px;
background: rgba(201,147,46,.25); border: 1px solid rgba(201,147,46,.4);
color: #e8c04c; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* ── Uovo del Famiglio: animazione schiusa ── */
.egg-shake { animation: eggShake .5s ease-in-out infinite; }
@keyframes eggShake {
0%, 100% { transform: rotate(0deg) translateX(0); }
20% { transform: rotate(-6deg) translateX(-3px); }
40% { transform: rotate(5deg) translateX(3px); }
60% { transform: rotate(-4deg) translateX(-2px); }
80% { transform: rotate(3deg) translateX(2px); }
}
/* ── Sequenza evoluzione stadio ── */
.evo-overlay {
position: fixed; inset: 0; z-index: 200;
background: #0a0604;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0;
opacity: 0; transition: opacity .8s ease;
overflow: hidden;
}
.evo-overlay.evo-active { opacity: 1; }
.evo-overlay.evo-exit { opacity: 0; pointer-events: none; }
/* Raggi di luce rotanti */
.evo-rays {
position: absolute; inset: -50%;
background: conic-gradient(
transparent 0deg, rgba(200,147,46,.06) 10deg, transparent 20deg,
transparent 180deg, rgba(200,147,46,.06) 190deg, transparent 200deg
);
animation: evoRays 12s linear infinite;
pointer-events: none;
}
@keyframes evoRays { to { transform: rotate(360deg); } }
/* Anello luce dietro al famiglio */
.evo-glow-ring {
position: absolute;
width: 260px; height: 260px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(200,147,46,.18) 0%, transparent 70%);
animation: evoPulse 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes evoPulse {
0%, 100% { transform: scale(1); opacity: .7; }
50% { transform: scale(1.2); opacity: 1; }
}
.evo-video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.evo-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.evo-portrait {
max-width: 55%; max-height: 240px; object-fit: contain;
position: relative; z-index: 1;
filter: drop-shadow(0 0 24px rgba(200,147,46,.5));
transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.8,.3,1);
transform: translateY(12px) scale(.85);
}
.evo-portrait-in {
opacity: 1 !important; transform: translateY(0) scale(1) !important;
}
.evo-portrait-emoji { font-size: 6rem; }
.evo-stage-label {
font-family: var(--font-head); font-size: .75rem; letter-spacing: .22em;
color: var(--gold); text-transform: uppercase; margin-top: 18px;
transition: opacity .9s ease, transform .9s ease;
}
.evo-pet-name {
font-family: var(--font-head); font-size: 1.5rem; font-weight: 900;
color: #f5e8c4; text-align: center; line-height: 1.3; margin-top: 6px;
transition: opacity .9s ease, transform .9s ease;
}
.evo-stage-name { font-size: .9rem; font-weight: 400; color: var(--gold); letter-spacing: .08em; }
.evo-bonus {
font-size: .85rem; color: #c9b48f; font-style: italic; margin-top: 14px;
text-align: center; transition: opacity .9s ease, transform .9s ease;
}
.evo-reward {
font-size: 1.05rem; font-weight: 700; color: #f0d070;
margin-top: 10px; letter-spacing: .05em;
transition: opacity .9s ease, transform .9s ease;
}
.evo-unlock {
font-size: .8rem; color: #a89070; max-width: 280px;
text-align: center; margin-top: 8px;
transition: opacity .9s ease, transform .9s ease;
}
.evo-continue {
margin-top: 28px; padding: 12px 32px;
font-family: var(--font-head); font-size: .85rem; letter-spacing: .1em;
background: transparent; border: 1px solid rgba(200,147,46,.5);
color: var(--gold); border-radius: 4px; cursor: pointer;
transition: opacity .9s ease, transform .9s ease, background .2s;
}
.evo-continue:hover { background: rgba(200,147,46,.12); }
/* Stadio leggendario — particelle dorate extra */
.evo-overlay.evo-legendary .evo-glow-ring {
background: radial-gradient(ellipse, rgba(255,210,50,.28) 0%, transparent 70%);
width: 320px; height: 320px;
}
.evo-overlay.evo-legendary .evo-stage-label { color: #f5c842; font-size: .85rem; }
.evo-overlay.evo-legendary .evo-portrait {
filter: drop-shadow(0 0 36px rgba(255,200,30,.7));
}
.hatch-overlay {
position: fixed; inset: 0; z-index: 200;
background: #000;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hatch-video { width: 100%; height: 100%; object-fit: contain; }
.hatch-skip {
position: absolute; bottom: calc(20px + env(safe-area-inset-bottom)); right: 16px;
width: auto; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3);
}
/* ═══════════════════════════════════════════════════════════
MINIGIOCHI — Taverna delle Sfide
═══════════════════════════════════════════════════════════ */
/* Hub */
.mg-hub { padding: 14px; }
.mg-hub-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mg-total-badge {
font-size:.65rem; font-family:'Cinzel',serif;
background: linear-gradient(135deg,#7c3d00,#c07020);
color:#ffe8a0; padding:3px 8px; border-radius:12px;
animation: mgBadgePulse 2.4s ease infinite;
}
@keyframes mgBadgePulse {
0%,100% { box-shadow:0 0 0 0 rgba(210,140,20,.5); }
50% { box-shadow:0 0 0 5px rgba(210,140,20,0); }
}
/* Categorie */
.mg-category { margin-bottom:16px; }
.mg-category:last-child { margin-bottom:0; }
.mg-cat-hdr {
display:flex; align-items:center; gap:6px;
margin-bottom:8px; padding-bottom:6px;
border-bottom:1px solid rgba(255,210,80,.12);
}
.mg-cat-icon { font-size:.9rem; }
.mg-cat-label {
font-size:.62rem; font-family:'Cinzel',serif;
color:var(--gold-mid); letter-spacing:.04em;
text-transform:uppercase; flex:none;
}
.mg-cat-bar {
flex:1; height:3px; background:rgba(255,210,80,.15);
border-radius:2px; overflow:hidden;
}
.mg-cat-bar-fill {
height:100%;
background:linear-gradient(90deg,#c07020,#f0c040);
border-radius:2px; transition:width .4s ease;
}
.mg-cat-count {
font-size:.65rem; font-family:'Cinzel',serif;
color:var(--gold-bright); min-width:14px; text-align:right;
}
.mg-cat-done .mg-cat-label { color:rgba(255,210,80,.4); }
.mg-cat-done .mg-cat-count { color:rgba(120,200,80,.7); }
.mg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mg-card {
position: relative; overflow: hidden;
background: linear-gradient(160deg,#2a1d0e,#1a0f05);
border: 1.5px solid var(--gold); border-radius: 12px;
padding: 10px 4px 8px; text-align: center; cursor: pointer;
transition: transform .18s, box-shadow .18s;
box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,80,.15);
}
.mg-card:active { transform: scale(.95); }
.mg-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(180,140,20,.35); }
.mg-card-shine {
position: absolute; inset: 0; border-radius: 12px;
background: linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 55%);
pointer-events: none;
}
.mg-card.mg-done { opacity: .45; filter: grayscale(.6); cursor: default; }
.mg-card.mg-done:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.mg-card.mg-avail {
border-color: rgba(212,167,65,.55);
animation: mgCardPulse 2.8s ease infinite;
}
@keyframes mgCardPulse {
0%,100% { box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,80,.15); }
50% { box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,210,80,.15), 0 0 10px rgba(212,167,65,.3); }
}
.mg-card-badge {
position:absolute; top:5px; right:6px;
font-size:.5rem; font-family:'Cinzel',serif;
background:rgba(180,120,10,.85); color:#ffe8a0;
padding:1px 5px; border-radius:8px;
border:1px solid rgba(255,210,80,.4);
}
.mg-emoji { font-size: 2rem; line-height: 1.1; }
.mg-name { font-size: .6rem; color: var(--gold-bright); margin: 4px 0 6px; font-family: 'Cinzel',serif; line-height: 1.2; }
.mg-pips { display: flex; justify-content: center; gap: 3px; }
.mg-pip { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,210,80,.3); border: 1px solid rgba(255,210,80,.5); }
.mg-pip.used { background: var(--gold-bright); }
/* Overlay */
.mg-overlay {
position: fixed; inset: 0; z-index: 9000;
background: rgba(10,5,0,.92); backdrop-filter: blur(4px);
display: flex; align-items: flex-start; justify-content: center;
overflow-y: auto; padding: 16px 0 40px;
animation: mgFadeIn .25s ease;
}
.mg-overlay.mg-out { animation: mgFadeOut .28s ease forwards; }
.mg-overlay.mg-has-bg {
background-color: rgba(5,2,0,.55);
background-size: cover;
background-position: center;
}
.mg-overlay.mg-has-bg .mg-box {
background: rgba(5,2,0,.55);
border-radius: 12px;
backdrop-filter: blur(2px);
}
@keyframes mgFadeIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
@keyframes mgFadeOut { to{opacity:0;transform:scale(.97)} }
.mg-box {
width: 100%; max-width: 420px; padding: 8px 16px 24px;
position: relative;
}
.mg-x-btn {
position: absolute; top: 0; right: 8px;
background: none; border: none; color: rgba(255,210,80,.6);
font-size: 1.4rem; cursor: pointer; padding: 4px 8px; z-index: 1;
}
.mg-x-btn:hover { color: var(--gold-bright); }
.mg-game-title {
text-align: center; font-family: 'Cinzel',serif; font-size: 1.3rem;
color: var(--gold-bright); text-shadow: 0 0 20px rgba(255,200,50,.4);
margin: 32px 0 16px; letter-spacing: .05em;
}
.mg-hint { text-align:center; color:rgba(255,220,120,.7); font-size:.9rem; margin:10px 0; min-height:1.4em; }
.mg-result-area { margin-top: 16px; }
.mg-res-in { animation: mgResIn .4s ease; }
@keyframes mgResIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.mg-reward {
background: linear-gradient(135deg,rgba(180,140,20,.18),rgba(80,50,10,.4));
border: 1.5px solid var(--gold); border-radius: 14px;
padding: 16px; text-align: center;
}
.mg-reward-title { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--gold-bright); margin-bottom:6px; }
.mg-reward-sub { color:rgba(255,220,120,.65); font-size:.82rem; margin-bottom:10px; }
.mg-reward-lines { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.mg-rl { background:rgba(0,0,0,.35); border:1px solid rgba(255,210,80,.3); border-radius:20px; padding:4px 12px; font-size:.9rem; color:var(--gold-bright); }
.mg-jackpot { animation: mgJackpot 1s ease; }
@keyframes mgJackpot { 0%,100%{transform:scale(1)} 20%{transform:scale(1.08)} 60%{transform:scale(.97)} }
.mg-close-btn { display:block; margin:16px auto 0; min-width:140px; }
/* ── 🏹 BALESTRA ── */
.mg-archery-wrap { padding-top: 8px; }
.mga-scene { display:flex; flex-direction:column; align-items:center; gap:18px; margin:16px 0; }
.mga-target {
width: 180px; height: 180px; position: relative; cursor: pointer;
filter: drop-shadow(0 4px 20px rgba(0,0,0,.6));
border-radius: 50%; overflow: hidden;
transition: transform .1s;
}
.mga-target:active { transform: scale(.96); }
.mga-ring {
position: absolute; border-radius: 50%;
top: 50%; left: 50%; transform: translate(-50%,-50%);
border: 3px solid rgba(0,0,0,.3);
}
.r4 { width:100%; height:100%; background:#2c2c2c; }
.r3 { width:75%; height:75%; background:#1a3a6a; }
.r2 { width:52%; height:52%; background:#c0392b; }
.r1 { width:32%; height:32%; background:#d4a017; }
.mga-bull { position:absolute; width:14%; height:14%; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,#fff9e0,var(--gold-bright)); box-shadow:0 0 10px rgba(255,220,50,.6); }
.mga-hit-label {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
font-family:'Cinzel',serif; font-size:1rem; font-weight:700;
text-shadow: 0 2px 6px rgba(0,0,0,.8); opacity:0;
transition: opacity .3s; pointer-events:none; white-space:nowrap;
}
.mga-h-bull { color:#fff; }
.mga-h-good { color:#ffd700; }
.mga-h-ok { color:#e0b0b0; }
.mga-h-meh { color:#aaa; }
.mga-h-miss { color:#888; }
.mga-bar-wrap {
width: 200px; height: 18px; border-radius: 9px;
background: rgba(0,0,0,.5); border: 1.5px solid rgba(255,210,80,.3);
position: relative; overflow: hidden;
}
.mga-bar {
position: absolute; top: 1px; bottom: 1px; width: 14px; left: 0;
background: linear-gradient(90deg, #ff4500, #ffd700, #00e676);
border-radius: 6px;
box-shadow: 0 0 8px currentColor;
transition: left 0s;
}
.mga-shots { display:flex; gap:8px; font-size:1.4rem; }
.mga-arrow-pip { transition:opacity .3s; }
.mga-arrow-pip.mga-pip-used { opacity:.2; }
.mga-total { text-align:center; color:var(--gold-bright); font-family:'Cinzel',serif; margin-top:4px; }
/* ── Sfide (Daily + Weekly) ── */
.ch-tab-row {
display: flex; gap: 6px; margin-bottom: 12px;
}
.ch-tab-pill {
flex: 1; padding: 6px 0; border-radius: 20px;
border: 1px solid var(--leather); background: rgba(59,42,26,.06);
color: var(--ink); font-size: .88rem; font-weight: 600; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.ch-tab-pill.active {
background: var(--gold); color: #1a0d00; border-color: var(--gold); font-weight: 700;
}
.challenge-title-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.challenge-row {
margin-bottom: 10px; padding: 8px; border-radius: 8px;
background: rgba(0,0,0,.06);
}
.challenge-row.ch-completable {
background: rgba(201,147,46,.12);
border: 1px solid rgba(201,147,46,.35);
}
.challenge-row.ch-claimed {
opacity: .5;
}
.challenge-head {
display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px;
}
.challenge-icon { font-size: 1.3rem; flex-shrink: 0; }
.challenge-mid { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.challenge-label { font-weight: 700; font-size: 1rem; color: var(--ink); }
.challenge-rew { color: var(--ink); font-size: .88rem; }
.challenge-check { color: var(--emerald); font-weight: 700; font-size: 1.1rem; }
.challenge-bonus-row {
margin-top: 8px; padding: 6px 8px; border-radius: 6px;
background: rgba(0,0,0,.06);
display: flex; justify-content: space-between; align-items: center;
font-size: .88rem; font-weight: 600; color: var(--ink-light);
}
.challenge-bonus-row.ch-claimed { opacity: .5; }
.ch-empty-state {
margin-top: 14px; padding: 14px 10px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
border-top: 1px solid rgba(232,182,76,.15);
}
.ch-empty-icon { font-size: 1.8rem; }
.ch-empty-text { font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
.ch-empty-countdown { font-size: .76rem; color: rgba(255,255,255,.45); }
.membar-fill.blue { background: linear-gradient(90deg, #2e6fb0, #4a9fd4); }
/* ══════════════ v4.10: HUD, Allenamento, Heatmap, Carte, Missioni ══════════════ */
/* ── XP bar glow al 90%+ ── */
.xpbar.almost {
box-shadow: 0 0 10px rgba(232,182,76,.7), inset 0 2px 4px rgba(0,0,0,.5);
border-color: var(--gold-bright);
animation: xpbar-pulse 1.4s ease-in-out infinite;
}
@keyframes xpbar-pulse {
0%,100% { box-shadow: 0 0 8px rgba(232,182,76,.5); }
50% { box-shadow: 0 0 18px rgba(232,182,76,.9), 0 0 4px rgba(232,182,76,.4); }
}
/* ── Heatmap diario ── */
.km-heatmap-wrap { margin: 12px 0; }
.km-heatmap-title { font-family: 'Cinzel', serif; font-size: .72rem; color: #c9b48f; margin-bottom: 6px; }
/* ── Heatmap outer layout ─────────────────────── */
.hm-outer {
display: flex;
gap: 4px;
align-items: flex-start;
}
.hm-daylabels {
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 14px; /* aligns with month row */
flex-shrink: 0;
width: 9px;
}
.hm-daylabel {
flex: 1;
font-size: .52rem;
color: var(--muted);
line-height: 1;
display: flex;
align-items: center;
min-height: 9px;
}
.hm-right { flex: 1; min-width: 0; }
.hm-month-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 3px;
margin-bottom: 3px;
height: 12px;
}
.hm-month-cell {
font-size: .54rem;
color: var(--muted);
overflow: hidden;
white-space: nowrap;
line-height: 12px;
}
.km-heatmap {
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-auto-flow: column;
gap: 3px; width: 100%;
}
.hm-cell {
aspect-ratio: 1; border-radius: 3px;
background: rgba(255,255,255,.08);
transition: transform .1s;
}
.hm-cell:hover { transform: scale(1.3); }
.hm-cell[data-i="1"] { background: rgba(46,139,87,.3); }
.hm-cell[data-i="2"] { background: rgba(46,139,87,.55); }
.hm-cell[data-i="3"] { background: rgba(46,139,87,.82); }
.hm-cell[data-i="4"] { background: var(--gold-bright); box-shadow: 0 0 4px rgba(232,182,76,.6); }
.hm-legend { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .6rem; color: #9a8870; }
.hm-legend-cell { width: 10px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.08); }
.hm-legend-cell[data-i="1"] { background: rgba(46,139,87,.3); }
.hm-legend-cell[data-i="2"] { background: rgba(46,139,87,.55); }
.hm-legend-cell[data-i="3"] { background: rgba(46,139,87,.82); }
.hm-legend-cell[data-i="4"] { background: var(--gold-bright); }
.hm-legend-scale { color: var(--muted); opacity: .7; }
/* ── Card flip animation ── */
@keyframes tcard-flipout {
to { transform: scaleX(0) scaleY(.9); opacity: .3; }
}
@keyframes tcard-flipin {
from { transform: scaleX(0) scaleY(.9); opacity: .3; }
to { transform: scaleX(1) scaleY(1); opacity: 1; }
}
.tcard.flip-out { animation: tcard-flipout .16s cubic-bezier(0.4,0,1,1) forwards; }
.tcard.flip-in { animation: tcard-flipin .18s cubic-bezier(0,0,0.2,1) forwards; }
.tcard:not(.locked) { cursor: pointer; }
.tcard-back-content {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 4px 0;
}
.card-back-icon { font-size: 1.4rem; opacity: .6; }
.tcard-tap-hint {
font-size: .58rem; color: #9a8870; margin-top: 2px;
letter-spacing: .04em; opacity: .7;
}
/* ── Missione attiva: progress cinematico ── */
.active-mission-prog {
display: flex; align-items: center; gap: 12px; margin: 8px 0;
}
.mission-boss-img {
width: 64px; height: 64px; object-fit: contain;
filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
flex-shrink: 0; animation: bossFloat 3s ease-in-out infinite;
}
@keyframes bossFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.mission-prog-wrap { flex: 1; min-width: 0; }
.mission-prog-bar {
position: relative; height: 18px;
background: rgba(0,0,0,.4); border-radius: 9px; overflow: hidden;
border: 1px solid rgba(201,147,46,.4); margin-bottom: 5px;
}
.mission-prog-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-bright));
border-radius: 9px; position: relative; overflow: hidden;
transition: width .8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.mission-prog-fill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
animation: shine 2s linear infinite;
}
.mission-prog-label {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: .62rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000;
}
.mission-prog-remaining { font-size: .72rem; color: #c9b48f; }
.mission-prog-remaining b { color: var(--gold-bright); }
/* ── Missioni disponibili: difficoltà ── */
.mission-difficulty { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.mission-diff-bar { height: 4px; border-radius: 2px; }
/* ══════════════ v4.11: Level-Up, Chest, Arena, Mappa, Login ══════════════ */
/* ── Level-up fullscreen overlay ── */
.lup-overlay {
--lup-glow: #c9932e;
position: fixed; inset: 0; z-index: 9999;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--lup-glow) 22%, transparent) 0%, rgba(6,4,2,.94) 65%);
pointer-events: all; cursor: pointer;
opacity: 0; transition: opacity .3s;
}
.lup-overlay.lup-visible { opacity: 1; }
.lup-overlay.lup-exit { opacity: 0; transition: opacity .5s; }
/* Avatar eroe nell'overlay */
.lup-avatar {
width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
border: 3px solid var(--lup-glow);
box-shadow: 0 0 24px color-mix(in srgb, var(--lup-glow) 60%, transparent);
margin-bottom: 10px;
animation: lup-pop .5s .0s cubic-bezier(.17,.67,.35,1.3) both;
}
.lup-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lup-badge {
font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .18em;
color: var(--lup-glow); text-transform: uppercase; margin-bottom: 6px;
animation: lup-slidein .5s .12s both;
}
.lup-level {
font-family: 'Cinzel', serif; font-size: 6rem; font-weight: 900; line-height: 1;
color: #fff;
text-shadow: 0 0 30px var(--lup-glow), 0 0 70px color-mix(in srgb, var(--lup-glow) 50%, transparent), 0 2px 0 rgba(0,0,0,.9);
animation: lup-pop .55s .05s cubic-bezier(.17,.67,.35,1.3) both;
}
.lup-title-text {
font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700;
color: #e8d5a0; letter-spacing: .06em; margin-top: 6px;
animation: lup-slidein .5s .28s both;
}
.lup-talent {
font-size: .78rem; color: color-mix(in srgb, var(--lup-glow) 80%, #fff);
margin-top: 8px; padding: 4px 14px;
border: 1px solid color-mix(in srgb, var(--lup-glow) 40%, transparent);
border-radius: 20px;
animation: lup-slidein .5s .42s both;
}
.lup-subtitle {
font-size: .82rem; color: #b8a070; margin-top: 4px; font-style: italic;
animation: lup-slidein .5s .35s both;
}
.lup-tap { font-size: .65rem; color: #5a4820; margin-top: 22px; letter-spacing: .08em; animation: lup-slidein .6s .75s both; }
@keyframes lup-slidein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lup-pop { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
/* ── Pergamena Bioma ───────────────────────────────────────── */
.biome-parchment-overlay {
position: fixed; inset: 0; z-index: 9998;
display: flex; align-items: center; justify-content: center;
background: rgba(4, 2, 0, .88);
backdrop-filter: blur(4px);
padding: 16px;
opacity: 0; transition: opacity .4s;
}
.biome-parchment-overlay.biome-parchment-visible { opacity: 1; }
.biome-parchment-overlay.biome-parchment-exit { opacity: 0; transition: opacity .5s; }
.biome-parchment-scroll {
background: linear-gradient(170deg, #f5e6c0 0%, #e8d099 60%, #d4b87a 100%);
border-radius: 8px;
max-width: 420px; width: 100%;
max-height: 90vh; overflow-y: auto;
padding: 28px 24px 24px;
text-align: center;
box-shadow: 0 0 0 1px #b8944a, 0 0 0 3px rgba(184,148,74,.25), 0 8px 40px rgba(0,0,0,.7);
position: relative;
animation: parchment-unfurl .5s cubic-bezier(.22,.68,.35,1.1) both;
}
@keyframes parchment-unfurl {
from { opacity: 0; transform: scaleY(.6) translateY(20px); }
to { opacity: 1; transform: none; }
}
.biome-parchment-top-ornament,
.biome-parchment-bottom-ornament {
font-size: 1.2rem; color: #8a6830; opacity: .7; line-height: 1;
}
.biome-parchment-bottom-ornament { transform: scaleX(-1); display: inline-block; }
.biome-parchment-biome-icon {
font-size: 2.6rem; margin: 8px 0 4px; line-height: 1;
animation: lup-pop .45s .1s both;
}
.biome-parchment-subtitle {
font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
color: #8a6830; margin-bottom: 4px;
}
.biome-parchment-name {
font-family: 'Cinzel', serif; font-size: 1.25rem; font-weight: 700;
color: #3a1e00; margin: 0 0 10px; text-wrap: balance;
animation: lup-slidein .45s .15s both;
}
.biome-parchment-divider {
height: 1px; background: linear-gradient(90deg, transparent, #b8944a, transparent);
margin: 10px 0;
}
.biome-parchment-chapter {
font-family: 'Cinzel', serif; font-size: .78rem; font-weight: 600;
color: #6a4820; letter-spacing: .06em; margin-bottom: 10px;
animation: lup-slidein .45s .2s both;
}
.biome-parchment-text {
font-size: .88rem; line-height: 1.65; color: #2a1400;
text-align: left; margin: 0 0 16px;
font-style: italic;
animation: lup-slidein .5s .3s both;
}
.biome-parchment-btn {
background: linear-gradient(135deg, #8a6010, #c49030) !important;
border-color: #8a6010 !important; color: #fff !important;
animation: lup-slidein .45s .45s both;
}
/* ── Artefatto nella pergamena bioma ── */
.biome-parchment-artifact {
display: flex; align-items: flex-start; gap: 12px;
background: rgba(0,0,0,.08); border-radius: 8px;
padding: 12px 14px; margin: 14px 0 0; text-align: left;
}
.bpa-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.bpa-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: #8a6010; font-weight: 700; }
.bpa-name { font-family: 'Cinzel Decorative', serif; font-size: .95rem; color: #3a2000; font-weight: 700; margin: 2px 0; }
.bpa-flavor{ font-size: .78rem; color: #5a3a10; font-style: italic; font-weight: 500; line-height: 1.5; }
/* ── Collezione Reliquie ── */
.artifacts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px; margin-top: 10px;
}
.artifact-cell {
border-radius: 8px; padding: 8px 6px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-align: center; transition: transform .15s;
}
.artifact-cell.artifact-unlocked {
background: linear-gradient(160deg, rgba(201,147,46,.12) 0%, rgba(201,147,46,.06) 100%);
border: 1px solid rgba(201,147,46,.4);
cursor: default;
}
.artifact-cell.artifact-locked {
background: rgba(0,0,0,.05);
border: 1px solid rgba(0,0,0,.1);
opacity: .5;
}
.artifact-icon { font-size: 1.6rem; line-height: 1; }
.artifact-unknown { font-size: 1.4rem; color: var(--ink-light); }
.artifact-name { font-size: .65rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.artifact-flavor {
font-size: .6rem; color: var(--ink-light); font-style: italic; line-height: 1.4;
display: none;
}
.artifact-cell.artifact-unlocked:hover .artifact-flavor { display: block; }
.artifact-cell.artifact-unlocked:hover .artifact-name { display: none; }
/* ── Epistolario ── */
.ep-card {
display: flex; flex-direction: column; gap: 4px;
padding: 12px; border-radius: 8px; cursor: pointer;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
transition: background .15s;
margin-bottom: 8px;
}
.ep-card:hover { background: rgba(255,255,255,.08); }
.ep-card-header { display: flex; align-items: center; gap: 10px; }
.ep-icon { font-size: 1.4rem; flex-shrink: 0; }
.ep-meta { display: flex; flex-direction: column; }
.ep-sender { font-weight: 700; font-size: .85rem; color: var(--text, #e8d8b0); }
.ep-role { font-size: .72rem; color: var(--text-muted, #888); }
.ep-title { font-size: .8rem; font-weight: 500; color: var(--text-muted, #aaa); margin-top: 4px; padding-left: 2px; }
.ep-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ep-modal-body {
font-size: .88rem; line-height: 1.7; color: var(--text, #e8d8b0);
white-space: pre-line; text-align: left; margin: 8px 0 16px;
font-family: Georgia, serif;
}
/* ── Lettere dal Mondo (overlay) ── */
.world-letter-overlay {
position: fixed; inset: 0; z-index: 9998;
display: flex; align-items: center; justify-content: center;
background: rgba(4, 2, 0, .88); backdrop-filter: blur(4px);
padding: 16px; opacity: 0; transition: opacity .35s;
}
.world-letter-overlay.world-letter-visible { opacity: 1; }
.world-letter-overlay.world-letter-exit { opacity: 0; transition: opacity .4s; }
.world-letter-card {
background: linear-gradient(160deg, #f0e2c2 0%, #ddc88a 100%);
border-radius: 4px 4px 8px 8px;
max-width: 380px; width: 100%; max-height: 88vh; overflow-y: auto;
padding: 24px 22px 20px;
box-shadow: 0 0 0 1px #b08840, 0 0 0 4px rgba(176,136,64,.2), 0 8px 40px rgba(0,0,0,.65);
animation: letter-drop .45s cubic-bezier(.22,.68,.35,1.08) both;
}
@keyframes letter-drop {
from { opacity: 0; transform: translateY(-24px) rotate(-1.5deg); }
to { opacity: 1; transform: none; }
}
.wl-seal {
font-size: 2.4rem; text-align: center; display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
margin-bottom: 8px;
}
.wl-from {
display: flex; flex-direction: column; align-items: center;
margin-bottom: 12px;
}
.wl-sender { font-weight: 800; font-size: .95rem; color: #3a2000; }
.wl-role { font-size: .72rem; color: #7a5020; letter-spacing: .04em; }
.wl-divider {
height: 1px; background: linear-gradient(90deg, transparent, #b08840, transparent);
margin: 10px 0;
}
.wl-title {
font-family: Georgia, serif; font-size: 1.05rem; font-weight: 600;
color: #3a2000; text-align: center; margin: 10px 0 14px;
}
.wl-body {
font-family: Georgia, serif; font-size: .88rem; line-height: 1.75;
color: #2a1800; text-align: left; white-space: pre-line;
margin-bottom: 6px;
}
.wl-btn {
background: linear-gradient(135deg, #8a6010, #c49030) !important;
border-color: #8a6010 !important; color: #fff !important;
width: 100%; margin-top: 14px;
}
.lup-particle {
position: absolute; width: 6px; height: 6px; border-radius: 50%;
background: var(--pc, var(--lup-glow));
top: 50%; left: 50%;
animation: lup-fly var(--dur, 1.4s) var(--delay, 0s) ease-out both;
opacity: 0;
}
.lup-particle:nth-child(odd) { width: 4px; height: 4px; }
@keyframes lup-fly {
0% { opacity: 1; transform: translate(0,0) scale(1); }
80% { opacity: .7; }
100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.15); }
}
.lup-ring {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 80px; height: 80px; border-radius: 50%;
border: 2px solid var(--lup-glow); opacity: 0;
animation: lup-ring-out 1s .05s ease-out both;
}
.lup-ring:nth-child(2) { animation-delay: .2s; width: 150px; height: 150px; }
.lup-ring:nth-child(3) { animation-delay: .38s; width: 220px; height: 220px; }
@keyframes lup-ring-out {
0% { opacity: .8; transform: translate(-50%,-50%) scale(.15); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}
/* ── Chest cinematic ── */
@keyframes chest-shake {
0%,100% { transform: rotate(0deg) scale(1); }
15% { transform: rotate(-7deg) scale(1.06); }
30% { transform: rotate(7deg) scale(1.08); }
45% { transform: rotate(-5deg) scale(1.1); }
60% { transform: rotate(5deg) scale(1.12); }
75% { transform: rotate(-3deg) scale(1.1); }
}
.chest-btn.opening { animation: chest-shake .7s ease both; }
@keyframes chest-crack {
0% { filter: brightness(1); }
40% { filter: brightness(3) saturate(2); }
100% { filter: brightness(6) saturate(0) blur(4px); opacity: 0; }
}
.chest-btn.cracking { animation: chest-crack .35s ease forwards; }
.chest-reveal-header {
text-align: center; padding: 12px 0 8px; position: relative;
}
.chest-burst-ring {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 120px; height: 120px; border-radius: 50%;
border: 2px solid var(--gold-bright);
animation: cburst 1s ease-out both; opacity: 0; pointer-events: none;
}
.chest-burst-ring::before {
content: ''; position: absolute; inset: 10px; border-radius: 50%;
border: 2px solid rgba(232,182,76,.4);
animation: cburst 1s .12s ease-out both; opacity: 0;
}
@keyframes cburst {
0% { opacity: 1; transform: translate(-50%,-50%) scale(0); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
}
.chest-reveal-title {
font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
color: var(--gold-bright); margin: 0; position: relative; z-index: 1;
}
.chest-res-row {
display: flex; justify-content: center; gap: 10px; margin: 8px 0 12px;
}
.chest-res-chip {
padding: 5px 14px; border-radius: 20px; font-weight: 700; font-size: .9rem;
background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15);
animation: chip-pop .4s cubic-bezier(.17,.67,.35,1.4) both;
}
.chest-res-chip.gold { color: #f0c84a; border-color: rgba(240,200,74,.4); }
.chest-res-chip.wood { color: #a8d878; border-color: rgba(168,216,120,.3); }
.chest-res-chip.stone { color: #b8b8c8; border-color: rgba(184,184,200,.3); }
@keyframes chip-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.chest-res-chip:nth-child(2) { animation-delay: .08s; }
.chest-res-chip:nth-child(3) { animation-delay: .16s; }
.loot-stagger {
animation: loot-slide-in .4s calc(var(--di,0) * 100ms + 150ms) cubic-bezier(.17,.67,.35,1.3) both;
}
@keyframes loot-slide-in {
from { opacity: 0; transform: translateX(-20px) scale(.95); }
to { opacity: 1; transform: none; }
}
/* ── Arena move cards ── */
.battle-move-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
padding: 8px 0; width: 100%;
}
.move-card-btn {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 10px 6px 8px;
background: linear-gradient(160deg, rgba(60,40,20,.85), rgba(28,18,9,.95));
border: 1.5px solid rgba(201,147,46,.35); border-radius: 12px;
cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s;
color: var(--ink); min-height: 80px;
}
.move-card-btn:hover:not(:disabled) {
transform: translateY(-3px) scale(1.03);
border-color: var(--gold-bright);
box-shadow: 0 6px 20px rgba(201,147,46,.35);
}
.move-card-btn:active:not(:disabled) { transform: scale(.96); }
.move-card-btn:disabled { opacity: .4; cursor: not-allowed; }
.mcb-icon { font-size: 2rem; line-height: 1; }
.mcb-label { font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 700; color: var(--gold-bright); }
.mcb-beats { font-size: .58rem; color: #9a8870; margin-top: 1px; }
.battle-move-cards.locked .move-card-btn { opacity: .35; pointer-events: none; }
/* Reveal animation for move comparison */
.reveal-cards {
display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
}
.reveal-card {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 10px 14px; border-radius: 10px; min-width: 64px;
border: 2px solid rgba(201,147,46,.4);
background: rgba(28,18,9,.9);
animation: reveal-card-in .3s cubic-bezier(.17,.67,.35,1.3) both;
}
.reveal-card.villain { animation-delay: .15s; }
.reveal-card-icon { font-size: 2rem; }
.reveal-card-who { font-size: .58rem; color: #9a8870; }
@keyframes reveal-card-in {
from { opacity: 0; transform: scale(.4) rotateY(90deg); }
to { opacity: 1; transform: scale(1) rotateY(0); }
}
.reveal-vs {
font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.1rem;
color: var(--gold-bright); text-shadow: 0 0 10px rgba(232,182,76,.6);
}
/* Battle result flash */
.battle-result-overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
pointer-events: none; border-radius: inherit;
}
.battle-result-text {
font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 900; text-align: center;
animation: battle-result-pop .6s cubic-bezier(.17,.67,.35,1.3) both;
text-shadow: 0 2px 20px rgba(0,0,0,.8);
}
.battle-result-text.win { color: var(--gold-bright); text-shadow: 0 0 30px rgba(232,182,76,.9), 0 2px 0 #000; }
.battle-result-text.lose { color: #e05050; text-shadow: 0 0 30px rgba(224,80,80,.9), 0 2px 0 #000; }
@keyframes battle-result-pop {
0% { opacity: 0; transform: scale(.2); }
60% { opacity: 1; transform: scale(1.15); }
100%{ opacity: 1; transform: scale(1); }
}
/* ── Mappa biomi: atlas card grid ── */
.biome-atlas { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.biome-atlas-card {
position: relative; border-radius: 10px; overflow: hidden;
min-height: 88px; cursor: pointer;
border: 1.5px solid rgba(201,147,46,.2);
background: rgba(28,18,9,.85);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.biome-atlas-card:hover:not(.locked) {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,.5);
border-color: rgba(201,147,46,.5);
}
.biome-atlas-card.locked { cursor: default; }
.biome-atlas-card.current {
border: 2px solid var(--gold-bright);
box-shadow: 0 0 12px rgba(232,182,76,.35);
}
.biome-atlas-card.locked::before {
content: ''; position: absolute; inset: 0;
background: rgba(10,6,3,.72); z-index: 2;
}
.bac-bg {
position: absolute; inset: 0; object-fit: cover;
width: 100%; height: 100%;
filter: saturate(.7) brightness(.65);
transition: transform .4s;
}
.biome-atlas-card:hover:not(.locked) .bac-bg { transform: scale(1.04); }
.bac-info {
position: relative; z-index: 3;
display: flex; flex-direction: column; justify-content: flex-end;
height: 100%; padding: 8px 10px;
background: linear-gradient(180deg, transparent 30%, rgba(10,6,3,.8) 100%);
}
.biome-atlas-card.locked .bac-info { z-index: 3; }
.bac-icon { font-size: 1.4rem; margin-bottom: 2px; opacity: .9; }
.bac-name {
font-family: 'Cinzel', serif; font-size: .72rem; font-weight: 700;
color: #e8d5a0; line-height: 1.2;
text-shadow: 0 1px 4px #000;
}
.bac-lv { font-size: .6rem; color: #9a8870; margin-top: 1px; }
.bac-lock {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
z-index: 4; text-align: center;
}
.bac-lock-icon { font-size: 1.6rem; display: block; filter: drop-shadow(0 2px 4px #000); }
.bac-lock-lv { font-size: .62rem; color: #c9b48f; margin-top: 2px; font-weight: 700; }
.bac-current-badge {
position: absolute; top: 6px; right: 6px; z-index: 4;
background: var(--gold-bright); color: #1c0a00;
font-size: .55rem; font-weight: 900; padding: 2px 6px; border-radius: 10px;
font-family: 'Cinzel', serif; letter-spacing: .05em;
}
/* ── Login bonus celebrativo ── */
.login-modal-wrap { text-align: center; padding: 4px 0; }
.login-day-wrap {
display: flex; justify-content: center; gap: 7px; margin: 14px 0;
flex-wrap: wrap;
}
.login-day-cell {
display: flex; flex-direction: column; align-items: center; gap: 2px;
width: 36px;
}
.login-day-pip {
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .8rem; font-weight: 700;
border: 2px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.3); color: #6a5840;
transition: transform .15s;
}
.login-day-cell.filled .login-day-pip {
background: linear-gradient(135deg, rgba(201,147,46,.6), rgba(140,100,20,.4));
border-color: var(--gold-bright);
color: var(--gold-bright); box-shadow: 0 0 8px rgba(232,182,76,.4);
}
.login-day-cell.today .login-day-pip {
background: linear-gradient(135deg, var(--gold), var(--gold-bright));
border-color: #fff;
color: #1c0a00; font-size: 1rem;
box-shadow: 0 0 16px rgba(232,182,76,.7), 0 2px 0 rgba(0,0,0,.4);
animation: login-pip-pulse 1.6s ease-in-out infinite;
}
.login-day-cell.special.today .login-day-pip { font-size: 1.2rem; background: radial-gradient(circle, #fff 0%, var(--gold-bright) 60%); }
.login-day-label { font-size: .55rem; color: #7a6840; font-weight: 600; }
.login-day-cell.filled .login-day-label { color: #c9b48f; }
.login-day-cell.today .login-day-label { color: var(--gold-bright); font-weight: 700; }
@keyframes login-pip-pulse {
0%,100% { box-shadow: 0 0 12px rgba(232,182,76,.6); }
50% { box-shadow: 0 0 24px rgba(232,182,76,.9), 0 0 8px rgba(255,255,255,.3); }
}
.login-gold-reward {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 24px; border-radius: 30px; margin: 10px 0;
background: linear-gradient(135deg, rgba(201,147,46,.25), rgba(140,100,20,.15));
border: 1.5px solid rgba(201,147,46,.4);
font-size: 1.4rem; font-weight: 700; color: var(--gold-bright);
animation: chip-pop .5s .2s cubic-bezier(.17,.67,.35,1.4) both;
}
.login-streak-label {
font-family: 'Cinzel', serif; font-size: .8rem; font-weight: 700;
color: #c9b48f; margin-bottom: 6px;
}
.login-item-reveal {
margin: 12px 0;
animation: loot-slide-in .4s .35s cubic-bezier(.17,.67,.35,1.3) both;
}
/* ── Meteo dinamico ── */
.camp-weather {
display: flex; align-items: center; gap: 6px;
font-size: .9rem; padding: 5px 10px;
background: rgba(0,0,0,.18); border-radius: 20px;
margin: 6px auto 0; width: fit-content;
color: #e8dcc8;
}
.camp-weather-bonus { color: var(--gold-bright); }
/* Stagione chip — in alto a destra nel panorama */
.camp-season-chip {
position: absolute; top: 8px; right: 8px; z-index: 30;
display: inline-flex; align-items: center; gap: 5px;
font-size: .78rem; padding: 3px 10px;
background: color-mix(in srgb, var(--season-color, #7ec850) 22%, rgba(0,0,0,.55));
border: 1px solid color-mix(in srgb, var(--season-color, #7ec850) 55%, transparent);
border-radius: 20px;
color: var(--season-color, #7ec850);
cursor: pointer;
backdrop-filter: blur(4px);
transition: background .2s;
}
.camp-season-chip:hover { background: color-mix(in srgb, var(--season-color, #7ec850) 35%, rgba(0,0,0,.5)); }
/* Sfida stagionale panel */
.season-challenge-panel {
border: 1px solid color-mix(in srgb, var(--season-color, #7ec850) 60%, transparent) !important;
background: color-mix(in srgb, var(--season-color, #7ec850) 6%, var(--surface)) !important;
}
.sc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sc-season-tag {
font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
background: color-mix(in srgb, var(--season-color, #7ec850) 25%, transparent);
color: var(--season-color, #7ec850);
white-space: nowrap;
}
.sc-label { font-weight: 700; font-size: .9rem; }
.sc-desc { margin-bottom: 8px; }
.sc-progress-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-bar { flex: 1; height: 8px; background: rgba(0,0,0,.3); border-radius: 4px; overflow: hidden; }
.sc-fill { height: 100%; background: var(--season-color, #7ec850); border-radius: 4px; transition: width .4s; }
.sc-fraction { font-size: .75rem; white-space: nowrap; color: var(--ink-light); }
/* Modal stagione */
.season-modal-header {
display: flex; align-items: center; gap: 14px;
padding: 12px 0 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
.season-modal-icon { font-size: 2.2rem; }
.season-cards-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.season-mini-card {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 10px; border-radius: 10px;
background: var(--surface2); border: 1px solid var(--border);
font-size: .72rem; opacity: .55;
}
.season-mini-card.active {
border-color: var(--season-color, #7ec850);
color: var(--season-color, #7ec850);
opacity: 1;
background: color-mix(in srgb, var(--season-color, #7ec850) 12%, var(--surface2));
}
.smc-icon { font-size: 1.3rem; }
.season-bonus-list { padding-left: 1.1rem; line-height: 1.9; font-size: .85rem; margin: 0 0 8px; }
/* ── Mappa del Tesoro settimanale ── */
.treasure-map-panel { border-color: #a0782a !important; }
.treasure-map-panel .panel-title { color: #c9932e; }
/* ── Mappa del Tesoro — layout ── */
/* riga track: medal ▸ segmento ▸ medal ▸ segmento ▸ medal — tutto in flex, zero assoluto */
.tm-track {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 8px;
}
/* wrapper medaglione */
.tm-medal-wrap {
position: relative;
width: 72px; height: 72px;
flex-shrink: 0;
z-index: 2;
}
/* cerchio illustrato */
.tm-medal {
width: 72px; height: 72px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 3px 12px rgba(0,0,0,.55);
transition: box-shadow .3s;
}
.tm-medal img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: filter .3s;
}
.tm-medal.claimed img { filter: grayscale(.25) brightness(.75); }
.tm-medal.done { box-shadow: 0 0 18px rgba(232,182,76,.65), 0 3px 12px rgba(0,0,0,.55); }
/* badge nell'angolo del wrapper (non clippato da overflow:hidden del cerchio) */
.tm-badge {
position: absolute; top: 0; right: 0;
width: 22px; height: 22px; border-radius: 50%;
font-size: .65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
border: 2px solid #1a1008;
z-index: 3;
}
.tm-badge.ready { background: #e8b64c; color: #3b2000; }
.tm-badge.claimed { background: #777; color: #fff; }
/* segmento di sentiero tra due medaglioni */
.tm-segment {
flex: 1;
height: 30px;
position: relative;
overflow: visible;
z-index: 1;
}
.tm-segment img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
border-radius: 2px;
}
.tm-segment-mask { display: none; }
/* bandierina posizione corrente */
.tm-flag {
position: absolute;
top: -14px;
transform: translateX(-50%);
font-size: 1.3rem;
line-height: 1;
z-index: 10;
pointer-events: none;
filter: drop-shadow(0 1px 4px rgba(0,0,0,.7));
}
/* riga etichette: 3 colonne allineate ai medaglioni */
.tm-labels {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.tm-label {
width: 72px;
display: flex; flex-direction: column; align-items: center;
gap: 5px;
}
/* testi e pulsanti */
.tm-reward { font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.35; }
.tm-reward.ready { color: #c9932e; font-weight: 700; }
.tm-action { display: flex; justify-content: center; align-items: center; }
.tm-km-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.tm-claimed-label { font-size: .78rem; color: #666; }
.tm-claim-btn {
font-size: .78rem; padding: 5px 12px;
background: linear-gradient(135deg, #b8860b, #e8b64c);
border: none; border-radius: 20px;
color: #3b2000; font-weight: 700; cursor: pointer;
font-family: inherit;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
white-space: nowrap;
}
.tm-progress-label {
text-align: center; font-size: .85rem; color: var(--muted);
padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07);
}
/* ── Recap mensile ── */
.monthly-recap-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
margin: .8rem 0;
}
.recap-cell {
display: flex; flex-direction: column; align-items: center;
background: rgba(255,255,255,.06); border-radius: 8px; padding: 10px 4px;
}
.recap-val { font-size: 1.3rem; font-weight: 700; color: var(--gold-bright); }
.recap-lbl { font-size: .65rem; color: var(--ink-light); margin-top: 2px; }
/* ── Prestige ── */
.prestige-panel {
border-color: #7c5cbf !important;
background: rgba(108,79,191,.08) !important;
}
.prestige-panel .panel-title { color: #a07eff; }
/* ── Hero idle animation ── */
@keyframes hero-idle-breath {
0%, 100% { transform: translateY(0) scale(1); }
45% { transform: translateY(-5px) scale(1, 0.985); }
55% { transform: translateY(-5px) scale(1, 0.985); }
}
.hero-idle {
animation: hero-idle-breath 3.5s ease-in-out infinite;
transform-origin: bottom center;
}
@media (prefers-reduced-motion: reduce) { .hero-idle { animation: none; } }
/* ── Boss settimanale ── */
.boss-weekly-panel { border-color: var(--danger) !important; }
.boss-weekly-panel .panel-title { color: var(--danger); }
.membar-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.boss-progress-line {
font-size: .88rem; padding: 4px 0;
border-left: 3px solid var(--danger);
padding-left: 8px; margin: 4px 0;
}
/* ── Calendario mensile heatmap ── */
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
margin-top: .4rem;
}
.cal-day-hdr {
text-align: center;
font-size: .62rem;
font-weight: 700;
letter-spacing: .03em;
color: var(--ink-light);
padding: 2px 0 4px;
}
.cal-cell {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
border-radius: 4px;
font-size: .7rem;
font-weight: 600;
color: var(--ink);
background: rgba(255,255,255,.06);
cursor: default;
}
.cal-day-num { font-size: .68rem; font-weight: 600; line-height: 1; }
.cal-day-km { font-size: .46rem; line-height: 1; opacity: .85; }
.cal-empty { background: transparent !important; }
.cal-today { outline: 2px solid var(--gold); outline-offset: -1px; }
.cal-cell[data-i="1"] { background: rgba(46,139,87,.28); color: #e8f5e9; }
.cal-cell[data-i="2"] { background: rgba(46,139,87,.52); color: #fff; }
.cal-cell[data-i="3"] { background: rgba(46,139,87,.80); color: #fff; }
.cal-cell[data-i="4"] { background: var(--gold-bright); color: #1a0d00; }
/* ── Trofei ── */
.trophy-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
gap: 8px;
margin-top: .5rem;
}
.trophy-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px;
border-radius: 8px;
text-align: center;
cursor: default;
}
.trophy-unlocked {
background: rgba(200,147,46,.12);
border: 1px solid rgba(200,147,46,.4);
}
.trophy-locked {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
opacity: .55;
}
.trophy-icon { font-size: 1.5rem; line-height: 1; display: block; }
.trophy-name { font-size: .6rem; font-weight: 700; color: var(--ink); }
.trophy-km { font-size: .58rem; color: var(--ink-light); }
.trophy-unlock {
display: flex;
align-items: center;
gap: 10px;
background: rgba(200,147,46,.14);
border: 1px solid rgba(200,147,46,.5);
border-radius: 8px;
padding: 8px 12px;
margin: 6px 0;
animation: trophy-pop .4s cubic-bezier(.2,1.6,.4,1) both;
}
.trophy-unlock-icon { font-size: 2rem; flex-shrink: 0; }
@keyframes trophy-pop {
from { transform: scale(.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ── Tutorial overlay ── */
/* ── Tutorial overlay ── */
.tutorial-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,.75);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
transition: opacity .25s ease;
}
.tutorial-overlay.tutorial-in { opacity: 1; }
.tutorial-overlay.tutorial-out { opacity: 0; }
.tutorial-card {
position: relative;
background: var(--parchment);
color: var(--ink);
border-radius: 20px;
padding: 2rem 1.6rem 1.6rem;
max-width: 340px;
width: 100%;
text-align: center;
box-shadow: 0 8px 48px rgba(0,0,0,.55);
transform: translateY(24px);
transition: transform .3s ease;
}
.tutorial-overlay.tutorial-in .tutorial-card { transform: translateY(0); }
.tutorial-overlay.tutorial-out .tutorial-card { transform: translateY(24px); }
.tutorial-skip {
position: absolute;
top: .7rem; right: .7rem;
background: none; border: none;
font-size: 1rem;
color: var(--ink-light);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
line-height: 1;
}
.tutorial-skip:hover { background: rgba(0,0,0,.08); }
/* Carousel */
.tut-viewport { overflow: hidden; margin-bottom: .2rem; }
.tut-track {
display: flex;
transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.tut-slide { flex-shrink: 0; }
/* Scene container */
.tut-art-scene {
height: 94px;
border-radius: 12px;
margin-bottom: .8rem;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Scene: world */
.tut-scene-world {
background: linear-gradient(170deg, #0c1625 0%, #1e3560 55%, #6b3a12 100%);
}
.tut-world-inner {
font-size: 2.2rem;
letter-spacing: 10px;
filter: drop-shadow(0 0 8px rgba(196,154,42,.55));
animation: tut-float 3s ease-in-out infinite alternate;
}
/* Scene: train */
.tut-scene-train {
background: linear-gradient(135deg, #0a2010 0%, #1a4520 100%);
}
.tut-train-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
}
.tut-train-row {
font-size: 1.55rem;
letter-spacing: 5px;
filter: drop-shadow(0 0 5px rgba(80,200,80,.3));
}
.tut-xpbar {
width: 130px; height: 7px;
background: rgba(255,255,255,.12);
border-radius: 4px;
overflow: hidden;
}
.tut-xpbar-fill {
height: 100%;
background: var(--gold, #c49a2a);
border-radius: 4px;
width: 18%;
animation: tut-bar-grow 1.8s .3s ease-out forwards;
}
@keyframes tut-bar-grow { to { width: 74%; } }
/* Scene: hubs */
.tut-scene-hubs {
background: linear-gradient(135deg, #130d18 0%, #201328 100%);
display: flex;
gap: 8px;
padding: 0 14px;
}
.tut-hub-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 4px;
background: rgba(255,255,255,.05);
border-radius: 10px;
font-size: 1.55rem;
border: 1px solid rgba(255,255,255,.08);
}
.tut-hub-label {
font-size: .5rem;
color: rgba(255,255,255,.42);
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 700;
}
/* Scene: guide (impostazioni) */
.tut-scene-guide {
background: linear-gradient(135deg, #0a1020 0%, #1a2540 60%, #0f1a30 100%);
justify-content: center;
}
.tut-guide-inner { display: flex; align-items: center; justify-content: center; width: 100%; }
.tut-guide-phone-frame {
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18);
border-radius: 10px; padding: 8px 10px 6px; width: 90%; max-width: 240px;
}
.tut-guide-tabbar {
display: flex; justify-content: space-around; align-items: flex-end; width: 100%; gap: 2px;
}
.tut-guide-tab {
display: flex; flex-direction: column; align-items: center;
font-size: 1.1rem; padding: 4px 6px; border-radius: 6px;
color: rgba(255,255,255,.5); position: relative;
}
.tut-guide-tab-center {
font-size: 1.4rem; background: rgba(96,165,250,.25);
border: 1px solid rgba(96,165,250,.4); padding: 6px 8px; margin-bottom: 2px;
}
.tut-guide-tab-active {
color: #fbbf24; background: rgba(251,191,36,.15);
border: 1.5px solid rgba(251,191,36,.5);
animation: tut-tab-pulse 1s ease-in-out infinite alternate;
}
@keyframes tut-tab-pulse {
from { box-shadow: 0 0 4px rgba(251,191,36,.3); }
to { box-shadow: 0 0 12px rgba(251,191,36,.8); }
}
.tut-guide-tab-label {
font-size: .45rem; font-weight: 700; letter-spacing: .04em; margin-top: 2px;
color: #fbbf24;
}
.tut-guide-arrow-up {
font-size: .65rem; color: rgba(255,255,255,.65); letter-spacing: .01em;
}
/* Scene: start */
.tut-scene-start {
background: radial-gradient(circle at 50% 65%, rgba(196,154,42,.22) 0%, transparent 65%),
linear-gradient(135deg, #180c04 0%, #2d1508 100%);
}
.tut-start-icon {
font-size: 3rem;
animation: tut-startpulse 1.1s ease-in-out infinite alternate;
filter: drop-shadow(0 0 14px rgba(196,154,42,.8));
}
/* Shared inner wrapper */
.tut-scene-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.tutorial-title {
font-family: 'Cinzel', serif;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: .5rem;
color: var(--ink);
}
.tutorial-text {
font-size: .9rem;
line-height: 1.55;
color: var(--ink-light);
margin-bottom: .2rem;
}
.tutorial-dots {
display: flex;
justify-content: center;
gap: 6px;
margin: .65rem 0 .9rem;
}
.tutorial-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(0,0,0,.18);
transition: background .2s;
}
.tutorial-dot.active { background: var(--gold); }
.tutorial-btn { width: 100%; }
@keyframes tut-float {
from { transform: translateY(0); }
to { transform: translateY(-4px); }
}
@keyframes tut-startpulse {
from { transform: scale(1); }
to { transform: scale(1.15); }
}
/* ── Tab onboarding pulse ── */
.tab.tab-onboarding-pulse {
position: relative;
}
.tab.tab-onboarding-pulse::after {
content: '';
position: absolute;
top: 4px; right: 4px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent, #e67e22);
animation: ob-pulse 1.2s infinite;
}
@keyframes ob-pulse {
0% { box-shadow: 0 0 0 0 rgba(230,126,34,.7); }
70% { box-shadow: 0 0 0 8px rgba(230,126,34,0); }
100% { box-shadow: 0 0 0 0 rgba(230,126,34,0); }
}
/* ── Primo allenamento overlay ── */
.first-workout-overlay {
position: fixed; inset: 0; z-index: 9998;
background: rgba(0,0,0,.75);
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
opacity: 0; transition: opacity .3s;
}
.first-workout-overlay.fwo-in { opacity: 1; }
.first-workout-overlay.fwo-out { opacity: 0; }
.fwo-card {
background: var(--parchment, #fdf6e3);
color: var(--ink, #1a1a1a);
border-radius: 20px;
padding: 2rem 1.6rem 1.6rem;
max-width: 360px; width: 100%;
text-align: center;
box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
.fwo-sparkles { font-size: 1.4rem; letter-spacing: 6px; margin-bottom: .4rem; animation: tut-sparkle 1.4s infinite alternate; }
.fwo-icon { font-size: 3.4rem; margin-bottom: .5rem; }
.fwo-title { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; }
.fwo-sub { font-size: .9rem; line-height: 1.5; color: var(--ink-light, #555); margin-bottom: 1.2rem; }
.fwo-hints { text-align: left; display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.4rem; }
.fwo-hint { display: flex; align-items: flex-start; gap: 10px; }
.fwo-hint-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.fwo-btn { width: 100%; }
/* ── Banner onboarding nel Rifugio ── */
.onboarding-banner {
border: 2px solid var(--gold, #e67e22);
background: rgba(230,126,34,.08);
display: flex; flex-direction: column; gap: 10px;
}
.ob-row { display: flex; align-items: flex-start; gap: 12px; }
.ob-icon { font-size: 1.5rem; flex-shrink: 0; }
.ob-btn { align-self: stretch; }
.ob-btn-dismiss { background: none; border: 1px solid var(--divider); color: var(--muted); font-size: .85rem; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
/* ── Backup import UI ── */
.backup-hero-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 200px;
overflow-y: auto;
margin-bottom: .4rem;
}
.backup-hero-row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(255,255,255,.08);
border-radius: 8px;
font-size: .85rem;
}
.backup-hero-avatar { font-size: 1.1rem; text-align: center; }
.backup-hero-name { font-weight: 600; }
.backup-hero-level { color: var(--gold); font-size: .8rem; white-space: nowrap; }
.backup-hero-km { color: var(--ink-light); font-size: .75rem; white-space: nowrap; }
.backup-action-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: .4rem;
}
.backup-action-grid .btn {
line-height: 1.3;
padding: .6rem .4rem;
text-align: center;
}
.backup-action-grid small {
display: block;
font-size: .7rem;
opacity: .75;
margin-top: 2px;
font-weight: 400;
}
.btn-danger {
background: linear-gradient(135deg, #8b2020, #b53030);
color: #fff;
}
/* ── Impostazioni audio toggle ── */
.settings-toggle-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: .4rem;
}
.toggle-label {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
cursor: pointer;
}
.toggle-label input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
position: absolute;
inset: 0;
background: rgba(255,255,255,.15);
border-radius: 13px;
transition: background .25s;
}
.toggle-slider::before {
content: '';
position: absolute;
width: 20px; height: 20px;
left: 3px; top: 3px;
border-radius: 50%;
background: #fff;
transition: transform .25s;
}
.toggle-label input:checked + .toggle-slider { background: var(--gold); }
.toggle-label input:checked + .toggle-slider::before { transform: translateX(22px); }
.toggle-status { font-size: .88rem; color: var(--ink); }
/* ── Pozione del Giorno ─────────────────────────────────── */
/* ── Pozione del Giorno ── */
.potion-day-panel {
gap: 5px;
}
.potion-day-panel .panel-title {
margin-bottom: 4px;
}
.potion-name {
font-weight: 700;
font-size: 1.1rem;
color: var(--ink);
line-height: 1.3;
}
.potion-desc {
font-size: .88rem;
color: var(--ink-light);
line-height: 1.5;
}
.potion-claimed-note {
font-size: .85rem;
color: #4e3b28;
padding-top: 4px;
border-top: 1px solid rgba(90,61,36,.15);
margin-top: 2px;
}
.potion-day-panel .btn {
width: 100%;
margin-top: 6px;
}
/* ── Mercante Itinerante ─────────────────────────────────── */
.merchant-panel { border: 1.5px solid rgba(255,200,50,.3); }
.merchant-panel .panel-title { color: var(--gold-bright); }
.merchant-offer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: .5rem 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.merchant-offer-row:last-child { border-bottom: none; }
.merchant-offer-info { flex: 1; min-width: 0; }
.merchant-offer-row.bought { opacity: .55; }
/* ── Skill Tree ─────────────────────────────────────────── */
.skill-tree-panel { border: 1.5px solid rgba(80,180,255,.25); }
.skill-tree-panel .panel-title { color: #5bb4ff; }
.skill-pts-badge {
display: inline-block;
background: var(--gold);
color: #1a0a00;
font-size: .72rem;
font-weight: 700;
border-radius: 10px;
padding: 0 6px;
margin-left: 6px;
vertical-align: middle;
}
.skill-tree-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .6rem;
margin-top: .5rem;
}
.skill-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
padding: .6rem .5rem;
border-radius: 10px;
border: 1.5px solid rgba(255,255,255,.1);
text-align: center;
}
.skill-cell.learned {
border-color: #5bb4ff;
background: rgba(80,180,255,.08);
}
.skill-cell.available {
border-color: var(--gold);
background: rgba(255,200,50,.07);
}
.skill-cell.locked { opacity: .45; }
.skill-icon { font-size: 1.6rem; }
.skill-name { font-size: .82rem; font-weight: 700; color: var(--ink); }
.skill-desc { font-size: .74rem; }
.skill-req { font-size: .72rem; margin-top: .2rem; }
.skill-state { font-size: .8rem; margin-top: .2rem; }
/* ── Cronache di Oakhaven (Lore) ─────────────────────────── */
.lore-panel { border: 1.5px solid rgba(150,100,255,.25); }
.lore-panel .panel-title { color: #b48aff; }
.lore-item {
padding: .6rem 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.lore-item:last-child { border-bottom: none; }
.lore-item.lore-locked { opacity: .4; }
.lore-title {
font-size: .88rem;
font-weight: 700;
color: var(--gold);
margin-bottom: .3rem;
}
.lore-text {
font-size: .82rem;
line-height: 1.5;
color: var(--ink);
margin: 0;
}
/* ── Vista Cronache dedicata ─────────────────────────────── */
.lore-entry-btn { border-color: rgba(150,100,255,.35); color: #b48aff; }
.lore-progress-bar-wrap { margin: 0 0 14px; }
.lore-progress-label {
font-size: .8rem; color: var(--ink-light);
margin-bottom: 6px; text-align: center;
}
.lore-progress-track {
height: 6px; border-radius: 3px;
background: rgba(150,100,255,.15);
}
.lore-progress-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, #7c3aed, #b48aff);
transition: width .4s ease;
}
.lore-chapter {
border-color: rgba(150,100,255,.25);
margin-bottom: 10px;
}
.lore-chapter.lore-locked { opacity: .5; }
.lore-chapter-num {
font-size: .72rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: #b48aff; margin-bottom: 4px;
}
.lore-chapter-title {
font-size: .95rem; font-weight: 700;
color: var(--gold); margin-bottom: 8px;
}
.lore-chapter-text {
font-size: .84rem; line-height: 1.6;
color: var(--ink); margin: 0;
}
.submenu-lore-badge {
display: inline-block;
background: #7c3aed; color: #fff;
font-size: .6rem; font-weight: 800;
border-radius: 8px; padding: 1px 4px;
margin-left: 3px; vertical-align: middle;
line-height: 1.4;
}
/* ── Lore unlock in report ───────────────────────────────── */
.lore-unlock {
display: flex;
align-items: flex-start;
gap: .6rem;
background: rgba(150,100,255,.1);
border: 1px solid rgba(150,100,255,.3);
border-radius: 10px;
padding: .6rem .8rem;
margin: .4rem 0;
font-size: .85rem;
}
.lore-unlock-icon { font-size: 1.4rem; flex-shrink: 0; }
/* ══════════════════════════════════════════════
Classifica Globale + Sfide PvP (Firebase)
══════════════════════════════════════════════ */
/* Panel header */
.pvp-panel { margin-top: 1rem; }
.pvp-panel-hdr {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .6rem;
}
.pvp-panel-title {
font-family: var(--font-head);
font-size: 1rem;
font-weight: 700;
color: var(--gold);
letter-spacing: .03em;
}
.pvp-refresh-btn {
font-size: .85rem;
padding: .2rem .55rem;
line-height: 1;
}
/* ── Classifica ──────────────────────────────── */
.lb-list { display: flex; flex-direction: column; gap: .25rem; }
.lb-loading {
text-align: center;
font-size: .85rem;
color: var(--muted);
padding: .8rem 0;
}
.lb-row {
display: grid;
grid-template-columns: 1.6rem 1.6rem 1fr auto auto auto;
align-items: center;
gap: .35rem;
padding: .35rem .5rem;
border-radius: 8px;
font-size: .82rem;
transition: background .15s;
}
.lb-row:hover { background: rgba(255,255,255,.04); }
.lb-me {
background: rgba(var(--gold-rgb, 212,169,80), .12) !important;
border: 1px solid rgba(var(--gold-rgb, 212,169,80), .3);
}
.lb-rank {
color: var(--muted);
font-size: .75rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
.lb-avatar { font-size: 1.05rem; text-align: center; }
.lb-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ink);
}
.lb-me-tag {
display: inline-block;
background: var(--gold);
color: #2a1a08;
font-size: .62rem;
font-weight: 700;
border-radius: 20px;
padding: .05rem .35rem;
vertical-align: middle;
margin-left: .25rem;
line-height: 1.4;
}
.lb-lv {
font-size: .75rem;
color: var(--muted);
white-space: nowrap;
}
.lb-km {
font-size: .78rem;
color: var(--gold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
}
.lb-rival-btn {
background: none;
border: 1px solid var(--muted);
border-radius: 6px;
color: var(--ink);
font-size: .78rem;
cursor: pointer;
padding: .1rem .3rem;
line-height: 1;
transition: background .15s, color .15s;
}
.lb-rival-btn:hover { background: rgba(255,255,255,.08); }
.lb-rival-added {
border-color: var(--gold);
color: var(--gold);
cursor: default;
}
.lb-rival-spacer { display: inline-block; width: 1.4rem; }
/* ── Rivali ──────────────────────────────────── */
.rivals-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.rival-row {
display: flex;
align-items: center;
gap: .5rem;
padding: .4rem .5rem;
border-radius: 8px;
background: rgba(255,255,255,.03);
font-size: .84rem;
}
.rival-avatar { font-size: 1.15rem; flex-shrink: 0; }
.rival-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rival-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.rival-chal-btn {
font-size: .75rem;
padding: .2rem .5rem;
}
.rival-rm-btn {
background: none;
border: none;
cursor: pointer;
font-size: .85rem;
opacity: .45;
padding: .1rem;
transition: opacity .15s;
flex-shrink: 0;
}
.rival-rm-btn:hover { opacity: .8; }
.pvp-btn-row {
display: flex;
gap: .75rem;
justify-content: center;
margin-top: 1rem;
}
.pvp-btn-row-small {
display: flex;
gap: .5rem;
justify-content: center;
margin-top: .6rem;
}
/* ── PvP idle ────────────────────────────────── */
.pvp-sep {
text-align: center;
font-size: .78rem;
color: var(--muted);
margin: .75rem 0 .5rem;
position: relative;
}
.pvp-sep::before,
.pvp-sep::after {
content: '';
position: absolute;
top: 50%;
width: 28%;
height: 1px;
background: var(--border);
}
.pvp-sep::before { left: 0; }
.pvp-sep::after { right: 0; }
.pvp-join-row {
display: flex;
gap: .5rem;
}
.pvp-code-input {
flex: 1;
font-family: var(--font-mono, monospace);
letter-spacing: .12em;
text-transform: uppercase;
}
/* Code display box */
.pvp-code-box {
font-family: var(--font-mono, monospace);
font-size: 2rem;
font-weight: 700;
letter-spacing: .25em;
color: var(--gold);
text-align: center;
padding: .6rem .5rem;
margin: .5rem 0;
border: 2px dashed rgba(var(--gold-rgb, 212,169,80), .5);
border-radius: 10px;
background: rgba(var(--gold-rgb, 212,169,80), .06);
}
/* ── PvP active ──────────────────────────────── */
.pvp-countdown {
font-size: .82rem;
color: var(--muted);
text-align: center;
margin-bottom: .6rem;
}
.pvp-bar-row {
display: grid;
grid-template-columns: 1fr 120px auto;
align-items: center;
gap: .5rem;
margin-bottom: .45rem;
font-size: .82rem;
}
.pvp-bar-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ink);
}
.pvp-bar-wrap {
height: 10px;
border-radius: 5px;
background: rgba(255,255,255,.1);
overflow: hidden;
}
.pvp-bar-fill {
height: 100%;
background: var(--muted);
border-radius: 5px;
min-width: 4px;
transition: width .4s ease;
}
.pvp-bar-me { background: var(--gold); }
.pvp-bar-km {
font-size: .78rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* ── PvP result ──────────────────────────────── */
.pvp-result {
text-align: center;
font-size: 1.1rem;
font-weight: 700;
padding: .8rem;
border-radius: 10px;
margin-bottom: .5rem;
}
.pvp-win { background: rgba(100,200,100,.15); color: #4caf50; border: 1px solid rgba(100,200,100,.3); }
.pvp-loss { background: rgba(200,80,80,.15); color: #e57373; border: 1px solid rgba(200,80,80,.3); }
.pvp-stats-row {
text-align: center;
font-size: .85rem;
color: var(--muted);
margin-bottom: .6rem;
}
.pvp-refresh-btn {
align-self: flex-end;
font-size: .78rem;
margin-bottom: .25rem;
}
.pvp-abandon {
margin-top: .25rem;
color: var(--muted);
font-size: .78rem;
border-color: rgba(200,80,80,.3);
}
.pvp-abandon:hover { color: #e57373; border-color: #e57373; }
/* ── PvP claim reward ────────────────────────────────────────── */
.pvp-claim-btn {
margin: .5rem 0;
animation: pvp-pulse 1.8s ease-in-out infinite;
}
@keyframes pvp-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb,212,169,80),.4); }
50% { box-shadow: 0 0 0 8px rgba(var(--gold-rgb,212,169,80),0); }
}
.pvp-claim-modal { text-align: center; padding: .5rem 0; }
.pvp-claim-icon { font-size: 3rem; margin-bottom: .3rem; }
.pvp-claim-gold {
font-size: 2rem;
font-weight: 700;
color: var(--gold);
margin: .4rem 0;
}
.pvp-gold-coin { font-size: 1.6rem; }
.pvp-new-title {
font-size: .9rem;
color: var(--gold);
margin: .3rem 0 .6rem;
}
/* ── PvP badge sul profilo eroe ──────────────────────────────── */
.pvp-badge-profile {
font-size: .82rem;
color: var(--gold);
margin: .2rem 0 .4rem;
opacity: .9;
}
/* ── Hero Share Card ─────────────────────────────────────────── */
.hero-share-btn {
margin: .9rem 0 .5rem;
}
.share-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .88);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
backdrop-filter: blur(4px);
animation: fadeIn .2s ease;
}
.share-card {
position: relative;
background: #0e0906;
border: 1px solid rgba(212, 169, 80, .3);
border-radius: 22px;
max-width: 340px;
width: 100%;
padding: 2.2rem 1.75rem 1.75rem;
text-align: center;
box-shadow:
0 0 0 1px rgba(212,169,80,.08),
0 0 60px rgba(180, 120, 30, .15),
0 24px 64px rgba(0, 0, 0, .7);
overflow: hidden;
}
/* Radial amber glow */
.share-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
background: radial-gradient(ellipse at 50% 35%, rgba(180,120,30,.14) 0%, transparent 68%);
pointer-events: none;
}
.share-close-btn {
position: absolute;
top: .75rem;
right: .9rem;
background: none;
border: none;
color: var(--muted);
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
opacity: .6;
transition: opacity .15s;
}
.share-close-btn:hover { opacity: 1; }
.share-wordmark {
font-family: 'Cinzel', serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: .22em;
color: var(--gold);
opacity: .8;
margin-bottom: .6rem;
}
.share-ornament-line {
width: 60%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,169,80,.45), transparent);
margin: 0 auto .9rem;
}
.share-avatar-wrap {
margin: 0 auto .75rem;
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,169,80,.18) 0%, transparent 70%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 1px rgba(212,169,80,.2), 0 0 24px rgba(212,169,80,.12);
}
.share-avatar-emoji {
font-size: 2.8rem;
line-height: 1;
}
.share-avatar-img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 50%;
}
.share-hero-name {
font-family: 'Cinzel', serif;
font-size: 1.35rem;
font-weight: 700;
color: #f0e8d0;
letter-spacing: .04em;
text-wrap: balance;
margin-bottom: .25rem;
}
.share-hero-subtitle {
font-family: 'Crimson Pro', serif;
font-size: .92rem;
color: rgba(240,232,208,.55);
margin-bottom: .3rem;
}
.share-pvp-title {
font-size: .78rem;
color: var(--gold);
opacity: .85;
margin-bottom: .7rem;
}
.share-stats {
display: flex;
justify-content: center;
gap: 1.5rem;
margin: .9rem 0 .6rem;
padding: .7rem 0;
border-top: 1px solid rgba(212,169,80,.1);
border-bottom: 1px solid rgba(212,169,80,.1);
}
.share-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: .1rem;
}
.share-stat-val {
font-family: 'Cinzel', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
.share-stat-lbl {
font-size: .64rem;
color: rgba(240,232,208,.4);
letter-spacing: .06em;
text-transform: uppercase;
}
.share-divider-icon {
font-size: 1.1rem;
color: rgba(212,169,80,.35);
margin: .7rem 0 .5rem;
letter-spacing: .1em;
}
.share-tagline {
font-family: 'Cinzel', serif;
font-size: 1.25rem;
font-weight: 700;
color: #f0e8d0;
text-wrap: balance;
margin-bottom: .3rem;
}
.share-tagline-sub {
font-family: 'Crimson Pro', serif;
font-style: italic;
font-size: .88rem;
color: rgba(240,232,208,.45);
margin-bottom: 1.1rem;
}
.share-btns {
display: flex;
flex-direction: column;
gap: .55rem;
}
.share-copy-btn {
border-color: rgba(212,169,80,.25);
color: rgba(240,232,208,.6);
font-size: .85rem;
}
/* ── Banner primo accesso (Allenati) ─────────────────────────── */
.train-first-tip {
position: relative;
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
linear-gradient(160deg, var(--parchment) 0%, var(--parchment-dark) 100%);
border: 2px solid rgba(212,169,80,.5);
border-radius: 12px;
padding: .9rem 1rem .9rem;
margin-bottom: .75rem;
animation: fadeIn .3s ease;
color: var(--ink);
}
.train-first-tip .muted { color: var(--ink); }
.train-tip-close {
position: absolute;
top: .5rem;
right: .6rem;
background: none;
border: none;
color: var(--muted);
font-size: .85rem;
cursor: pointer;
opacity: .55;
line-height: 1;
transition: opacity .15s;
}
.train-tip-close:hover { opacity: 1; }
.train-tip-title {
font-weight: 700;
font-size: .88rem;
margin-bottom: .6rem;
padding-right: 1.5rem;
}
.train-tip-row {
display: flex;
gap: .65rem;
align-items: flex-start;
margin-bottom: .55rem;
}
.train-tip-row:last-child { margin-bottom: 0; }
.train-tip-step {
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: rgba(212,169,80,.18);
border: 1px solid rgba(212,169,80,.35);
color: var(--gold);
font-size: .95rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-top: .1rem;
}
.train-tip-badge {
display: inline-block;
background: rgba(90,191,122,.15);
border: 1px solid rgba(90,191,122,.3);
color: #5abf7a;
font-size: .62rem;
font-weight: 700;
border-radius: 20px;
padding: .05rem .35rem;
vertical-align: middle;
margin-left: .3rem;
}
.tip-out {
animation: fadeOut .25s ease forwards;
}
@keyframes fadeOut {
to { opacity: 0; transform: translateY(-6px); }
}
/* ── Prima Missione (Camp utente nuovo) ──────────────────────── */
.camp-first-quest {
background:
linear-gradient(135deg, rgba(212,169,80,.14) 0%, rgba(212,169,80,.04) 100%),
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
linear-gradient(160deg, var(--parchment) 0%, var(--parchment-dark) 100%);
border: 1.5px solid rgba(212,169,80,.45);
text-align: center;
}
.cfq-eyebrow {
font-size: .68rem;
letter-spacing: .14em;
color: var(--gold);
opacity: .7;
text-transform: uppercase;
margin-bottom: .3rem;
}
.cfq-title {
font-family: 'Cinzel', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .5rem;
}
.cfq-text {
margin-bottom: .75rem;
}
.cfq-rewards {
display: flex;
justify-content: center;
gap: .75rem;
margin-bottom: .85rem;
}
.cfq-reward {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;
font-size: .78rem;
padding: .2rem .6rem;
}
/* ═══════════════ FOMO Mechanics ═══════════════ */
/* ── 1. Near-Miss incursione ── */
.lost-chest-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: .5rem 0 .75rem; }
.lost-chest { font-size: 3rem; filter: grayscale(.6) brightness(.7); animation: chest-pulse 1.8s ease-in-out infinite; }
@keyframes chest-pulse {
0%, 100% { transform: scale(1); opacity: .7; }
50% { transform: scale(1.08); opacity: 1; }
}
.near-miss-rarity {
font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
padding: .2rem .7rem; border-radius: 20px; border: 1px solid currentColor; opacity: .9;
}
.rar-chip-comune { color: var(--rar-comune); }
.rar-chip-non_comune{ color: #6aaa60; }
.rar-chip-raro { color: var(--rar-raro); }
.rar-chip-epico { color: var(--rar-epico); }
.rar-chip-leggendario { color: var(--rar-leggendario); }
.rar-chip-divino { color: #e8c84c; }
.rar-chip-oscuro { color: #c040c0; }
/* ── 2. Streak flame progressiva ── */
.streak-chip {
display: inline-flex; align-items: center;
font-size: .78rem; font-weight: 700;
padding: .1rem .45rem; border-radius: 20px;
border: 1px solid currentColor;
vertical-align: middle; margin-left: .15rem;
}
.streak-chip-s { color: #e06020; border-color: #e06020; background: rgba(224,96,32,.12); }
.streak-chip-m {
color: #ff7a00; border-color: #ff7a00; background: rgba(255,122,0,.15);
animation: streak-flicker 1.2s ease-in-out infinite;
}
.streak-chip-l {
color: #60c8ff; border-color: #60c8ff; background: rgba(96,200,255,.15);
animation: streak-glow 1.8s ease-in-out infinite;
}
@keyframes streak-flicker {
0%, 100% { box-shadow: 0 0 4px rgba(255,122,0,.4); }
50% { box-shadow: 0 0 10px rgba(255,122,0,.8); }
}
@keyframes streak-glow {
0%, 100% { box-shadow: 0 0 6px rgba(96,200,255,.4); }
50% { box-shadow: 0 0 16px rgba(96,200,255,.9); }
}
/* Streak freeze modal */
.streak-broke-wrap { text-align: center; padding: .75rem 0 .5rem; }
.streak-broke-flames { font-size: 1.6rem; letter-spacing: .1rem; filter: grayscale(.5) brightness(.75); margin-bottom: .3rem; }
.streak-broke-count { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.streak-broke-sub { font-size: .82rem; color: var(--ink-light); margin-top: .2rem; }
.streak-freeze-offer {
background: rgba(96,200,255,.08); border: 1px solid rgba(96,200,255,.25);
border-radius: 10px; padding: .75rem; margin: .75rem 0 .5rem;
}
.streak-freeze-title { font-weight: 700; font-size: 1rem; margin-bottom: .35rem; color: #60c8ff; }
.streak-freeze-desc { font-size: .83rem; color: var(--ink); line-height: 1.4; margin-bottom: .6rem; }
.streak-saved-wrap { text-align: center; padding: .75rem 0 .5rem; }
/* ── 3. Rifugio Danneggiato ── */
.building-damage-panel {
border-left: 4px solid var(--danger) !important;
background: rgba(163,51,39,.12) !important;
padding: .85rem .95rem;
}
.bdp-header { font-weight: 700; font-size: 1rem; color: var(--danger); margin-bottom: .4rem; }
.building-damage-alert { text-align: center; padding: .5rem 0 .75rem; }
.bda-icon { font-size: 3rem; margin-bottom: .5rem; }
/* ── Pannelli di entrata sezioni del Borgo ── */
.borgo-entry-panel { padding: 0; overflow: hidden; }
.borgo-entry-header {
width: 100%; height: 120px;
object-fit: cover; object-position: center 40%;
display: block;
background: #0a0608;
}
.borgo-entry-panel .panel-title { margin: 10px 14px 2px; display: flex; align-items: center; gap: 8px; }
.station-ico { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.station-ico-fallback { display: none; }
.borgo-entry-panel .borgo-entry-quote { margin: 0 14px 10px; font-style: italic; font-weight: 500; }
.borgo-entry-panel .btn { margin: 0 14px 14px; width: calc(100% - 28px); box-sizing: border-box; }
/* Header nelle view interne (Stalla, Nero, Fucina, Erborista) */
.borgo-sub-header {
width: 100%; height: clamp(220px, 40vw, 320px);
object-fit: cover; object-position: center 40%;
display: block; border-radius: 10px; margin-bottom: 10px;
}
.sub-header-label {
font-size: .85rem; color: var(--ink-light);
text-align: center; margin: 0 0 8px;
}
/* ── Taverna delle Sfide: entry card + hub subtitle ── */
.taverna-entry-panel { border-color: rgba(245,166,35,.5); }
.taverna-entry-quote { font-style: italic; font-weight: 500; margin: .25rem 0 .5rem; }
.taverna-hero-img {
width: 100%; height: clamp(220px, 40vw, 320px);
object-fit: cover; object-position: center 40%;
border-radius: 10px; margin-bottom: 10px; display: block;
}
.taverna-avail-badge {
display: inline-block;
background: linear-gradient(90deg, var(--gold-bright), #b57f1e);
color: #1a0e00;
font-size: .75rem; font-weight: 700;
padding: .2rem .6rem; border-radius: 12px;
margin-bottom: .5rem;
}
.mg-hub-subtitle {
font-size: .75rem; font-weight: 400;
color: #4e3b28;
display: block; margin-top: .15rem;
}
/* ── 4. Mercante Fuggiasco ── */
.fugitive-merchant-panel {
border-color: #f5a623 !important;
}
.fm-subtitle { text-align: center; font-size: .8rem; color: var(--ink-light); margin: .2rem 0 .6rem; }
.fm-item { margin: .4rem 0; }
.fm-prices {
display: flex; align-items: center; justify-content: center; gap: .5rem;
margin: .3rem 0 .6rem;
}
.fm-price-full { font-size: .82rem; color: var(--ink-light); text-decoration: line-through; }
.fm-price-sale { font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.fm-discount {
background: #e85020; color: #fff;
font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 12px;
}
/* ═══════════════ Minigioco: Lancio del Boccale ═══════════════ */
.mg-boccale-wrap { width: 100%; }
.mgb-arena {
position: relative;
width: 100%; height: 52vh;
min-height: 320px; max-height: 500px;
border-radius: 10px; overflow: hidden;
background: url('assets/minigames/boccale/tavolo birra.webp') center/cover no-repeat;
touch-action: none; user-select: none;
cursor: pointer;
margin-bottom: .75rem;
}
.mgb-target {
position: absolute;
top: 10%; left: 50%; transform: translateX(-50%);
width: 100px; height: 100px;
object-fit: contain; border-radius: 50%;
box-shadow: 0 0 22px rgba(255,215,0,.45);
pointer-events: none;
}
.mgb-mug {
position: absolute;
bottom: 5%; left: 50%;
transform: translateX(-50%) translateY(0px);
width: 80px; height: 80px;
z-index: 10; will-change: transform;
}
.mgb-mug-img {
width: 100%; height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 6px rgba(0,0,0,.6));
pointer-events: none;
}
.mgb-splash {
position: absolute; top: -30px; left: -30px;
width: 140px; height: 140px;
object-fit: contain;
opacity: 0; pointer-events: none;
mix-blend-mode: screen;
transform: scale(.5);
transition: all .3s cubic-bezier(.175,.885,.32,1.275);
}
.mgb-splash-active { opacity: 1 !important; transform: scale(1.15) !important; }
.mgb-power-wrap {
position: absolute; bottom: 14px; right: 14px;
width: 22px; height: 42%;
background: rgba(0,0,0,.8);
border: 2px solid #d4b886; border-radius: 11px;
overflow: hidden;
}
.mgb-power-fill {
position: absolute; bottom: 0; width: 100%; height: 0%;
background: linear-gradient(to top, #4caf50, #ffeb3b, #f44336);
}
.mgb-shake { animation: shake-anim .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake-anim {
10%, 90% { transform: translate3d(-2px,0,0); }
20%, 80% { transform: translate3d(3px,0,0); }
30%, 50%, 70% { transform: translate3d(-5px,0,0); }
40%, 60% { transform: translate3d(5px,0,0); }
}
/* ── Dadi del Bluff ─────────────────────────────────────────────────────── */
.mgd-wrap {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 10px 10px;
min-height: 420px;
}
.mgd-main {
display: flex; flex-direction: column; gap: 8px;
flex: 1;
}
.mgd-oste-section,
.mgd-player-section {
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mgd-oste-section {
background: rgba(0,0,0,.35);
border-radius: 10px; padding: 8px 6px 4px;
}
.mgd-player-section {
background: rgba(255,255,255,.08);
border-radius: 10px; padding: 8px 6px 4px;
}
.mgd-oste-avatar {
width: 54px; height: 54px;
object-fit: contain; border-radius: 50%;
border: 2px solid rgba(212,184,134,.5);
}
.mgd-section-label {
font-size: .72rem; text-transform: uppercase;
letter-spacing: .08em; opacity: .8;
color: rgba(255,220,160,.9);
}
.mgd-dice-row {
display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.mgd-die {
position: relative;
width: 44px; height: 44px;
background: #fff;
border-radius: 8px;
border: 2px solid #bbb;
box-shadow: 2px 3px 6px rgba(0,0,0,.45);
}
.mgd-die.mgd-hidden {
background: #4a3060;
border-color: #7a5a9a;
}
.mgd-die.mgd-hidden .mgd-dot { background: #7a5a9a; }
.mgd-dot {
position: absolute;
width: 8px; height: 8px;
background: #222;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.mgd-bid-display {
text-align: center;
padding: 7px 10px;
background: rgba(212,184,134,.12);
border-radius: 8px;
font-size: .92rem;
color: rgba(255,220,160,.95);
}
.mgd-bid-label { opacity: .75; font-size: .8rem; margin-right: 4px; }
.mgd-controls { display: flex; flex-direction: column; gap: 8px; }
.mgd-sel-row { display: flex; gap: 12px; justify-content: center; }
.mgd-sel-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mgd-sel-lbl { font-size: .72rem; opacity: .8; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,220,160,.85); }
.mgd-spin-row { display: flex; align-items: center; gap: 6px; }
.mgd-spin-btn {
width: 30px; height: 30px;
border: none; border-radius: 6px;
background: rgba(212,184,134,.25);
color: var(--ink); font-size: 1.1rem;
cursor: pointer; line-height: 1;
}
.mgd-spin-btn:active { background: rgba(212,184,134,.5); }
.mgd-spin-val {
min-width: 26px; text-align: center;
font-size: 1.1rem; font-weight: 700;
color: rgba(255,220,160,.95);
}
.mgd-btn-row {
display: flex; gap: 8px; justify-content: center;
}
.mgd-bluff-btn {
background: rgba(180,40,40,.75) !important;
border-color: #b42828 !important;
}
.mgd-thinking {
text-align: center; font-style: italic;
opacity: .8; padding: 10px 0;
color: rgba(255,220,160,.85);
}
.mgd-hint {
text-align: center; font-size: .82rem; opacity: .8;
min-height: 1.1rem; color: rgba(255,220,160,.85);
}
.mgd-hint-err { color: #e07070 !important; opacity: 1 !important; }
/* ── Pesca nel Fossato ──────────────────────────────────────────────────── */
.mgp-wrap {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 10px 10px;
min-height: 420px;
}
.mgp-arena {
display: flex; justify-content: center; align-items: stretch;
gap: 14px; flex: 1;
min-height: 260px;
}
.mgp-bar-col {
position: relative;
width: 58px; flex-shrink: 0;
background: rgba(0,0,0,.5);
border-radius: 29px;
border: 2px solid #1a2a3a;
overflow: hidden;
box-shadow: inset 0 0 18px rgba(0,0,0,.8);
}
.mgp-zone {
position: absolute; top: 0; left: 0; right: 0;
height: 90px;
background: rgba(76,175,80,.3);
border: 3px solid #4caf50;
border-radius: 14px;
box-shadow: 0 0 14px rgba(76,175,80,.5) inset;
will-change: transform;
transition: background .1s, box-shadow .1s;
}
.mgp-zone.mgp-zone-active {
background: rgba(255,152,0,.5);
border-color: #ffeb3b;
box-shadow: 0 0 20px rgba(255,235,59,.8) inset;
}
.mgp-fish {
position: absolute; top: 0; left: 7px;
width: 44px; height: 44px;
object-fit: contain;
filter: drop-shadow(0 3px 5px rgba(0,0,0,.8));
will-change: transform; z-index: 10;
}
.mgp-prog-col {
position: relative;
width: 22px; flex-shrink: 0;
background: rgba(0,0,0,.6);
border: 2px solid rgba(168,213,255,.5);
border-radius: 11px;
overflow: hidden;
}
.mgp-prog-fill {
position: absolute; bottom: 0; left: 0; right: 0;
height: 0%;
background: linear-gradient(to top, #f44336, #ffeb3b, #4caf50);
transition: height .1s linear;
}
.mgp-shake { animation: shake-anim .4s cubic-bezier(.36,.07,.19,.97) both; }
/* ── Braccio di Ferro ───────────────────────────────────────────────────── */
.mgbf-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 10px; padding: 12px 10px 10px;
min-height: 380px;
}
.mgbf-avatars {
display: flex; justify-content: space-around; width: 85%;
}
.mgbf-avatar-wrap {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mgbf-avatar-img {
width: 62px; height: 62px;
object-fit: contain; border-radius: 50%;
border: 2px solid rgba(212,184,134,.5);
background: rgba(0,0,0,.3);
}
.mgbf-avatar-hero {
width: 62px; height: 62px; border-radius: 50%;
border: 2px solid rgba(212,184,134,.5);
background: rgba(0,0,0,.3);
display: flex; align-items: center; justify-content: center;
font-size: 2rem;
transition: transform .06s;
}
.mgbf-avatar-lbl {
font-size: .72rem; opacity: .65; text-transform: uppercase;
letter-spacing: .06em; color: var(--ink);
}
.mgbf-bar-wrap {
position: relative;
width: 85%; height: 44px;
background: #111;
border: 3px solid #5a3d22; border-radius: 22px;
overflow: hidden;
box-shadow: inset 0 0 10px rgba(0,0,0,.8);
}
.mgbf-bar-danger {
position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
background: linear-gradient(to right, #f44336, #ff9800);
}
.mgbf-bar-safe {
position: absolute; right: 0; top: 0; bottom: 0; width: 50%;
background: linear-gradient(to left, #4caf50, #ff9800);
}
.mgbf-indicator {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 52px; height: 52px;
background: #d4b886; border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 0 14px rgba(255,255,255,.5);
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem;
will-change: left;
transition: left .05s linear;
}
.mgbf-tap {
width: 85%; height: 90px;
background: rgba(76,175,80,.2);
border: 2px dashed #4caf50;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
color: #4caf50; font-family: 'Cinzel', serif; font-size: 1.4rem;
cursor: pointer; letter-spacing: .08em;
transition: background .08s;
}
.mgbf-tap:active { background: rgba(76,175,80,.5); }
.mgbf-shake { animation: shake-anim .3s ease-in-out; }
/* ── Lancio del Coltello ────────────────────────────────────────────────── */
.mgck-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 8px; padding: 12px 10px 10px;
min-height: 400px;
}
.mgck-arena {
position: relative;
width: 100%; flex: 1;
display: flex; flex-direction: column; align-items: center;
min-height: 260px;
}
.mgck-log-wrap {
position: relative;
width: 140px; height: 140px;
margin-top: 16px;
will-change: transform;
}
.mgck-log-img {
width: 100%; height: 100%;
border-radius: 50%; object-fit: cover;
border: 4px solid #8d6e63;
box-shadow: 0 0 20px rgba(0,0,0,.8);
display: block;
}
.mgck-stuck {
position: absolute; top: 50%; left: 50%;
font-size: 1.8rem;
transform-origin: center center;
margin-left: -14px; margin-top: -14px;
pointer-events: none;
}
.mgck-knife-active {
position: absolute; bottom: 50px; left: 50%;
transform: translateX(-50%) translateY(0px);
font-size: 2.4rem; text-align: center;
will-change: transform;
cursor: pointer;
}
.mgck-ammo {
position: absolute; bottom: 10px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 6px;
}
.mgck-ammo-ic {
font-size: 1.3rem; opacity: .25;
transition: opacity .3s;
}
.mgck-ammo-ic.ready { opacity: 1; }
.mgck-shake { animation: shake-anim .3s ease-in-out; }
/* ── Carte del Mercante (minigioco flip) ─────────────────────────────────── */
.mg-cards-wrap { padding-top: 8px; }
.mg-cards-row {
display: flex; justify-content: center; gap: 10px;
margin: 10px 0;
}
.mgc-card {
width: 30%; max-width: 110px;
aspect-ratio: 2/3;
perspective: 600px; cursor: pointer;
}
.mgc-inner {
width: 100%; height: 100%; position: relative;
transform-style: preserve-3d;
transition: transform .5s cubic-bezier(.4,0,.2,1);
border-radius: 10px;
}
.mgc-card.mgc-flipped .mgc-inner { transform: rotateY(180deg); }
.mgc-back, .mgc-front {
position: absolute; inset: 0; border-radius: 10px;
backface-visibility: hidden;
border: 2px solid rgba(180,140,20,.4);
overflow: hidden;
}
.mgc-back {
background: linear-gradient(145deg,#2e1e0a,#140c02);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 6px;
}
.mgc-back-ornament {
width: 70%; height: 70%;
border: 2px solid rgba(212,184,134,.2);
border-radius: 6px;
background: repeating-linear-gradient(
45deg, transparent, transparent 6px,
rgba(212,184,134,.04) 6px, rgba(212,184,134,.04) 12px
);
}
.mgc-back-sym {
position: absolute;
font-size: 1.4rem; color: rgba(212,184,134,.4);
}
.mgc-front {
transform: rotateY(180deg);
border-color: var(--gold);
box-shadow: 0 0 14px rgba(180,140,20,.25);
display: flex; flex-direction: column;
}
.mgc-card-img {
width: 100%; flex: 1;
object-fit: cover;
display: block;
}
.mgc-front-label {
padding: 4px 6px;
font-size: .62rem; font-family: 'Cinzel', serif;
text-align: center; color: var(--gold-bright);
background: rgba(0,0,0,.7);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgc-trap-label { color: #e07070; }
/* ── Imprese: card thumbnail ─────────────────────────────────────────────── */
.achievement-card-thumb {
width: 42px; height: 58px;
object-fit: cover; border-radius: 5px;
border: 1.5px solid rgba(180,140,20,.4);
display: block;
}
.achievement-icon-emoji { font-size: 1.8rem; line-height: 1; }
/* ── Near-Miss con oggetto specifico ─────────────────────────────────────── */
.nm-item-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 8px; margin: 12px 0 8px;
}
.nm-item-veil {
position: relative; width: 80px; height: 80px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
border: 2px solid rgba(255,255,255,.15);
background: rgba(0,0,0,.5);
filter: grayscale(0.6) brightness(0.7);
}
.nm-item-veil::after {
content: '';
position: absolute; inset: 0; border-radius: 12px;
background: rgba(0,0,0,.35);
}
.nm-item-veil.rar-leggendario { border-color: rgba(217,130,43,.6); box-shadow: 0 0 12px rgba(217,130,43,.3); }
.nm-item-veil.rar-epico { border-color: rgba(123,63,191,.6); box-shadow: 0 0 12px rgba(123,63,191,.3); }
.nm-item-veil.rar-raro { border-color: rgba(46,111,176,.6); box-shadow: 0 0 12px rgba(46,111,176,.3); }
.nm-item-veil.rar-comune { border-color: rgba(138,122,95,.4); }
.nm-item-img { width: 60px; height: 60px; object-fit: contain; display: block; }
.nm-item-emoji { font-size: 2.8rem; line-height: 1; }
.nm-rarity-chip { font-size: .7rem; font-weight: 600; padding: 2px 10px; border-radius: 10px; border: 1px solid currentColor; }
.nm-item-name { margin: 4px 0 2px; }
.nm-miss-text { margin: 0 0 12px; }
/* ── Fiamma della Streak ─────────────────────────────────────────────────── */
.streak-flame-panel {
display: flex; flex-direction: column; gap: 6px;
padding: 14px 16px;
border-radius: 12px;
border: 1.5px solid rgba(224,96,32,.3);
background: rgba(224,96,32,.06);
margin-bottom: 4px;
}
.streak-flame-panel.streak-flame-m {
border-color: rgba(255,122,0,.4);
background: rgba(255,122,0,.08);
animation: streak-flicker 1.2s ease-in-out infinite alternate;
}
.streak-flame-panel.streak-flame-l {
border-color: rgba(96,200,255,.4);
background: rgba(96,200,255,.08);
animation: streak-glow 1.8s ease-in-out infinite alternate;
}
.sf-header { display: flex; align-items: center; gap: 12px; }
.sf-emoji { line-height: 1; }
.sf-info { display: flex; flex-direction: column; gap: 2px; }
.sf-title { font-size: .95rem; font-weight: 700; color: var(--parchment); }
.sf-bonus { font-size: .85rem; color: var(--gold-bright); font-weight: 600; }
.sf-bar-wrap {
height: 6px; border-radius: 3px;
background: rgba(255,255,255,.1);
overflow: hidden; margin-top: 4px;
}
.sf-bar {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, #e06020, #ff9a3c);
transition: width .5s ease;
}
.streak-flame-panel.streak-flame-l .sf-bar {
background: linear-gradient(90deg, #60c8ff, #a0e0ff);
}
.sf-labels { display: flex; justify-content: space-between; }
.streak-flame-panel .muted { color: rgba(255,220,160,.6); }
/* ── Evento settimanale urgente ──────────────────────────────────────────── */
.cd-critical {
color: #ff4444; font-weight: 700;
animation: streak-flicker 0.8s ease-in-out infinite alternate;
}
.event-panel-urgent {
border: 1.5px solid rgba(255,68,68,.5) !important;
background: rgba(255,68,68,.05);
}
.event-urgency-banner {
font-size: .75rem; font-weight: 700;
color: #ff4444; letter-spacing: .04em;
text-align: center;
padding: 4px 8px; margin-bottom: 8px;
background: rgba(255,68,68,.1);
border-radius: 6px;
animation: streak-flicker 0.9s ease-in-out infinite alternate;
}
/* ── Mappa Infuocata ─────────────────────────────────────────────────────── */
.mi-panel {
border-color: #c46a10 !important;
}
.mi-panel .panel-title { color: #c46a10; }
.mi-tiers-preview {
font-size: .75rem; color: var(--ink-light);
margin: 8px 0; line-height: 1.7;
}
.mi-tier-dot { font-weight: 600; }
.mi-activate-btn { margin-top: 10px; }
.mi-status-row {
display: flex; align-items: center;
justify-content: space-between;
margin: 8px 0;
}
.mi-current-tier { font-size: 1rem; font-weight: 700; }
.mi-time-left { font-size: .8rem; color: var(--ink-light); }
.mi-km-bar-wrap {
height: 10px; border-radius: 5px;
background: rgba(0,0,0,.15);
overflow: hidden; margin: 4px 0;
}
.mi-km-bar {
height: 100%; border-radius: 5px;
background: linear-gradient(90deg, #d9822b, #f0aa50);
transition: width .6s ease;
}
.mi-km-text { font-size: .8rem; color: var(--ink-light); text-align: right; margin-bottom: 4px; }
.mi-claim-reward { margin: 12px 0; }
/* ═══════════════ La Serra del Viandante ═══════════════════════════════════ */
.water-tank-panel {
display: flex; align-items: center; gap: 12px;
background: #162035;
border: 1px solid #2e6fb0;
border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
@media (prefers-color-scheme: light) {
.water-tank-panel { background: #dceeff; border-color: #4a90c8; }
}
:root[data-theme="light"] .water-tank-panel { background: #dceeff; border-color: #4a90c8; }
:root[data-theme="dark"] .water-tank-panel { background: #162035; border-color: #2e6fb0; }
.water-drop-icon {
font-size: 2.5rem; line-height: 1;
filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
animation: floatDrop 2s ease-in-out infinite;
}
@keyframes floatDrop {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.water-tank-title { font-family: 'Cinzel', serif; font-size: .85rem; font-weight: 700; color: #60c8ff; }
.water-tank-val { font-size: .9rem; color: var(--parchment); margin-top: 2px; }
.greenhouse-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.pot-card {
background: #1e2a14;
border: 2px solid #3a5020;
border-radius: 14px; padding: 16px 10px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light) {
.pot-card { background: #fff; border-color: #b0cc80; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
}
:root[data-theme="light"] .pot-card { background: #fff; border-color: #b0cc80; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
:root[data-theme="dark"] .pot-card { background: #1e2a14; border-color: #3a5020; }
.pot-card.locked { opacity: .5; filter: grayscale(1); }
.pot-card.pickable { cursor: pointer; transition: transform .15s, border-color .2s; }
.pot-card.pickable:hover { transform: translateY(-3px); border-color: var(--emerald); }
.pot-emoji {
font-size: 3.5rem; line-height: 1; margin-bottom: 4px;
filter: drop-shadow(0 6px 8px rgba(0,0,0,.5));
}
.pot-emoji.glow { animation: plantGlow 2s infinite alternate; }
@keyframes plantGlow {
from { filter: drop-shadow(0 0 10px rgba(90,255,120,.4)); }
to { filter: drop-shadow(0 0 20px rgba(90,255,120,.8)); }
}
.pot-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .8rem; color: #c8e09a; }
.pot-name.danger { color: #e05050; }
@media (prefers-color-scheme: light) {
.pot-name { color: #2a4010; }
}
:root[data-theme="light"] .pot-name { color: #2a4010; }
:root[data-theme="dark"] .pot-name { color: #c8e09a; }
.pot-stats { width: 100%; display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
.pot-stat-label { font-size: .65rem; text-align: left; }
.pot-stat-bar {
height: 6px; background: rgba(0,0,0,.6);
border-radius: 3px; overflow: hidden;
border: 1px solid rgba(255,255,255,.1);
}
.pot-fill-hp { height: 100%; background: linear-gradient(90deg, #e05050, #ff7a00, #4caf50); transition: width .3s; }
.pot-fill-xp { height: 100%; background: linear-gradient(90deg, #60c8ff, var(--magic)); transition: width .3s; }
.pot-water-info { font-size: .75rem; color: var(--ink-light); }
.pot-img { width: 120px; height: 120px; object-fit: contain; display: block; margin: 0 auto; }
/* Stagionatura */
.matur-hint { font-size: .72rem; color: var(--ink-light); text-align: center; margin: 2px 0 4px; }
.matur-ripe { color: var(--gold-bright) !important; font-weight: 600; }
/* Missioni Serra settimanali */
.serra-missions-panel {
background: rgba(90,61,36,.08);
border: 2px solid var(--leather);
border-radius: 12px;
padding: 14px 12px;
margin: 14px 0 4px;
}
.serra-mission-card {
background: rgba(239,224,195,.75);
border: 1.5px solid var(--parchment-dark);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 10px;
color: var(--ink);
}
.serra-mission-card.done { border-color: #3a8c5c; background: rgba(58,140,92,.1); }
.serra-mission-card.claimed { opacity: .6; }
.sm-label { font-weight: 700; font-size: .9rem; margin-bottom: 3px; color: var(--ink); }
.sm-desc { margin-bottom: 6px; color: var(--ink-light); }
.sm-progress-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sm-bar { flex: 1; height: 8px; background: rgba(90,61,36,.2); border-radius: 4px; overflow: hidden; }
.sm-fill { height: 100%; background: #3a8c5c; border-radius: 4px; transition: width .4s; }
.sm-fraction { font-size: .75rem; white-space: nowrap; color: var(--ink-light); font-weight: 600; }
.sm-reward { margin-bottom: 6px; font-size: .8rem; color: var(--ink-light); }
.sm-claimed-badge { font-size: .75rem; font-weight: 700; color: #3a8c5c; margin-top: 4px; }
@media (prefers-color-scheme: dark) {
.serra-missions-panel { background: rgba(0,0,0,.35); border-color: #7a6040; }
.serra-mission-card { background: rgba(50,35,20,.7); border-color: #6a5030; color: #e8d5b0; }
.serra-mission-card.done { background: rgba(58,140,92,.15); border-color: #3a8c5c; }
.sm-label { color: #e8d5b0; }
.sm-desc, .sm-reward { color: #a08060; }
.sm-fraction { color: #a08060; }
.sm-bar { background: rgba(255,255,255,.1); }
}
.pot-emoji.glow .pot-img { filter: drop-shadow(0 0 8px var(--gold-bright)); }
.water-tank-img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
/* ── Serra hero banner ───────────────────────────────────────────────────── */
/* ── Vista Serra: background solido sull'intera area ── */
.in-serra {
background: #111a0c !important;
}
@media (prefers-color-scheme: light) {
.in-serra { background: #e8f0dc !important; }
}
:root[data-theme="light"] .in-serra { background: #e8f0dc !important; }
:root[data-theme="dark"] .in-serra { background: #111a0c !important; }
.serra-hero-banner {
width: 100%; height: 140px;
background: url('assets/minigames/serra/SERRA.webp') center 40%/cover no-repeat;
border-radius: 12px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 12px;
}
.serra-hero-banner::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to bottom,
rgba(0,0,0,.08) 0%,
rgba(0,0,0,.60) 55%,
rgba(0,0,0,.85) 100%);
pointer-events: none;
}
.serra-back-btn {
position: relative; z-index: 1;
background: rgba(0,0,0,.55) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.30) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
align-self: flex-start;
font-size: .78rem;
}
.serra-banner-title {
position: relative; z-index: 1;
color: #fff !important;
text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.7);
margin: 0;
font-size: 1.05rem;
}
/* ── NPC Messer Ortica (Serra) ────────────────────────────────────────────── */
.npc-dialogue-modal { text-align: center; padding: 4px 0; }
.npc-portrait-big {
width: 90px; height: 90px; border-radius: 50%;
background: rgba(0,0,0,.25); border: 3px solid var(--emerald);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 4px;
}
.npc-emoji-fallback { font-size: 2.8rem; line-height: 1; }
.npc-portrait-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.npc-img-real { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.npc-portrait-fullbody { height: 130px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); display: block; margin: 0 auto; }
.in-serra .npc-quote { flex: 1; font-size: .85rem; line-height: 1.4; }
.panel-title-icon { width: 28px; height: 28px; object-fit: contain; vertical-align: -6px; margin-right: 4px; }
.loot .item-icon-big[src*="seme-sacchetto"] { filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
/* ── Panel on-parchment: dark theme ── */
@media (prefers-color-scheme: dark) {
.panel.on-parchment {
background-color: rgba(22, 14, 6, .92) !important;
--ink: #e8d5b0;
--ink-light: #c4a470;
color: #e8d5b0;
}
.panel.on-parchment .muted,
.panel.on-parchment .small { color: #c4a470; }
.panel.on-parchment .stat-row { border-bottom-color: rgba(200,160,80,.18); }
.panel.on-parchment .log-row { border-bottom-color: rgba(200,160,80,.18); }
.panel.on-parchment .week-bar-wrap { background: rgba(255,255,255,.09); }
.panel.on-parchment .trophy-locked { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.panel.on-parchment .skill-cell { border-color: rgba(255,255,255,.14); }
}
:root[data-theme="dark"] .panel.on-parchment {
background-color: rgba(22, 14, 6, .92) !important;
--ink: #e8d5b0;
--ink-light: #c4a470;
color: #e8d5b0;
}
:root[data-theme="dark"] .panel.on-parchment .muted,
:root[data-theme="dark"] .panel.on-parchment .small { color: #c4a470; }
:root[data-theme="dark"] .panel.on-parchment .stat-row { border-bottom-color: rgba(200,160,80,.18); }
:root[data-theme="dark"] .panel.on-parchment .log-row { border-bottom-color: rgba(200,160,80,.18); }
:root[data-theme="dark"] .panel.on-parchment .week-bar-wrap { background: rgba(255,255,255,.09); }
:root[data-theme="dark"] .panel.on-parchment .trophy-locked { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .panel.on-parchment .skill-cell { border-color: rgba(255,255,255,.14); }
:root[data-theme="light"] .panel.on-parchment {
background-color: rgba(255, 250, 238, .93) !important;
--ink: #3b2a1a;
--ink-light: #6b543a;
color: #3b2a1a;
}
/* ══════════════════════════════════════════════════════════
CONSUMABILI — Zaino, Erborista, Buff Strip
══════════════════════════════════════════════════════════ */
/* Griglia consumabili */
.consumable-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
padding: 8px 0 16px;
}
.consumable-card {
background: var(--panel-bg, #fff);
border-radius: 14px;
padding: 12px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
border: 2px solid transparent;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
position: relative;
transition: transform .15s;
}
.consumable-card:active { transform: scale(.97); }
.consumable-card.locked { opacity: .55; }
.consumable-card.rarity-comune { border-color: #b0b8c1; }
.consumable-card.rarity-raro { border-color: #4a90d9; }
.consumable-card.rarity-epico { border-color: #9b59b6; }
.consumable-card.rarity-leggendario { border-color: #f1c40f; box-shadow: 0 0 10px rgba(241,196,15,.35); }
.consumable-img-wrap {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
}
.consumable-img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 8px;
}
.consumable-emoji { font-size: 2.4rem; }
.consumable-name {
font-weight: 700;
font-size: .82rem;
text-align: center;
line-height: 1.2;
}
.consumable-desc {
font-size: .72rem;
text-align: center;
line-height: 1.3;
}
.consumable-qty {
background: var(--accent, #e67e22);
color: #fff;
border-radius: 20px;
padding: 1px 8px;
font-size: .75rem;
font-weight: 700;
}
.consumable-rarity-badge {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
.consumable-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
margin-top: 4px;
}
/* Buff strip (nella tab Train) */
.buff-strip {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 0 4px;
}
.buff-chip {
background: linear-gradient(135deg, #7c3aed22, #7c3aed44);
border: 1px solid #7c3aed66;
color: #7c3aed;
border-radius: 20px;
padding: 3px 10px;
font-size: .75rem;
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.buff-chip { background: linear-gradient(135deg, #a78bfa22, #a78bfa44); border-color: #a78bfa66; color: #c4b5fd; }
}
:root[data-theme="dark"] .buff-chip { background: linear-gradient(135deg, #a78bfa22, #a78bfa44); border-color: #a78bfa66; color: #c4b5fd; }
:root[data-theme="light"] .buff-chip { background: linear-gradient(135deg, #7c3aed22, #7c3aed44); border-color: #7c3aed66; color: #7c3aed; }
/* Buff panel (nello Zaino) */
.buff-panel { background: linear-gradient(135deg, #7c3aed11, #7c3aed22); border: 1.5px solid #7c3aed44; }
.buff-panel-title { font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.buff-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* NPC Erborista — usa immagine consumabile come avatar */
.npc-img[src*="consumables"] {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 12px;
}
/* ── Guida al Gioco ── */
.guida-panel { padding: 0; overflow: hidden; margin-bottom: 8px; }
.guida-head {
display: flex; align-items: center; gap: 10px;
padding: 13px 16px; cursor: pointer;
user-select: none; font-weight: 600;
border-radius: inherit;
transition: background .15s;
}
.guida-head:hover { background: var(--card-hover, rgba(255,255,255,.06)); }
.guida-head::after { content: '›'; margin-left: auto; font-size: 1.1rem; opacity: .5; transition: transform .2s; }
.guida-head.guida-open::after { transform: rotate(90deg); }
.guida-icon { font-size: 1.25rem; }
.guida-title { font-size: .95rem; }
.guida-body {
padding: 0 16px 14px 16px;
font-size: .88rem;
line-height: 1.6;
color: var(--text, #1a1a1a);
font-weight: 600;
}
.guida-body b { color: var(--text, inherit); font-weight: 700; }
.guida-body i { opacity: .85; }
.guida-tips { margin: 6px 0 0 0; padding-left: 18px; }
.guida-tips li { margin-bottom: 6px; }
/* ── Quick Consumable Strip (pre-allenamento) ── */
.quick-cons-strip {
margin: 12px 0 8px;
padding: 12px 14px 14px;
}
.quick-cons-label {
font-size: .8rem; font-weight: 700;
color: var(--ink); margin-bottom: 10px;
letter-spacing: .02em; text-transform: uppercase;
}
.quick-cons-row {
display: flex; flex-wrap: nowrap;
gap: 10px; overflow-x: auto;
padding-top: 8px; padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.quick-cons-row::-webkit-scrollbar { display: none; }
.quick-cons-btn {
position: relative; flex-shrink: 0;
width: 70px;
padding: 8px 4px 6px;
border: 2px solid transparent; border-radius: 12px;
background: var(--card, rgba(255,255,255,.07));
cursor: pointer; transition: transform .1s, border-color .15s;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start; gap: 4px;
}
.quick-cons-btn:active { transform: scale(.92); }
.quick-cons-btn.rarity-raro { border-color: #4a90d9; }
.quick-cons-btn.rarity-epico { border-color: #9b59b6; }
.quick-cons-btn.rarity-leggendario { border-color: #f1c40f; }
.quick-cons-img { width: 40px; height: 40px; object-fit: contain; }
.quick-cons-emoji { font-size: 2rem; line-height: 1; }
.quick-cons-name {
font-size: .6rem; font-weight: 600;
color: var(--ink); text-align: center;
line-height: 1.25; word-break: break-word;
max-width: 62px;
}
.quick-cons-badge {
position: absolute; top: -6px; right: -6px;
background: var(--accent, #e67e22); color: #fff;
font-size: .75rem; font-weight: 800;
border-radius: 10px; padding: 2px 6px;
line-height: 1.3; min-width: 20px; text-align: center;
box-shadow: 0 0 0 2px var(--surface, #fff);
white-space: nowrap;
}
/* ── Crafting Panel ── */
.crafting-panel { margin-bottom: 16px; }
.crafting-row {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 8px 0;
border-bottom: 1px solid var(--divider, rgba(255,255,255,.08));
}
.crafting-row:last-child { border-bottom: none; }
.crafting-label { font-weight: 600; font-size: .9rem; }
.crafting-have { margin-left: auto; white-space: nowrap; }
/* ── Erborista Offerta del Giorno ── */
.erborista-offer-panel { margin-bottom: 16px; }
.erborista-offer-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.erborista-offer-card {
position: relative;
}
.erborista-offer-price {
display: flex; align-items: center; justify-content: center;
gap: 6px; margin-top: 8px; font-size: .85rem;
color: #e0c878;
}
.erborista-offer-price s {
color: #7a6a4a; font-size: .75rem;
}
.erborista-offer-price b {
color: #f5e090; font-size: .92rem; font-weight: 800;
}
.erborista-offer-price .original-price {
text-decoration: line-through; opacity: .55; font-size: .75rem; color: #9a8a68;
}
.erborista-offer-price .discount-badge {
background: #27ae60; color: #fff;
font-size: .65rem; font-weight: 700;
border-radius: 6px; padding: 1px 5px;
}
/* ── Free Layer Tag ── */
.free-layer-tag {
display: inline-block;
background: #27ae60; color: #fff;
font-size: .7rem; font-weight: 700;
border-radius: 6px; padding: 2px 7px;
margin-left: 6px; vertical-align: middle;
}
/* ── Reveal Active Button ── */
.tm-claim-btn.reveal-active {
background: linear-gradient(135deg, #9b59b6, #6c3483);
border-color: #9b59b6;
animation: reveal-pulse 1.6s infinite;
}
@keyframes reveal-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(155,89,182,.5); }
50% { box-shadow: 0 0 0 6px rgba(155,89,182,0); }
}
/* ── Extra Boss Strip ── */
.extra-boss-strip {
border: 1px solid #9b59b6;
background: linear-gradient(135deg, rgba(155,89,182,.12), rgba(155,89,182,.04));
}
/* ── La Bisca Oscura ─────────────────────────────────────────── */
/* Sfondo scuro che avvolge tutta la view della bisca */
#tab-map .bisca-view-wrap,
.bisca-view-wrap {
background: #12091e;
border: 2px solid #6b21a8;
border-top: none;
border-radius: 0 0 10px 10px;
padding: 0 0 24px;
color: #e8dff5;
margin-top: 0;
}
.bisca-entry-panel { border-left: 3px solid #6b21a8; }
.bisca-entry-quote { font-style: italic; }
.bisca-avail-badge {
display: inline-block; background: #6b21a8; color: #fff;
border-radius: 12px; padding: 2px 10px; font-size: .75rem;
font-weight: 600; margin-bottom: 8px;
}
.bisca-exhausted { background: #555; }
.bisca-header-img {
width: 100%; max-height: 160px; object-fit: cover;
object-position: center 30%; display: block;
border-radius: 10px; margin-bottom: 0;
border: 2px solid #6b21a8;
border-bottom: none;
border-radius: 10px 10px 0 0;
box-shadow: 0 -4px 16px rgba(107,33,168,.45);
}
/* NPC biscazziere: full body, dimensioni compatte */
.bisca-npc-banner { background: #1e1035; border-color: #4c1d95; }
.bisca-npc-banner .npc-quote { color: #fff; font-weight: 700; font-style: normal; }
.bisca-npc-img {
height: 140px; width: auto; max-width: 100px;
object-fit: contain; object-position: center bottom;
border-radius: 6px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.npc-banner-nero .npc-img { height: 140px; max-width: 130px; }
/* Back link — pill sottile e discreto */
.view-back-link {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: 1px solid rgba(255,200,120,.45);
color: rgba(255,220,160,.85); font-size: .78rem; font-weight: 600;
padding: 3px 10px; border-radius: 20px; cursor: pointer;
margin-bottom: 8px; opacity: .85;
transition: opacity .15s;
}
.view-back-link:hover { opacity: 1; }
/* su pergamena (rifugio/camp) il pill deve essere scuro */
.bg-parchment .view-back-link {
border-color: var(--leather);
color: var(--ink-light);
}
.view-back-link-bisca {
border-color: #4c1d95; color: #c4b5fd;
}
.bisca-inner { padding: 12px 16px 0; }
.bisca-title { text-align: center; margin: 10px 0 2px; font-size: 1.35rem; color: #e9d5ff; }
.bisca-subtitle { margin-bottom: 10px; color: #a78bfa; }
.bisca-gold-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 0 10px; font-size: .9rem; color: #e8dff5;
}
.bisca-bets-left { font-size: .8rem; color: #a78bfa; }
.bisca-empty { text-align: center; color: #a78bfa; padding: 24px; background: #1e1035; border-radius: 12px; }
.bisca-arena {
display: flex; align-items: stretch; gap: 0; margin: 4px 0 12px;
}
.bisca-fighter {
flex: 1; border-radius: 12px; padding: 10px 8px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 3px;
border: 2px solid transparent;
background: #1e1035;
color: #e8dff5;
}
.bisca-fighter-a { border-color: #3b82f6; }
.bisca-fighter-b { border-color: #7c3aed; }
.bisca-fighter-img-wrap {
width: 68px; height: 68px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}
.bisca-fighter-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bisca-fighter-name { font-weight: 700; font-size: .82rem; line-height: 1.25; }
.bisca-fighter-zone { font-size: .7rem; color: #a78bfa; }
.bisca-fighter-weak { font-size: .73rem; margin-top: 2px; color: #c4b5fd; }
.bisca-hidden { color: #7c3aed; letter-spacing: 3px; font-weight: 700; }
.bisca-odd {
margin-top: auto; padding: 2px 10px; border-radius: 8px;
font-weight: 700; font-size: .82rem;
}
.bisca-odd-underdog { background: rgba(139,92,246,.25); color: #c4b5fd; }
.bisca-odd-fav { background: rgba(59,130,246,.25); color: #93c5fd; }
.bisca-vs {
display: flex; align-items: center; justify-content: center;
padding: 0 6px; font-size: .9rem; font-weight: 900;
color: #6b21a8; min-width: 26px;
}
.bisca-bet-panel { margin-top: 0; background: #1e1035; border: 1px solid #3b1f6b; }
.bisca-bet-label { font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: #e9d5ff; }
.bisca-size-row { display: flex; gap: 6px; margin-bottom: 12px; }
.bisca-size-btn {
flex: 1; padding: 7px 4px; font-size: .82rem;
border: 2px solid #3b1f6b; border-radius: 8px;
background: #12091e; color: #c4b5fd;
}
.bisca-size-btn.active {
border-color: #a855f7;
background: rgba(139,92,246,.3);
color: #e9d5ff; font-weight: 700;
}
.bisca-action-row { display: flex; gap: 8px; }
.bisca-bet-btn { flex: 1; font-size: .82rem; padding: 10px 4px; }
.bisca-result {
margin-top: 10px; padding: 12px;
background: #1e1035; border-radius: 12px;
border: 1px solid #3b1f6b; min-height: 56px;
}
.bisca-log-intro { font-style: italic; font-weight: 500; color: #a78bfa; font-size: .86rem; }
.bisca-log-line {
font-size: .86rem; padding: 4px 0; color: #e8dff5;
border-bottom: 1px solid #2d1a4e;
}
.bisca-log-line:last-child { border-bottom: none; }
.bisca-verdict {
margin-top: 12px; padding: 10px 12px;
border-radius: 8px; text-align: center; font-size: .92rem; line-height: 1.5;
}
.bisca-win {
background: rgba(22,163,74,.1); color: #16a34a;
border: 1px solid rgba(22,163,74,.3);
}
.bisca-lose {
background: rgba(220,38,38,.1); color: #dc2626;
border: 1px solid rgba(220,38,38,.3);
}
@media (prefers-color-scheme: dark) {
.bisca-win { color: #4ade80; border-color: rgba(74,222,128,.3); }
.bisca-lose { color: #f87171; border-color: rgba(248,113,113,.3); }
}
:root[data-theme="dark"] .bisca-win { color: #4ade80; border-color: rgba(74,222,128,.3); }
:root[data-theme="dark"] .bisca-lose { color: #f87171; border-color: rgba(248,113,113,.3); }
:root[data-theme="light"] .bisca-win { color: #16a34a; border-color: rgba(22,163,74,.3); }
:root[data-theme="light"] .bisca-lose { color: #dc2626; border-color: rgba(220,38,38,.3); }
.bisca-replay-btn { margin-top: 10px; }
/* ── Biglietti Gratta e Vinci ─────────────────────────────── */
.ticket-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 8px 0 4px;
}
.ticket-card {
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border: 2px solid rgba(200,160,40,0.25);
background: var(--panel-bg, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform .15s;
}
.ticket-card:active { transform: scale(.97); }
.ticket-thumb {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
display: block;
}
.ticket-label {
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
text-align: center;
padding: 0 8px;
color: var(--text-muted, #666);
}
.ticket-comune { border-color: rgba(200,160,40,0.4); }
.ticket-raro { border-color: rgba(77,217,232,0.4); }
.ticket-leggendario { border-color: rgba(240,192,64,0.5); box-shadow: 0 0 12px rgba(240,192,64,0.2); }
/* ── Storico biglietti ── */
.ticket-hist-panel { padding: 10px 14px 12px; }
.ticket-hist-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,.06);
font-size: .8rem;
}
.ticket-hist-row:last-child { border-bottom: none; }
.ticket-hist-name { color: var(--text-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-hist-syms { font-size: .9rem; letter-spacing: 2px; }
.ticket-hist-prize { font-weight: 600; white-space: nowrap; }
.ticket-hist-prize.win { color: #f5c842; }
.ticket-hist-prize.loss { color: var(--text-muted); font-weight: 400; }
.ticket-hist-date { color: var(--text-muted); font-size: .72rem; white-space: nowrap; }
/* ── Gilda ──────────────────────────────────────────────────── */
.guild-panel { }
.guild-join-row {
display: flex;
gap: .5rem;
margin: .6rem 0;
align-items: center;
}
.guild-code-input {
flex: 1;
background: var(--input-bg, rgba(0,0,0,.25));
border: 1px solid var(--border);
border-radius: 8px;
padding: .5rem .7rem;
color: var(--text);
font-size: .9rem;
font-family: var(--font-body);
min-width: 0;
}
.guild-search-wrap { margin-top: .8rem; }
.guild-search-label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-bottom: .35rem; }
.guild-search-results { margin-top: .4rem; }
.guild-result-row {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .3rem;
border-bottom: 1px solid var(--border);
}
.guild-result-row:last-child { border-bottom: none; }
.guild-result-emblem { font-size: 1.5rem; flex-shrink: 0; }
.guild-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.guild-result-name { font-size: .88rem; font-weight: 600; }
.guild-result-meta { }
.tag-pill {
display: inline-block;
background: rgba(140,90,20,.15);
border: 1px solid rgba(140,90,20,.5);
border-radius: 4px;
padding: 0 4px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--ink, #3b2a1a);
vertical-align: middle;
}
.guild-info-card {
background: rgba(0,0,0,.15);
border-radius: 10px;
padding: .7rem .8rem;
margin-bottom: .6rem;
}
.guild-card-top {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: .4rem;
}
.guild-card-emblem { font-size: 2.2rem; flex-shrink: 0; }
.guild-card-meta { min-width: 0; }
.guild-card-name { font-family: var(--font-head); font-size: .95rem; font-weight: 700; }
.guild-card-lv { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.guild-card-bonus { font-size: .8rem; color: var(--gold, #c9932e); margin-top: .2rem; font-weight: 600; }
.guild-code-row {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .5rem;
flex-wrap: wrap;
}
.guild-code-display {
font-family: monospace;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .15em;
background: rgba(255,255,255,.07);
border-radius: 6px;
padding: .2rem .5rem;
}
.guild-members-wrap { margin-top: .4rem; }
.guild-member-list { margin-top: .25rem; }
.guild-leave-btn { display: block; width: 100%; }
.guild-emblem-grid {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin: .4rem 0;
}
.guild-emblem-btn {
font-size: 1.4rem;
padding: .25rem;
border-radius: 8px;
border: 2px solid transparent;
background: rgba(255,255,255,.06);
cursor: pointer;
transition: border-color .15s;
}
.guild-emblem-btn.selected { border-color: var(--gold, #c9952a); }
.guild-create-form { padding: .2rem .2rem .4rem; }
.strutture-demolish-btn {
margin-top: .35rem;
color: var(--danger, #c0392b);
border-color: rgba(192, 57, 43, .4);
}
/* Guild create form inputs — override cinematic light-text style for modal context */
.guild-create-form .create-name-input {
background: var(--input-bg, rgba(0,0,0,.12));
color: var(--text);
border-color: var(--border);
}
.guild-create-form .create-name-input::placeholder {
color: var(--muted, rgba(0,0,0,.4));
}
.guild-create-form .create-name-input:focus {
border-color: var(--gold, #c9952a);
background: var(--input-bg, rgba(0,0,0,.12));
}
/* ══════════════════════════════════════════════════════════
CARTOMANTE — Tenda del Fato
══════════════════════════════════════════════════════════ */
/* Entry panel accent */
.cartomante-entry-panel { border-left: 3px solid #7c3aed; }
/* Badge fila fiches + giro gratis */
.cart-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.cart-fiches-badge {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.45);
color: #2d006e; border-radius: 20px; padding: 4px 12px;
font-size: .82rem; font-weight: 800;
}
.cart-free-badge {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(201,147,46,.25); border: 1px solid rgba(201,147,46,.6);
color: #5c2c00; border-radius: 20px; padding: 4px 12px;
font-size: .82rem; font-weight: 800;
}
/* HUD fiches: slightly purple-tinted */
.res-fiches { color: #c4b5fd; }
@media (prefers-color-scheme: light) { .res-fiches { color: #7c3aed; } }
:root[data-theme="light"] .res-fiches { color: #7c3aed; }
/* Resources detail */
.res-detail-fiches { background: rgba(124,58,237,.07); border-radius: 8px; }
/* Balance bar — fiches counter at top of each view */
.cart-balance-bar {
text-align: center;
background: rgba(124,58,237,.12);
border: 1px solid rgba(124,58,237,.3);
border-radius: 10px;
padding: 8px 14px;
margin: 0 0 12px;
font-size: .9rem;
color: #c4b5fd;
}
@media (prefers-color-scheme: light) { .cart-balance-bar { color: #4c1d95; background: rgba(124,58,237,.08); } }
:root[data-theme="light"] .cart-balance-bar { color: #4c1d95; background: rgba(124,58,237,.08); }
/* Station cards inside Cartomante hub */
.cart-station-card { border-left: 3px solid rgba(124,58,237,.5); }
.cart-station-badge {
font-size: .78rem; color: #a78bfa; padding: 4px 14px 8px; font-weight: 600;
}
/* L/R teaser card in hub */
.cart-lr-teaser { background: rgba(18,8,32,.88); border-color: rgba(124,58,237,.5); padding: 14px; }
.cart-lr-teaser b { color: #e8d5ff; }
.cart-lr-teaser .muted { color: #b8a0d8; }
.cart-lr-teaser-inner { display: flex; align-items: center; gap: 12px; }
.cart-lr-icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
/* ── Lascio o Raddoppio (in report modal) ── */
.lr-section {
margin: 12px 0;
background: rgba(124,58,237,.10);
border: 1px solid rgba(124,58,237,.35);
border-radius: 14px;
padding: 14px;
}
.lr-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.lr-fiche-icon { width: 36px; height: 36px; object-fit: contain; }
.lr-title { font-weight: 700; font-size: 1rem; color: #a78bfa; }
.lr-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lr-btn-safe { background: rgba(107,114,128,.25) !important; color: var(--text) !important; border: 1px solid rgba(107,114,128,.4) !important; }
.lr-result { margin-top: 10px; border-radius: 10px; overflow: hidden; }
.lr-win { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.4); color: #4ade80; padding: 12px; border-radius: 10px; text-align: center; font-weight: 700; font-size: 1rem; }
.lr-lose { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #f87171; padding: 12px; border-radius: 10px; text-align: center; font-weight: 700; }
.lr-kept { background: rgba(107,114,128,.15); padding: 10px; border-radius: 10px; text-align: center; color: var(--muted); }
/* ── Ruota del Fato — Canvas ── */
.ruota-outer-wrap {
display: flex; flex-direction: column; align-items: center;
margin: 12px auto 8px; gap: 0;
padding-bottom: 76px; /* frame overlay (440px) straborda di 70px sotto il canvas (300px) */
}
.ruota-pointer {
width: 0; height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-top: 24px solid #e8b64c;
filter: drop-shadow(0 4px 14px rgba(232,182,76,0.95));
position: relative; z-index: 3; margin-bottom: -1px;
}
.ruota-canvas-wrap {
position: relative; width: 300px; height: 300px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #050010;
box-shadow:
0 0 32px rgba(120,40,200,0.6),
0 0 64px rgba(80,20,150,0.28),
0 6px 28px rgba(0,0,0,0.75);
}
.ruota-svg {
display: block;
position: absolute; top: 0; left: 0;
z-index: 1;
overflow: visible;
}
.ruota-frame-overlay {
position: absolute;
width: 440px; height: 440px;
top: -70px; left: -70px;
pointer-events: none;
z-index: 2;
image-rendering: high-quality;
}
.ruota-result-area { min-height: 48px; margin: 10px 0; position: relative; z-index: 3; }
.ruota-spinning { text-align: center; color: #a78bfa; font-style: italic; padding: 12px; animation: wheel-pulse 0.9s infinite alternate; }
@keyframes wheel-pulse { from { opacity:.55; } to { opacity:1; } }
.ruota-result-box { border-radius: 12px; padding: 14px; text-align: center; font-weight: 700; }
.ruota-win { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #4ade80; }
.ruota-nothing { background: rgba(107,114,128,.12); border: 1px solid rgba(107,114,128,.3); color: var(--muted); }
.ruota-lose { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #f87171; }
.ruota-sector-name { font-size: 1.1rem; margin-bottom: 4px; }
.ruota-reward-text { font-size: .95rem; }
.ruota-spin-btn { margin-top: 6px; position: relative; z-index: 3; }
/* ── Pozzo delle Evocazioni — Immagine + overlay ── */
.pozzo-wrap {
position: relative;
width: 260px; height: 260px;
margin: 14px auto 10px;
display: flex; align-items: center; justify-content: center;
}
.pozzo-bg-img {
width: 260px; height: 260px;
border-radius: 50%; display: block;
position: absolute; top: 0; left: 0;
object-fit: cover;
box-shadow:
0 0 0 4px rgba(35,75,200,0.55),
0 0 28px rgba(30,60,200,0.65),
0 0 56px rgba(20,40,150,0.3),
0 6px 24px rgba(0,0,0,0.75);
transition: box-shadow 0.4s ease, filter 0.4s ease;
}
.pozzo-bg-img--pulling {
filter: brightness(1.25) saturate(1.4);
animation: pozzo-surge 0.7s ease-in-out infinite alternate;
}
.pozzo-center-symbol {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -52%);
font-size: 52px;
line-height: 1;
text-shadow: 0 0 18px #1a4aff, 0 0 36px #1a4aff;
transition: text-shadow 0.4s ease;
pointer-events: none;
z-index: 1;
}
@keyframes pozzo-surge {
from { box-shadow: 0 0 0 4px rgba(70,120,255,.55), 0 0 40px rgba(60,100,255,.80), 0 0 80px rgba(40,70,200,.45), 0 6px 24px rgba(0,0,0,.75); }
to { box-shadow: 0 0 0 5px rgba(110,170,255,.75), 0 0 72px rgba(90,150,255,1.0), 0 0 130px rgba(70,110,230,.65), 0 6px 24px rgba(0,0,0,.75); }
}
.pozzo-result { min-height: 48px; margin: 10px 0; }
.pozzo-pulling { text-align: center; color: #93c5fd; font-style: italic; padding: 12px; animation: wheel-pulse .8s infinite alternate; }
.pozzo-empty { text-align: center; color: #f87171; padding: 12px; }
.pozzo-result-card {
border: 2px solid #8a7a5f; border-radius: 12px; padding: 12px; margin: 6px 0;
background: rgba(0,0,0,.08);
}
.pozzo-rarity-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 6px; }
/* ── Catena del Fato ── */
.catena-cards-img { width: 100%; max-height: 140px; object-fit: contain; margin: 6px 0 12px; display: block; }
.catena-chain {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0;
}
.catena-node {
display: flex; flex-direction: column; align-items: center;
border-radius: 10px; padding: 8px 10px; min-width: 72px;
background: rgba(0,0,0,.10); border: 2px solid rgba(107,114,128,.3);
font-size: .72rem; gap: 2px;
}
.catena-node-num { font-weight: 700; font-size: .85rem; }
.catena-node-reward{ color: #4ade80; font-weight: 600; }
.catena-node-risk { color: #f87171; font-size: .65rem; }
.catena-done { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.5); }
.catena-current { background: rgba(124,58,237,.18); border-color: #7c3aed; animation: catena-pulse 1.2s infinite alternate; }
.catena-future { opacity: .5; }
.catena-busted { background: rgba(239,68,68,.15); border-color: #ef4444; }
@keyframes catena-pulse { from { box-shadow:0 0 0 0 rgba(124,58,237,.4); } to { box-shadow:0 0 0 6px rgba(124,58,237,0); } }
.catena-msg { min-height: 44px; margin: 8px 0; text-align: center; border-radius: 10px; overflow: hidden; }
.catena-bust { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #f87171; padding: 12px; border-radius: 10px; font-weight: 700; }
.catena-cashed { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #4ade80; padding: 12px; border-radius: 10px; font-weight: 700; }
.catena-advance{ background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.35); color: #a78bfa; padding: 12px; border-radius: 10px; font-weight: 700; }
.catena-btn-row { display: flex; gap: 8px; margin-top: 8px; }
.catena-cash-btn { flex: 1; background: rgba(107,114,128,.2) !important; border: 1px solid rgba(107,114,128,.4) !important; }
.catena-roll-btn { flex: 2; }
/* ── Casse Chiuse ── */
.casse-hero-img { width: 100%; max-height: 180px; object-fit: contain; margin: 8px 0 16px; display: block; }
.casse-card { border-left: 3px solid rgba(124,58,237,.4); margin-bottom: 10px; }
.casse-bronzo{ border-left-color: #cd7f32; }
.casse-argento{ border-left-color: #9ca3af; }
.casse-oro { border-left-color: #f59e0b; }
.casse-cost { padding: 2px 14px 8px; font-size: .82rem; color: #a78bfa; font-weight: 600; }
.casse-result { min-height: 48px; margin: 12px 0; }
.casse-opening { text-align: center; color: #a78bfa; padding: 14px; font-style: italic; animation: ruota-pulse .8s infinite alternate; }
.casse-result-wrap { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25); border-radius: 12px; padding: 14px; }
.casse-result-title { font-weight: 700; margin-bottom: 8px; color: #c4b5fd; }
.casse-reward-text { font-size: 1.1rem; font-weight: 700; text-align: center; padding: 12px; }
/* ═══════════════ Arena v2 ═══════════════ */
.arena-v2 {
margin: 0 0 1rem;
border-radius: 14px;
overflow: hidden;
background: #130b04;
border: 1px solid #4a2d12;
box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
/* Banner */
.arena-banner {
position: relative;
width: 100%;
background: linear-gradient(160deg, #0c0818 0%, #1e0f05 55%, #3d1f08 100%);
overflow: hidden;
display: flex;
align-items: flex-end;
}
.arena-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 70% at 15% 65%, rgba(249,115,22,.45) 0%, transparent 100%),
radial-gradient(ellipse 55% 70% at 85% 65%, rgba(249,115,22,.45) 0%, transparent 100%),
radial-gradient(ellipse 40% 50% at 50% 50%, rgba(251,191,36,.18) 0%, transparent 100%);
pointer-events: none;
}
.arena-banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.arena-banner-overlay {
position: relative;
z-index: 1;
width: 100%;
padding: 100px 16px 18px;
background: linear-gradient(transparent 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.88) 100%);
text-align: center;
}
.arena-banner-title {
font-family: 'Cinzel', serif;
font-size: 1.22rem;
font-weight: 900;
color: #e8c870;
text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 20px rgba(200,168,64,.4);
letter-spacing: .04em;
line-height: 1.2;
}
.arena-banner-sub {
font-size: .68rem;
color: #c49a5a;
letter-spacing: .12em;
text-transform: uppercase;
margin-top: 4px;
opacity: .8;
}
/* Pip spade — ora dentro il banner overlay */
.arena-pips-row {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 18px;
padding: 14px 16px 10px;
}
.arena-pip { transition: transform .15s; }
.arena-pip.active {
filter: drop-shadow(0 0 5px rgba(200,168,64,.65));
}
.arena-pip.used { opacity: .55; }
/* Azione — dentro l'overlay */
.arena-avail-label {
text-align: center;
font-size: .75rem;
color: #c49a5a;
letter-spacing: .05em;
margin-bottom: 8px;
}
.arena-enter-btn {
background: linear-gradient(135deg, #b8620a 0%, #d4890e 60%, #e8a020 100%) !important;
border: 1px solid #f0b840 !important;
color: #fff !important;
letter-spacing: .08em;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
box-shadow: 0 2px 12px rgba(232,160,32,.35) !important;
}
.arena-enter-btn:active { transform: scale(.97); }
.arena-exhausted {
text-align: center;
color: rgba(210,185,140,.75);
font-size: .85rem;
font-style: italic;
padding: 4px 0 2px;
}
/* Dungeon cards */
.dungeon-card {
display: flex;
align-items: center;
gap: 12px;
margin: 0 12px 10px;
padding: 13px 12px 13px 18px;
border-radius: 10px;
background: #0f0904;
border: 1px solid #2e1a08;
position: relative;
overflow: hidden;
}
.dungeon-card:last-child { margin-bottom: 14px; }
.dc-accent {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
}
.dc-covo .dc-accent { background: linear-gradient(180deg, #c0392b, #7a1210); }
.dc-scalata .dc-accent { background: linear-gradient(180deg, #4a9fd4, #1a5a8a); }
.dc-done .dc-accent { background: #2a1a08; }
.dc-icon {
font-size: 1.9rem;
flex-shrink: 0;
line-height: 1;
width: 44px; height: 44px;
text-align: center;
display: flex; align-items: center; justify-content: center;
}
.dc-img {
width: 44px; height: 44px;
object-fit: cover;
border-radius: 8px;
display: block;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.dc-img-fallback { display: none; }
.dc-body { flex: 1; min-width: 0; }
.dc-title {
font-family: 'Cinzel', serif;
font-size: .8rem;
font-weight: 700;
color: #e0c890;
margin-bottom: 3px;
line-height: 1.3;
}
.dc-done .dc-title { color: #5a4020; }
.dc-sub {
font-size: .71rem;
color: #8b6840;
line-height: 1.4;
}
.dc-done .dc-sub { color: #3a2810; }
.dc-btn {
flex-shrink: 0;
background: #1e1008;
border: 1px solid #3a2010;
color: #5a4020;
border-radius: 8px;
padding: 9px 14px;
font-size: .78rem;
font-family: 'Cinzel', serif;
font-weight: 600;
cursor: default;
white-space: nowrap;
}
.dc-btn-go {
background: linear-gradient(135deg, #2a1208, #4a2210);
border-color: #9a6030;
color: #e0b860;
cursor: pointer;
}
.dc-btn-go:hover { background: linear-gradient(135deg, #3a1a0a, #6a3014); border-color: #c08040; }
.dc-btn-go:active { transform: scale(.96); }
@media (prefers-color-scheme: light) {
.arena-v2 { border-color: #c8a060; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.dungeon-card { background: #f5e8d0; border-color: #c8a060; }
.dc-done { background: #ede0c8; }
.dc-title { color: #3b2a1a; }
.dc-done .dc-title { color: #9a7040; }
.dc-sub { color: #7a5a30; }
.dc-btn { background: #e8d4b0; border-color: #c8a060; color: #9a7040; }
.dc-btn-go { background: linear-gradient(135deg,#8b4010,#b05010); border-color: #d07020; color: #fff; }
}
:root[data-theme="light"] .arena-v2 { border-color: #c8a060; }
:root[data-theme="light"] .dungeon-card { background: #f5e8d0; border-color: #c8a060; }
:root[data-theme="light"] .dc-title { color: #3b2a1a; }
:root[data-theme="light"] .dc-sub { color: #7a5a30; }
:root[data-theme="light"] .dc-btn { background: #e8d4b0; border-color: #c8a060; color: #9a7040; }
:root[data-theme="light"] .dc-btn-go { background: linear-gradient(135deg,#8b4010,#b05010); border-color: #d07020; color:#fff; }
/* ═══════════════ Grafica v10/10 — Visual Overhaul ═══════════════ */
/* ── Legendary loot shimmer ── */
.loot.rar-leggendario::after,
.loot.rar-divino::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
108deg,
transparent 32%,
rgba(255,220,80,.14) 46%,
rgba(255,180,40,.18) 50%,
rgba(255,220,80,.14) 54%,
transparent 68%
);
animation: lootShimmer 4.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes lootShimmer {
0%, 100% { transform: translateX(-80%); opacity: 0; }
35% { opacity: 1; }
65% { opacity: 1; }
90% { transform: translateX(80%); opacity: 0; }
}
/* ── Consumable cards: dark lacquered mini-tiles ── */
.consumable-card {
background:
linear-gradient(160deg, rgba(40,28,12,.88) 0%, rgba(20,14,6,.94) 100%);
border: 1.5px solid rgba(90,61,36,.4);
box-shadow:
0 3px 14px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.4);
position: relative;
overflow: hidden;
}
.consumable-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
pointer-events: none;
}
.consumable-card.rarity-comune {
border-color: rgba(138,122,95,.5);
}
.consumable-card.rarity-raro {
border-color: rgba(46,111,176,.65);
box-shadow:
0 3px 14px rgba(0,0,0,.55),
0 0 16px rgba(46,111,176,.22),
inset 0 1px 0 rgba(100,160,255,.1),
inset 0 -1px 0 rgba(0,0,0,.4);
}
.consumable-card.rarity-epico {
border-color: rgba(123,63,191,.72);
box-shadow:
0 3px 14px rgba(0,0,0,.55),
0 0 20px rgba(123,63,191,.28),
inset 0 1px 0 rgba(180,120,255,.1),
inset 0 -1px 0 rgba(0,0,0,.4);
}
.consumable-card.rarity-leggendario {
border-color: rgba(217,130,43,.8);
background:
linear-gradient(160deg, rgba(55,30,5,.9) 0%, rgba(25,12,3,.95) 100%);
box-shadow:
0 3px 16px rgba(0,0,0,.6),
0 0 26px rgba(217,130,43,.3),
inset 0 1px 0 rgba(255,200,80,.14),
inset 0 -1px 0 rgba(0,0,0,.5);
animation: consLegGlow 3.4s ease-in-out infinite;
}
@keyframes consLegGlow {
0%, 100% { box-shadow: 0 3px 16px rgba(0,0,0,.6), 0 0 26px rgba(217,130,43,.3), inset 0 1px 0 rgba(255,200,80,.14), inset 0 -1px 0 rgba(0,0,0,.5); }
50% { box-shadow: 0 3px 16px rgba(0,0,0,.6), 0 0 40px rgba(217,130,43,.55), inset 0 1px 0 rgba(255,200,80,.2), inset 0 -1px 0 rgba(0,0,0,.5); }
}
.consumable-name {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: .76rem;
color: #e0d0a8;
text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.consumable-desc { color: #8a7a60; }
.consumable-qty {
background: rgba(0,0,0,.55);
border: 1px solid rgba(201,147,46,.45);
color: var(--gold-bright);
font-family: 'Cinzel', serif;
font-weight: 800;
font-size: .7rem;
}
/* ── Quick consumable strip: match card aesthetic ── */
.quick-cons-btn {
background: linear-gradient(160deg, rgba(35,24,8,.85) 0%, rgba(18,12,4,.92) 100%);
border: 2px solid rgba(90,61,36,.38);
box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.quick-cons-btn.rarity-raro {
border-color: rgba(46,111,176,.62);
box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 12px rgba(46,111,176,.25), inset 0 1px 0 rgba(100,160,255,.09);
}
.quick-cons-btn.rarity-epico {
border-color: rgba(123,63,191,.68);
box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 15px rgba(123,63,191,.3), inset 0 1px 0 rgba(180,120,255,.09);
}
.quick-cons-btn.rarity-leggendario {
border-color: rgba(217,130,43,.78);
box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 18px rgba(217,130,43,.35), inset 0 1px 0 rgba(255,200,80,.1);
}
.quick-cons-name { color: #c4b08a; }
.quick-cons-badge {
background: rgba(201,147,46,.9);
border: 1.5px solid rgba(255,220,100,.4);
color: #1a0e04;
}
/* ── Panel title: elegant gold accent rule ── */
.panel-title {
padding-bottom: 8px;
margin-bottom: 6px;
background:
linear-gradient(90deg, transparent, rgba(201,147,46,.45) 30%, rgba(201,147,46,.45) 70%, transparent)
left bottom / 100% 1px no-repeat;
text-shadow: 0 1px 2px rgba(255,255,255,.4);
}
/* ── btn-small: sharper depth ── */
.btn-small {
padding: 7px 14px;
font-size: .78rem;
border-radius: 8px;
letter-spacing: .02em;
}
/* ── Category filter buttons: more depth when inactive ── */
.coll-btn {
box-shadow: inset 0 2px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.06);
transition: transform .1s, box-shadow .1s, background .15s;
}
.coll-btn:active { transform: scale(.96); }
.coll-btn.active {
box-shadow: 0 0 16px rgba(232,182,76,.38), inset 0 1px 0 rgba(255,255,200,.35);
}
/* ── Crafting panel: refined dividers ── */
.crafting-row {
border-bottom-color: rgba(90,61,36,.22);
}
/* ── Buff chips: Cinzel for consistency ── */
.buff-chip { font-family: 'Cinzel', serif; font-size: .67rem; letter-spacing: .03em; }
/* ── Reward tile: richer dark glass on parchment ── */
.reward {
background:
linear-gradient(160deg, rgba(40,28,12,.85) 0%, rgba(20,14,6,.92) 100%);
border-color: rgba(201,147,46,.4);
color: #e0d0a8;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* ═══════════════ Tappe della Via — Milestone Overlay ═══════════════ */
.milestone-overlay {
position: fixed; inset: 0; z-index: 9000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
background: rgba(0,0,0,.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .35s ease;
}
.milestone-overlay.milestone-visible { opacity: 1; }
.milestone-overlay.milestone-exit { opacity: 0; pointer-events: none; }
.milestone-card {
max-width: 400px; width: 100%;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.12) 0%, transparent 55%),
linear-gradient(160deg, #1a1208 0%, #0a0804 100%);
border: 2px solid var(--ms-border, #c9932e);
border-radius: 18px;
padding: 24px 20px 22px;
text-align: center;
box-shadow:
0 0 0 1px rgba(0,0,0,.8),
0 8px 36px rgba(0,0,0,.85),
0 0 48px var(--ms-glow, rgba(201,147,46,.4)),
inset 0 1px 0 rgba(255,255,255,.1);
display: flex; flex-direction: column; align-items: center; gap: 10px;
animation: msCardIn .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes msCardIn {
from { transform: scale(.82) translateY(20px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.ms-tier-badge {
font-family: 'Cinzel', serif;
font-size: .65rem;
font-weight: 800;
letter-spacing: .16em;
color: var(--ms-border, #c9932e);
text-shadow: 0 0 12px var(--ms-glow, rgba(201,147,46,.5));
background: rgba(0,0,0,.4);
border: 1px solid var(--ms-border, #c9932e);
border-radius: 20px;
padding: 3px 12px;
}
.ms-icon {
font-size: 3.4rem;
line-height: 1;
filter: drop-shadow(0 0 16px var(--ms-glow, rgba(201,147,46,.6)));
animation: msIconPop .5s .2s cubic-bezier(.15,1.4,.4,1) both;
}
@keyframes msIconPop {
from { transform: scale(0) rotate(-20deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
.ms-session-label {
font-family: 'Cinzel', serif;
font-size: .7rem;
font-weight: 700;
color: rgba(200,170,100,.6);
letter-spacing: .08em;
}
.ms-title {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 1.15rem;
color: var(--ms-border, #e8b64c);
text-shadow: 0 0 20px var(--ms-glow, rgba(232,182,76,.45)), 0 1px 3px rgba(0,0,0,.8);
line-height: 1.25;
margin: 0;
}
.ms-scene {
font-family: 'Crimson Pro', Georgia, serif;
font-size: .92rem;
font-style: italic;
color: #c8b890;
line-height: 1.6;
text-align: center;
margin: 2px 0;
}
.ms-divider {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, var(--ms-border, #c9932e), transparent);
opacity: .5;
margin: 2px 0;
}
.ms-reward-row {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.ms-reward-chip {
font-family: 'Cinzel', serif;
font-size: .8rem;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
border: 1.5px solid;
white-space: nowrap;
}
.ms-reward-chip.gold {
background: rgba(201,147,46,.18);
border-color: rgba(201,147,46,.6);
color: #f0c050;
text-shadow: 0 0 8px rgba(255,200,60,.4);
}
.ms-reward-chip.item {
background: rgba(123,63,191,.18);
border-color: rgba(123,63,191,.55);
color: #c4a0f0;
}
.ms-btn {
width: 100%;
margin-top: 4px;
font-size: 1rem;
letter-spacing: .04em;
}
/* ── Canvas particles (milestone overlay) ── */
.ms-particles {
position: absolute; inset: 0; pointer-events: none;
width: 100%; height: 100%;
}
/* ── Tappe della Via — profilo hero ── */
.ms-profile-panel { padding: 14px 14px 16px; }
.ms-profile-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 7px;
margin-top: 12px;
}
.ms-pb {
display: flex; flex-direction: column; align-items: center; gap: 3px;
background: rgba(0,0,0,.28);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: 10px;
padding: 8px 4px 6px;
transition: transform .15s, box-shadow .15s;
cursor: default;
}
.ms-pb.done {
background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,0,0,.3));
border-color: var(--ms-border, #c9932e);
box-shadow: 0 0 10px var(--ms-glow, rgba(201,147,46,.4)), inset 0 1px 0 rgba(255,255,255,.12);
cursor: pointer;
}
.ms-pb.done:active { transform: scale(.94); }
.ms-pb.near {
border-color: rgba(255,255,255,.28);
background: rgba(255,255,255,.04);
}
.ms-pb-icon {
font-size: 1.35rem;
line-height: 1;
filter: drop-shadow(0 0 6px var(--ms-glow, transparent));
}
.ms-pb:not(.done) .ms-pb-icon { opacity: .28; font-size: .85rem; }
.ms-pb.near .ms-pb-icon { opacity: .55; font-size: .9rem; }
.ms-pb-num {
font-family: 'Cinzel', serif;
font-size: .6rem;
font-weight: 700;
color: rgba(200,170,100,.5);
letter-spacing: .05em;
}
.ms-pb.done .ms-pb-num { color: var(--ms-border, #e8b64c); opacity: .85; }
.ms-pb.near .ms-pb-num { color: rgba(255,255,255,.6); }
/* ── Bacheca del Viandante ── */
.bv-board-outer {
position: relative;
border-radius: 5px 5px 4px 4px;
margin-top: 20px;
box-shadow:
0 0 0 3px #120700,
0 0 0 7px #3a1c08,
0 0 0 9px #0d0500,
0 24px 60px rgba(0,0,0,0.85);
}
.bv-board-beam {
background: linear-gradient(180deg,
#4a2510 0%, #3a1c08 20%, #2e1408 50%, #3a1c08 80%, #4a2510 100%);
padding: 11px 44px 9px;
position: relative;
border-radius: 5px 5px 0 0;
border-bottom: 3px solid #120700;
}
.bv-board-beam::before, .bv-board-beam::after {
content: '';
position: absolute;
top: 50%; transform: translateY(-50%);
width: 22px; height: 22px;
border-radius: 50%;
background: radial-gradient(circle at 38% 35%, #6a3c14, #1e0c04 70%);
box-shadow: 0 2px 6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12);
}
.bv-board-beam::before { left: 16px; }
.bv-board-beam::after { right: 16px; }
.bv-board-title {
text-align: center;
font-family: 'Cinzel', serif;
font-size: .9rem;
font-weight: 700;
letter-spacing: .2em;
color: #c8922a;
text-shadow: 0 0 24px rgba(200,146,42,.5), 0 1px 4px rgba(0,0,0,.9);
}
.bv-board-title-deco {
display: block;
text-align: center;
margin-top: 3px;
color: rgba(180,100,25,.35);
font-family: 'Cinzel', serif;
font-size: .52rem;
letter-spacing: .3em;
}
.bv-board-surface {
position: relative;
overflow: hidden;
}
.bv-wood-canvas {
position: absolute;
inset: 0;
width: 100%; height: 100%;
display: block;
pointer-events: none;
}
.bv-parchments {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
padding: 18px 6px 16px;
gap: 0;
}
/* ── Individual parchment ── */
.bv-parchment {
position: relative;
flex: 1 1 100px;
max-width: 150px;
margin: 0 1% 12px;
transform: rotate(var(--rot, 0deg)) translateY(var(--shift, 0px));
filter:
drop-shadow(0 10px 22px rgba(0,0,0,.75))
drop-shadow(0 3px 7px rgba(0,0,0,.55));
transform-origin: 50% 8px;
transition: filter .2s, transform .2s;
cursor: pointer;
}
.bv-parchment:active {
transform: rotate(var(--rot, 0deg)) translateY(var(--shift, 0px)) scale(0.96);
}
.bv-parchment.bv-done {
filter:
drop-shadow(0 10px 22px var(--bq-glow, rgba(160,120,64,.6)))
drop-shadow(0 3px 7px rgba(0,0,0,.55));
}
.bv-parchment.bv-claimed {
filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)) grayscale(.35);
opacity: .6;
}
/* Per-tier parchment backgrounds and clip-paths */
.bv-parchment.commissione .bv-parchment-body {
background: linear-gradient(162deg,
#f2e096 0%,#e8c870 12%,#d4a850 35%,#ddb85a 55%,#c9a040 75%,#d4a848 100%);
clip-path: polygon(
2% 3%,5% 0.5%,9% 2%,14% 0%,50% 1%,
86% 0.5%,92% 2%,96% 0%,98% 3%,
99.5% 30%,100% 68%,99% 96%,
97% 99%,94% 100%,90% 98.5%,85% 100%,
15% 99.5%,10% 98%,6% 100%,3% 98.5%,1% 97%,
0.5% 68%,0% 30%
);
}
.bv-parchment.incarico .bv-parchment-body {
background: linear-gradient(168deg,
#e8c878 0%,#d8ae58 15%,#c49038 40%,#ceaa48 60%,#ba9030 80%,#c8a040 100%);
clip-path: polygon(
3% 2%,6% 0%,10% 1.5%,50% 0.5%,
90% 1%,94% 0%,97% 2.5%,99% 1%,
100% 3%,99.5% 35%,100% 70%,98.5% 97%,
96% 100%,92% 98%,88% 100%,
12% 99.5%,8% 100%,5% 98.5%,2% 100%,0.5% 98%,
0% 70%,0.5% 35%
);
}
.bv-parchment.missione .bv-parchment-body {
background: linear-gradient(155deg,
#d4a858 0%,#c09038 18%,#a87828 40%,#b88828 60%,#9e7020 80%,#aa8028 100%);
clip-path: polygon(
1% 3%,4% 0.5%,8% 2%,12% 0%,50% 1%,
88% 0%,93% 1.5%,97% 0.5%,99% 2%,
100% 4%,99% 35%,100% 70%,99% 97%,
96% 99.5%,92% 100%,88% 98.5%,84% 100%,
16% 99%,12% 100%,8% 98%,4% 100%,1.5% 98.5%,
0% 97%,0.5% 70%,0% 35%
);
}
.bv-parchment-body {
position: relative;
padding: 18px 10px 18px;
}
.bv-parchment-body::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 40% 20% at 80% 85%, rgba(90,50,10,.1) 0%, transparent 70%),
radial-gradient(ellipse 30% 30% at 15% 20%, rgba(60,35,8,.08) 0%, transparent 60%);
pointer-events: none;
}
/* ── Nail ── */
.bv-nail {
position: absolute;
top: -9px; left: 50%;
transform: translateX(-50%);
width: 16px; height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 37% 33%, #a08058, #2e1608 68%);
box-shadow: 0 3px 8px rgba(0,0,0,.75), 0 1px 2px rgba(255,255,255,.14);
z-index: 10;
}
.bv-nail::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(255,255,255,.3);
}
/* ── Content ── */
.bv-tier-badge {
display: block;
text-align: center;
font-family: 'Cinzel', serif;
font-size: .58rem;
font-weight: 700;
letter-spacing: .15em;
color: var(--bq-ink, #6e3e0a);
border: 1px solid var(--bq-ink, #6e3e0a);
border-radius: 20px;
padding: 2px 8px;
opacity: .85;
margin-bottom: 8px;
}
.bv-npc-row {
display: flex; align-items: center; gap: 6px;
margin-bottom: 6px;
}
.bv-npc-avatar {
width: 30px; height: 30px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: .75rem;
color: #221008;
background-image: url('assets/npcs/ritratti.webp');
background-size: 700% 400%;
background-position: calc(var(--sc, 0) * 100% / 6) calc(var(--sr, 0) * 100% / 3);
}
.bv-npc-name {
font-family: 'Cinzel', serif;
font-size: .65rem;
font-weight: 700;
font-style: italic;
color: #1e0e04;
line-height: 1.2;
flex: 1;
}
/* Mini km bar shown in compact parchment */
.bv-km-bar-wrap {
margin-top: 6px;
background: rgba(80,45,10,.15);
border-radius: 4px;
height: 4px;
overflow: hidden;
}
.bv-km-bar-fill {
height: 100%;
background: rgba(80,45,10,.55);
border-radius: 4px;
transition: width .4s;
}
/* Detail modal overlay */
.bv-detail-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 16px;
background: rgba(0,0,0,.72);
animation: bvOverlayIn .18s ease;
}
@keyframes bvOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
.bv-detail-sheet {
position: relative;
width: 100%;
max-width: 360px;
background: linear-gradient(162deg,#f2e096 0%,#e8c870 12%,#d4a850 35%,#ddb85a 55%,#c9a040 75%,#d4a848 100%);
clip-path: polygon(
2% 3%,5% 0.5%,9% 2%,14% 0%,50% 1%,
86% 0.5%,92% 2%,96% 0%,98% 3%,
99.5% 20%,100% 55%,99% 97%,
97% 99%,94% 100%,90% 98.5%,85% 100%,
15% 99.5%,10% 98%,6% 100%,3% 98.5%,1% 97%,
0.5% 55%,0% 20%
);
padding: 32px 24px 44px;
animation: bvParchIn .28s cubic-bezier(.22,1,.36,1);
max-height: calc(100vh - 48px);
overflow-y: auto;
filter: drop-shadow(0 16px 40px rgba(0,0,0,.8)) drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.bv-detail-sheet::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 25% at 80% 88%, rgba(90,50,10,.12) 0%, transparent 70%),
radial-gradient(ellipse 35% 30% at 15% 15%, rgba(60,35,8,.1) 0%, transparent 60%);
pointer-events: none;
}
@keyframes bvParchIn {
from { transform: scale(.88); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.bv-detail-sheet.incarico {
background: linear-gradient(168deg,#e8c878 0%,#d8ae58 15%,#c49038 40%,#ceaa48 60%,#ba9030 80%,#c8a040 100%);
}
.bv-detail-sheet.missione {
background: linear-gradient(155deg,#d4a858 0%,#c09038 18%,#a87828 40%,#b88828 60%,#9e7020 80%,#aa8028 100%);
}
.bv-detail-nail {
position: absolute;
top: 8px; left: 50%;
transform: translateX(-50%);
width: 20px; height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 37% 33%, #a08058, #2e1608 68%);
box-shadow: 0 3px 10px rgba(0,0,0,.8), 0 1px 2px rgba(255,255,255,.14);
z-index: 10;
}
.bv-detail-nail::after {
content: '';
position: absolute;
top: 4px; left: 4px;
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.3);
}
.bv-detail-close {
position: absolute;
top: 14px; right: 20px;
background: rgba(80,45,10,.25);
border: 1px solid rgba(80,45,10,.2);
border-radius: 50%;
width: 30px; height: 30px;
font-size: .9rem;
color: #3a1a06;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
line-height: 1;
z-index: 5;
}
.bv-detail-avatar {
width: 56px; height: 56px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
color: #221008;
background-image: url('assets/npcs/ritratti.webp');
background-size: 700% 400%;
background-position: calc(var(--sc, 0) * 100% / 6) calc(var(--sr, 0) * 100% / 3);
border: 2.5px solid rgba(80,40,10,.3);
box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.bv-detail-npc-name {
font-family: 'Cinzel', serif;
font-size: .85rem;
font-weight: 700;
font-style: italic;
color: #1e0e04;
line-height: 1.2;
flex: 1;
}
.bv-parch-rule {
border: none;
border-top: 1px solid rgba(80,45,10,.28);
margin: 5px 0 7px;
}
.bv-quest-text {
font-family: 'Crimson Pro', Georgia, serif;
font-size: .95rem;
font-style: italic;
color: #1a0c04;
line-height: 1.6;
margin-bottom: 12px;
}
/* KM dots */
.bv-km-target {
display: flex; align-items: center; gap: 6px;
margin-bottom: 7px;
}
.bv-km-dot-row {
display: flex; gap: 3px; flex-wrap: wrap; flex: 1;
}
.bv-km-dot {
width: 6px; height: 6px;
border-radius: 50%;
border: 1.5px solid rgba(80,45,10,.4);
background: transparent;
flex-shrink: 0;
}
.bv-km-dot.filled {
background: rgba(80,45,10,.45);
border-color: rgba(80,45,10,.7);
}
.bv-km-text {
font-size: .62rem;
font-style: italic;
color: rgba(40,22,6,.65);
white-space: nowrap;
}
/* Reward chips */
.bv-reward-row {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 4px;
}
.bv-rchip {
font-size: .58rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 12px;
border: 1px solid;
}
.bv-rchip.gold { color:#6e3e0a; border-color:rgba(110,62,10,.45); background:rgba(200,145,25,.14); }
.bv-rchip.wood { color:#2d4812; border-color:rgba(45,72,18,.4); background:rgba(70,115,30,.1); }
.bv-rchip.stone { color:#384055; border-color:rgba(56,64,85,.4); background:rgba(90,100,125,.1); }
.bv-rchip.item { color:#420f68; border-color:rgba(66,15,104,.4); background:rgba(110,40,170,.1); }
/* Claim button */
.bv-claim-btn {
width: 100%;
margin-top: 8px;
font-size: .85rem;
animation: bvClaimPulse 2.4s ease-in-out infinite;
}
@keyframes bvClaimPulse {
0%,100% { box-shadow: 0 0 0 0 var(--bq-glow, rgba(160,120,64,.4)); }
50% { box-shadow: 0 0 0 6px transparent; }
}
/* Wax seal */
.bv-wax-seal {
position: absolute;
bottom: 9px; right: 10px;
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .55rem;
color: rgba(255,255,255,.6);
box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
z-index: 2;
}
/* Bottom plank */
.bv-board-plank {
background: linear-gradient(180deg,#2e1408 0%,#3a1c08 40%,#301408 100%);
border-top: 3px solid #120700;
padding: 7px 44px 9px;
border-radius: 0 0 5px 5px;
text-align: center;
position: relative;
}
.bv-board-plank::before, .bv-board-plank::after {
content: '';
position: absolute;
top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 38% 35%, #5a3010, #1e0c04 70%);
box-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.bv-board-plank::before { left: 16px; }
.bv-board-plank::after { right: 16px; }
.bv-footer-text {
font-family: 'Cinzel', serif;
font-size: .55rem;
letter-spacing: .2em;
color: rgba(180,100,25,.35);
}