*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  background:#000;
  font-family:'IBM Plex Mono',monospace;
  height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding-bottom:80px;
  user-select:none; -webkit-user-select:none;
  cursor:grab;
}
body.dragging { cursor:grabbing; }

/* ── SCENE ── */
#scene {
  width:270px; height:270px;
  perspective:850px; perspective-origin:50% 50%;
  pointer-events:all;
  flex-shrink:0;
  transform-origin:center center;
}
#cube {
  width:270px; height:270px;
  position:relative; transform-style:preserve-3d;
}
.face {
  position:absolute; width:270px; height:270px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  pointer-events:none;
}

/* face panel */
.fp {
  position:absolute; inset:0;
  background:transparent; border:1.5px solid #fff;
  transition:border-color .4s, box-shadow .4s;
}
/* solved: pulsing white glow on border */
.fp.sv {
  border-color: #fff;
  box-shadow:
    0 0 10px 3px rgba(255,255,255,.6),
    inset 0 0 14px 3px rgba(255,255,255,.15);
  animation: solvedGlow 2.2s ease-in-out infinite;
  animation-delay: var(--glow-offset, 0s);
}
@keyframes solvedGlow {
  0%,100% {
    box-shadow: 0 0 10px 3px rgba(255,255,255,.6), inset 0 0 14px 3px rgba(255,255,255,.15);
    border-color: #fff;
  }
  50% {
    box-shadow: 0 0 22px 8px rgba(255,255,255,.95), inset 0 0 26px 7px rgba(255,255,255,.28);
    border-color: #fff;
  }
}
.flabel {
  position:absolute; top:5px; right:8px;
  font-size:.38rem; letter-spacing:.35em; color:#333;
  text-transform:uppercase; pointer-events:none;
}
.fp.sv .flabel { color: rgba(255,255,255,.5); }

/* mystery — transparent */
.fp-mystery { background:transparent !important; border:none !important; box-shadow:none !important; animation:none !important; }
.mystery-q {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:6rem;
  color:rgba(255,255,255,.06);
}

/* revealed back face — panel stays transparent, only cells are green */
.fp-revealed {
  background: transparent !important;
  border: 1.5px solid #00c97a !important;
  box-shadow: 0 0 14px 4px rgba(0,210,120,.5), inset 0 0 18px 4px rgba(0,180,100,.15) !important;
  animation: backGlow 2s ease-in-out infinite !important;
}
@keyframes backGlow {
  0%,100% { box-shadow: 0 0 14px 4px rgba(0,210,120,.5), inset 0 0 18px 4px rgba(0,180,100,.15); border-color:#00c97a; }
  50%     { box-shadow: 0 0 28px 10px rgba(0,230,140,.75), inset 0 0 30px 8px rgba(0,210,120,.28); border-color:#4dffa8; }
}
.back-cell {
  display:flex; align-items:center; justify-content:center;
  background: #0d3d22;
  border: 1px solid #1a6640;
  animation: revealCell .5s cubic-bezier(.22,.68,0,1.2) both;
}
.back-cell:hover { background: #124d2c; }
@keyframes revealCell {
  from { opacity:0; transform:scale(.5); background:#000; }
  to   { opacity:1; transform:scale(1);  background:#0d3d22; }
}

/* ── CELL GRID ── */
.fg {
  position:absolute; inset:7px;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:2px; pointer-events:none;
  background:transparent;
  overflow:hidden;
}
.cell {
  background:#000; border:1px solid #1e1e1e;
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:background .08s, border-color .08s;
  pointer-events:none; overflow:hidden;
}
.cell.interactive { pointer-events:all; cursor:crosshair; }
.cell.interactive:hover { border-color:#777; }
.cell.sel { border:1.5px solid #fff !important; box-shadow:inset 0 0 0 1px #fff; }
.cell.fl { animation:cf .2s ease; }
@keyframes cf { 0%{background:#333;} 100%{background:#000;} }
.cell.sliding {
  border-color: rgba(255,255,255,.45);
  box-shadow: inset 0 0 6px 1px rgba(255,255,255,.18);
  z-index: 10;
}
.cnum { font-family:'IBM Plex Mono',monospace; font-weight:500; line-height:1; }

/* ── ARROW OVERLAY ── */
.arrow-overlay {
  position:absolute; inset:0;
  pointer-events:none; z-index:50; display:none;
}
.arrow-overlay.show { display:block; }
.aov-btn {
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:all;
  line-height:1; border-radius:2px;
  background:transparent; transition:background .1s;
}
.aov-btn:hover { background:rgba(255,255,255,.18); }
.aov-btn svg { display:block; }

/* ── CONTROLS ── */
.ctrl {
  position:fixed; bottom:0; left:0; right:0; height:80px;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px;
  padding:0 20px; z-index:10;
}
.ctrl-row { display:flex; gap:5px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn {
  font-family:'Bebas Neue',sans-serif; font-size:.9rem;
  letter-spacing:.18em; padding:5px 16px 3px;
  border:1px solid #333; background:transparent; color:#555;
  cursor:pointer; transition:all .12s; white-space:nowrap;
}
.btn:hover:not(:disabled) { border-color:#fff; color:#fff; }
.btn:disabled { opacity:.25; cursor:not-allowed; }
.btn-start { border-color:#fff; color:#000; background:#fff; padding:5px 22px 3px; }
.btn-start:hover:not(:disabled) { background:#ccc; border-color:#ccc; }
.btn-start:disabled { background:#333; border-color:#333; color:#000; opacity:1; }
.btn-nav { font-size:.7rem; letter-spacing:.14em; padding:4px 10px 2px; }
.btn-nav.solved-face { border-color:#fff; color:#000; background:#fff; }
.btn-danger { border-color:#555; color:#444; }
.btn-danger:hover:not(:disabled) { border-color:#f66; color:#f66; }