*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
:root{--size:320px;--pip-size:20px;--bg:#0f1724;--card:#0b1220}
html,body{height:100%}
body{margin:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#081026,#061322);color:#e6eef8}
.app{max-width:720px;text-align:center}
.app{max-width:980px;text-align:center}
h1{font-weight:700;margin-bottom:18px;font-size:28px}
.scene{width:var(--size);height:var(--size);margin:0 auto;perspective:900px}
.scene{width:var(--size);height:var(--size);margin:0 auto;perspective:1100px}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.9,.2,1);will-change:transform;cursor:pointer}

/* Topbar / hamburger menu */
.topbar{position:fixed;top:12px;left:12px;z-index:1200;display:flex;flex-direction:column;align-items:flex-start}
.hamburger{width:44px;height:36px;display:flex;flex-direction:column;justify-content:space-between;padding:6px;border-radius:8px;border:none;background:rgba(255,255,255,0.06);cursor:pointer}
.hamburger span{display:block;height:4px;background:#fff;border-radius:3px}
.menu-list{display:none;position:relative;margin-top:8px;background:rgba(2,6,23,0.9);padding:8px;border-radius:8px;min-width:180px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.menu-list.open, .menu-list[aria-hidden="false"]{display:block}
.menu-list a{display:block;color:#e6eef8;text-decoration:none;padding:8px 10px;border-radius:6px}
.menu-list a:hover{background:rgba(255,255,255,0.03)}
.face{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,#ffffff 0%,#d9d9d9 100%);box-shadow:0 8px 20px rgba(2,6,23,.6), inset 0 -6px 10px rgba(0,0,0,.08);backface-visibility:hidden;}
/* Positioning faces */
.front{transform:rotateY(0deg) translateZ(calc(var(--size)/2))}
.back{transform:rotateY(180deg) translateZ(calc(var(--size)/2))}
.right{transform:rotateY(90deg) translateZ(calc(var(--size)/2))}
.left{transform:rotateY(-90deg) translateZ(calc(var(--size)/2))}
.top{transform:rotateX(90deg) translateZ(calc(var(--size)/2))}
.bottom{transform:rotateX(-90deg) translateZ(calc(var(--size)/2))}

/* Face images: show centered images inside each face */
.face img{width:88%;height:auto;display:block;margin:auto;object-fit:contain}

.result{margin-top:120px;font-weight:700;font-size:22px}
.roll{margin-top:80px;padding:16px 26px;border-radius:10px;border:none;background:#2563eb;color:white;font-weight:700;cursor:pointer;font-size:18px}
.hint{opacity:.95;font-size:16px;margin-top:48px}

/* Large face label shown when a face appears on top */
.face-label{height:64px;line-height:64px;margin:10px auto 16px auto;font-size:22px;font-weight:800;color:#f8fafc;max-width:860px;text-align:center;opacity:0;transform:translateY(-6px);transition:opacity .28s ease,transform .28s ease}
.face-label.show{opacity:1;transform:translateY(0)}

/* small responsive tweak */
@media (max-width:420px){:root{--size:220px;--pip-size:14px}
  .result{margin-top:36px}
  .roll{margin-top:20px}
  .hint{margin-top:16px}
}