@font-face {
  font-family: "Saeada";
  src: url(assets/fonts/df28054e79bbffe69ff92b76e531372e.otf) format("opentype");
}

/* ---------------- Typography ---------------- */
.cyber-font { font-family: 'Press Start 2P', 'Orbitron', monospace !important; }

.cyber-heading {
  font-family: 'Orbitron', sans-serif;   /* Match Cyberfolio headings */
  font-weight: 700;
  color: #00ffff !important;
  text-shadow:
    0 0 5px #00ffff,
    0 0 10px #00eaff,
    0 0 15px #00ccff,
    0 0 20px #0088ff;
  animation: cyberpunk-glow 2s ease-in-out infinite alternate;
}

@keyframes cyberpunk-glow {
  0%   { text-shadow: 0 0 5px #00ffff, 0 0 10px #00eaff, 0 0 15px #00ccff, 0 0 20px #0088ff; }
  100% { text-shadow: 0 0 8px #00ffff, 0 0 15px #00eaff, 0 0 25px #00ccff, 0 0 35px #0088ff; }
}

/* ---------------- Global reset ---------------- */
* { margin:0; padding:0; font-family:Saeada, sans-serif; }

html,body { background:#000011; overflow:hidden; }

/* ---------------- Canvas & CSS3D shells ---------------- */
#webgl{width:100vw;height:100vh;pointer-events:auto;}

#cssArcadeMachine,#cssLeftMonitor,#cssRightMonitor{pointer-events:none;cursor:pointer;}

#drawing-canvas{background:#fff;display:none;}

/* ---------------- Banner nav ---------------- */
.banner{
  position:absolute; top:-90px; left:0; width:100vw; height:65px;
  display:flex; justify-content:space-around; align-items:center;
  background:linear-gradient(90deg,#000011 0%,#001122 50%,#000011 100%);
  color:#00ffff; padding:12px 0;
  font-size:clamp(1.5rem,2vw,2.4rem);      /* Extra large & fluid */
  z-index:1; border-bottom:2px solid #ff0080;
  box-shadow:0 2px 4px rgba(255,0,128,.5),0 0 20px rgba(0,234,255,.3);
  transition:top .5s ease-in-out; backdrop-filter:blur(10px);
}

.banner-link{
  cursor:pointer; user-select:none;
  margin:0 1vw; padding:8px 12px; border-radius:4px;
  background:rgba(0,255,255,.1); border:1px solid transparent;
  transition:all .3s ease-in-out;
}
.banner-link:hover,
.banner-link:focus-visible{
  background:rgba(0,255,255,.2); border:1px solid #00ffff;
  transform:scale(1.07);
  box-shadow:0 0 15px rgba(0,255,255,.6); outline:none;
}

/* ---------------- Back button ---------------- */
.circular-button{
  position:absolute; bottom:50px; left:50px; width:100px; height:100px;
  opacity:0; visibility:hidden; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle,#9900ff 0%,#6600cc 100%);
  background-image:url(assets/images/72178d92e1249f02d8d66ea74bc64cfb.svg);
  background-size:70%; background-position:center; background-repeat:no-repeat;
  border:2px solid #ff0080;
  transition:opacity 1s,visibility 1s,background-size .2s,transform .3s;
  box-shadow:0 2px 4px rgba(255,0,128,.8),0 0 20px rgba(153,0,255,.4);
  z-index:2;
}
.show-back-button{opacity:1;visibility:visible;}
.circular-button:hover,
.circular-button:focus-visible{
  background-size:75%; transform:scale(1.1);
  box-shadow:0 4px 8px rgba(255,0,128,1),0 0 30px rgba(153,0,255,.8);
  outline:none;
}

/* ---------------- Whiteboard buttons ---------------- */
.button-row{position:absolute;bottom:100px;width:100vw;display:flex;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity 1s,visibility 1s;z-index:1;}
.show-button-row{opacity:1;visibility:visible;}

.circular-button-whiteboard{
  width:100px;height:100px;margin:0 20px;border-radius:50%;cursor:pointer;
  background-color:#9900ff;background-size:70%;background-position:center;background-repeat:no-repeat;
  border:5px solid transparent;box-shadow:0 2px 4px rgba(255,0,128,.7);
  transition:all .5s ease;
}
.whiteboard-selected{border-color:#00ffff;box-shadow:0 0 15px rgba(0,255,255,.8);transform:scale(1.1);}
.circular-button-whiteboard:hover,
.circular-button-whiteboard:focus-visible{
  background-size:80%;transform:scale(1.15);
  box-shadow:0 0 20px rgba(0,255,255,.6);outline:none;
}

/* ---------------- Rubik helper ---------------- */
.rubik-message{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  color:#00ffff;font-size:1.2rem;text-align:center;user-select:none;
  padding:10px 20px;background:rgba(0,0,17,.8);
  border:1px solid #00ffff;border-radius:8px;backdrop-filter:blur(5px);
  text-shadow:0 0 10px rgba(0,255,255,.8),0 0 20px rgba(0,234,255,.5);
  opacity:0;visibility:hidden;transition:opacity 1s,visibility 1s;z-index:1;
}
.show-rubik-message{opacity:1;visibility:visible;}

/* ---------------- Audio toggle ---------------- */
.audio-button{
  position:absolute;bottom:50px;right:50px;width:50px;height:50px;border-radius:50%;
  cursor:pointer;opacity:0;visibility:hidden;
  background:radial-gradient(circle,#9900ff 0%,#6600cc 100%);
  background-image:url(assets/images/e735f2ace4717bfa3ee56b0c02d735a7.svg);
  background-size:50%;background-position:center;background-repeat:no-repeat;
  border:2px solid #ff0080;
  transition:opacity 1s,visibility 1s,background-size .2s,transform .3s;
  box-shadow:0 2px 4px rgba(255,0,128,.8),0 0 15px rgba(153,0,255,.4);z-index:2;
}
.audio-button:hover,.audio-button:focus-visible{
  opacity:1;transform:scale(1.2);box-shadow:0 4px 8px rgba(255,0,128,1),0 0 25px rgba(153,0,255,.8);outline:none;
}
.audio-button-muted{background-image:url(assets/images/6df72fdeb4b9dbcd9aa8a33f5bdee896.svg);}

/* ---------------- Loading / Start overlay ---------------- */
.loadingScreen{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22vmin;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1.6em;color:#00ffff;text-align:center;user-select:none;cursor:default;
  border:.5em solid #ff0080;border-radius:50%;
  background:radial-gradient(circle,#000011 0%,#001122 100%);
  --mask:linear-gradient(#000011,#000011) padding-box,
         conic-gradient(#ff0080 var(--p,0%),transparent 0%) border-box;
  -webkit-mask:var(--mask);mask:var(--mask);
  box-shadow:0 0 20px rgba(255,0,128,.8),0 0 40px rgba(0,255,255,.4);
  opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;
  z-index:3;
  text-shadow:0 0 10px rgba(0,255,255,.8),0 0 20px rgba(0,234,255,.5);
}
.loadingScreen span#loading-percent{margin-top:.5rem;font-size:.55em;letter-spacing:2px;}
.loadingScreen.ready{cursor:pointer;animation:pulse 1.5s infinite alternate;}
.loadingScreen.ready span#loading-percent{display:none;}
.loadingScreen.ready span#loading-ready{display:block;font-size:.45em;letter-spacing:1px;}

@keyframes pulse{from{box-shadow:0 0 20px rgba(255,0,128,.8);}to{box-shadow:0 0 35px rgba(0,255,255,.9);}}

/* Show/hide helpers */
.show-loading-screen{opacity:1!important;visibility:visible!important;}
.finished-load{color:#9900ff!important;text-shadow:0 0 15px rgba(153,0,255,.9),0 0 30px rgba(153,0,255,.6);}



/* ---------------- Mobile fallback ---------------- */
.mobile-text{
  display:none;width:100vw;height:100vh;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#00ffff;
  background:linear-gradient(135deg,#000011 0%,#001122 50%,#000011 100%);
  text-shadow:0 0 10px rgba(0,255,255,.8),0 0 20px rgba(0,234,255,.4);
}
@media(max-width:768px){
  .mobile-text{display:flex!important;}
  .banner{font-size:3vw;}
  .banner-link:hover,.banner-link:focus-visible{font-size:3.5vw;}
}


/*# sourceMappingURL=main.css.map*/