/*
 * Phone HUD layout. Loaded by both the task page (scene.html) and the embedded
 * viewer (index.html); every rule is scoped to the phone flags, so desktop is
 * untouched. Coordinates read in the landscape frame the viewer shows, which in
 * portrait browsers (WeChat cannot rotate) is the rotated surface.
 *
 * One 30px row across the top:
 *   [地点] [游戏入口]      [观察 第一人称 第三人称]      [♪ 地点讲解] [画质] [正常 快速] [重置]
 * Hotspots run down the left edge below it; joystick and 跑 stay at the bottom.
 * Everything fits in that row, so the 展开/收起 toggle is dropped on phones.
 *
 * `?admin=1` on scene.html sets data-tc-admin on both documents and keeps the
 * editing tools visible.
 */

/* ---------- Viewer (index.html, inside #gaussianFrame) ---------- */

html body[data-device="mobile"] {
  --tc-top: max(8px, env(safe-area-inset-top));
  --tc-left: max(8px, env(safe-area-inset-left));
  --tc-right: max(8px, env(safe-area-inset-right));
  --tc-h: 30px;
  --tc-gap: 6px;
}

html:not([data-tc-admin]) body[data-device="mobile"] :is(
  .fps-overlay, .tune-group:not(.tune-group-basic), .hotspot-actions, .hotspot-add,
  .hotspot-export, .hotspot-delete, .debug-grid, .debug-toggle
) { display: none !important; }

html body[data-device="mobile"] .scene-quick-actions .ui-toggle { display: none !important; }

/* Collapsed is the phone default and hides the top tools; keep them, except
   while a game or task mode has taken over the screen. */
html body[data-device="mobile"]:not(.tacheng-mini-game-mode):not(.baketu-task-exploring):not(.baketu-camel-flight):not(.tacheng-anjihai-rally) :is(.topbar, .scene-menu) {
  display: block !important;
}
html body[data-device="mobile"]:not(.tacheng-mini-game-mode):not(.baketu-task-exploring):not(.baketu-camel-flight):not(.tacheng-anjihai-rally) .fps-actions {
  display: flex !important;
}
html body[data-device="mobile"]:not(.tacheng-mini-game-mode):not(.baketu-task-exploring):not(.baketu-camel-flight):not(.tacheng-anjihai-rally) .tune-panel {
  display: grid !important;
}
html body[data-device="mobile"][data-ui-collapsed="true"] #controlbar [data-control-mode]:not([hidden]) {
  display: block !important;
}
html body[data-device="mobile"][data-ui-collapsed="true"] #controlbar .move-speed-control:not([hidden]) {
  display: flex !important;
}

/* Shared pill look. */
html body[data-device="mobile"] :is(
  #controlbar [data-control-mode], .scene-menu-toggle, #resetView, .audio-toggle,
  .weather-toggle, .hotspot-panel .hotspot-item, .control-trade-entry
) {
  box-sizing: border-box;
  height: var(--tc-h) !important;
  min-height: var(--tc-h) !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

/* Top center: perspective. */
html body[data-device="mobile"] #controlbar.controlbar {
  top: var(--tc-top) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: var(--tc-h);
  transform: none !important;
  display: flex;
  justify-content: center;
  gap: 4px !important;
  pointer-events: none;
  animation: none;
}
html body[data-device="mobile"] #controlbar.controlbar > * { pointer-events: auto; }
html body[data-device="mobile"] #controlbar.controlbar [data-control-mode] {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}

