/* =====================================================================
   ConsoleStage：真實主機照片＋放入遊戲片動畫（搭配 console-stage.js）
   ===================================================================== */
.cs-console { position: relative; display: inline-block; user-select: none; -webkit-user-select: none; }
.cs-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.cs-photo { position: absolute; width: 960px; height: auto; pointer-events: none; max-width: none; }

/* 電源燈：平時看不到，開機後亮起 */
.cs-led { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, var(--led) 40%, transparent 72%); transition: opacity .25s; }
.cs-console.cs-on .cs-led { opacity: 1; box-shadow: 0 0 22px 8px color-mix(in srgb, var(--led) 55%, transparent); }

/* ---------- 全螢幕遮罩 ---------- */
.cs-overlay { position: fixed; inset: 0; z-index: 200000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 55%, rgba(30,34,44,.92), rgba(4,5,8,.97)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: cs-in .25s ease both; cursor: pointer; }
.cs-overlay.cs-out { animation: cs-out .2s ease both; }
@keyframes cs-in { from { opacity: 0; } }
@keyframes cs-out { to { opacity: 0; } }
.cs-stage { position: relative; filter: drop-shadow(0 40px 50px rgba(0,0,0,.65)); }
.cs-overlay .cs-canvas { overflow: visible; }
.cs-skip { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 1px;
  color: rgba(242,244,248,.45); font-family: "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif; }

.cs-media { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.cs-mount { position: absolute; left: 50%; top: 100%; width: 0; height: 0; }

/* SFC：沿插槽方向旋轉的框，底邊就是插槽線，框外（插槽以下）全部裁掉 → 卡匣看起來插進機身 */
.cs-slotclip { position: absolute; transform-origin: 50% 100%; overflow: hidden; }
.cs-slotlip { position: absolute; height: 6px; transform-origin: 50% 50%; border-radius: 3px; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)); }

/* PS1：上蓋打開時露出深色光碟槽與轉軸；闔上時淡出 */
.cs-mount-lid { top: auto; }
.cs-tray { position: absolute; border-radius: 50%; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(ellipse at 50% 50%, #9aa0a8 0 7%, #2a2d33 8% 14%, #121418 15% 100%);
  box-shadow: inset 0 10px 24px rgba(0,0,0,.8); }
.cs-tray.cs-open { opacity: 1; }
.cs-lidshine { position: absolute; border-radius: 50%; pointer-events: none; overflow: hidden; }
.cs-lidshine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
.cs-lidshine.cs-go::after { animation: cs-shine .7s ease-out forwards; }
@keyframes cs-shine { to { left: 120%; } }

@media (prefers-reduced-motion: reduce) {
  .cs-overlay, .cs-overlay.cs-out { animation-duration: .01s; }
}

/* ---------- 3D 版 ---------- */
.cs-overlay-3d .cs-3d { position: absolute; inset: 0; }
.cs-overlay-3d .cs-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.cs-loading { position: absolute; left: 0; right: 0; top: 50%; text-align: center; color: rgba(242,244,248,.6); font-size: 13px; letter-spacing: 1px;
  font-family: "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif; transition: opacity .3s; }
.cs-overlay-3d.cs-ready .cs-loading { opacity: 0; }

/* 動畫播完但遊戲還在下載：顯示讀取中 */
.cs-wait { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; color: rgba(242,244,248,.75); font-size: 14px; letter-spacing: 2px;
  font-family: "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif; opacity: 0; transition: opacity .3s; }
.cs-overlay.cs-waiting .cs-wait { opacity: 1; animation: cs-blink 1.4s ease-in-out infinite; }
@keyframes cs-blink { 50% { opacity: .35; } }