:root {
  --ink: #171b28;
  --ink-2: #252c3d;
  --cream: #f4ead6;
  --paper: #fff8e9;
  --orange: #e4663a;
  --yellow: #f1b84b;
  --teal: #3c8d8c;
  --blue: #4f84a2;
  --olive: #6f7c46;
  --red: #b74338;
  --line: rgba(23, 27, 40, .15);
  --shadow: 0 18px 45px rgba(23, 27, 40, .18);
  --radius: 24px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--yellow); color: var(--ink); }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 9999;
  transform: translateY(-150%); background: #fff; padding: 10px 14px;
  border: 2px solid var(--ink); border-radius: 10px;
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.section { padding: 95px 0; position: relative; }
.section-tight { padding: 70px 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase;
  letter-spacing: .13em; font-size: .78rem; font-weight: 900;
}
.kicker::before { content: ""; width: 26px; height: 3px; background: currentColor; border-radius: 3px; }
h1, h2, h3 { line-height: 1.02; margin: 0 0 20px; letter-spacing: -.035em; }
h1 { font-size: clamp(3.7rem, 10vw, 8.2rem); }
h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 2rem); }
p { margin: 0 0 18px; }
.lead { font-size: clamp(1.12rem, 2vw, 1.45rem); max-width: 780px; }
.small { font-size: .88rem; }
.muted { opacity: .72; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(244, 234, 214, .9); backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--line);
}
.header-row { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; font-weight: 1000; letter-spacing: -.04em; }
.brand-mark {
  width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-5deg); font-size: .78rem;
}
.site-nav { display: flex; align-items: center; gap: 25px; }
.site-nav a { text-decoration: none; font-weight: 800; font-size: .93rem; }
.site-nav a:hover { color: var(--red); }
.nav-buy { background: var(--ink); color: var(--paper) !important; padding: 10px 16px; border-radius: 999px; }
.menu-toggle { display: none; border: 2px solid var(--ink); background: transparent; padding: 8px 11px; border-radius: 10px; font-weight: 900; }