/* Top left: place menu. */
html body[data-device="mobile"] .scene-quick-actions {
  top: var(--tc-top) !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--tc-h);
  display: block !important;
  pointer-events: none;
}
html body[data-device="mobile"] .scene-quick-actions > * { pointer-events: auto; }
html body[data-device="mobile"] .scene-quick-actions .scene-menu {
  position: absolute !important;
  top: 0 !important;
  left: var(--tc-left) !important;
  right: auto !important;
  width: 136px !important;
}
html body[data-device="mobile"] .scene-menu-toggle {
  width: 100% !important;
  padding: 0 24px 0 10px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body[data-device="mobile"] .scene-menu-toggle::after { right: 9px !important; width: 5px !important; height: 5px !important; }
html body[data-device="mobile"] .scene-menu-list { width: 160px; }
html body[data-device="mobile"] .scene-menu-list button { min-height: 34px; font-size: 12px; }

/* Top right, from the corner inwards: 重置, speed, 画质, audio. */
html body[data-device="mobile"] .topbar {
  top: var(--tc-top) !important;
  right: var(--tc-right) !important;
  left: auto !important;
  width: auto !important;
}
html body[data-device="mobile"] .topbar .brand,
html body[data-device="mobile"] .top-actions select { display: none !important; }
html body[data-device="mobile"] .top-actions { display: block !important; }
/* 重置 and 天气 are not shown on phones. */
html body[data-device="mobile"] #resetView,
html body[data-device="mobile"] .scene-quick-actions .weather-toggle { display: none !important; }

html body[data-device="mobile"] #controlbar.controlbar .move-speed-control {
  position: absolute !important;
  top: 0 !important;
  right: var(--tc-right) !important;
  left: auto !important;
  bottom: auto !important;
  box-sizing: border-box;
  width: 80px !important;
  height: var(--tc-h) !important;
  min-height: var(--tc-h) !important;
  padding: 2px !important;
  border-radius: 15px;
}
html body[data-device="mobile"] #controlbar .move-speed-control > span { display: none; }
html body[data-device="mobile"] #controlbar .move-speed-options {
  display: flex !important;
  gap: 2px;
  width: auto !important;
}
html body[data-device="mobile"] #controlbar .move-speed-options button {
  width: 36px !important;
  min-width: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body[data-device="mobile"] #tunePanel.tune-panel {
  top: var(--tc-top) !important;
  right: calc(var(--tc-right) + 80px + var(--tc-gap)) !important;
  left: auto !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none;
}
html body[data-device="mobile"] .tune-group-basic,
html body[data-device="mobile"] .tune-group-basic[open] {
  display: grid !important;
  justify-items: end;
  gap: 4px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
html body[data-device="mobile"] .tune-group-basic > label { display: none !important; }
html body[data-device="mobile"] .tune-group-basic[open] > label:not([hidden]) { display: block !important; }
.quality-control { display:grid; gap:6px; }
.quality-control > span { font-size:12px; }
html body[data-device="mobile"] .tune-group-basic > .quality-control { display:none !important; }
html body[data-device="mobile"] .tune-group-basic[open] > .quality-control { display:block !important; }
html body[data-device="mobile"] .quality-control > span { display:none; }
html body[data-device="mobile"] .tune-group-basic > summary {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: var(--tc-h) !important;
  min-height: var(--tc-h) !important;
  padding: 0 0 0 2px !important;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #f0cf7b94;
  border-radius: 15px;
  background: #181710d1;
  color: #ffe2a5;
  font-size: 0 !important;
  list-style: none;
}
html body[data-device="mobile"] .tune-group-basic > summary::-webkit-details-marker { display: none; }
html body[data-device="mobile"] .tune-group-basic > summary::before { content: "画质"; flex: none; font-size: 12px; line-height: 1; }
html body[data-device="mobile"] .tune-group-basic > summary::after,
html body[data-device="mobile"] .tune-group-basic[open] > summary::after {
  content: "" !important;
  position: static !important;
  flex: none;
  box-sizing: content-box;
  width: 4px !important;
  height: 4px !important;
  margin-left: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  font-size: 0;
  transform: translateY(-2px) rotate(45deg);
}
html body[data-device="mobile"] .tune-group-basic[open] > summary::after { transform: translateY(1px) rotate(225deg); }
html body[data-device="mobile"] .tune-group-basic label > span { display: none !important; }
html body[data-device="mobile"] #qualityOptions {
  grid-template-columns: repeat(3, 38px) !important;
  gap: 2px !important;
  padding: 2px;
  border: 1px solid #f0cf7b5c;
  border-radius: 14px;
  background: #181710e6;
}
html body[data-device="mobile"] #qualityOptions button {
  height: 24px;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

html body[data-device="mobile"] .fps-actions {
  top: var(--tc-top) !important;
  right: calc(var(--tc-right) + 138px + 2 * var(--tc-gap)) !important; /* 80 speed + 58 画质 */
  left: auto !important;
  transform: none !important;
  gap: 4px !important;
}
html body[data-device="mobile"] .audio-actions { display: flex !important; gap: 4px !important; }
html body[data-device="mobile"] .audio-toggle {
  width: auto !important;
  min-width: 30px !important;
  padding: 0 8px !important;
}

