/* 沉浸式宣发页：与数据验证页 (style.css) 完全独立，互不影响。 */
* { box-sizing: border-box; }

/* 作者样式里的 display:flex 会压过 UA 的 [hidden]{display:none}，
   style.css 里踩过这个坑（全屏不透明遮罩盖住 canvas），这里同样要兜住。 */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  /* 移动端下拉会触发浏览器 pull-to-refresh / iOS 橡皮筋，必须显式关掉。 */
  overscroll-behavior: none;
  background: #06101f; color: #dce8f2;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* touch-action:none 让 canvas 独占手势，浏览器不会再把它当滚动并派发
   pointercancel（否则环视拖到一半就断，且容易触发下拉刷新）。 */
#stage, #stage canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none;
}

/* 顶部与底部压暗，让 HUD 文字在明亮星空上仍可读（2.png 的层次感）。 */
body::before, body::after {
  content: ""; position: fixed; left: 0; right: 0; pointer-events: none; z-index: 2;
}
body::before {
  top: 0; height: 30vh;
  background: linear-gradient(180deg, rgba(3, 9, 20, .62), rgba(3, 9, 20, 0));
}
body::after {
  bottom: 0; height: 22vh;
  background: linear-gradient(0deg, rgba(3, 9, 20, .66), rgba(3, 9, 20, 0));
}

#loading {
  position: fixed; inset: 0; z-index: 90; display: grid; place-content: center;
  gap: 12px; text-align: center; background: #06101f; transition: opacity .7s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
