/* 「JavaScript で作るリッチな表現」記事のデモ用スタイル。共通部分（.rx）は rich.css にある */

/* ---------- 3D（three.js）共通 ---------- */
.rx-gl { min-height: 380px; cursor: grab; }
.rx-gl:active { cursor: grabbing; }
.rx-gl canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.rx-gl .hint { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--muted); pointer-events: none; }
.rx-galaxy { background: radial-gradient(ellipse at center, #10131f, #020205 70%); }
.rx-galaxy .hint, .rx-shader .hint { color: rgba(255,255,255,.6); }
.rx-shader { background: #05060a; cursor: crosshair; }

/* ---------- 4. スポットライト ---------- */
.rx-spot { padding: 22px; place-items: stretch; }
.rx-spot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.rx-spot-grid div {
  position: relative; border-radius: 10px; padding: 18px 12px; min-height: 80px;
  background: var(--bg); border: 1px solid var(--line); font-size: 14px; color: var(--muted);
  overflow: hidden;
}
.rx-spot-grid div::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--x, -999px) var(--y, -999px), color-mix(in srgb, var(--text) 22%, transparent), transparent 60%);
}
.rx-spot-grid b { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; position: relative; }
.rx-spot-grid span { position: relative; }

/* ---------- 5. 傾くカード ---------- */
.rx-tilt { perspective: 900px; min-height: 280px; }
.rx-card {
  position: relative; width: 240px; height: 150px; border-radius: 16px; padding: 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #2b2b2b, #0e0e0e); color: #eee;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; transition: transform .15s ease-out;
}
.rx-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 55%);
  opacity: var(--go, 0); transition: opacity .2s;
}
.rx-card b { font-size: 26px; transform: translateZ(40px); }
.rx-card small { font-family: var(--mono); letter-spacing: .15em; opacity: .7; transform: translateZ(25px); }

/* ---------- 12. 粒子 ---------- */
.rx-particles { min-height: 300px; background: var(--bg); touch-action: none; }
.rx-particles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }


/* ---------- ボールの物理演算 ---------- */
.rx-balls { min-height: 340px; background: var(--bg); touch-action: none; cursor: grab; }
.rx-balls canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 文字のスクランブル ---------- */
.rx-scramble p { font: 700 clamp(26px, 7vw, 46px)/1.2 var(--mono); letter-spacing: .02em; }
.rx-scramble .dud { color: var(--muted); }

/* ---------- 鳴る鍵盤 ---------- */
.rx-keys { display: block; place-items: normal; min-height: 0; padding: 18px; background: var(--bg); }
.rx-keys canvas { display: block; width: 100%; height: 90px; margin-bottom: 12px; }
.rx-keys .row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.rx-keys button {
  height: 120px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; cursor: pointer;
  background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg), var(--text) 6%));
  color: var(--muted); font: 600 13px var(--mono); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  box-shadow: 0 4px 0 var(--line); transition: transform .06s, box-shadow .06s, background .2s;
  touch-action: manipulation;
}
.rx-keys button.on { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); background: color-mix(in srgb, var(--bg), var(--text) 18%); color: var(--text); }
.rx-keys:focus-within, .rx-keys:focus { outline: none; }