/* The Qbit Game 游玩页
   游戏固定 16:9，始终完整显示；多余空间用虚化的场景背景填补。
   类名统一加 qg- 前缀，避免与全站样式冲突。 */
.qg-page {
  --qg-accent: #5ba5b2;
  --qg-button: #76a5af;
  --qg-line: #dfebed;
  --qg-stage: #203039;
  background: #faffff;
  color: #273438;
}
.qg-page svg.qg-icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.qg-icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.qg-page button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: background .18s, color .18s, border-color .18s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.qg-page button:focus-visible, .qg-page a:focus-visible { outline: 2px solid var(--qg-accent); outline-offset: 4px; }

.qg-main { padding: 26px 0 48px; }
.qg-breadcrumbs { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: 13px; color: #98a7aa; font-weight: 350; }
.qg-breadcrumbs a:hover { color: var(--qg-accent); }
.qg-breadcrumbs > span[aria-current] { color: #547d86; }
.qg-breadcrumbs > .qg-sep { color: #c0cdd0; }

.qg-intro { margin-bottom: 26px; }
.qg-title { margin: 0; font-family: Inter, "Noto Sans SC", "PingFang SC", Arial, sans-serif; font-size: 40px; line-height: 1.25; letter-spacing: -.6px; font-weight: 300; color: #354b51; }
.qg-copy { margin: 14px 0 0; font-size: 15px; font-weight: 300; letter-spacing: .4px; color: #83979c; }

/* 游戏区 */
.qg-player { position: relative; border: 1px solid #d4e2e6; border-radius: 8px; overflow: hidden; background: var(--qg-stage); box-shadow: 0 14px 38px #365b6510, 0 1px 3px #365b6508; }
.qg-viewport { position: relative; width: 100%; height: clamp(320px, 62dvh, 720px); overflow: hidden; isolation: isolate; background: var(--qg-stage); }
.qg-ambient { position: absolute; inset: -60px; z-index: -2; background: url("/img/play-ambient.jpg") center / cover no-repeat; filter: blur(32px) brightness(.35) saturate(.55); transform: scale(1.1); pointer-events: none; }
.qg-ambient-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #284d5a50, #223b4520 30%, #223b4520 70%, #284d5a50); pointer-events: none; }
.qg-game { position: absolute; inset: 0; margin: auto; overflow: hidden; background: #1d2026; box-shadow: 0 0 42px #07141b40; }
.qg-game iframe { display: block; width: 100%; height: 100%; border: 0; }

.qg-controls { height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 0 22px; background: #f1f8f9; border-top: 1px solid #e2ecee; }
.qg-controls button { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px; color: #6e8c95; }
.qg-controls button:hover { color: #428b9b; }
.qg-controls .qg-icon { width: 17px; height: 17px; }
.qg-controls kbd { margin-left: 4px; padding: 2px 5px; font-family: monospace; font-size: 11px; color: #a0b5bc; background: #fff7; border: 1px solid #dbe9ec; border-radius: 3px; }
.qg-controls .qg-fullscreen { padding: 9px 15px; color: #fff; background: var(--qg-button); border: 1px solid var(--qg-button); border-radius: 4px; }
.qg-controls .qg-fullscreen:hover { color: #fff; background: #6596a1; border-color: #6596a1; }

.qg-mobile-tip { display: none; }


.qg-toast { position: fixed; left: 50%; bottom: 30px; z-index: 1200; min-width: 240px; max-width: 90vw; padding: 12px 20px; font-size: 14px; text-align: center; color: #fff; background: #6b9ba6; border: 1px solid #7eacb5; border-radius: 6px; opacity: 0; transform: translate(-50%, 15px); transition: opacity .2s, transform .2s; pointer-events: none; }
.qg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 影院模式：游戏留在页面原位，宽度与文字区域同宽，高度按 16:9 */
body.qg-cinema .qg-viewport { height: auto; aspect-ratio: 16 / 9; }
body.qg-cinema .qg-cinema-btn { color: #428b9b; }

/* 全屏：只有游戏画面（含四周氛围背景），下方按钮栏不进入全屏 */
.qg-viewport:fullscreen { width: 100vw; height: 100dvh; aspect-ratio: auto; }
/* 不支持网页全屏的浏览器（iPhone）：游戏画面铺满整个窗口，效果等同全屏 */
body.qg-fakefs { overflow: hidden; }
body.qg-fakefs .qg-viewport { position: fixed; inset: 0; z-index: 3000; width: 100%; height: 100%; aspect-ratio: auto; }

/* 全屏时右上角的"退出"按钮：几秒后自动淡出，移动鼠标或点击画面时重新出现 */
.qg-exit { display: none; position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; color: #fff !important; background: rgba(20, 32, 40, .62) !important; border: 1px solid #ffffff26 !important; border-radius: 20px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .35s; }
.qg-exit:hover { background: rgba(20, 32, 40, .85) !important; }
.qg-exit .qg-icon { width: 15px; height: 15px; }
.qg-exit.is-hidden { opacity: 0; pointer-events: none; }
.qg-viewport:fullscreen .qg-exit, body.qg-fakefs .qg-exit { display: flex; }
/* 手机全屏但屏幕仍是竖的：游戏画面旋转 90°（画面顶部朝向屏幕右侧），横过手机即为正常方向 */
/* 旋转前的游戏框比竖屏宽，自动边距无法居中，改为定位到中心点后平移再旋转 */
.qg-viewport.is-rotated .qg-game { inset: auto; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%) rotate(90deg); }
.qg-game > .qg-exit { top: 10px; right: 10px; }

@media (max-width: 768px) {
  .qg-main { padding: 18px 0 32px; }
  .qg-breadcrumbs { gap: 10px; margin-bottom: 22px; font-size: 12px; }
  .qg-intro { margin-bottom: 20px; }
  .qg-title { font-size: 30px; letter-spacing: -.4px; }
  .qg-copy { font-size: 14px; margin-top: 10px; }
  .qg-viewport { height: auto; aspect-ratio: 16 / 9; }
  .qg-controls { height: 54px; padding: 0 14px; gap: 14px; }
  .qg-controls button { font-size: 13px; gap: 6px; }
  .qg-controls kbd { display: none; }
  .qg-controls .qg-fullscreen { padding: 8px 11px; }
  .qg-mobile-tip { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; color: #85a3ad; }
  .qg-mobile-tip .qg-icon { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .qg-page *, .qg-page *::before, .qg-page *::after { transition: none !important; }
}