/**
 * 🪟 Windows Modern UI / Live Tiles 官方正统全端样式库 (Metro Stylesheet 2.0)
 * 严格遵循 Windows 8 / 8.1 Start Screen 与 Windows Phone 8 / 10 核心规范：
 * - 纯色块无高光阴影拟物 (Pure Flat, Solid Colors)
 * - 纯白极简高对比矢量剪影 (High-contrast Pure White Silhouettes)
 * - 经典 Segoe UI Light / 微软雅黑 优雅排版
 * - 全场景屏幕比例自适应 (16:9, 16:10, 21:9 Ultrawide, 4:3/3:2 Tablet, Mobile Portrait/Landscape)
 * - 3D 触控透视倾斜物理反馈 (3D Perspective Tilt)
 */

/* ==========================================================================
   1. Windows Metro 核心设计令牌 (Design Tokens & Authentic Palette)
   ========================================================================== */
:root {
  /* Microsoft Metro 官方经典 Accent 纯色调色板 (高纯度、高对比) */
  --win8-teal: #00aba9;
  --win8-mango: #fa6800;
  --win8-crimson: #e51400;
  --win8-blue: #1ba1e2;
  --win8-green: #008a00;
  --win8-purple: #744da9;
  --win8-gold: #f0a30a;
  --win8-magenta: #d80073;
  --win8-rust: #ca5010;
  --win8-moss: #60a917;
  --win8-sky: #00a4ef;
  --win8-slate: #2b5797;
  --win8-pine: #008272;
  --win8-cobalt: #0050ef;
  --win8-amber: #ff8c00;
  --win8-violet: #6a00ff;
  --win8-fuchsia: #881798;
  --win8-bordeaux: #b91d47;
  --win8-action-red: #d13438;
  --win8-steel: #506882;
  --win8-ice: #00bcf2;
  --win8-navy: #1f3a60;
  --win8-dohyo: #e65100;
  --win8-deep-indigo: #4b0082;

  /* 基础壁纸主题色 (默认 Win8 经典深青 Teal) */
  --start-bg: #004652;
  --start-bg-gradient: radial-gradient(ellipse at 70% 30%, #005d6e 0%, #004652 45%, #002b33 100%);
  --start-fg: #ffffff;
  --start-fg-muted: rgba(255, 255, 255, 0.75);
  
  /* 动态栅格几何令牌 */
  --tile-gap: 10px;
  --tile-unit: clamp(120px, calc((100vh - 192px - var(--tile-gap) * 2) / 3), 900px);
}

/* 5套 Windows 8 / 8.1 原厂经典壁纸主题 */
body.theme-teal {
  --start-bg: #004652;
  --start-bg-gradient: radial-gradient(ellipse at 70% 30%, #005d6e 0%, #004652 45%, #002b33 100%);
}

body.theme-indigo {
  --start-bg: #29123f;
  --start-bg-gradient: radial-gradient(ellipse at 70% 30%, #3a1a59 0%, #29123f 45%, #160a22 100%);
}

body.theme-slate {
  --start-bg: #11151c;
  --start-bg-gradient: radial-gradient(ellipse at 70% 30%, #1c222e 0%, #11151c 45%, #0a0d12 100%);
}

body.theme-emerald {
  --start-bg: #0a3818;
  --start-bg-gradient: radial-gradient(ellipse at 70% 30%, #0f5224 0%, #0a3818 45%, #06220f 100%);
}

body.theme-crimson {
  --start-bg: #3e0c17;
  --start-bg-gradient: radial-gradient(ellipse at 70% 30%, #581221 0%, #3e0c17 45%, #24070d 100%);
}

body.theme-gold {
  --start-bg: #382502;
  --start-bg-gradient: radial-gradient(ellipse at 70% 30%, #523704 0%, #382502 45%, #1c1200 100%);
}

/* ==========================================================================
   2. 全局环境与 Windows 8 开始屏幕视口规范
   ========================================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--start-bg);
  background-image: var(--start-bg-gradient);
  background-attachment: fixed;
  color: var(--start-fg);
  font-family: "Segoe UI", "Microsoft YaHei UI", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 开始屏幕底纹矢量微纹理 (Windows 8 标志性流动折纸与全景视差波纹) */
.win8-flourish-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 250vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  transform: translate3d(0, 0, 0);
}


.win8-parallax-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 顶层主视口容器 */
.start-screen-app {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* ==========================================================================
   3. Windows 8 经典顶部开始横幅 (Start Header Banner)
   ========================================================================== */
.start-header {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 48px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
}

.start-header-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
  cursor: pointer;
}

.start-title {
  font-family: "Segoe UI Light", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.start-subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--start-fg-muted);
  text-transform: uppercase;
}

.start-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.start-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 2px;
  transition: background 0.15s ease;
}

.start-user-profile:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-name {
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
}

.user-avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar-circle svg {
  width: 20px;
  height: 20px;
}

.start-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Windows 8 经典圆形微按钮 */
.win8-circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  padding: 0;
}

.win8-circle-btn svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

.win8-circle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  transform: scale(1.08);
}

.win8-circle-btn:active {
  background: #ffffff;
  color: #000000;
  transform: scale(0.92);
}

.win8-circle-btn:active svg {
  fill: #000000;
}

/* ==========================================================================
   4. 横向全景画布与分组系统 (Surface & PC Panorama Architecture)
   ========================================================================== */
.metro-panorama {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 48px;
  padding: 8px 48px 36px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.metro-panorama::-webkit-scrollbar {
  height: 6px;
}

.metro-panorama::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0;
}

/* 单个横向分组列 (Group Column) */
.metro-group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.metro-group-header {
  font-family: "Segoe UI Light", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: 1.45rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.metro-group-header:hover {
  color: #38bdf8;
}

.group-arrow {
  font-size: 1.1rem;
  opacity: 0.6;
}

/* 分组内磁贴栅格 (默认 3 行横向全景流) */
.metro-group-body {
  display: grid;
  grid-template-rows: repeat(3, var(--tile-unit));
  grid-auto-flow: column;
  grid-auto-columns: var(--tile-unit);
  gap: var(--tile-gap);
  height: calc(var(--tile-unit) * 3 + var(--tile-gap) * 2);
}

/* ==========================================================================
   5. 磁贴核心造型与色彩规范 (Tile Geometry, Proportions & Metro Colors)
   ========================================================================== */
.game-card, .metro-tile {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: outline 0.1s ease, filter 0.15s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* 磁贴严整尺寸系统 */
.tile-medium {
  width: var(--tile-unit);
  height: var(--tile-unit);
  grid-column: span 1;
  grid-row: span 1;
}

.tile-wide {
  width: calc(var(--tile-unit) * 2 + var(--tile-gap));
  height: var(--tile-unit);
  grid-column: span 2;
  grid-row: span 1;
}

.tile-large {
  width: calc(var(--tile-unit) * 2 + var(--tile-gap));
  height: calc(var(--tile-unit) * 2 + var(--tile-gap));
  grid-column: span 2;
  grid-row: span 2;
}

/* 磁贴 3D 触控倾斜与按压微交互 */
.game-card:hover {
  filter: brightness(1.08);
}

/* Microsoft Reveal Highlight (冷白微高光与微边框光圈) */
.game-card::after, .metro-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  background: radial-gradient(
    circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 80%
  );
}

.game-card:hover::after, .metro-tile:hover::after {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.45);
}

.game-card:active, .game-card.tile-pressed, .metro-tile:active, .metro-tile.tile-pressed {
  outline: 2px solid #ffffff !important;
  outline-offset: -2px;
  filter: brightness(0.92);
  transform: perspective(600px) scale(0.96);
}

.game-card.tile-pressed::after, .metro-tile.tile-pressed::after {
  opacity: 0.5;
  border-color: rgba(255, 255, 255, 0.85);
}


.game-card.launching {
  filter: brightness(1.3);
  outline: 3px solid #ffffff !important;
  outline-offset: -3px;
  pointer-events: none;
}

/* 磁贴双面翻转结构 (3D Live Tile Flipper) */
.metro-tile-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.game-card.is-flipped .metro-tile-flipper {
  transform: rotateX(180deg);
}

/* Windows Phone / Win8 经典 Slide / Push 动态磁贴推拉体系 */
.game-card.anim-push {
  overflow: hidden;
}

.game-card.anim-push .metro-tile-flipper {
  transform: none !important;
  transform-style: flat;
}

.game-card.anim-push .metro-tile-front {
  transform: translateY(0);
  transition: transform 0.65s cubic-bezier(0.1, 0.9, 0.2, 1);
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.game-card.anim-push .metro-tile-back {
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.1, 0.9, 0.2, 1);
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.game-card.anim-push.is-pushed .metro-tile-front {
  transform: translateY(-100%);
}

.game-card.anim-push.is-pushed .metro-tile-back {
  transform: translateY(0);
}

/* 正面: 极简纯白矢量剪影 + 右上角角标 + 左下角标题 */
.metro-tile-front {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}

/* 背面: 动态磁贴资讯 (Live Telemetry & Info) */
.metro-tile-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.62);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateX(180deg);
  z-index: 2;
}

/* 右上角纯正角标 */
.tile-badge-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}

