html, body {
  height: 100%;
  margin: 0;
  background: #0b1520;
  color: #e2e8f0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;            /* evita scroll della pagina */
  overscroll-behavior: none;   /* disabilita overscroll su desktop/mobile */
  overflow: clip;              /* previene scrollbar dovute a subpixel */
}

body {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Contenitore principale (se presente) riempie sempre la viewport, senza scroll */
#Stage {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#app {
  position: fixed;  /* integra a viewport pieno evitando scroll */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden; /* nessuno scroll interno */
  contain: layout paint size;  /* isola layout ed evita spillover */
  padding: 0;       /* nessun margine/griglia interno */
}

/* Fullscreen background video */
#bgvideo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

@font-face {
  font-family: 'Conthrax';
  src: url('https://mofw99.github.io/cardware/wp-content/font/Conthrax-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Stage: area centrale con gli iframe */
#stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* evita scroll residui */
}

#frameStack {
  position: relative;
  width: 900px;
  height: 700px;
  transform-origin: center center; /* mantieni centrato quando scalato */
}

#liveFrame,
#previewFrame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  margin: 0;     /* nessun margine per singola skin */
  display: block;
}

#liveFrame {
  z-index: 1;
}

#liveFrame.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#previewFrame {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .2s ease, transform .2s ease;
}

#previewFrame.active {
  opacity: 1;
  transform: scale(1);
}

#placeholder {
  position: absolute;
  color: #94a3b8;
  font-size: 18px;
  letter-spacing: .5px;
}

/* Desktop skin image (-desktop.png) centered in stage */
#desktopSkinImg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-height: 850px;   /* richiesta: max height 850px */
  max-width: 100vw;
  object-fit: contain;
  z-index: 1;          /* sotto overlay gocce (9) e panel (10) */
  pointer-events: none;
}

/* === PANEL (etichetta in basso a sinistra) === */
#panel {
  position: fixed;   /* ancorato al viewport */
  left: 20px;        /* 20px dal bordo sinistro */
  bottom: 20px;      /* 20px dal bordo inferiore */

  /* ✅ dimensione e padding */
  width: 405px;
  max-width: 405px;
  padding: 15px 15px 20px 15px;

  /* layout interno */
  display: flex;
  flex-direction: column;
  gap: 23px;

  /*  effetto etichetta */
  background: rgba(0, 0, 0, 0.1);                  /* fill nero al 10% */
  border-top: 1px solid rgba(198, 198, 198, 0.5);   /* stroke top */
  border-right: 1px solid rgba(198, 198, 198, 0.5); /* stroke right */
  backdrop-filter: blur(3.36px);                    /* layer blur */
  border-radius: 15px;                               /* angoli stondati */

  /* leggero stacco dal background */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  /* always above skins */
  z-index: 10;
}

/* Overlay gocce: sotto la label delle tracce (panel) e sopra il resto */
#gocceOverlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;   /* fitta completamente la viewport */
  z-index: 9;          /* sotto al panel (10), sopra stage/iframe */
  pointer-events: none;
}

/* Titolo + About raggruppati per controllare la spaziatura */
#headerBlock {
  display: flex;
  flex-direction: column;
}

/* Nav etichetta: Tracce - About - Hardware */
#panel-nav {
  display: flex;
  align-items: center;
  gap: 23px;                /* spaziatura richiesta */
}
#panel-nav a {
  color: #e2e8f0;
  text-decoration: none;    /* no underline */
  font-weight: 600;
  font-size: 12px;
}
#panel-nav a:hover {
  color: #11CCFF;           /* hover blu */
  text-decoration: none;
}

/* Evidenziazione selezione testo in blu (brand) - copertura ampia */
*::selection,
::selection,
html::selection,
body::selection,
div::selection,
p::selection,
li::selection,
a::selection,
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection,
span::selection {
  background: #111CFF !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
}
*::-webkit-selection,
::-webkit-selection,
html::-webkit-selection,
body::-webkit-selection,
div::-webkit-selection,
p::-webkit-selection,
li::-webkit-selection,
a::-webkit-selection,
h1::-webkit-selection, h2::-webkit-selection, h3::-webkit-selection, h4::-webkit-selection, h5::-webkit-selection, h6::-webkit-selection,
span::-webkit-selection {
  background: #111CFF !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
}
*::-moz-selection,
::-moz-selection,
html::-moz-selection,
body::-moz-selection,
div::-moz-selection,
p::-moz-selection,
li::-moz-selection,
a::-moz-selection,
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, h5::-moz-selection, h6::-moz-selection,
span::-moz-selection {
  background: #111CFF !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

/* Lista tracce */
#trackList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#trackList li {
  padding: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  color: #e2e8f0;
  text-transform: uppercase;
  transition: color .2s ease;
}

#trackList li:hover {
  color: #111CFF;
}

#trackList li.active {
  color: #111CFF;
}

/* Titolo */
#title {
  font-family: 'Conthrax', Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: .9;
  letter-spacing: .4px;
  color: #e2e8f0;
  text-transform: uppercase;
}

/* About come label separata dalle tracce (non è una traccia) */
#aboutLink {
  margin-top: 0;
  margin-bottom: 23px;      /* spaziatura inferiore richiesta */
  padding: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  color: #e2e8f0;
  text-transform: uppercase;
  transition: color .2s ease;
}
#aboutLink:hover {
  color: #111CFF;
}

/* Logo */
#logo {
  width: 90px;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Brand opzionale */
#brand {
  text-transform: lowercase;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 1px;
}

/* === MOBILE (<=768px) - Home === */
@media (max-width: 768px) {
  /* Skin top-aligned con margin-top 10px */
  #stage {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0; /* sotto al panel */
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;  /* margin-top richiesto */
  }
  /* Scala dalla parte alta per mantenere proporzioni desktop adattando la larghezza */
  #frameStack {
    transform-origin: top center;
    width: 900px;   /* base */
    height: auto;   /* l'altezza viene gestita via JS per evitare crop */
    display: none;  /* su mobile mostriamo solo PNG, non gli iframe */
  }
  /* PNG della skin fissato in alto dietro al panel */
  #mobileSkinImg {
    position: fixed;
    top: 10px;       /* margine top 10px */
    left: 10px;      /* rispetta margini griglia */
    right: auto;
    width: calc(100vw - 20px); /* 100% della griglia (10px margine per lato) */
    height: auto;
    display: block;
    z-index: 0;     /* sotto al panel */
    pointer-events: none;
  }
  /* Pannello: ripristina tracce su mobile */
  #trackList { display: flex; }
  /* Panel come desktop (posizione e stile coerente) */
  #panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-width: none;
    padding: 10px;
    gap: 23px; /* gap tra tracce e about = 23px */
    z-index: 20; /* sopra alla skin */
  }
}