/* Weather (安集海 only) sits in the corner just under 重置. */
html body[data-device="mobile"] .scene-quick-actions .weather-toggle {
  position: absolute !important;
  top: calc(var(--tc-h) + var(--tc-gap)) !important;
  right: var(--tc-right) !important;
  width: 44px !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Trade entry is a game action: left column, under the game entry. */
html body[data-device="mobile"] #controlbar .control-trade-entry {
  position: absolute !important;
  top: calc(var(--tc-h) + var(--tc-gap));
  left: calc(var(--tc-left) + 144px);
  width: auto !important;
  padding: 0 12px !important;
}

/* Left column, third row: hotspots (row two holds the game entry). */
html body[data-device="mobile"] .hotspot-panel {
  top: calc(var(--tc-top) + 2 * (var(--tc-h) + var(--tc-gap))) !important;
  left: var(--tc-left) !important;
  right: auto !important;
  width: 104px !important;
  max-height: calc(100% - 180px) !important;
  overflow-y: auto;
  scrollbar-width: none;
}
html body[data-device="mobile"] .hotspot-panel .hotspot-list { gap: 4px !important; }
html body[data-device="mobile"] .hotspot-panel .hotspot-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
}
html body[data-device="mobile"] .hotspot-panel .hotspot-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body[data-device="mobile"] .museum-travel-button {
  height: 32px !important;
  min-height: 32px !important;
  width: max-content !important;
  max-width: none !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  font: 600 12px/1 system-ui !important;
  white-space: nowrap;
  overflow: visible;
}
html body[data-device="mobile"] .museum-travel-button::after { inset: -4px 0 !important; }


/* Narration subtitle: a short strip along the bottom edge between the
   joystick and 跑, so neither covers the title or the first words. */
html body[data-device="mobile"] .subtitle-panel {
  left: calc(var(--tc-left) + 128px) !important;
  right: calc(var(--tc-right) + 80px) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: 560px;
  max-height: 78px !important;
  margin: 0 auto;
  padding: 7px 12px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  text-align: left !important;
}
html body[data-device="mobile"] .subtitle-panel strong { font-size: 12px !important; line-height: 1.3 !important; }
html body[data-device="mobile"] .subtitle-panel span {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

html body[data-device="mobile"] .mobile-pad .sprint-button,
html body[data-device="mobile"] .mobile-pad .jump-button {
  width: 52px !important;
  height: 52px !important;
  font-size: 14px !important;
}

/* ---------- Task page (scene.html) ---------- */

html[data-tc-mobile="true"]:not([data-tc-admin]) :is(
  #stonePuzzleEntryEditor, #sceneStartEditor, .mhp-toggle, .mhp-panel, .mhp-picker,
  .spg-toggle, .spg-panel, .spg-picker, .spg-pickbar, .xse-toggle, .xse-panel,
  .bkr-toggle, .bkr-panel, .ate-toggle, .ate-panel, .hmq-toggle, .hmq-settings,
  #baketuTasks [data-action="edit-animals"], #baketuTasks .bkt-editor,
  #honglouMuseumQuest [data-action="configure"],
  #honglouTimelineTestEntry, .honglou-test-entry
) { display: none !important; }

/* The woven border strips run along the short edges once rotated. */
html[data-tc-mobile="true"] .scene-game::before,
html[data-tc-mobile="true"] .scene-game::after { display: none; }

/* Game entry: left column, second row, under the place menu. In the top row a
   long label (进入 寻找红带小白杨) ran into the centred perspective switch on
   phones narrower than ~800px of landscape width. */
html[data-tc-mobile="true"]:not([data-anjihai-rally="true"]) body #hudLayer.hud-layer[data-game-active="false"] .mini-game-button:not([hidden]),
html[data-tc-mobile="true"] body .lujiaowan-folk-layer:not([data-active="true"]) .lujiaowan-folk-game-entry,
html[data-tc-mobile="true"] #baketuTasks .bkt-entry:not([hidden]) {
  box-sizing: border-box;
  top: calc(max(8px, env(safe-area-inset-top)) + 36px) !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center;
  gap: 5px;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  max-width: 170px !important;
  padding: 0 12px !important;
  border-radius: 15px !important;
  white-space: nowrap;
}
html[data-tc-mobile="true"] body .mini-game-button span { font-size: 11px !important; line-height: 1 !important; }
html[data-tc-mobile="true"] body .mini-game-button strong { font-size: 12px !important; line-height: 1 !important; }
html[data-tc-mobile="true"] #baketuTasks .bkt-entry small { display: none !important; }
html[data-tc-mobile="true"] #baketuTasks .bkt-entry strong { font-size: 12px !important; line-height: 1 !important; }
html[data-tc-mobile="true"] #baketuTasks .bkt-entry b { margin-left: 6px !important; font-size: 12px !important; }
/* The placeholder lives outside the rotated HUD and only shows while scripts load. */
html[data-tc-rotated="true"] body .scene-game-entry-fallback { display: none !important; }