.tile-badge-num {
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.28);
  padding: 2px 6px;
  letter-spacing: 0.3px;
}

/* 核心中央纯白矢量剪影 Icon */
.tile-icon-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.metro-icon-svg {
  width: clamp(40px, calc(var(--tile-unit) * 0.44), 130px);
  height: clamp(40px, calc(var(--tile-unit) * 0.44), 130px);
  fill: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tile-wide .metro-icon-svg {
  width: clamp(48px, calc(var(--tile-unit) * 0.48), 160px);
  height: clamp(48px, calc(var(--tile-unit) * 0.48), 160px);
}

.tile-large .metro-icon-svg {
  width: clamp(88px, calc(var(--tile-unit) * 0.82), 340px);
  height: clamp(88px, calc(var(--tile-unit) * 0.82), 340px);
}

/* 1x1 方形中磁贴隐藏副标题，保持正统 Win8 极简呼吸感与开阔构图 */
.tile-medium .tile-sub-text {
  display: none !important;
}

/* 左下角经典排版 (Bottom-Left Typography) */
.tile-caption-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
}

.tile-title-text {
  font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(0.88rem, calc(var(--tile-unit) * 0.082), 1.25rem);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.tile-wide .tile-title-text {
  font-size: clamp(0.88rem, calc(var(--tile-unit) * 0.082), 1.22rem);
}

.tile-large .tile-title-text {
  font-size: clamp(1rem, calc(var(--tile-unit) * 0.095), 1.45rem);
}

.tile-sub-text {
  font-size: clamp(0.68rem, calc(var(--tile-unit) * 0.055), 0.88rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  line-height: 1.15;
}

.tile-large .tile-sub-text {
  font-size: clamp(0.72rem, calc(var(--tile-unit) * 0.06), 0.95rem);
}

/* 背面样式 */
.tile-back-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
}

.tile-back-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.88);
}

