/* TULU 游戏全屏壳 · game-fullscreen.css v0.1.0 */
/* 仅作用于游戏页:去掉网页布局,改为全屏游戏风;角落 TULU 标识 + 加载广告遮罩 */

/* 双保险:游戏页不注入 header.js/footer.js,这里确保标准顶栏/页脚不占位 */
#site-header, #site-footer { display: none !important; }

html, body { height: 100%; }
html { overflow-x: hidden; }   /* 根层横向锁,兜底任意游戏页横向溢出 */
body[data-page="tool"] {
  overflow-x: hidden;               /* 横向不溢出 */
  overflow-y: auto;                 /* 内容超高时整页可滚动,不裁切溢出部分 */
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
body[data-page="tool"] .game-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
body[data-page="tool"] .container {
  flex: 1 0 auto;                   /* 滚动安全:内容超高时不再顶出视口 */
  width: 100%;
  max-width: 720px;
  margin: auto;                     /* 居中且可滚动(替代 justify-content:center 的顶出 bug) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 74px 14px 18px;         /* 顶部给角落信息牌留位(约 62px + 10px 顶距) */
  gap: 14px;
}
body[data-page="tool"] .game-head { text-align: left; }
body[data-page="tool"] .game-panel {
  width: 100%;
  margin: 0 auto;
}

/* 角落信息牌: 本游戏名称 + 简介(game-shell.js 注入, 取自页面 .game-head) */
.g-logo {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 12px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: min(74vw, 320px);
  padding: 6px 12px;
  background: rgba(15, 27, 61, .80);
  color: #fff;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.g-logo .g-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.g-logo .g-name {
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-logo .g-desc {
  font-size: 11px; line-height: 1.32; opacity: .74;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 名称简介已上提到角标 -> 正文里那份收起, 不重复出现 */
body.g-head-hoisted .game-head { display: none !important; }

/* 加载遮罩(虚拟进度 + 广告位) */
.g-loading {
  position: fixed; inset: 0; z-index: 90;
  background: radial-gradient(120% 120% at 50% 0%, #16234d 0%, #0F1B3D 60%, #0a1330 100%);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
  transition: opacity .45s ease;
}
.g-loading.hide { opacity: 0; pointer-events: none; }
.g-loading .g-l-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.g-loading .g-l-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px;
}
.g-loading .g-l-name { font-size: 18px; font-weight: 600; letter-spacing: 1px; }
.g-loading .g-l-sub { font-size: 12px; color: var(--navy-soft); margin-top: 2px; }
.g-l-ad {
  width: min(320px, 86vw); min-height: 120px;
  border: 1px dashed rgba(255, 255, 255, .35); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .55); font-size: 12px; letter-spacing: 2px;
  overflow: hidden; text-align: center; padding: 12px;
}
.g-l-bar { width: min(320px, 86vw); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.g-l-fill { height: 100%; width: 0%; background: var(--yellow); border-radius: 999px; transition: width .12s linear; }
.g-l-pct { font-size: 12px; color: var(--navy-soft); font-variant-numeric: tabular-nums; }
.g-l-skip {
  position: absolute; right: 16px; bottom: 16px;
  font-size: 11px; color: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px;
  padding: 5px 12px; background: transparent;
}

/* ============================================================
   通用全屏 / 沉浸层 · 配套 shared/game-fullscreen.js v1.0.0
   全站游戏页共用:优先系统全屏,不支持(iPhone/微信 iOS)自动降级为沉浸层。
   页面只需引 shared/game-fullscreen.js;需要改背景就覆盖 --gfs-bg。
   ============================================================ */

/* 沉浸层里把非游戏内容收起来(系统全屏时本来也看不见,同一套规则省得两套) */
body.g-fs { overflow: hidden; }
body.g-fs .game-head,
body.g-fs .game-bar,
body.g-fs .legend,
body.g-fs .vpad,
body.g-fs #site-header,
body.g-fs #site-footer,
body.g-fs footer,
body.g-fs .tc-box,
body.g-fs .tc-fab,
body.g-fs .g-fs-hide { display: none !important; }

/* 容器:竖排居中(与页面原本的块级堆叠一致,不改动游戏内部结构);
   首/末子元素给自动外边距 → 内容不超高时整组居中,超高时归零,不会被裁掉顶部
   ⛔ 一律限定在 body.g-fs / :fullscreen 下 —— 普通态绝不给 .game-panel 加定位/布局,
      否则会改变页面常态渲染(这类"共享件污染常态"的坑很难被发现) */
body.g-fs .g-fs-board,
.g-fs-board:fullscreen,
.g-fs-board:-webkit-full-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--gfs-bg, var(--paper, #EDF3F6));
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.g-fs .g-fs-board > *:first-child,
.g-fs-board:fullscreen > *:first-child { margin-top: auto; }
body.g-fs .g-fs-board > *:last-child,
.g-fs-board:fullscreen > *:last-child { margin-bottom: auto; }

/* 沉浸层:盖住整页(系统全屏不用这条,它自身就是全屏元素) */
body.g-fs.g-fs-imm .g-fs-board { position: fixed; inset: 0; z-index: 9990; }

/* 铺满尺寸由 JS 按画布比例算出并写成行内样式,这里只保证不被原 max-width 卡住 */
body.g-fs .g-fs-fit { max-width: none; }

/* 状态栏:顶栏 = 信息 + 退出全屏;底栏 = 进度 + 提示(首次调 progress/note 才出现)
   固定定位 → 系统全屏与沉浸层两种模式下都贴在屏幕上下沿(两种模式的"屏幕"都是棋盘本身)
   z-index 必须压过页面自己的浮层:本页/各游戏的菜单、结算浮层动不动就是 z-index 30~60,
   一旦盖住顶栏,「退出全屏」就点不到(iPhone/微信没有系统返回全屏的手势,那是唯一的出口)。
   取 9998:低于静音键(9999)与悬浮全屏键,高于一切页面内容浮层。 */
.g-fs-bar {
  display: none; position: fixed; left: 0; right: 0; z-index: 9998;
  align-items: center; font-size: 12.5px; color: var(--ink-2);
}
body.g-fs .g-fs-bar,
.g-fs-board:fullscreen .g-fs-bar { display: flex; }
.g-fs-bar-top {
  top: 0; height: 44px; justify-content: space-between; padding: 0 14px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.g-fs-bar-bot { bottom: 0; height: 44px; justify-content: center; gap: 10px; padding: 0 12px; }
.g-fs-bar .btn { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.g-fs-prog {
  flex: 0 0 120px; width: 120px; height: 6px; border-radius: 6px;
  background: rgba(15, 27, 61, .10); overflow: hidden;
}
.g-fs-prog i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #9FD3B8, #F5BFB8, #F7CCA0);
  transition: width .18s ease;
}
.g-fs-info, .g-fs-note { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
/* 底栏文字再长也不许把进度条挤没:超出就省略 */
.g-fs-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.g-fs-bar-bot:not(.on) { display: none !important; }

/* 没有工具栏的游戏(如纯棋盘页)→ 全屏按钮做右下角悬浮键,别压住左下角的静音键 */
.g-fs-fab {
  position: fixed; right: 10px; bottom: 10px; z-index: 9999;
  min-height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 18px;
  background: var(--card); color: var(--ink); border: 1px solid var(--ink);
  opacity: .92;
}
body.g-fs .g-fs-fab { display: none !important; }

/* 小屏 / 低分辨率自适应:收紧留白,保证棋盘完整可见且顶部 logo 不被挤 */
@media (max-height: 640px), (max-width: 480px) {
  body[data-page="tool"] .container {
    padding: 70px 10px 14px;
    gap: 10px;
    justify-content: flex-start;   /* 矮屏改为顶部对齐,避免被 centering 顶出 */
  }
  body[data-page="tool"] .game-head h1 { font-size: 17px; }
  body[data-page="tool"] .game-head p { font-size: 12px; margin-top: 4px; }
}