html[data-tc-mobile="true"] #honglouMuseumQuest .hmq-status {
  top: calc(max(8px, env(safe-area-inset-top)) + 38px) !important;
  left: 8px !important;
  padding: 8px 12px !important;
}
html[data-tc-mobile="true"] #honglouMuseumQuest .hmq-status p { font-size: 12px; }
html[data-tc-mobile="true"] #honglouMuseumQuest .hmq-status button { min-height: 30px; font-size: 12px; padding: 0 12px; border-radius: 15px; }

/* Touch controls: prevent browser selection/highlight while preserving keyboard focus. */
button, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
button:focus:not(:focus-visible), summary:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
button:focus, summary:focus, [role="button"]:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* WeChat keeps a pressed button in the keyboard-focus state and paints a
   blue outline/selection over the label. Touch controls use the same visual
   pressed state as desktop and must not select their text. */
html[data-tc-mobile="true"] :is(button, summary, [role="button"]),
html body[data-device="mobile"] :is(button, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation;
}
html[data-tc-mobile="true"] :is(button, summary, [role="button"]):focus,
html body[data-device="mobile"] :is(button, summary, [role="button"]):focus,
html[data-tc-mobile="true"] :is(button, summary, [role="button"]):focus-visible,
html body[data-device="mobile"] :is(button, summary, [role="button"]):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
html[data-tc-mobile="true"] ::selection,
html body[data-device="mobile"] ::selection {
  background: transparent;
  color: inherit;
}
::selection {
  background: transparent;
  color: inherit;
}
html body[data-device="mobile"] #tunePanel,
html body[data-device="mobile"] .tune-group-basic,
html body[data-device="mobile"] .tune-group-basic > summary,
html body[data-device="mobile"] #qualityOptions,
html body[data-device="mobile"] #qualityOptions button {
  pointer-events: auto !important;
}
html body[data-device="mobile"] .tune-group-basic[open] #qualityOptions {
  display: grid !important;
  pointer-events: auto !important;
}
html[data-tc-mobile="true"] #travelStoryHud,
html[data-tc-mobile="true"] #travelStoryHud button,
html[data-tc-mobile="true"] .travelStoryModal button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Keep the three mobile overlays in separate logical zones. The viewer's
   scene menu owns the upper-left corner, the explorer chip sits below it,
   and task entry is on the lower-left edge. When a list is open it gets the
   top layer and the explorer hint yields so scene names remain tappable. */
