/* ===== rotating 3D cube icons (pure CSS, no images) ===== */

.cube-scene {
  width: 36px;
  height: 36px;
  perspective: 300px;
  overflow: visible;
}

.cube-tilt {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-18deg);
}

.cube-spin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-spin 7s linear infinite;
}

@keyframes cube-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cube-spin { animation: none; }
}

.face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background-color: #6b6b6b;
  background-image:
    linear-gradient(45deg, #5c5c5c 25%, transparent 25%),
    linear-gradient(-45deg, #5c5c5c 25%, transparent 25%);
  background-size: 6px 6px;
  border: 1px solid #3a3a3a;
  backface-visibility: hidden;
}

.face-front  { transform: translateZ(12px); }
.face-back   { transform: rotateY(180deg) translateZ(12px); }
.face-right  { transform: rotateY(90deg) translateZ(12px); }
.face-left   { transform: rotateY(-90deg) translateZ(12px); }
.face-top    { transform: rotateX(90deg) translateZ(12px); background-color: #7d7d7d; }
.face-bottom { transform: rotateX(-90deg) translateZ(12px); background-color: #4a4a4a; }

/* ===== furnace-specific front face detail ===== */
.face-front.furnace-front {
  position: absolute;
}

.face-front.furnace-front::before {
  /* dark opening */
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 14px;
  height: 9px;
  background: #161616;
}

.face-front.furnace-front::after {
  /* glowing coals */
  content: "";
  position: absolute;
  left: 9px;
  top: 11px;
  width: 7px;
  height: 4px;
  background: linear-gradient(#ffb74d, #d84315);
  box-shadow: 0 0 4px 1px rgba(255, 152, 0, 0.7);
}

/* ===== book cube: guestbook (flatter than a cube — book proportions) ===== */

.book-face {
  position: absolute;
  border: 1px solid #3a1414;
  backface-visibility: hidden;
}

.book-front, .book-back {
  width: 20px;
  height: 26px;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -10px;
  background: linear-gradient(#8a3636, #6b2424);
}

.book-front { transform: translateZ(4px); }
.book-back  { transform: rotateY(180deg) translateZ(4px); }

.book-front::before {
  /* embossed cover panel */
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 14px;
  height: 18px;
  border: 1px solid #c9a227;
}

.book-left, .book-right {
  width: 8px;
  height: 26px;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -4px;
}

/* right side: the fore-edge, where pages show */
.book-right {
  background: #f0e6c8;
  border-color: #c9bb95;
  transform: rotateY(90deg) translateZ(10px);
}

/* left side: the spine, matches the cover leather */
.book-left {
  background: linear-gradient(#6b2424, #4a1818);
  border-color: #3a1414;
  transform: rotateY(-90deg) translateZ(10px);
}

.book-top, .book-bottom {
  width: 20px;
  height: 8px;
  top: 50%;
  left: 50%;
  margin: -4px 0 0 -10px;
  background: #f0e6c8;
  border-color: #c9bb95;
}

.book-top    { transform: rotateX(90deg) translateZ(13px); }
.book-bottom { transform: rotateX(-90deg) translateZ(13px); background: #5c2a2a; }

/* ==========================================================================
   1. FLOPPY DISK (Classic 3.5" Blue Diskette with Metal Shutter & Label)
   ========================================================================== */

.floppy-face {
  position: absolute;
  border: 1px solid #0f1d38;
  backface-visibility: hidden;
}

.floppy-front, .floppy-back {
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -12px;
  background-color: #1b325f;
}

.floppy-front { transform: translateZ(2px); }
.floppy-back  { transform: rotateY(180deg) translateZ(2px); }

/* Metal shutter at the top */
.floppy-front::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 12px;
  height: 8px;
  background: linear-gradient(#d0d0d0, #909090);
  border: 1px solid #505050;
}

/* Paper label at the bottom */
.floppy-front::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 3px;
  width: 18px;
  height: 10px;
  background: #f4f4f4;
  border-top: 2px solid #cc3333; /* Classic red accent line on label */
}

/* Drive spindle hub on back */
.floppy-back::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  background: #a0a0a0;
  border-radius: 50%;
  border: 1px solid #505050;
}

.floppy-left, .floppy-right {
  width: 4px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -2px;
  background-color: #142547;
}

.floppy-right { transform: rotateY(90deg) translateZ(12px); }
.floppy-left  { transform: rotateY(-90deg) translateZ(12px); }

.floppy-top, .floppy-bottom {
  width: 24px;
  height: 4px;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -12px;
  background-color: #142547;
}

.floppy-top    { transform: rotateX(90deg) translateZ(12px); }
.floppy-bottom { transform: rotateX(-90deg) translateZ(12px); }


/* ==========================================================================
   2. NOTEPAD (Yellow Legal Pad with Brown Header & Blue Lined Paper)
   ========================================================================== */

.notepad-face {
  position: absolute;
  border: 1px solid #5a4329;
  backface-visibility: hidden;
}

.notepad-front, .notepad-back {
  width: 20px;
  height: 26px;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -10px;
}

/* Lined yellow paper front */
.notepad-front {
  transform: translateZ(3px);
  background-color: #fff2a3;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 3px,
    #9bc4e2 4px
  );
}

/* Brown binding header tape at the top */
.notepad-front::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #3e2723;
}

/* Cardboard back */
.notepad-back {
  transform: rotateY(180deg) translateZ(3px);
  background-color: #8d5b28;
}

.notepad-left, .notepad-right {
  width: 6px;
  height: 26px;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -3px;
  background: #e6d78e; /* Stacked page edges */
}

.notepad-right { transform: rotateY(90deg) translateZ(10px); }
.notepad-left  { transform: rotateY(-90deg) translateZ(10px); }

.notepad-top, .notepad-bottom {
  width: 20px;
  height: 6px;
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -10px;
}

.notepad-top    { transform: rotateX(90deg) translateZ(13px); background: #3e2723; }
.notepad-bottom { transform: rotateX(-90deg) translateZ(13px); background: #8d5b28; }


/* ==========================================================================
   3. GENERIC PHOTO (Polaroid Frame with Pixelated Landscape Scene)
   ========================================================================== */

.photo-face {
  position: absolute;
  border: 1px solid #202020;
  backface-visibility: hidden;
}

.photo-front, .photo-back {
  width: 22px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -11px;
}

/* White polaroid border front */
.photo-front {
  transform: translateZ(2px);
  background-color: #f0f0f0;
}

/* Mini pixel-art landscape image cutout */
.photo-front::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 14px;
  background: 
    /* Yellow Sun */
    radial-gradient(circle at 12px 4px, #fbc02d 2px, transparent 3px),
    /* Green Hill */
    linear-gradient(135deg, transparent 50%, #4caf50 50%),
    /* Blue Sky background */
    linear-gradient(#64b5f6, #bbdefb);
  border: 1px solid #333;
}

/* Dark grey photo paper back */
.photo-back {
  transform: rotateY(180deg) translateZ(2px);
  background-color: #2b2b2b;
}

.photo-left, .photo-right {
  width: 4px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -2px;
  background-color: #d0d0d0;
}

.photo-right { transform: rotateY(90deg) translateZ(11px); }
.photo-left  { transform: rotateY(-90deg) translateZ(11px); }

.photo-top, .photo-bottom {
  width: 22px;
  height: 4px;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -11px;
  background-color: #d0d0d0;
}

.photo-top    { transform: rotateX(90deg) translateZ(12px); }
.photo-bottom { transform: rotateX(-90deg) translateZ(12px); }