.hero {
  min-height: calc(100vh - 74px); overflow: hidden; padding: 80px 0 0;
  background:
    radial-gradient(circle at 75% 15%, rgba(241,184,75,.55) 0 9%, transparent 9.2%),
    linear-gradient(180deg, #edd9b6 0%, #f4ead6 67%, #d6d0a4 67%, #aab67c 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image: radial-gradient(var(--ink) .7px, transparent .7px); background-size: 8px 8px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; position: relative; z-index: 2; }
.hero-copy { padding-bottom: 70px; }
.title-stack { position: relative; display: inline-block; margin: 10px 0 18px; }
.title-stack h1 { margin: 0; color: var(--ink); text-shadow: 7px 7px 0 var(--yellow); }
.title-stack .scribble {
  position: absolute; right: 4%; bottom: -8px; transform: rotate(-4deg);
  background: var(--orange); color: white; padding: 5px 14px; border: 3px solid var(--ink);
  border-radius: 9px; font-size: clamp(.8rem, 1.8vw, 1.15rem); font-weight: 1000; letter-spacing: .08em;
}
.hero-copy .lead { max-width: 690px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px;
  padding: 12px 20px; border: 3px solid var(--ink); text-decoration: none; border-radius: 999px;
  font-weight: 1000; box-shadow: 5px 5px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn-primary { background: var(--orange); color: white; }
.btn-secondary { background: var(--paper); }
.hero-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.pill { border: 2px solid var(--ink); background: rgba(255,248,233,.72); border-radius: 999px; padding: 6px 11px; font-size: .8rem; font-weight: 900; }

.hero-art { align-self: end; min-height: 610px; position: relative; }
.sun { width: 190px; height: 190px; background: var(--yellow); border: 5px solid var(--ink); border-radius: 50%; position: absolute; top: 40px; right: 60px; }
.sun::after { content: ""; position: absolute; inset: 21px; border: 3px dashed var(--ink); border-radius: 50%; opacity: .5; }
.hill { position: absolute; border: 4px solid var(--ink); border-bottom: 0; background: var(--olive); }
.hill-a { width: 470px; height: 250px; right: -80px; bottom: 0; border-radius: 55% 45% 0 0 / 65% 65% 0 0; }
.hill-b { width: 430px; height: 205px; right: 180px; bottom: 0; background: #879456; border-radius: 55% 45% 0 0 / 62% 62% 0 0; }
.city {
  position: absolute; left: 20px; bottom: 66px; width: 370px; height: 230px;
  filter: drop-shadow(5px 5px 0 rgba(23,27,40,.14));
}
.player-card {
  position: absolute; width: 180px; height: 310px; bottom: 20px; border: 4px solid var(--ink);
  background: var(--paper); border-radius: 90px 90px 24px 24px; box-shadow: 9px 9px 0 var(--ink);
  display: grid; place-items: end center; overflow: hidden;
}
.player-card::before { content: ""; position: absolute; width: 83px; height: 83px; top: 28px; border: 4px solid var(--ink); background: #e7b589; border-radius: 50%; }
.player-card::after { content: ""; position: absolute; width: 118px; height: 180px; bottom: 0; border: 4px solid var(--ink); border-bottom: 0; border-radius: 45px 45px 0 0; }
.player-card.fabio { right: 185px; transform: rotate(-4deg); }
.player-card.fabio::after { background: #7eb3ca; box-shadow: inset 0 52px 0 #fff7e6, inset 0 92px 0 #9b7655; }
.player-card.stefano { right: 10px; transform: rotate(4deg); }
.player-card.stefano::after { background: #6dadd0; box-shadow: inset 0 105px 0 #304866; }
.player-card span { position: relative; z-index: 5; margin: 0 0 14px; background: var(--ink); color: white; padding: 4px 10px; border-radius: 999px; font-weight: 900; font-size: .78rem; }
.boar {
  position: absolute; width: 125px; height: 76px; left: 40px; bottom: 20px; background: #665343;
  border: 4px solid var(--ink); border-radius: 52% 48% 42% 45%; transform: rotate(5deg); box-shadow: 6px 6px 0 rgba(23,27,40,.16);
}
.boar::before { content: ""; position: absolute; right: -28px; top: 13px; width: 52px; height: 47px; background: #665343; border: 4px solid var(--ink); border-radius: 50%; }
.boar::after { content: ""; position: absolute; right: -34px; top: 34px; width: 28px; height: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; transform: rotate(-18deg); }

.ticker { background: var(--ink); color: var(--paper); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); overflow: hidden; }
.ticker-inner { display: flex; gap: 45px; padding: 15px 0; width: max-content; animation: marquee 25s linear infinite; font-weight: 1000; text-transform: uppercase; letter-spacing: .12em; }
.ticker-inner span::before { content: "✦"; margin-right: 45px; color: var(--yellow); }
@keyframes marquee { to { transform: translateX(-50%); } }

.intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.big-number { font-size: clamp(5rem, 12vw, 10rem); font-weight: 1000; line-height: .8; color: var(--orange); text-shadow: 6px 6px 0 var(--ink); -webkit-text-stroke: 3px var(--ink); }
.feature-list { display: grid; gap: 16px; margin-top: 28px; }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 17px 0; border-top: 1px solid var(--line); }
.feature-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-weight: 1000; background: var(--yellow); }

.dark { background: var(--ink); color: var(--paper); }
.dark .muted { color: #c8cbd5; opacity: 1; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 45px; }
.character-card { min-height: 420px; border: 3px solid #e8ddc9; border-radius: var(--radius); padding: 30px; position: relative; overflow: hidden; }
.character-card::before { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; right: -40px; top: -45px; background: rgba(241,184,75,.17); border: 2px dashed rgba(255,255,255,.25); }
.character-card .role { color: var(--yellow); font-weight: 1000; text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; }
.character-card p { max-width: 510px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.stat { border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: 6px 10px; font-size: .78rem; }
.character-portrait { position: absolute; right: 22px; bottom: 20px; width: 170px; height: 175px; opacity: .9; }

.route { background: #d9b97f; overflow: hidden; }
.route::before { content: ""; position: absolute; inset: 0; background: radial-gradient(var(--ink) .7px, transparent .7px); background-size: 10px 10px; opacity: .13; }
.route-line { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 50px; }
.route-line::before { content: ""; position: absolute; left: 8%; right: 8%; top: 28px; height: 5px; background: var(--ink); border-radius: 3px; }
.stop { position: relative; z-index: 2; text-align: center; }
.stop-dot { width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--ink); background: var(--orange); display: grid; place-items: center; margin: 0 auto 14px; font-weight: 1000; box-shadow: 5px 5px 0 var(--ink); }
.stop:nth-child(even) .stop-dot { background: var(--teal); }
.stop strong { display: block; }
.stop small { display: block; max-width: 170px; margin: 6px auto 0; line-height: 1.35; }

.archive-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 50px; align-items: center; }
.archive-book { aspect-ratio: 4/3; background: var(--red); border: 5px solid var(--ink); border-radius: 14px 34px 34px 14px; box-shadow: 12px 12px 0 var(--ink); padding: 45px; color: var(--paper); transform: rotate(2deg); position: relative; }
.archive-book::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 4px; background: rgba(23,27,40,.5); }
.archive-book .book-title { font-size: clamp(2.3rem, 5vw, 4.4rem); font-weight: 1000; line-height: .9; letter-spacing: -.05em; }
.archive-book .book-sub { margin-top: 18px; font-weight: 900; }
.archive-book .seal { position: absolute; right: 25px; bottom: 25px; width: 90px; height: 90px; border: 3px solid var(--paper); border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: .68rem; font-weight: 1000; transform: rotate(-12deg); }

.enemy-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 38px; }
.enemy { border: 3px solid var(--ink); border-radius: 19px; padding: 21px; background: var(--paper); min-height: 230px; box-shadow: 6px 6px 0 var(--ink); }
.enemy:nth-child(2) { background: #e7c78e; }
.enemy:nth-child(3) { background: #bbd2ca; }
.enemy:nth-child(4) { background: #d6b4a4; }
.enemy .enemy-no { font-size: 2.8rem; font-weight: 1000; line-height: 1; color: var(--orange); }

.gallery { background: #f0d7a4; }
.gallery-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-auto-rows: 230px; gap: 15px; margin-top: 40px; }
.scene { border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; position: relative; box-shadow: 7px 7px 0 var(--ink); background: #8ec0cf; }
.scene:first-child { grid-row: span 2; }
.scene:nth-child(2) { background: #d7b36d; }
.scene:nth-child(3) { background: #8fb0a0; }
.scene:nth-child(4) { background: #cf8163; }
.scene:nth-child(5) { background: #8aa5c2; }
.scene::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 65%; border-top: 4px solid var(--ink); border-radius: 50% 50% 0 0; background: #6c7f49; }
.scene:nth-child(even)::before { background: #b97956; }
.scene-label { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 10px; font-size: .76rem; font-weight: 1000; }
.scene .landmark { position: absolute; z-index: 1; left: 50%; top: 25%; transform: translateX(-50%); font-size: 4rem; filter: grayscale(1); opacity: .82; }

.buy { background: var(--orange); color: white; overflow: hidden; }
.buy::after { content: "TUSCAN BROS."; position: absolute; font-size: 14vw; font-weight: 1000; color: rgba(255,255,255,.07); left: -2vw; bottom: -5vw; white-space: nowrap; pointer-events: none; }
.buy-grid { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; position: relative; z-index: 2; }
.price { font-size: clamp(3rem, 7vw, 6rem); font-weight: 1000; line-height: 1; text-shadow: 5px 5px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); }
.buy-box { background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 25px; padding: 27px; box-shadow: 9px 9px 0 var(--ink); min-width: 300px; }
#steam-note { margin-top: 14px; border: 2px dashed var(--ink); padding: 10px 12px; border-radius: 10px; }

.faq-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
details { border-top: 2px solid var(--ink); padding: 18px 0; }
details:last-child { border-bottom: 2px solid var(--ink); }
summary { cursor: pointer; font-weight: 1000; font-size: 1.06rem; }
details p { margin: 12px 0 0; }

.site-footer { background: #11151f; color: #d9d9d4; padding: 50px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: flex-end; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--yellow); }
.footer-bottom { margin-top: 35px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; font-size: .82rem; }

.legal-hero { padding: 75px 0 45px; background: #ead7b4; border-bottom: 3px solid var(--ink); }
.legal-page main { background: var(--paper); }
.legal-content { width: min(calc(100% - 40px), 880px); margin: 0 auto; padding: 60px 0 90px; }
.legal-content h2 { font-size: 1.75rem; margin-top: 40px; }
.legal-content h3 { font-size: 1.2rem; margin-top: 28px; }
.legal-content ul { padding-left: 22px; }
.legal-note { border: 3px solid var(--ink); background: #fff0c5; border-radius: 15px; padding: 18px; margin: 24px 0; }
.data-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.data-table th, .data-table td { border-bottom: 1px solid #cfc6b4; text-align: left; padding: 10px 7px; vertical-align: top; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .hero-grid, .intro-grid, .archive-grid, .buy-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 520px; }
  .cards { grid-template-columns: 1fr; }
  .enemy-grid { grid-template-columns: repeat(2,1fr); }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid .scene:first-child { grid-row: span 1; grid-column: span 2; }
  .route-line { grid-template-columns: 1fr; gap: 20px; }
  .route-line::before { left: 27px; top: 0; bottom: 0; width: 5px; height: auto; right: auto; }
  .stop { display: grid; grid-template-columns: 58px 1fr; text-align: left; gap: 15px; align-items: center; }
  .stop-dot { margin: 0; }
  .stop small { margin: 3px 0 0; max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .site-nav { display: none; position: absolute; top: 74px; left: 0; right: 0; padding: 20px; background: var(--cream); border-bottom: 2px solid var(--ink); flex-direction: column; align-items: stretch; }
  .site-nav.is-open { display: flex; }
  .menu-toggle { display: inline-block; }
  .hero { padding-top: 45px; }
  .hero-copy { padding-bottom: 10px; }
  .hero-art { min-height: 430px; }
  .player-card { width: 135px; height: 245px; }
  .player-card::after { width: 92px; height: 145px; }
  .player-card.fabio { right: 130px; }
  .player-card.stefano { right: 0; }
  .city { width: 270px; left: -10px; bottom: 55px; }
  .sun { width: 125px; height: 125px; right: 22px; top: 35px; }
  .boar { transform: scale(.8); transform-origin: left bottom; }
  .section { padding: 70px 0; }
  .enemy-grid { grid-template-columns: 1fr; }
  .gallery-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .gallery-grid .scene:first-child { grid-column: auto; }
  .buy-box { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* CMS v2: media opzionali, senza modificare la grafica originale in assenza di upload */
.brand .cms-logo { width:46px;height:46px;object-fit:contain;flex:0 0 auto; }
.brand:has(.cms-logo) .brand-mark { display:none; }
.hero-art.has-cms-image > :not(.cms-hero-image) {display:none;}
.cms-hero-image {width:100%;height:100%;position:absolute;left:0;bottom:0;z-index:5;object-fit:contain;object-position:center bottom;filter:drop-shadow(7px 8px 0 rgba(23,27,40,.14));}
.cms-game-image {display:block;max-width:100%;height:auto;max-height:380px;object-fit:contain;margin:30px auto 0;border:3px solid var(--ink);border-radius:18px;background:rgba(255,255,255,.24);}
.character-card .cms-character-image {position:absolute;bottom:13px;right:18px;max-width:43%;width:200px;height:205px;object-fit:contain;object-position:center bottom;filter:drop-shadow(2px 4px 0 rgba(255,255,255,.12));}
.character-card:has(.cms-character-image) .character-portrait {display:none;}
.archive-book.has-cms-image {padding:0;overflow:hidden;background:var(--paper);}
.archive-book.has-cms-image::before,.archive-book.has-cms-image .book-title,.archive-book.has-cms-image .book-sub,.archive-book.has-cms-image .seal{display:none;}
.cms-archive-image {height:100%;width:100%;object-fit:cover;}
.enemy .cms-enemy-image {width:100%;height:145px;object-fit:contain;object-position:center;margin:6px auto 14px;}
.scene.has-cms-image::before,.scene.has-cms-image .landmark {display:none;}
.scene .cms-gallery-image {width:100%;height:100%;position:absolute;inset:0;object-fit:cover;z-index:1;}
@media (max-width:760px){.hero-art.has-cms-image{min-height:380px;}.character-card .cms-character-image{height:170px;max-width:40%;}}