/* ============================================================
   移动端 · 竖屏
   ------------------------------------------------------------
   和教室大屏是同一份代码，只换布局：
   - 大屏：字母墙在左，题目小窗在右下（老师指定的位置）
   - 手机：题目窗在上，字母墙在下 —— 竖屏时拇指只够得到下半屏，
           要点的东西必须在下面，只看的东西放上面
   - 触控目标不小于 44px，这是儿童在手机上不误触的底线
   - 顶栏在手机上只留模式切换和设置，老师用的那几个按钮收起来
   ============================================================ */

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {

  body { font-size: 15px; }

  /* ---------- 顶栏：手机上分两行 ----------
     一行塞不下：3 个 tab + 7 个工具按钮在 390px 里会把 tab 挤到 30px、文字折行。
     第一行 tab 独占整行（这是孩子最常点的），第二行放工具，居中。 */
  .topbar {
    flex-wrap: wrap;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px;
    gap: 6px 8px;
  }
  .brand { display: none; }
  .tabs { flex: 1 0 100%; order: -1; margin: 0; padding: 4px; }
  .tab {
    flex: 1 1 0; padding: 11px 0; text-align: center;
    font-size: 16px; white-space: nowrap;      /* 绝不折行 */
    min-height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .tools { flex: 1 0 100%; justify-content: center; gap: 6px; }
  .tools .seg, .btn__label { display: none; }   /* 手机上只留图标 */
  .tools .btn { padding: 10px 12px; min-width: 44px; min-height: 44px; justify-content: center; }
  /* 闯关时把教学用的按钮藏起来，别让孩子乱点 */
  body[data-screen="game"] #btnShuffle,
  body[data-screen="game"] #btnReset,
  body[data-screen="game"] #btnRead { display: none; }

  /* ---------- 教学墙 ---------- */
  .teach { padding: 10px 10px 12px; }
  .wall { gap: 8px; }

  /* ---------- 闯关：改成上下 ---------- */
  /* 手机竖屏：grid 压回单列，顺序 HUD+题目窗 → 大写 → 小写。
     手机上不做同屏双人（一部手机两个孩子抢不过来），所以不用管左右分屏。 */
  .game {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr 1fr !important;
    padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
    gap: 8px;
  }
  .gside                         { grid-column: 1 !important; grid-row: 1 !important; }
  .gzone__wrap[data-cs="upper"]  { grid-column: 1 !important; grid-row: 2 !important; }
  .gzone__wrap[data-cs="lower"]  { grid-column: 1 !important; grid-row: 3 !important; }

  /* 竖屏顺序：HUD 条 → 题目窗 → 字母墙。
     题目窗紧贴墙的上方，视线「看题 → 往下点」是连续的；
     HUD 只是给老师和家长看的，放最上面不抢戏。 */
  .gside { flex-direction: column; gap: 8px; width: 100%; }

  /* HUD 压成一条横带 */
  .ghud {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-md);
  }
  .ghud__who { flex: 0 0 auto; }
  .ghud__who .ava { width: 34px !important; height: 34px !important; }
  .ghud__name { font-size: 15px; max-width: 86px; }
  .dots { flex: 1 1 auto; min-width: 60px; }
  .dot { height: 9px; }
  .ghud__stats { flex: 0 0 auto; gap: 6px; }
  .stat { padding: 5px 9px; border-radius: var(--r-sm); }
  .stat__v { font-size: 19px; }
  .stat__k { font-size: 10px; margin-top: 1px; }
  .ghud .stat:nth-child(2) { display: none; }     /* 正确率在结算页看，游戏中不占地方 */
  .combo { position: absolute; left: -9999px; }    /* 连击改用全屏横幅，不占 HUD */

  /* 题目窗：压扁成一条，留高度给字母墙 */
  .gask {
    flex: 0 0 auto;
    height: 24vh;
    min-height: 132px;
    max-height: 210px;
    border-radius: var(--r-lg);
  }
  .gask__img { height: 15vh; max-height: 130px; }
  .gask__speaker { width: 92px; height: 92px; font-size: 42px; }
  .gask__got { height: 38px; }
  .gask__slot { width: 38px; height: 38px; font-size: 19px; border-width: 2px; }

  /* min-height:0 是关键 —— 没有它，grid 子项会按内容撑高，把页面顶穿 */
  .gzone__wrap { min-height: 0; }
  .gzone { padding: 6px; border-radius: var(--r-md); min-height: 0; overflow: hidden; }
  .gzone[data-want="true"] { box-shadow: inset 0 0 0 2px var(--c-lemon); }
  .gtile { border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--tone-line); }

  /* ---------- 面板 ---------- */
  .panel__card { width: 92%; padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }
  .levels { gap: 8px; }
  .lvl { width: calc(50% - 4px); padding: 12px 8px; border-radius: var(--r-md); }
  .lvl__n { font-size: 26px; }
  .lvl__t { font-size: 13px; }
  .roster { max-height: 30vh; }
  .who { padding: 10px 14px; font-size: 15px; }
  .bigbtn { padding: 15px 40px; font-size: 21px; width: 100%; justify-content: center; }
  .res__score { font-size: 62px; }
  .res__row { gap: 8px; margin: var(--sp-4) 0; }
  .res__cell { flex: 1 1 0; padding: 10px 4px; }
  .res__v { font-size: 24px; }
  .res__k { font-size: 11px; }
  .stars { font-size: 38px; gap: 8px; }
  .res__missb { width: 46px; height: 46px; }

  /* ---------- 特效在小屏上收敛一点，别糊住整个屏 ---------- */
  .fxtext { --fz: 30px; }
  .fxcombo { font-size: 34px; padding: 5px 18px; }

  /* ---------- 倒计时 ---------- */
  .count__n { font-size: 40vw; }
  .count__go { font-size: 22vw; }
  .count__ring, .count__sweep { width: 74vw; border-width: 10px; }
  .count__sweep {
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 10px), #000 calc(50% - 10px));
    mask: radial-gradient(circle, transparent calc(50% - 10px), #000 calc(50% - 10px));
  }
}