html[data-tc-mobile="true"] #travelStoryHud[data-scene-mobile="true"] .travelStoryHudContent {
  top: 48px !important;
  left: auto !important;
  right: 8px !important;
  width: min(214px, calc(100% - 16px)) !important;
}
html[data-tc-mobile="true"] #travelStoryHud[data-scene-mobile="true"] #travelStoryHint {
  display: none !important;
}
html[data-tc-mobile="true"] #baketuTasks .bkt-entry:not([hidden]) {
  top: 44px !important;
  bottom: auto !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: auto !important;
  max-width: 156px !important;
  z-index: 1390 !important;
}
html[data-tc-mobile="true"] .scene-menu-list {
  z-index: 1700 !important;
}
html[data-tc-scene-menu-open="true"] :is(#travelStoryHud, #baketuTasks, #hudLayer, .hmq-status, .hotspot-panel),
html[data-tc-task-open="true"] :is(#travelStoryHud, #travelStoryOpen, #travelStoryClaim, #travelStoryHint, .tacheng-fragment-progress-hud, .tacheng-fragment-collection-button),
html[data-tc-quality-open="true"] #travelStoryHud {
  visibility: hidden !important;
  pointer-events: none !important;
}
html[data-tc-explorer="true"] :is(.tacheng-fragment-collection-button, .tacheng-fragment-progress-hud) {
  display: none !important;
}
html[data-tc-mobile="true"] #travelStoryHud button:focus:not(:focus-visible),
html[data-tc-mobile="true"] .travelStoryModal button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Reward presentation owns the screen; scene/task state remains intact underneath. */
html[data-tc-reward-open="true"] :is(#travelStoryHud,#baketuTasks,#honglouMuseumQuest,.hmq-status,.hmq-layer,#stonePuzzlePortalGuide,#stonePuzzlePortalToggle,.stpg-toggle,.stpg-root,#anjihaiRallyLayer,.tacheng-fragment-progress-hud,.mini-game-button,#sceneMenu,#tunePanel,#mobilePad,#movePad,#sprintButton,#jumpButton,.scene-quick-actions,.hotspot-panel,#hotspotList,.ssp-toggle,.ssp-panel){visibility:hidden!important;pointer-events:none!important}
html[data-tc-story-dialog="true"] :is(#hudLayer,#stonePuzzle,.hmq-modal,.xby-search-layer){visibility:hidden!important;pointer-events:none!important}
html[data-tc-reward-open="true"] :is(.fps-actions,.topbar,.bottombar,#statusPanel,#uiToggle,#startPointButton){visibility:hidden!important;pointer-events:none!important}
html[data-tc-reward-open="true"] #hudLayer > :not(.tacheng-unified-fragment-modal){visibility:hidden!important;pointer-events:none!important}
html[data-anjihai-rally="true"] :is(#travelStoryHud,.mini-game-button,.scene-game-entry-fallback,.tacheng-fragment-progress-hud,.tacheng-fragment-collection-button,.hmq-status,#baketuTasks){display:none!important;visibility:hidden!important;pointer-events:none!important}
.mini-game-button[hidden]{display:none!important}
/* Legacy reward entry points share the compact landscape composition. */
html .tacheng-unified-fragment-modal{padding:10px!important;align-items:center!important;place-items:center!important;z-index:3000!important}
html .tacheng-unified-fragment-modal .fragment-sheet{box-sizing:border-box;width:min(620px,calc(100% - 20px))!important;max-width:100%!important;max-height:calc(100% - 20px)!important;min-height:0!important;overflow:auto!important;padding:18px!important;display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px 20px;align-items:center}
html .tacheng-unified-fragment-modal .fragment-sheet::before{display:none!important}
html .tacheng-unified-fragment-modal .fragment-sheet>:is(.panel-label,h2,.task-actions,p){grid-column:2;margin:0!important}
html .tacheng-unified-fragment-modal .fragment-sheet h2{font-size:20px!important;line-height:1.3}
html .tacheng-unified-fragment-modal .fragment-token{grid-column:1;grid-row:1/6;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;width:100%!important;height:170px!important;margin:0!important}
html .tacheng-unified-fragment-modal .fragment-token img{width:100%!important;height:100%!important;object-fit:contain}
html .tacheng-unified-fragment-modal .task-actions{display:grid!important;gap:8px!important}
html .tacheng-unified-fragment-modal .task-actions button{min-height:44px!important}

/* Full hotspot labels and a single-line streaming status. */
html body[data-device="mobile"] .hotspot-panel {
  width:136px!important;max-width:calc(100% - 24px)!important;
}
html body[data-device="mobile"] .hotspot-list {padding-right:0!important;overflow-x:hidden}
html body[data-device="mobile"] .hotspot-panel .hotspot-item {
  box-sizing:border-box;width:100%!important;max-width:none!important;padding:0 8px!important;
}
html body[data-device="mobile"] .hotspot-panel .hotspot-item strong {
  flex:0 0 auto;white-space:nowrap;overflow:visible!important;text-overflow:clip!important;
}
/* Enhancing and ready share the phone's single bottom-centre status pill. */
html body #statusPanel[data-scene-loading="false"]:is([data-state="ready"],[data-enhancing="true"]) {
  display:flex!important;align-items:center;justify-content:center;gap:7px;
  left:50%!important;right:auto!important;top:auto!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;
  box-sizing:border-box;width:max-content!important;max-width:calc(100% - 200px)!important;
  min-height:26px!important;padding:4px 11px!important;border-radius:14px!important;
  border:1px solid #d5b66a8c!important;background:#14231eee!important;
  pointer-events:none!important;box-shadow:0 3px 12px #0003;
}
html body #statusPanel[data-scene-loading="false"]:is([data-state="ready"],[data-enhancing="true"]) #statusDetail {order:0;color:#fff1c9;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #statusPanel[data-scene-loading="false"]:is([data-state="ready"],[data-enhancing="true"]) #statusTitle {order:1;font-size:10px;line-height:1.3;white-space:nowrap}
html body #statusPanel[data-scene-loading="false"]:is([data-state="ready"],[data-enhancing="true"]) #statusTitle::before {content:"· ";opacity:.6}
html[data-tc-task-open="true"] #statusPanel,
html body:is(.tacheng-mini-game-mode,.tacheng-anjihai-rally,.stp-camera-fixed) #statusPanel {visibility:hidden!important}

/* Short landscape surfaces reserve a second row for audio controls. */
html[data-tc-compact-hud="true"] body[data-device="mobile"] #controlbar.controlbar [data-control-mode] {
  width: 56px !important; padding: 0 3px !important;
}
html[data-tc-compact-hud="true"] body[data-device="mobile"] .scene-quick-actions .scene-menu {
  width: 124px !important;
}
html[data-tc-compact-hud="true"] body[data-device="mobile"] .fps-actions {
  top: calc(var(--tc-top) + var(--tc-h) + var(--tc-gap)) !important;
  left: calc(var(--tc-left) + 166px) !important;
  right: auto !important;
  width: max-content !important;
}
html[data-tc-compact-hud="true"] #travelStoryHud[data-scene-mobile="true"] .travelStoryHudContent {
  width: min(190px, calc(100% - 294px)) !important;
}

/* Audio-timed subtitles occupy the lower-centre safe strip. */
html body .subtitle-panel {
  left:50%!important;right:auto!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
  width:min(660px,calc(100% - 240px))!important;max-height:70px!important;
  box-sizing:border-box;margin:0!important;padding:7px 12px!important;gap:3px!important;
  transform:translateX(-50%)!important;text-align:left!important;overflow:hidden!important;
  pointer-events:none!important;z-index:9!important;
}
html body .subtitle-panel strong {display:block;font-size:11px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .subtitle-panel span.narration-stream {
  display:block!important;-webkit-line-clamp:unset!important;max-height:2.9em!important;
  overflow:hidden!important;white-space:normal!important;font-size:13px!important;line-height:1.45!important;
  scroll-behavior:smooth;overflow-wrap:anywhere;
}
html body[data-device="mobile"] .subtitle-panel {left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:calc(100% - 260px)!important;max-width:560px!important;max-height:65px!important;padding:5px 10px!important}
html body[data-device="mobile"] .subtitle-panel strong {font-size:10px!important}
html body[data-device="mobile"] .subtitle-panel span.narration-stream {font-size:12px!important}
html body:has(.subtitle-panel[data-visible="true"]) #statusPanel[data-scene-loading="false"] {visibility:hidden!important}
html[data-tc-compact-hud="true"] body[data-device="mobile"] .subtitle-panel {max-height:61px!important}
html:not([data-tc-reward-open="true"]):not([data-tc-story-dialog="true"]) body:not(.tacheng-mini-game-mode):not(.baketu-task-exploring):not(.baketu-camel-flight):not(.tacheng-anjihai-rally) .subtitle-panel[data-visible="true"] {display:grid!important}
html:is([data-tc-reward-open="true"],[data-tc-story-dialog="true"]) .subtitle-panel {display:none!important}
html body[data-device="desktop"] #tunePanel.tune-panel {
  left:auto!important;right:max(12px,env(safe-area-inset-right))!important;
  top:70px!important;bottom:auto!important;width:min(292px,28%)!important;
  max-height:calc(100% - 174px)!important;
}

/* A single top action row, with compact perspective icons on shorter phones. */
.tc-mode-icon{display:block;width:22px;height:22px;flex:none;pointer-events:none}
/* The drone glyph has a denser silhouette than the other view icons. Keep it
   visually balanced in the same control slot on narrow phone screens. */
html body #controlbar.controlbar [data-control-mode="firstPerson"] .tc-mode-icon{width:18px;height:18px}
html[data-tc-compact-hud="true"] body[data-device="mobile"] #controlbar.controlbar [data-control-mode="firstPerson"] .tc-mode-icon{width:17px;height:17px}
html body #controlbar.controlbar [data-control-mode]{display:grid;place-items:center}
.tc-mode-label{display:none}
html[data-tc-compact-hud="true"] body[data-device="mobile"] #controlbar.controlbar {
 left:calc(var(--tc-left) + 126px)!important;right:auto!important;width:114px!important;justify-content:flex-start!important;gap:4px!important;
}
html[data-tc-compact-hud="true"] body[data-device="mobile"] #controlbar.controlbar [data-control-mode] {
 width:34px!important;min-width:34px!important;padding:0!important;display:grid!important;place-items:center;
}
html[data-tc-compact-hud="true"] body[data-device="mobile"] .tc-mode-icon{display:block}
html[data-tc-compact-hud="true"] body[data-device="mobile"] .tc-mode-label{display:none}
html[data-tc-compact-hud="true"] body[data-device="mobile"] .fps-actions {
 top:var(--tc-top)!important;left:calc(var(--tc-left) + 244px)!important;right:auto!important;width:max-content!important;
}
html[data-tc-compact-hud="true"] body[data-device="mobile"] #controlbar.controlbar .move-speed-control {
 position:fixed!important;top:var(--tc-top)!important;right:var(--tc-right)!important;
}
html[data-tc-compact-hud="true"] body[data-device="mobile"] .audio-toggle{padding:0 7px!important}