.tile-stat-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 2px;
}

.tile-btn-launch {
  align-self: flex-end;
  background: #ffffff;
  color: #000000;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 0;
  outline: none;
  transition: transform 0.1s, background 0.1s;
}

.tile-btn-launch:active {
  transform: scale(0.95);
  background: #e2e8f0;
}

/* ==========================================================================
   6. 官方 Metro 纯色块指定 (Official Solid Color Mappings)
   ========================================================================== */
.tile-accent-tron        { background-color: var(--win8-teal) !important; }
.tile-accent-bombcat     { background-color: var(--win8-mango) !important; }
.tile-accent-uno         { background-color: var(--win8-crimson) !important; }
.tile-accent-bomberman   { background-color: var(--win8-blue) !important; }
.tile-accent-liarsbar    { background-color: var(--win8-rust) !important; }
.tile-accent-monopoly    { background-color: var(--win8-green) !important; }
.tile-accent-doudizhu    { background-color: var(--win8-gold) !important; }
.tile-accent-sanguosha   { background-color: var(--win8-bordeaux) !important; }
.tile-accent-splendor    { background-color: var(--win8-purple) !important; }
.tile-accent-quoridor    { background-color: var(--win8-moss) !important; }
.tile-accent-aeroplane   { background-color: var(--win8-sky) !important; }
.tile-accent-go          { background-color: var(--win8-slate) !important; }
.tile-accent-kaya        { background-color: var(--win8-pine) !important; }
.tile-accent-gravity     { background-color: var(--win8-cobalt) !important; }
.tile-accent-gravity4    { background-color: var(--win8-amber) !important; }
.tile-accent-gravity3d   { background-color: var(--win8-violet) !important; }
.tile-accent-gravity3d4  { background-color: var(--win8-fuchsia) !important; }
.tile-accent-nes         { background-color: var(--win8-bordeaux) !important; }
.tile-accent-contra      { background-color: var(--win8-action-red) !important; }
.tile-accent-tanktrouble { background-color: var(--win8-steel) !important; }
.tile-accent-hockey      { background-color: var(--win8-ice) !important; }
.tile-accent-iaido       { background-color: var(--win8-navy) !important; }
.tile-accent-liarsdice   { background-color: var(--win8-magenta) !important; }
.tile-accent-sumo        { background-color: var(--win8-dohyo) !important; }
.tile-accent-tank        { background-color: var(--win8-green) !important; }
.tile-accent-stack       { background-color: var(--win8-deep-indigo) !important; }
.tile-accent-vps         { background-color: #0078d7 !important; }
.tile-accent-subnet      { background-color: var(--win8-green) !important; }
.tile-accent-packet      { background-color: var(--win8-purple) !important; }
.tile-accent-bgp         { background-color: var(--win8-mango) !important; }
.tile-accent-utility     { background-color: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255,255,255,0.25) !important; }