.loading-title { font-size: 22px; letter-spacing: .28em; font-weight: 300; }
.loading-sub { font-size: 12px; letter-spacing: .18em; color: #7f9bb4; }
.loading-bar { width: 220px; height: 2px; margin: 14px auto 0; background: #1b3048; overflow: hidden; }
.loading-bar i { display: block; width: 40%; height: 100%; background: #e8b96a; animation: sweep 1.3s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

#hud { position: fixed; z-index: 5; top: 34px; left: 42px; pointer-events: none; }
#hud .eyebrow { font-size: 10px; letter-spacing: .34em; color: #9fc0d8; }
#hud .eyebrow span { margin: 0 8px; opacity: .5; }
#hud .series { margin-top: 6px; font-size: 9px; letter-spacing: .3em; color: #6f8da6; }
#hud h1 {
  margin: 16px 0 0; font-size: 40px; font-weight: 300; letter-spacing: .22em;
  color: #f2f6fa; text-shadow: 0 2px 18px rgba(6, 20, 40, .9);
}
#hud .sub { margin: 6px 0 0; font-size: 13px; letter-spacing: .18em; color: #c8d9e8; }
#hud .from { margin: 20px 0 0; font-size: 10px; letter-spacing: .1em; color: #7d9bb5; }

#thumb {
  position: fixed; z-index: 5; top: 30px; right: 38px; width: 118px;
  border: 1px solid rgba(180, 210, 235, .35); padding: 4px;
  background: rgba(6, 16, 31, .55); text-decoration: none; color: #b9d0e3;
  transition: border-color .25s ease, transform .25s ease;
}
#thumb:hover { border-color: #e8b96a; transform: translateY(2px); }
#thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
#thumb span { display: block; margin-top: 4px; font-size: 8px; letter-spacing: .24em; text-align: center; }

#controls {
  position: fixed; z-index: 5; right: 38px; top: 190px; width: 172px;
  padding: 14px; background: rgba(6, 16, 31, .58);
  border: 1px solid rgba(150, 190, 220, .16); backdrop-filter: blur(6px);
}
.ctl-title { font-size: 9px; letter-spacing: .26em; color: #8fb0ca; margin-bottom: 8px; }
.ctl-title.mt { margin-top: 16px; }
#world-select, #ceremony-select {
  width: 100%; padding: 6px 4px; font: inherit; font-size: 11px;
  color: #dce8f2; background: rgba(30, 56, 82, .65);
  border: 1px solid rgba(150, 190, 220, .28); cursor: pointer;
}
#world-select:hover, #world-select:focus,
#ceremony-select:hover, #ceremony-select:focus { border-color: #e8b96a; outline: none; }
#world-select option, #ceremony-select option { background: #0a1a2b; color: #dce8f2; }
#ceremony-select { margin-top: 8px; }
.ctl-row { display: flex; gap: 6px; }
.ctl-row button {
  flex: 1; padding: 6px 0; font: inherit; font-size: 11px; letter-spacing: .1em;
  color: #b7cfe3; background: rgba(30, 56, 82, .45);
  border: 1px solid rgba(150, 190, 220, .22); cursor: pointer; transition: all .2s ease;
}
.ctl-row button:hover { border-color: #e8b96a; }
.ctl-row button.active { color: #0a1424; background: #e8b96a; border-color: #e8b96a; }
.ctl-check { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #b7cfe3; margin: 7px 0; cursor: pointer; }
.ctl-check input { accent-color: #e8b96a; width: 12px; height: 12px; }
#controls .note { margin-top: 14px; font-size: 9px; line-height: 1.7; color: #6f8da6; }

#credits {
  position: fixed; z-index: 5; left: 42px; bottom: 30px;
  font-size: 9px; line-height: 2; letter-spacing: .12em; color: #86a3bc;
  pointer-events: none;
}
#credits a { color: #e8b96a; text-decoration: none; pointer-events: auto; }
#credits a:hover { text-decoration: underline; }
#credits span { margin: 0 6px; opacity: .5; }
#hint {
  position: fixed; z-index: 5; right: 38px; bottom: 30px;
  font-size: 10px; letter-spacing: .12em; color: #86a3bc; pointer-events: none;
}

#error {
  position: fixed; inset: 0; z-index: 80; display: grid; place-content: center;
  background: rgba(6, 16, 31, .94); color: #ffb4a8; font-size: 14px;
  letter-spacing: .08em; text-align: center; padding: 40px;
}
#inspect {
  position: fixed; z-index: 10; left: 42px; top: 50%; transform: translateY(-50%);
  width: 250px; padding: 16px; background: rgba(6, 16, 31, .86);
  border: 1px solid rgba(232, 185, 106, .4);
}
.inspect-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #e8b96a; }
.inspect-head button { background: none; border: 0; color: #9fb8cd; font-size: 18px; cursor: pointer; }
.inspect-tag { margin-top: 8px; font-size: 10px; letter-spacing: .18em; color: #8fb0ca; }
.inspect-hint { margin-top: 10px; font-size: 11px; line-height: 1.7; color: #c8d9e8; }

/* 棋盘演出：宿主派发 6 类事件，这里只做横幅表现。
   pointer-events:none 保证不吞掉 canvas 拖拽 / touchmove，也不需要加进
   starry.js 的 touchmove 白名单。 */
#ceremony {
  position: fixed; z-index: 20; left: 50%; top: 42%;
  width: min(560px, calc(100vw - 40px));
  transform: translate(-50%, calc(-50% + 18px));
  text-align: center; pointer-events: none; opacity: 0;
  transition: opacity .42s ease, transform .42s ease;
  --ceremony-accent: #e8b96a;
  --ceremony-duration: 2200ms;
}
#ceremony::before {
  content: ""; position: absolute; inset: -110px -80px; z-index: -1;
  /* 12 个画境里有浅灰白天空（马尔利港 / 阿尔让特伊），暗衬保证文字可读。 */
  background: radial-gradient(ellipse at center,
    rgba(6, 16, 31, .40) 0%, rgba(6, 16, 31, .18) 52%, transparent 82%);
}
#ceremony.show { opacity: 1; transform: translate(-50%, -50%); }
.ceremony-kicker {
  font-size: 9px; letter-spacing: .34em; color: var(--ceremony-accent);
  text-shadow: 0 1px 8px rgba(6, 20, 40, .9);
}
.ceremony-title {
  margin-top: 10px; font-size: clamp(28px, 5vw, 46px); font-weight: 300;
  letter-spacing: .16em; color: #f6f9fc;
  text-shadow: 0 0 26px var(--ceremony-accent), 0 2px 18px rgba(6, 20, 40, .9);
}
#ceremony.show .ceremony-title { animation: ceremonyTitle .85s ease-out both; }
.ceremony-detail {
  margin-top: 10px; font-size: 11px; letter-spacing: .14em; color: #dce8f2;
  text-shadow: 0 1px 10px rgba(6, 20, 40, .95);
}
.ceremony-meter {
  width: 180px; height: 2px; margin: 18px auto 0;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
.ceremony-meter i {
  display: block; width: 100%; height: 100%; transform-origin: left center;
  background: var(--ceremony-accent);
}
#ceremony.show .ceremony-meter i {
  animation: ceremonyMeter var(--ceremony-duration) linear both;
}
#ceremony[data-event="round_lose"] .ceremony-title { filter: saturate(.65); }
@keyframes ceremonyTitle {
  from { letter-spacing: .52em; opacity: 0; }
  to { letter-spacing: .16em; opacity: 1; }
}
@keyframes ceremonyMeter {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 820px) {
  #hud { top: 22px; left: 22px; }
  #hud h1 { font-size: 28px; }
  #thumb { right: 20px; top: 22px; width: 82px; }
  #controls { right: 20px; top: 140px; width: 142px; }
  #credits { left: 22px; bottom: 20px; }
  #hint { display: none; }
}

/* 竖屏手机 / 窄屏：桌面那套「左侧 HUD + 右侧竖排控件」会把画面挤成一条，
   改成顶部紧凑标题 + 底部横向控件条，并避开 iOS home indicator。 */
@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  #hud { top: calc(12px + env(safe-area-inset-top)); left: 14px; right: 84px; }
  #hud .eyebrow { font-size: 8px; letter-spacing: .2em; }
  #hud .series, #hud .from { display: none; }
  #hud h1 { margin-top: 8px; font-size: 22px; letter-spacing: .12em; }
  #hud .sub { font-size: 10px; letter-spacing: .1em; }

  #thumb {
    top: calc(12px + env(safe-area-inset-top)); right: 12px;
    width: 58px; padding: 3px;
  }
  #thumb span { display: none; }

  #controls {
    top: auto; bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px; right: 10px; width: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px; background: rgba(6, 16, 31, .74);
  }
  #controls .ctl-title, #controls .note { display: none; }
  #world-select, #ceremony-select {
    flex: 1 1 calc(50% - 4px); min-width: 0;
    min-height: 38px; padding: 9px 8px; font-size: 13px;
  }
  #ceremony-select { margin-top: 0; }
  .ctl-row { flex: 0 0 auto; gap: 8px; }
  .ctl-row button { min-height: 36px; padding: 8px 12px; font-size: 12px; }
  .ctl-check { margin: 0; font-size: 11px; min-height: 36px; }
  .ctl-check input { width: 16px; height: 16px; }

  #credits, #hint { display: none; }
  #inspect {
    left: 10px; right: 10px; width: auto; top: auto;
    bottom: calc(96px + env(safe-area-inset-bottom)); transform: none;
  }
  .loading-title { font-size: 17px; }
  .loading-sub { font-size: 10px; }
  #ceremony { top: 40%; width: calc(100vw - 32px); }
  .ceremony-title { font-size: 26px; }
  .ceremony-detail { font-size: 10px; }
  .ceremony-meter { width: 140px; }
}

/* 横屏手机：高度很小，把竖排控件压回紧凑尺寸并隐藏次要文字。 */
@media (max-height: 480px) and (orientation: landscape) {
  #hud { top: 12px; left: 18px; }
  #hud h1 { margin-top: 8px; font-size: 22px; }
  #hud .from, #hud .series { display: none; }
  #thumb { top: 12px; right: 18px; width: 58px; }
  #thumb span { display: none; }
  #controls {
    top: 76px; right: 18px; width: 148px; padding: 8px;
    max-height: calc(100vh - 86px); overflow-y: auto;
  }
  #controls .note { display: none; }
  #world-select, #ceremony-select {
    padding: 4px 3px; font-size: 10px; min-height: 26px;
  }
  #ceremony-select { margin-top: 4px; }
  #ceremony { top: 46%; width: min(420px, calc(100vw - 40px)); }
  .ceremony-title { font-size: 22px; }
  .ceremony-detail { font-size: 9px; }
  .ceremony-meter { margin-top: 10px; }
  #credits, #hint { display: none; }
}