/* Explorer count sits on the title row; the old progress line is no longer used. */
html body #travelStoryOpen strong {display:flex;align-items:center;gap:6px;white-space:nowrap}
html body #travelStoryOpen .travelStoryCount {font-size:.92em;color:#f6d777;font-weight:800;letter-spacing:.02em}

html body #controlbar.controlbar [data-control-mode][hidden],
html[data-tc-compact-hud="true"] body[data-device="mobile"] #controlbar.controlbar [data-control-mode][hidden] {display:none!important}

/* Center the quality choices beneath the quality chip and give the label and chevron breathing room. */
html body[data-device="mobile"] .tune-group-basic {position:relative!important}
html body[data-device="mobile"] .tune-group-basic > summary {padding-left:8px!important;padding-right:8px!important;gap:4px!important}
html body[data-device="mobile"] .tune-group-basic > summary::after {margin-left:0!important;border-top:0!important;border-left:0!important;border-radius:0!important}
html body[data-device="mobile"] .tune-group-basic[open] #qualityOptions {position:absolute!important;top:calc(100% + 4px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;z-index:30!important}

/* Show five region rows; the rest remain available through vertical touch/scroll. */
html body .scene-menu-list {
  height:147px!important;
  max-height:147px!important;
  padding:0!important;
  gap:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:none;
}
html body .scene-menu-list button {
  box-sizing:border-box!important;
  min-height:44px!important;
  height:44px!important;
  max-height:44px!important;
  touch-action:none;
}


