/* ---------- 05 ガチャで惑星を集める: 指で回せる 3D の惑星 (planets3d.js) ----------
   ⚠ 惑星は暗い地にだけ置く (オレンジ地では輪郭と影が濁る)。枠線は使わず、選んだものは面の明るさで示す。 */
.feature.planets .art { flex-direction: column; align-items: center; gap: 10px; }
/* ⚠ 惑星を回すドラッグで、説明の文字や丸の絵が青く選択された (実機で指摘)。この区画は選択も絵のドラッグもさせない */
.feature.planets .art { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.feature.planets .art img { -webkit-user-drag: none; }
.p3d-stage { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin: -4% 0 -10%; }
/* 惑星の後ろの淡い光 (グローではなく地の明暗。ボタンには使わない) */
.p3d-stage::before { content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,160,255,0.22) 0%, rgba(140,160,255,0) 70%); pointer-events: none; }
.p3d-stage > img, .p3d-stage > model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.p3d-stage > img { object-fit: contain; padding: 6%; transition: opacity .35s ease; pointer-events: none; }
.p3d-stage.is-live > img { opacity: 0; }
.p3d-stage > model-viewer { background: transparent; --poster-color: transparent; --progress-bar-color: transparent;
  opacity: 0; transition: opacity .35s ease; outline: none; }
.p3d-stage.is-live > model-viewer { opacity: 1; }
.p3d-hint { font-size: 13px; color: rgba(255,255,255,0.6); }
.p3d-picks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.p3d-pick { width: 56px; height: 56px; padding: 6px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.06);
  cursor: pointer; transition: background-color .18s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.p3d-pick img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.p3d-pick:hover { background: rgba(255,255,255,0.14); }
.p3d-pick:active { transform: scale(.94); }
.p3d-pick[aria-pressed="true"] { background: rgba(255,227,138,0.32); }
.p3d-pick:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 860px) { .p3d-stage { max-width: 320px; } .p3d-pick { width: 48px; height: 48px; padding: 5px; } }
@media (prefers-reduced-motion: reduce) { .p3d-stage > img, .p3d-stage > model-viewer, .p3d-pick { transition: none; } }
/* 「ほかにも」は白い 04 の続きとして上の余白が 0。暗い 05 を挟んだので、ここで上の余白を足す */
.feature.planets + .more { padding-top: 72px; }
@media (max-width: 860px) { .feature.planets + .more { padding-top: 56px; } }

/* ---------- 無料で始められる: 太陽系 8 個の 3D (planets3d.js) ----------
   読み込むまでは今までの絵。浮く動き (pl-float) は入れ物の span に付け、絵と 3D は同じ四角に重ねる */
.free .orbit .pl3d { position: relative; display: block; width: var(--s, 60px); aspect-ratio: 1 / 1; flex: none; }
.free .orbit .pl3d > img { width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.free .orbit .pl3d > model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent;
  --poster-color: transparent; --progress-bar-color: transparent; opacity: 0; transition: opacity .35s ease;
  pointer-events: none; filter: drop-shadow(0 4px 6px rgba(30,34,49,0.1)); }
.free .orbit .pl3d.is-live > img { opacity: 0; }
.free .orbit .pl3d.is-live > model-viewer { opacity: 1; }
@media (max-width: 600px) { .free .orbit .pl3d { width: calc(var(--s, 60px) * 0.56); } .free .orbit .pl3d > img { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .free .orbit .pl3d > img, .free .orbit .pl3d > model-viewer { transition: none; } }
/* 輪のある惑星は輪の外まで枠に収めるぶん本体が小さく見える。並びの幅は変えず、3D だけ一回り大きくはみ出させる */
.free .orbit .pl3d[data-id="saturn"] > model-viewer, .free .orbit .pl3d[data-id="uranus"] > model-viewer { inset: -22%; width: auto; height: auto; }
@media (max-width: 600px) { .free .orbit .pl3d[data-id="saturn"] > model-viewer, .free .orbit .pl3d[data-id="uranus"] > model-viewer { inset: -12%; } }