.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--transition);
  transform: translateZ(calc(var(--cube-size, 600px) / -2));
}

.face {
  position: absolute;
  width: var(--cube-size, 600px);
  height: var(--cube-size, 600px);
  display: grid;
  grid-template: 1fr / 1fr;
  background: var(--card);
  backdrop-filter: blur(3px);
  overflow: hidden;
  pointer-events: none;
}

.face.face-active {
  pointer-events: auto;
}

.face-border {
  grid-area: 1 / 1;
  background: var(--border) center/100% 100% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

.face h2 {
  margin: 0 0 var(--content-gap, 1rem) 0;
  /* Use the per-breakpoint variable so media-query overrides control size */
  font-size: var(--heading-size, 2rem);
  color: var(--text);
  font-family: "Electrolize", sans-serif;
}

.face p {
  margin: var(--para-margin, 0.75rem) 0;
  width: 100%;
  color: var(--text);
  /* Use the per-breakpoint variable so media-query overrides control size */
  font-size: var(--text-size, 1rem);
  line-height: var(--text-line-height, 1.5);
  font-family: "Roboto", sans-serif;
}

/* face-content creates the scrollable "safe zone" inside each cube face */
.face-content {
  grid-area: 1 / 1;
  margin: var(--safe-top, 8%) var(--safe-right, 10%) var(--safe-bottom, 6%) var(--safe-left, 12%);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* For inactive faces create a transparent overlay that blocks pointer/wheel
   events while keeping the iframe visible (preserves see-through look). */
.face:not(.face-active) iframe {
  visibility: hidden;
}

/* Remove focus outline to preserve the floating text illusion */
.face-content:focus {
  outline: none;
}

/* Hide scrollbar for iframe-type faces (iframe has its own scrollbar) */
.face-content[data-type="iframe"] {
  overflow: hidden;
}

/* Custom scrollbar styling for webkit browsers */
.face-content::-webkit-scrollbar {
  width: var(--scrollbar-width, 10px);
}

.face-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 2rem 0.3rem;
}

.face-content::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.face-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 230, 0.8);
}

/* Scrollbar styling for iframe content */
.face iframe {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

/* Scrollbar styling for iframe documents (applies to html/body inside iframe) */
html,
body {
  scrollbar-width: thin;
  scrollbar-color: #00ffe6 transparent;
}

/* Global webkit scrollbar for iframe documents */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin: 2rem 0.3rem;
}

::-webkit-scrollbar-thumb {
  background: #00ffe6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 230, 0.8);
}

/* Ensure body scrollbar inherits these styles */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
  margin: 2rem 0.4rem;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 230, 0.8);
}

/* text wrapping helper: put flowing text and floated media inside .text-wrap */
.text-wrap { 
  display: block;
  width: 100%;
}

.text-wrap img.float-right {
  float: right;
  width: var(--float-img-width, 80px);
  height: auto;
  margin: var(--float-img-margin, 1rem);
  shape-outside: inset(0);
  shape-margin: var(--float-img-margin, 1rem);
  -webkit-shape-outside: inset(0);
}

.text-wrap:after { 
  content: ""; 
  display: table; 
  clear: both; 
}

/* paragraphs inside text-wrap inherit the scaling from .face p */
.text-wrap p {
  margin: var(--para-margin, 0.75rem) 0;
  width: 100%;
}

/* iframe content inside faces */
.face iframe {
  display: block;
  width: 100%;
  height: calc(var(--cube-size, 600px) * 0.78);
  max-height: 1000px;
  border: 0;
  background: rgba(0, 0, 0, 0.8);
}

.face-front { transform: rotateY(0deg) translateZ(calc(var(--cube-size, 600px) / 2)); }
.face-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size, 600px) / 2)); }
.face-back  { transform: rotateY(180deg) translateZ(calc(var(--cube-size, 600px) / 2)); }
.face-left  { transform: rotateY(-90deg) translateZ(calc(var(--cube-size, 600px) / 2)); }
.face-top   { transform: rotateX(90deg) translateZ(calc(var(--cube-size, 600px) / 2)); }
.face-bottom{ transform: rotateX(-90deg) translateZ(calc(var(--cube-size, 600px) / 2)); }

/* Hotspots for easier click navigation on desktop */
.hotspot {
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  cursor: pointer;
  z-index: 5;
}

.hotspot-left { left: 0; }
.hotspot-right { right: 0; }