/* Separate vertical flight from planar joystick movement; long stick deflection runs automatically. */
html body[data-device="mobile"] .mobile-pad[data-active="true"] .sprint-button { display: none !important; }
html body[data-device="mobile"]:not(.baketu-task-height-lock) .mobile-pad[data-active="true"][data-mode="firstPerson"] .jump-button,
html body[data-device="mobile"]:not(.baketu-task-height-lock) .mobile-pad[data-active="true"][data-mode="firstPerson"] #descendButton { display: block !important; width: 52px; height: 52px; font-size: 18px; }
html body[data-device="mobile"] .mobile-pad[data-active="true"][data-mode="firstPerson"] .jump-button { right: calc(max(22px, env(safe-area-inset-right)) + 62px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 34px); }
html body[data-device="mobile"] .mobile-pad[data-active="true"][data-mode="firstPerson"] #descendButton { right: max(22px, env(safe-area-inset-right)); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 34px); }

/* Third person uses the same action slot for a jump. Keep the first-person
   vertical flight controls out of this mode so the right-hand button cannot
   be mistaken for descend. */
html body[data-device="mobile"]:not(.baketu-task-height-lock) .mobile-pad[data-active="true"][data-mode="thirdPerson"] #jumpButton {
  display: block !important;
  right: max(22px, env(safe-area-inset-right));
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 34px);
  width: 52px;
  height: 52px;
  font-size: 18px;
}
html body[data-device="mobile"] .mobile-pad[data-active="true"][data-mode="thirdPerson"] #descendButton {
  display: none !important;
}