* { box-sizing:border-box; }
  html,body { margin:0; height:100%; background:#e9edf3; font-family:system-ui,sans-serif; }
  canvas { width:100%; height:100%; display:block; touch-action:none; }
  .ui {
    position:fixed; left:12px; top:12px; z-index:10;
    background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
    border-radius:16px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.10);
    max-width:min(92vw,360px); font-size:13px; line-height:1.55; color:#1f2937;
  }
  .row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  button { border:0; border-radius:10px; padding:9px 12px; cursor:pointer; background:#111827; color:#fff; font-size:13px; }
  button.alt { background:#e5e7eb; color:#111827; }

  .reviewOverlay{
    position: fixed; inset: 0; display:none; z-index: 30;
    background: rgba(233,237,243,.96);
    padding: 20px; overflow:auto;
  }
  .reviewOverlay.show{ display:block; }
  .reviewCard{
    max-width: 1100px; margin: 0 auto; background:#fff; border-radius:20px;
    box-shadow:0 12px 36px rgba(0,0,0,.12); padding:18px;
  }
  .reviewHead{
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:14px;
  }
  .reviewGrid{
    display:grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap:14px;
  }
  .faceCard{
    background:#f8fafc; border-radius:16px; padding:10px; border:1px solid #dbe2ea;
  }
  .faceCard strong{ display:block; margin-bottom:8px; font-size:14px; }
  .faceCard canvas{
    width:100%; aspect-ratio:1/1; display:block; background:#fff; border-radius:12px;
  }
  @media (max-width: 820px){
    .reviewGrid{ grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  }


  .cube3dOverlay{
    position: fixed; inset: 0; display:none; z-index: 40;
    background: rgba(233,237,243,.97);
    padding: 20px;
  }
  .cube3dOverlay.show{ display:block; }
  .cube3dCard{
    max-width: 1100px; height: calc(100vh - 40px); margin: 0 auto;
    background:#fff; border-radius:20px; box-shadow:0 12px 36px rgba(0,0,0,.12);
    padding:18px; display:grid; grid-template-rows:auto 1fr auto; gap:12px;
  }
  .cube3dStage{
    position: relative; overflow:hidden; border-radius:18px;
    background: linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%);
    perspective: 1200px;
  }
  .cube3dWrap{
    position:absolute; left:50%; top:52%;
    transform-style: preserve-3d;
    width: 260px; height: 260px;
  }
  .cube3d{
    position: absolute; left:50%; top:50%;
    width: 220px; height: 220px; margin-left:-110px; margin-top:-110px;
    transform-style: preserve-3d;
  }
  .cubeFace{
    position:absolute; width:220px; height:220px; border:2px solid rgba(15,23,42,.55);
    background-size: cover; background-position:center; backface-visibility:hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .cubeFace.top{ transform: rotateX(90deg) translateZ(110px); }
  .cubeFace.bottom{ transform: rotateX(-90deg) translateZ(110px); }
  .cubeFace.front{ transform: translateZ(110px); }
  .cubeFace.back{ transform: rotateY(180deg) translateZ(110px); }
  .cubeFace.right{ transform: rotateY(90deg) translateZ(110px); }
  .cubeFace.left{ transform: rotateY(-90deg) translateZ(110px); }
  .cube3dHelp{
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;
    font-size:14px; color:#334155;
  }

/* v3: UIを少し細くして、パズル操作エリアを広げる */
.ui{
  max-width: min(92vw, 560px);
}
@media (max-width: 900px){
  .ui{
    max-width: min(94vw, 500px);
  }
}


/* v5: UI上・完成立体中央・未配置ピース下 の縦並び */
.ui{
  max-width: min(94vw, 560px);
}
@media (min-width: 701px){
  .ui{
    left: 24px;
    top: 16px;
  }
}
@media (max-width: 700px){
  .ui{
    max-width: calc(100vw - 20px);
    left: 10px;
    top: 10px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .row{
    gap: 6px;
  }
  button{
    padding: 8px 10px;
    font-size: 12px;
  }
}