/** H5 玩家端逻辑宽度（px），窄屏/移动浏览器居中展示为「手机画布」 */
export const PLAYER_VIEWPORT_MAX_PX = 480;

/** 桌面侧栏布局断点（与 Tailwind `lg` 一致） */
export const PLAYER_DESKTOP_BREAKPOINT_PX = 1024;

/** 桌面侧栏宽度，与 PlayerSidebar `w-56` 对齐 */
export const PLAYER_SIDEBAR_WIDTH = "14rem";

/** 外层视口：移动居中灰底；桌面全宽浅灰底 */
export const playerViewportOuterClass =
  "h-[100dvh] overflow-hidden bg-[#e8ecf3] lg:bg-[#f0f2f6]" as const;

/**
 * 内层根容器：移动 480px 居中；桌面铺满并启用侧栏布局变量。
 * 配合 globals.css `.player-desktop-shell` 约束弹层/遮罩范围。
 */
export const playerViewportRootClass =
  "player-desktop-shell relative mx-auto flex h-full min-h-0 w-full max-w-[480px] flex-col bg-white shadow-none lg:mx-0 lg:max-w-none sm:shadow-[0_0_48px_rgba(15,23,42,0.1)] lg:shadow-none" as const;

/** 页面内容列：移动限宽；桌面随主内容区伸展 */
export const playerContentColumnClass =
  "mx-auto w-full max-w-[480px] lg:mx-0 lg:max-w-none" as const;

/** @deprecated 使用 playerContentColumnClass */
export const playerViewportColumnClass = playerContentColumnClass;

/** 贴底/贴顶固定栏：移动与内容列同宽；桌面贴主内容区顶部 */
export const playerViewportFixedBarClass =
  "fixed left-1/2 z-50 w-full max-w-[480px] -translate-x-1/2 lg:left-[var(--player-sidebar-width)] lg:max-w-none lg:translate-x-0" as const;

/**
 * 全屏遮罩：桌面仅覆盖主内容区（不盖住左侧导航）。
 */
export const playerViewportOverlayClass =
  "fixed inset-0 z-50 lg:left-[var(--player-sidebar-width)]" as const;

/**
 * 居中弹窗：移动按视口居中；桌面按「主内容区」水平居中。
 */
export const playerViewportModalClass =
  "fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 lg:left-[calc(var(--player-sidebar-width)+(100vw-var(--player-sidebar-width))/2)]" as const;

/** 刘海屏 / 全屏 WebView 顶部安全区 */
export const playerSafeAreaTopClass = "pt-[env(safe-area-inset-top,0px)]" as const;

/** Popover / Toast 等内容宽度上限（相对画布，避免桌面 100vw 溢出） */
export const playerViewportPopoverMaxClass =
  "max-w-[min(calc(var(--player-viewport-max,480px)-2rem),280px)]" as const;