:root{
  --bg:#06111d; --ink:#f2fbff; --muted:#9db2c1;
  --cyan:#60e8ff; --gold:#ffd166; --pink:#ff79b4; --violet:#a98cff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;touch-action:none}
body{display:flex;justify-content:center;align-items:center}
/* 3段階レスポンシブ: スマホ(既定, 〜767px) / タブレット(768〜1199px) /
   PC(1200px〜)。触るゲーム部品(キューブ・パネル)は Pointer Events 経由で
   マウスでもそのまま動くため、ここで調整するのはレイアウトの余白と
   HUD・タッチターゲットのスケールだけ。3D操作方式そのものは変えない。 */
#app{
  width:min(100vw,600px);height:100dvh;max-height:100dvh;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%,rgba(45,114,167,.25),transparent 34%),
    radial-gradient(circle at 15% 78%,rgba(121,86,255,.11),transparent 30%),
    linear-gradient(#071624,#040a12);
}
@media (min-width:768px){
  body{padding:24px}
  #app{
    width:min(92vw,760px);height:min(calc(100dvh - 48px),920px);
    border-radius:28px;box-shadow:0 40px 120px rgba(0,0,0,.5);
    border:1px solid rgba(177,223,248,.10);
  }
}
@media (min-width:1200px){
  #app{width:min(58vw,820px);height:min(calc(100dvh - 48px),960px)}
  .tool,.levelSelectHead button{cursor:pointer}
  .tool:hover,.stage:hover,.nextBtn:hover,.levelItem:hover,.levelSelectHead button:hover{filter:brightness(1.15)}
  canvas{cursor:grab}
  canvas:active{cursor:grabbing}
}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
header{
  position:absolute;z-index:10;left:0;right:0;top:0;
  padding:calc(env(safe-area-inset-top) + 13px) 17px 0;
  display:flex;justify-content:space-between;align-items:center;pointer-events:none
}
.brand{font-size:15px;font-weight:1000;letter-spacing:.15em}
.stage{
  font:inherit;font-size:11px;font-weight:950;color:#bfd2df;letter-spacing:.08em;
  background:none;border:0;padding:4px 2px;pointer-events:auto;cursor:pointer
}
.stage:active{opacity:.7}
#goalbar{
  position:absolute;z-index:10;top:calc(env(safe-area-inset-top) + 47px);left:16px;right:16px;
  display:flex;flex-direction:column;align-items:center;gap:7px;justify-content:center;pointer-events:none
}
.goalpill{
  padding:9px 13px;border-radius:999px;background:rgba(5,16,28,.74);
  border:1px solid rgba(177,223,248,.14);backdrop-filter:blur(10px);
  font-size:12px;font-weight:900;color:#d7ebf7;text-align:center
}
.goalpill strong{color:var(--gold)}
#coach{
  position:absolute;z-index:12;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 93px);
  max-width:88%;padding:9px 13px;border-radius:999px;
  background:rgba(4,12,23,.88);border:1px solid rgba(255,255,255,.12);
  color:#e8f7ff;font-size:12px;font-weight:950;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .18s
}
#coach.show{opacity:1}
#status{
  position:absolute;z-index:11;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);
  display:flex;gap:10px;align-items:flex-end;justify-content:space-between;pointer-events:none
}
.meter{
  flex:1;max-width:390px;padding:10px 12px;border-radius:17px;
  background:rgba(5,16,28,.78);border:1px solid rgba(177,223,248,.14);backdrop-filter:blur(10px)
}
.metatop{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;font-weight:950;color:#a9bdca;letter-spacing:.06em}
.metatop span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metatop span:last-child{flex:0 0 auto}
#dots{display:flex;gap:5px;margin-top:7px}
.dot{height:7px;flex:1;max-width:22px;border-radius:99px;background:#29394a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.dot.on{background:var(--cyan);box-shadow:0 0 12px rgba(96,232,255,.62)}
.tools{display:flex;gap:8px;pointer-events:auto}
.tool{
  width:46px;height:46px;border-radius:15px;border:1px solid rgba(177,223,248,.14);
  background:rgba(5,16,28,.82);color:#dcecf6;font-size:19px;font-weight:1000;
  display:grid;place-items:center;backdrop-filter:blur(10px)
}
.tool:active{transform:scale(.94)}
#clear{
  position:absolute;z-index:30;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(1,6,12,.54);backdrop-filter:blur(3px);padding:24px;text-align:center
}
#clear.show{display:flex}
.card{
  width:min(88%,360px);padding:28px 20px;border-radius:28px;background:rgba(7,21,35,.9);
  border:1px solid rgba(96,232,255,.28);box-shadow:0 25px 90px rgba(0,0,0,.48),0 0 54px rgba(96,232,255,.12)
}
.big{font-size:32px;font-weight:1000;letter-spacing:.08em;text-shadow:0 0 25px rgba(96,232,255,.45)}
.sub{margin-top:8px;font-size:13px;color:#bcd1de;font-weight:850}
.next{margin-top:14px;color:#d7e7f1;font-size:11px;font-weight:900;letter-spacing:.04em}
.nextBtn{
  margin-top:14px;min-width:150px;padding:12px 22px;border:0;border-radius:999px;
  background:#f4f8fb;color:#102033;font-size:14px;font-weight:1000;letter-spacing:.06em;
  box-shadow:0 8px 28px rgba(0,0,0,.28);touch-action:manipulation
}
.nextBtn:active{transform:scale(.96)}
#clear{touch-action:manipulation}

#pieceLegend{
  display:flex;gap:6px 9px;align-items:center;justify-content:center;flex-wrap:wrap;
  max-width:96%;padding:5px 9px;border-radius:14px;
  background:rgba(5,16,28,.62);border:1px solid rgba(177,223,248,.10);
  color:#aebfca;font-size:9px;font-weight:950;letter-spacing:.02em
}
.legendItem{display:flex;align-items:center;gap:5px}
.legendCube{width:11px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.legendCube.straight{background:#F28C28}
.legendCube.elbow{background:#46B95C}
.legendCube.start{background:#E5484D}
.legendCube.goal{background:#8B5CF6}
.legendCube.cross{background:#FF5CA8}
.legendCube.drop{background:#3B82F6}

#levelSelect{
  position:absolute;z-index:40;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(1,6,12,.6);backdrop-filter:blur(3px);padding:24px;touch-action:manipulation
}
#levelSelect.show{display:flex}
.levelSelectCard{
  width:min(92%,420px);max-height:80vh;display:flex;flex-direction:column;
  padding:18px 16px;border-radius:24px;background:rgba(7,21,35,.94);
  border:1px solid rgba(177,223,248,.16);box-shadow:0 25px 90px rgba(0,0,0,.5)
}
.levelSelectHead{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:1000;letter-spacing:.05em;color:#eafaff;margin-bottom:12px
}
.levelSelectHead button{
  width:30px;height:30px;border-radius:10px;border:1px solid rgba(177,223,248,.14);
  background:rgba(5,16,28,.7);color:#dcecf6;font-size:14px;display:grid;place-items:center
}
#levelList{overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.levelItem{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;
  background:rgba(5,16,28,.55);border:1px solid rgba(177,223,248,.10);
  text-align:left;color:inherit;font:inherit
}
.levelItem:active{background:rgba(96,232,255,.10)}
.levelItem.current{border-color:rgba(96,232,255,.5);background:rgba(96,232,255,.08)}
.levelItemNum{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:11px;font-weight:1000;background:rgba(255,209,102,.14);color:var(--gold);flex:0 0 auto
}
.levelItem.cleared .levelItemNum{background:rgba(96,232,255,.16);color:var(--cyan)}
.levelItemBody{flex:1;min-width:0}
.levelItemName{font-size:12px;font-weight:950;color:#eafaff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.levelItemMeta{font-size:10px;font-weight:800;color:#8fa6b5;margin-top:2px}

#titleScreen{
  position:absolute;z-index:50;inset:0;display:none;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 22%,rgba(96,232,255,.14),transparent 40%),
    linear-gradient(#071624,#040a12);
  padding:24px;touch-action:manipulation
}
#titleScreen.show{display:flex}
.titleCard{width:min(88%,340px);display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center}
.titleBrand{font-size:34px;font-weight:1000;letter-spacing:.16em;color:#eafaff;text-shadow:0 0 30px rgba(96,232,255,.35)}
.titleTag{font-size:12px;font-weight:800;color:#9db2c1;margin-bottom:16px}
.titleBtn{
  padding:14px 20px;border:1px solid rgba(177,223,248,.14);border-radius:999px;
  background:rgba(5,16,28,.7);color:#dcecf6;font:inherit;font-size:14px;font-weight:1000;
  letter-spacing:.04em;touch-action:manipulation
}
.titleBtn:active{transform:scale(.97)}
.titleBtn.primary{background:#f4f8fb;color:#102033;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.titleBtn.ghost{background:none;border-color:rgba(177,223,248,.10);color:#9db2c1}