/* 很矮的横屏手机：改回「左边两个区叠着、右边一栏」，否则字母墙没地方 */
@media (orientation: landscape) and (max-height: 560px) {
  .game {
    grid-template-columns: 1fr 210px !important;
    grid-template-rows: 1fr 1fr !important;
  }
  .gzone__wrap[data-cs="upper"] { grid-column: 1 !important; grid-row: 1 !important; }
  .gzone__wrap[data-cs="lower"] { grid-column: 1 !important; grid-row: 2 !important; }
  .gside { grid-column: 2 !important; grid-row: 1 / span 2 !important; width: auto; }
  .ghud { flex-direction: column; align-items: stretch; }
  .gask { height: auto; max-height: none; flex: 1 1 auto; }
  .gask__img { height: 22vh; }
  .gask__speaker { width: 72px; height: 72px; }
}

/* 超小屏兜底：字母墙允许纵向滚动，宁可滚也不要格子小到点不中 */
@media (max-width: 380px) {
  .gzone { overflow-y: auto; align-content: flex-start; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   壹嘉家长端内嵌（html.embed，由 js/host-bridge.js 在带票据打开时加上）
   ------------------------------------------------------------
   家长手机里只有一个孩子、一张票据：老师用的工具条、排行榜、统计、⚙ 面板
   都没有意义；花名册 / 名字输入 / 双人模式更不能露 —— 孩子改个名字，
   成绩就记到别人头上了。名字由票据带来，起局面板只剩关卡和「开始」。
   不用 !important：test/logic.test.mjs 禁止用它顶掉屏幕隐藏。
   ============================================================ */
html.embed .tools,
html.embed #btnBoard,
html.embed #btnStats,
html.embed #sheet,
html.embed .panel .roster,
html.embed .panel input.namein,
html.embed .startsegs,
html.embed .res__rank { display: none; }