/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
html, body { margin:0; padding:0; height:100%; overflow:hidden; font-family:"Luckiest Guy", cursive; letter-spacing: 1px; }
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
#game-container { position:fixed; top:0; left:0; width:100vw; height:100vh; background-size:cover; background-position:center; background-repeat:no-repeat; overflow: auto; }
canvas#game-canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
.screen { position:relative; top:0; left:0; width:auto; height:100%; padding:0; background-image:url("https://www.nord-ovest.it/wp-content/uploads/2025/09/back-menu.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center, center; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; color:#fff; z-index:50; }
div#intro-screen { padding: 20px; justify-content: center; height: 100vh; }
.guida-veloce { width: 100%; font-family: 'Open Sans', sans-serif; font-size: 16px; text-align: left; padding-bottom: 15px; letter-spacing: normal; }
.guida-veloce span {font-size: 18px;}
.overlay p, .overlay h2 { font-size: 36px; }
.screen.hidden { display:none; }
#logo { width:180px; margin-bottom:1rem; }
img#pause-img { width: 18px; }
.screen-button { position: relative; bottom: 0; width: 100%; height: 65px; margin:0; padding:20px; font-size:18px; letter-spacing: 2px; background:#005293; color:#fff; cursor:pointer; border-style: solid; border-width: 4px 4px 4px 4px; border-color: #fff; border-radius: 0px; }
#chapter-indicator { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.5); color:#fff; padding:0.5rem 1rem; border-radius:4px; font:bold 16px sans-serif; z-index:20; }
button { font-family:"Luckiest Guy", cursive; }
.pause-button { position:absolute; top:10px; right:10px; padding:0.5rem; font-size:1rem; border:none; border-radius:0; background:#005293; color:#fff; cursor:pointer; z-index:20; }
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:#005293b5; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; z-index:30; }
.overlay.hidden { display:none; }
#gameover-overlay #btn-restart, #pause-overlay #btn-resume { position: absolute; }
#chapter-menu-title { margin: 0; font-size: 32px; height: 100px; align-content: center; }
#chapter-menu ul { list-style:none; padding:20px; height:calc(100vh - 205px); overflow-y:auto; margin:0; font-family: 'Open Sans', sans-serif; font-size: 16px; letter-spacing: normal; box-shadow: inset 0px -10px 10px 0px rgb(197 197 197 / 30%); }
#chapter-menu li, #all-reasons-screen li { margin:0.5rem 0; }
#chapter-menu li:last-child { margin-bottom: 20px; }
#all-reasons-screen h2 { margin: 0; font-size: 32px; height: 100px; align-content: center; }
#all-reasons-screen ul { list-style:none; padding:20px; height:calc(100vh - 205px); overflow-y:auto; margin:0; font-family: 'Open Sans', sans-serif; font-size: 16px; letter-spacing: normal; box-shadow: inset 0px -10px 10px 0px rgb(197 197 197 / 30%); }
#all-reasons-screen li.chapter-title { font-family: 'Luckiest Guy'; font-size: 26px; letter-spacing: 1px; font-weight: 300; margin: 20px 0 10px 0; }
.fade-in { animation: fadeIn 1s forwards; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#victory-overlay { box-sizing: border-box; padding: 20px; background-image:url("https://www.nord-ovest.it/wp-content/uploads/2025/09/back-menu.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center, center; }
#victory-overlay .screen-button { position: relative; }
#victory-overlay #btn-view-all { margin-bottom: 20px; }
#reason-overlay #reason-text { margin-block-end: 0 !important; margin-block-start: 0; }