/* ==== Gioco.com css 2025 (Showing only relevant sections) ==== */
/* ... (Your existing global styles) ... */
body{user-select:none;padding:1% 5%;font-family:PT Serif, serif;font-size:1.2em;line-height:1.5em;
    display: block;
    align-items: center;    /* Centers the .flex-center div vertically */
    justify-content: center; /* Centers the .flex-center div horizontally */
    min-height: 100vh;      /* Ensures the body takes up the full screen height */
    margin: 0;}
html{scroll-behavior:smooth;}
mark{background-color:gold;color:black;border-radius:5px;padding:2px 10px;}
blu{color:#2764AB;font-weight:bold;}blu:hover{color:orange;}
red{color:orange;font-weight:bold;}red:hover{color:#2764AB;}
.inline-svg:hover{opacity:0.5;}
a:link{color:#2764AB;text-decoration:none;}a:hover{color:orange;}
.botto{color:#111;text-decoration:none;}.botto:hover{color:#468;}
#cook{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000;
animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards;}
@keyframes fadeInAnimation{0%{opacity:0;}100%{opacity:1;}}
.card{width:300px;padding:35px;background:#234;opacity:0.9;color:white;text-align:center;border-radius:15px;}
.csvg{fill:#fff;margin-top:20px;color:#fff;}
img{height:auto;max-width:100%;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;max-width:100%;margin:20px auto;}
.gallery img{width:100%;height:auto;display:block;border-radius:9px;border:2px solid #eee;}
.flex-center{max-width:90%;width:700px;height:auto;border-radius:15px;background:#f7f7f7;margin:0;padding:15px;}
.section{margin-bottom:20px;}

/* ==== Arrow buttons and back-to-top ==== */
#arrow-nav-container{position:fixed;top:25px;right:25px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;opacity:.8;}
#menu-toggle{width:50px;height:50px;background:#fefefe;color:#007bff;border:none;border-radius:50%;cursor:pointer;display:flex;
justify-content:center;align-items:center;font-size:22px;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.3s;}
#menu-toggle.active{background:#007bff;color:#fff;}
#arrow-menu{display:flex;flex-direction:column;gap:12px;margin-top:10px;opacity:0;transform:translateY(-5px) scale(.95);
pointer-events:none;transition:.3s;}
#arrow-menu.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}

/* SHARED BUTTON SHAPE/STYLE */
.nav-arrow,button.back-to-top{
  width:50px;height:50px;border-radius:50%;background:#fefefe;color:#007bff;border:none;
  display:flex; 
  justify-content:center;
  align-items:center;
  line-height:0;
  cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  position:relative; 
  transition:.3s;
}
.nav-arrow:hover,button.back-to-top.show:hover{background:#007bff;color:#fff}

/* --- ICON GENERATION & STATIC STYLE (Shared by ALL three arrows) --- */
/* This rule establishes the static, clean look for all icons */
.nav-arrow::before,button.back-to-top::before{
  content:"↑"; 
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%); 
  font-size:25px;
  line-height:0;
}

/* --- DOWN ARROW DIRECTION FIX (Using a more specific selector) --- */
/* This specific selector forces the rotation to override the shared rule. */
#arrow-menu .nav-arrow.down::before{
  /* Combines centering transform with the 180-degree rotation */
  transform:translate(-50%,-50%) rotate(180deg); 
}

/* Back-to-top positioning */
button.back-to-top{position:fixed;right:25px;bottom:50px;visibility:hidden;opacity:.8;z-index:99}
button.back-to-top.show{visibility:visible}