/* ==========================================================
   Rubik's cube classes page — 3D cube game, hero cube,
   cube-type illustrations. Shared course-page bits live in course-page.css.
   ========================================================== */

/* ---------- Shared 3D cube ---------- */
.cube-view, .cubie, .cube-layer{ position:absolute; left:0; top:0; width:0; height:0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.cube-view{ left:50%; top:47%; }
.cube-view .face{
  position:absolute; left:0; top:0; background:#15171D; border-radius:8%;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.cube-view .face.st::after{
  content:""; position:absolute; top:7%; right:7%; bottom:7%; left:7%; border-radius:14%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -6px 10px -6px rgba(0,0,0,.25);
}
.st-W{ --c:#F7F7F2; } .st-Y{ --c:#FFD500; } .st-G{ --c:#00A34A; }
.st-B{ --c:#1257D6; } .st-R{ --c:#D21F3C; } .st-O{ --c:#FF7A00; }

/* ---------- Hero ---------- */
.hero-cube-stage{ position:relative; height:340px; -webkit-perspective:900px; perspective:900px; pointer-events:none; }
.hero-cube-stage::after{
  content:""; position:absolute; left:50%; bottom:18px; width:220px; height:28px; transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(60,20,0,.45), transparent); filter: blur(2px);
}
.hero-cube-stage .cube-view{ animation: heroSpin 14s linear infinite; }
@keyframes heroSpin{ from{ transform: rotateX(-24deg) rotateY(0deg); } to{ transform: rotateX(-24deg) rotateY(360deg); } }
.hero-orbit{ position:absolute; top:0; left:0; width:100%; height:100%; }
.hero-orbit ellipse{ fill:none; stroke: rgba(255,255,255,.28); stroke-width:1.5; stroke-dasharray:4 8; }
.hero-orbit .orbit-dot{ fill: var(--gold); }

/* ---------- Game ---------- */
.cube-card{
  background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line); box-shadow: var(--shadow-soft);
  padding:1.4rem; height:100%;
}
.cube-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.6rem; }
.cube-levels{ display:flex; gap:.4rem; flex-wrap:wrap; }
.cube-level{
  border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.35rem .9rem; font-size:.85rem; font-weight:800;
  color: var(--slate); font-family: var(--font-display); transition:.2s;
}
.cube-level:hover{ border-color: var(--coaching-accent); color: var(--coaching-accent); }
.cube-level.is-active{ background: var(--coaching-accent); border-color: var(--coaching-accent); color:#fff; }
.cube-actions{ display:flex; gap:.4rem; }

.cube-scene{
  position:relative; height:400px; -webkit-perspective:1000px; perspective:1000px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  border-radius: var(--radius-md); background: radial-gradient(circle at 50% 45%, #FFF6E6, var(--paper-dim) 70%);
  overflow:hidden; outline:none;
}
.cube-scene:active{ cursor:grabbing; }
.cube-scene:focus-visible{ box-shadow: 0 0 0 3px var(--gold); }
.cube-scene .face.st{ cursor:pointer; }
.cube-scene.is-shuffle .cube-view{ animation: shuffleShake .45s ease; }
@keyframes shuffleShake{ 25%{ margin-left:-6px; } 50%{ margin-left:6px; } 75%{ margin-left:-3px; } }
.cube-scene.is-solved{ background: radial-gradient(circle at 50% 45%, #E3F6EF, #CDEBDF 70%); }
.cube-hint{
  position:absolute; left:50%; bottom:.7rem; transform:translateX(-50%); font-size:.75rem; font-weight:600; color: var(--slate);
  background: rgba(255,255,255,.8); border-radius:999px; padding:.25rem .8rem; white-space:nowrap; pointer-events:none;
}

.cube-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.6rem; margin:1rem 0 .6rem; }
.cube-stat{ background: var(--paper); border-radius: var(--radius-sm); padding:.55rem .7rem; text-align:center; }
.cube-stat b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.3rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.cube-stat span{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--slate); }
.cube-msg{ font-size:.88rem; font-weight:600; min-height:1.4em; margin-bottom:.8rem; }
.cube-msg.ok{ color: var(--study-accent); }

.cube-moves{ display:grid; grid-template-columns: repeat(6, 1fr); gap:.35rem; }
.move-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:.4rem 0; font-family: var(--font-display);
  font-weight:800; color: var(--navy); transition: .15s;
}
.move-btn:hover{ border-color: var(--coaching-accent); color: var(--coaching-accent); }
.move-btn:active{ transform: scale(.94); background: var(--coaching-accent); color:#fff; }
.move-btn.is-prime{ background: var(--paper); }

.notation-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: 1fr 1fr; gap:.5rem 1rem; }
.notation-list li{ font-size:.85rem; color: var(--slate); }
.notation-list b{ display:inline-flex; width:1.7rem; height:1.7rem; border-radius:7px; align-items:center; justify-content:center; margin-right:.4rem;
  background: rgba(217,114,44,.12); color: var(--coaching-accent); font-family: var(--font-display); }

/* ---------- Cube types ---------- */
.type-card{ text-align:center; padding:1.6rem 1.2rem; }
.type-card svg{ width:120px; height:120px; display:block; margin:0 auto 1rem; overflow:visible; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.type-card:hover svg{ transform: rotate(-8deg) scale(1.08); }
.type-card h3{ font-size:1.05rem; margin-bottom:.15rem; }
.type-alias{ font-family: var(--font-accent); font-style:italic; font-size:.85rem; color: var(--gold-deep); margin-bottom:.6rem; }
.type-card p{ font-size:.84rem; line-height:1.55; }
.type-meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:.35rem; }
.type-meta > span, .type-meta > a{ font-size:.72rem; font-weight:700; border-radius:999px; padding:.2rem .6rem; background: var(--paper-dim); color: var(--slate); }
.type-meta .try{ background: var(--coaching-accent); color:#fff; }
.diff-dots{ letter-spacing:.1em; color: var(--coaching-accent); }


@media (max-width: 575.98px){
  .cube-scene{ height:320px; }
  .hero-cube-stage{ height:260px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-cube-stage .cube-view{ animation:none; transform: rotateX(-24deg) rotateY(-36deg); }
}