/* 搜索过滤弱化态 */
.game-card.tile-dimmed {
  opacity: 0.16 !important;
  transform: scale(0.96) !important;
  pointer-events: none;
}

/* 天命随机光圈高亮 */
.game-card.tile-shimmer-picked {
  outline: 4px solid #ffffff !important;
  outline-offset: 2px;
  filter: brightness(1.4) !important;
  transform: scale(1.05) !important;
  z-index: 50;
}

/* ==========================================================================
   7. Windows 8 经典 Charm 侧滑搜索抽屉 (Charm Bar Search)
   ========================================================================== */
.win8-charm-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  height: 100vh;
  background: rgba(14, 18, 26, 0.96);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  box-sizing: border-box;
  transition: right 0.28s cubic-bezier(0.1, 0.9, 0.2, 1);
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.7);
}

.win8-charm-drawer.open {
  right: 0;
}

.charm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.charm-title {
  font-family: "Segoe UI Light", "Microsoft YaHei UI", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  color: #ffffff;
}

.charm-close-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  cursor: pointer;
}

.charm-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 6px 12px;
  margin-bottom: 20px;
}

.charm-search-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 1rem;
  color: #000000;
  outline: none;
}

.charm-chips-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.charm-chips-title {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.charm-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.charm-pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}

.charm-pill.active {
  background: #0078d7;
  border-color: #0078d7;
  font-weight: 700;
}

.charm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  display: none;
}

.charm-backdrop.open {
  display: block;
}

/* ==========================================================================
   8. Windows 8 语义缩放全景覆盖层 (Semantic Zoom Overlay)
   ========================================================================== */
