/* ===== RUBIK'S EASTER EGG MODAL ===== */
#rubik-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(8,7,11,0.97);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#rubik-modal.open { display: flex; }
#rubik-close {
  position: absolute;
  top: 24px; right: 32px;
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.15s;
}
#rubik-close:hover { color: var(--fg); }
#rubik-title {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 32px;
}
#rubik-canvas-wrapper {
  width: min(340px, 84vw); height: min(340px, 84vw);
  margin-bottom: 32px;
}
#rubik-canvas { width: 100%; height: 100%; }
#rubik-controls {
  display: flex; gap: 16px; align-items: center;
}
.rubik-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border2);
  color: var(--fg-dim);
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.rubik-btn:hover { color: var(--fg); border-color: var(--teal); }
.rubik-btn:disabled { opacity: 0.3; cursor: not-allowed; }
#rubik-status {
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 1px;
  margin-top: 20px;
  min-height: 16px;
}
#konami-hint {
  position: fixed;
  bottom: 20px; right: 20px;
  font-size: 11px;
  color: var(--fg-muted);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  letter-spacing: 1px;
}

/* ===== SIDEBAR RUBIK'S CUBE ===== */
.sidebar-cube-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 24px;
}
.sidebar-cube {
  display: flex;
  align-items: center;
  justify-self: center;
}
.sidebar-cube-controls {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: 104px;
}
#sb-cube-canvas {
  width: 170px;
  height: 170px;
  display: block;
  cursor: grab;
}
#sb-cube-canvas:active { cursor: grabbing; }
#sb-cube-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border2);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
  border-radius: 2px;
  cursor: pointer;
  width: 104px;
  min-height: 30px;
  text-align: center;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
}
#sb-cube-btn.is-fading { opacity: 0.55; }
#sb-cube-btn:hover { color: var(--fg); }
#sb-cube-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== PLACEHOLDER + LAZY LOAD (three.js caricato solo quando serve) ===== */
.sidebar-cube { position: relative; }
#sb-cube-canvas { touch-action: none; }
.cube-ph { display: block; width: 170px; height: 170px; }
.sidebar-cube.is-live .cube-ph { display: none; }
.sidebar-cube #sb-cube-canvas { display: none; }
.sidebar-cube.is-live #sb-cube-canvas { display: block; animation: cube-in .35s ease-out; }
@keyframes cube-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) {
  /* lo stack detta l'altezza della riga accanto al blocco nome (~77px):
     piu' e' compatto, meno vuoto resta prima del ticker */
  .sidebar-cube-stack { flex-direction: column; align-items: center; gap: 2px; }
  #sb-cube-canvas, .cube-ph { width: 96px; height: 96px; }
  #sb-cube-btn {
    position: relative;
    min-height: 26px; width: 82px;
    padding: 4px 0; font-size: 8.5px; letter-spacing: 1.5px;
  }
  /* bottone piccolo ma area di tap ~42px: il riquadro resta 26px, il tocco no */
  #sb-cube-btn::after { content: ''; position: absolute; inset: -8px -12px; }
  #rubik-close { top: 16px; right: 18px; }
  #rubik-title { margin-bottom: 22px; }
}

/* medium desktop: cube above its button, a bit smaller, so the right
   column never gets wider than the window */
@media (min-width: 901px) and (max-width: 1279px) {
  .sidebar-cube-stack { flex-direction: column; gap: 10px; }
  #sb-cube-canvas, .cube-ph { width: 140px; height: 140px; }
}