.metro-semantic-zoom {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, 0.94);
  backdrop-filter: blur(20px);
  z-index: 9990;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  animation: zoomFadeIn 0.2s ease-out;
}

.metro-semantic-zoom.open {
  display: flex;
}

@keyframes zoomFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.semantic-zoom-header {
  font-family: "Segoe UI Light", "Microsoft YaHei UI", sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 32px;
}

.semantic-zoom-grid {
  display: grid;
  grid-template-columns: repeat(4, 220px);
  gap: 20px;
  max-width: 1000px;
  width: 100%;
}

.semantic-zoom-card {
  padding: 24px;
  box-sizing: border-box;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.15s ease;
  user-select: none;
}

.semantic-zoom-card:hover {
  transform: scale(1.06);
  outline: 2px solid #ffffff;
}

.semantic-zoom-card .cat-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

.semantic-zoom-card .cat-count {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   9. Windows Phone 底部 Application Bar (WP AppBar)
   ========================================================================== */
.wp-app-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(14, 18, 26, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 800;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 4px 8px;
}

.wp-app-bar-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px;
  flex: 1;
}

.wp-app-bar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.wp-app-bar-text {
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.8);
}

.wp-app-bar-btn:active .wp-app-bar-circle {
  background: #ffffff;
  color: #000000;
}

/* ==========================================================================
   10. 各种屏幕比例与视口断点响应式体系 (All Screen Aspect Ratios)
   ========================================================================== */

/* A. 桌面与 Surface 宽屏全景流 (Surface Pro / Windows 8.1 宽屏全景) */
@media (min-width: 901px) {
  :root {
    --tile-gap: clamp(10px, 1.1vh, 14px);
    --tile-unit: clamp(120px, calc((100vh - 192px - var(--tile-gap) * 2) / 3), 900px);
  }

  body {
    overflow: hidden !important;
  }

  .start-screen-app {
    height: 100vh;
  }

  .start-header {
    padding: clamp(16px, 2.2vh, 24px) clamp(24px, 3.2vw, 48px) clamp(6px, 1vh, 12px);
  }

  .metro-panorama {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: clamp(32px, 3.5vw, 48px);
    padding: 8px clamp(24px, 3.2vw, 48px) 52px !important;
  }

  .metro-group {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
  }

  .metro-group-header {
    margin-bottom: clamp(8px, 1.2vh, 12px) !important;
  }

  .metro-group-body {
    display: grid !important;
    grid-template-rows: repeat(3, var(--tile-unit)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--tile-unit) !important;
    gap: var(--tile-gap) !important;
    height: calc(var(--tile-unit) * 3 + var(--tile-gap) * 2) !important;
  }

  .tile-medium {
    width: var(--tile-unit) !important;
    height: var(--tile-unit) !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .tile-wide {
    width: calc(var(--tile-unit) * 2 + var(--tile-gap)) !important;
    height: var(--tile-unit) !important;
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }

  .tile-large {
    width: calc(var(--tile-unit) * 2 + var(--tile-gap)) !important;
    height: calc(var(--tile-unit) * 2 + var(--tile-gap)) !important;
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }
}

/* 大屏高分辨率 (1080p, 1440p, 4K 高度 >= 900px，包含浏览器 80% 缩放) */
@media (min-width: 1200px) and (min-height: 900px) {
  :root {
    --tile-gap: clamp(12px, 1.2vh, 16px);
    --tile-unit: clamp(140px, calc((100vh - 200px - var(--tile-gap) * 2) / 3), 900px);
  }

  .start-header {
    padding: clamp(20px, 2.6vh, 32px) clamp(36px, 3.6vw, 56px) clamp(8px, 1.2vh, 14px);
  }

  .metro-panorama {
    gap: clamp(40px, 4vw, 56px);
    padding: 10px clamp(36px, 3.6vw, 56px) 52px !important;
  }
}

/* B. 紧凑高度视口与移动端横屏 (Windows Phone Landscape 2行横滑全景) */
@media (max-width: 900px) and (orientation: landscape) {
  :root {
    --tile-gap: 8px;
    --tile-unit: clamp(80px, calc((100vh - 96px) / 2 - 8px), 240px);
  }

  body {
    overflow: hidden !important;
  }

  .start-screen-app {
    height: 100vh;
  }

  .start-header {
    padding: 6px 20px 2px !important;
  }

  .start-title {
    font-size: 1.6rem !important;
  }

  .start-subtitle {
    display: none !important;
  }

  .user-name {
    display: none !important;
  }

  .metro-panorama {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 24px !important;
    padding: 4px 20px 20px !important;
  }

  .metro-group-header {
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
  }

  .metro-group-body {
    display: grid !important;
    grid-template-rows: repeat(2, var(--tile-unit)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--tile-unit) !important;
    gap: var(--tile-gap) !important;
  }

  .tile-medium {
    width: var(--tile-unit) !important;
    height: var(--tile-unit) !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .tile-wide {
    width: calc(var(--tile-unit) * 2 + var(--tile-gap)) !important;
    height: var(--tile-unit) !important;
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }

  .tile-large {
    width: calc(var(--tile-unit) * 2 + var(--tile-gap)) !important;
    height: calc(var(--tile-unit) * 2 + var(--tile-gap)) !important;
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  .metro-icon-svg {
    width: clamp(34px, 12vh, 52px) !important;
    height: clamp(34px, 12vh, 52px) !important;
  }

  .tile-wide .metro-icon-svg {
    width: clamp(40px, 14vh, 62px) !important;
    height: clamp(40px, 14vh, 62px) !important;
  }

  .tile-large .metro-icon-svg {
    width: clamp(68px, 24vh, 120px) !important;
    height: clamp(68px, 24vh, 120px) !important;
  }
}

/* C. 手机与平板竖屏 (Windows Phone 8 / 10 经典两列流式砌体) */
@media (max-width: 768px) and (orientation: portrait), (max-width: 900px) and (orientation: portrait) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  .win8-flourish-bg {
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
  }

  .start-screen-app {
    height: auto !important;
    min-height: 100vh;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }


  .start-header {
    padding: 16px 14px 6px;
  }

  .start-title {
    font-size: 2.2rem;
  }

  .start-subtitle {
    font-size: 0.85rem;
  }

  .user-name {
    display: none;
  }

  /* 消除手机顶部微按钮冲突，由底栏 WP AppBar 接管 */
  .start-header-controls {
    display: none !important;
  }

  .metro-panorama {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    gap: 24px !important;
    padding: 8px 12px 20px !important;
  }

  .metro-group {
    width: 100% !important;
  }

  .metro-group-body {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: dense !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
  }

  .tile-medium {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .tile-wide {
    width: 100% !important;
    height: clamp(88px, 24vw, 120px) !important;
    grid-column: span 2 !important;
    grid-row: span 1 !important;
  }

  .tile-large {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  .metro-icon-svg {
    width: clamp(38px, 12vw, 56px) !important;
    height: clamp(38px, 12vw, 56px) !important;
  }

  .tile-wide .metro-icon-svg {
    width: clamp(44px, 14vw, 64px) !important;
    height: clamp(44px, 14vw, 64px) !important;
  }

  .tile-large .metro-icon-svg {
    width: clamp(76px, 25vw, 130px) !important;
    height: clamp(76px, 25vw, 130px) !important;
  }

  .wp-app-bar {
    display: flex !important;
  }

  .semantic-zoom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   11. 测试套件向前兼容性声明与过渡类 (Legacy Test Suite Compat)
   ========================================================================== */
.metro-active { display: block; }
.metro-mode   { display: block; }
.game-grid.compact-mode { display: block; }

.old-legacy-hidden {
  display: none !important;
}