/* ===== 婚礼邀请 · 8-bit 像素样式 =====
   逻辑分辨率 256x448。--s = 每个逻辑像素在屏幕上的 CSS px 数。
   所有尺寸都用 calc(var(--u) * N)，保证 DOM UI 和 canvas 像素网格对齐。 */

@font-face {
  font-family: "Zpix";
  src: url("../assets/fonts/zpix.woff2") format("woff2");
  font-display: swap;
}

:root {
  --s: 2.4;   /* canvas 缩放，JS 覆盖 */
  --u: 1.5;   /* DOM UI 单位 = 舞台宽/256，JS 覆盖 */
  --ink: #101010;
  --paper: #F7EFD8;
  --wood: #A9713C;
  --wood-d: #6E4321;
  --sky: #5C94FC;
  --gold: #F8C838;
  --rose: #E8788C;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #1b1a24;
  font-family: "Zpix", "Courier New", monospace;
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: none;
}

/* 4:7 舞台，居中 letterbox */
#stage {
  position: relative;
  width: 100%; height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--sky);
  /* 微信/iOS：长按不弹「保存图片/复制」菜单，否则会打断跳跃 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* #stage 上禁了选中，输入框要单独放开，否则微信里没法长按粘贴 */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

.screen {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
}
.screen.on { display: block; }

/* ---------- 通用像素组件 ---------- */
.panel {
  position: relative;
  background: var(--paper);
  box-shadow:
    0 0 0 calc(var(--u) * 1px) var(--ink),
    0 0 0 calc(var(--u) * 4px) var(--wood),
    0 0 0 calc(var(--u) * 5px) var(--wood-d),
    0 0 0 calc(var(--u) * 6px) var(--ink);
  padding: calc(var(--u) * 8px) calc(var(--u) * 9px);
  margin: calc(var(--u) * 8px) calc(var(--u) * 14px);
}

.btn {
  display: block;
  font-family: inherit;
  font-size: calc(var(--u) * 13px);
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  padding: calc(var(--u) * 8px) calc(var(--u) * 6px) calc(var(--u) * 9px);
  cursor: pointer;
  box-shadow:
    0 0 0 calc(var(--u) * 1px) var(--ink),
    0 0 0 calc(var(--u) * 4px) var(--wood),
    0 0 0 calc(var(--u) * 5px) var(--ink),
    0 calc(var(--u) * 4px) 0 calc(var(--u) * 5px) var(--wood-d);
  transition: transform .04s steps(1);
}
.btn:active {
  transform: translateY(calc(var(--u) * 3px));
  box-shadow:
    0 0 0 calc(var(--u) * 1px) var(--ink),
    0 0 0 calc(var(--u) * 4px) var(--wood-d),
    0 0 0 calc(var(--u) * 5px) var(--ink);
}
.btn-wide { width: calc(100% - var(--u) * 28px); margin: calc(var(--u) * 14px) auto calc(var(--u) * 20px); }

/* ---------- 加载 ---------- */
#sc-load { background: var(--ink); }
.load-box { position: absolute; left: 0; right: 0; top: 42%; text-align: center; }
.load-title {
  color: var(--paper); font-size: calc(var(--u) * 14px);
  letter-spacing: calc(var(--u) * 2px); margin-bottom: calc(var(--u) * 10px);
}
.load-bar {
  width: calc(var(--u) * 160px); height: calc(var(--u) * 10px);
  margin: 0 auto; background: #2c2c38;
  box-shadow: 0 0 0 calc(var(--u) * 2px) var(--paper);
}
.load-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .12s steps(4); }
.load-pct { color: var(--gold); font-size: calc(var(--u) * 9px); margin-top: calc(var(--u) * 8px); }

/* ---------- 开始界面 ---------- */
.start-bg {
  position: absolute; inset: 0;
  background: var(--sky) center top / cover no-repeat;
  image-rendering: pixelated;
}
.start-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0 22%, rgba(120,170,90,.30) 45%, rgba(110,160,85,.50) 100%);
}
.start-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--u) * 16px);
}
.start-hero { text-align: center; padding-top: calc(var(--u) * 26px); }
.start-hero canvas {
  display: block; margin: 0 auto;
  width: calc(var(--u) * 104px); height: auto;
  image-rendering: pixelated;
}

.dialog { text-align: center; font-size: calc(var(--u) * 11px); line-height: 1.7; white-space: pre-line; }

.sec-title {
  margin: calc(var(--u) * 12px) 0 calc(var(--u) * 6px);
  text-align: center;
  font-size: calc(var(--u) * 18px);
  font-weight: normal;
  color: var(--paper);
  letter-spacing: calc(var(--u) * 2px);
  text-shadow:
    calc(var(--u) * 2px) 0 0 var(--ink), calc(var(--u) * -2px) 0 0 var(--ink),
    0 calc(var(--u) * 2px) 0 var(--ink), 0 calc(var(--u) * -2px) 0 var(--ink),
    calc(var(--u) * 2px) calc(var(--u) * 2px) 0 var(--ink),
    calc(var(--u) * -2px) calc(var(--u) * 2px) 0 var(--ink),
    calc(var(--u) * 4px) calc(var(--u) * 4px) 0 rgba(16,16,16,.35);
}

.info { margin: calc(var(--u) * 4px) calc(var(--u) * 14px); }
.info-row {
  display: flex; align-items: flex-start; gap: calc(var(--u) * 6px);
  margin: calc(var(--u) * 5px) 0;
  font-size: calc(var(--u) * 12px); line-height: 1.5;
}
.info-row-col { flex-direction: column; gap: calc(var(--u) * 3px); }
.info-k {
  flex: none;
  color: var(--paper);
  letter-spacing: calc(var(--u) * 1px);
  text-shadow:
    calc(var(--u) * 2px) 0 0 var(--ink), calc(var(--u) * -2px) 0 0 var(--ink),
    0 calc(var(--u) * 2px) 0 var(--ink), 0 calc(var(--u) * -2px) 0 var(--ink);
}
.info-v { color: var(--ink); }
.info-v b {
  font-weight: normal;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 calc(var(--u) * 1px) rgba(255,255,255,.75);
}
.info-v .hl { background: var(--gold); box-shadow: 0 0 0 calc(var(--u) * 1px) var(--gold); }
.info-v .npc-face {
  display: inline-block; vertical-align: -0.28em;
  width: calc(var(--u) * 16px); height: calc(var(--u) * 16px);
  margin-right: calc(var(--u) * 2px);
  image-rendering: pixelated;
}

.map { display: block; padding: calc(var(--u) * 3px); text-decoration: none; }
.map img {
  display: block; width: 100%; height: auto;
  background: #dfe7d8;
}
.map-hint {
  position: absolute; right: calc(var(--u) * 6px); bottom: calc(var(--u) * 6px);
  font-size: calc(var(--u) * 9px); color: var(--paper);
  background: rgba(16,16,16,.72); padding: calc(var(--u) * 2px) calc(var(--u) * 4px);
}

.swatches {
  display: flex; justify-content: center; gap: calc(var(--u) * 8px);
  margin: calc(var(--u) * 6px) 0 calc(var(--u) * 2px);
}
.swatches i {
  width: calc(var(--u) * 18px); height: calc(var(--u) * 18px);
  box-shadow: 0 0 0 calc(var(--u) * 2px) var(--ink), 0 0 0 calc(var(--u) * 3px) rgba(255,255,255,.6);
}

.btn-row {
  display: flex; justify-content: center; gap: calc(var(--u) * 12px);
  margin: calc(var(--u) * 20px) calc(var(--u) * 10px) calc(var(--u) * 6px);
  flex-wrap: wrap;
}
.start-foot {
  text-align: center; font-size: calc(var(--u) * 9px);
  color: var(--paper); opacity: .85; margin-top: calc(var(--u) * 12px);
  text-shadow: 0 calc(var(--u) * 1px) 0 var(--ink);
}

/* ---------- 游戏 ---------- */
#sc-game { background: var(--sky); }
/* 舞台现在是满高的，游戏画面 4:7 居中，上下留边保持原来的深色 */
#sc-game { background: #1b1a24; }

#cv {
  position: absolute; left: 50%;   /* top 由 Game.resize 按舞台高度算 */
  transform: translateX(-50%);
  /* HD 像素风：canvas 本身就是高分辨率，交给浏览器平滑缩放到屏幕，
     这里绝对不能用 image-rendering: pixelated，否则会把画面重新搞糙 */
  touch-action: manipulation;
}
.mini-btn {
  position: absolute; right: calc(var(--u) * 8px); top: calc(var(--u) * 8px);
  z-index: 5;
  width: calc(var(--u) * 22px); height: calc(var(--u) * 22px);
  font-family: inherit; font-size: calc(var(--u) * 12px);
  color: var(--paper); background: rgba(16,16,16,.55);
  border: calc(var(--u) * 2px) solid var(--paper);
  cursor: pointer; padding: 0;
}
.mini-btn.off { color: #8a8a8a; }
.tap-hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 46px);
  z-index: 4; text-align: center;
  font-size: calc(var(--u) * 11px); color: var(--paper);
  text-shadow:
    0 calc(var(--u) * 2px) 0 var(--ink), calc(var(--u) * 2px) 0 0 var(--ink),
    calc(var(--u) * -2px) 0 0 var(--ink), 0 calc(var(--u) * -2px) 0 var(--ink);
  animation: blink 1.1s steps(1, end) infinite;
  pointer-events: none;
}
.tap-hint.hide { display: none; }
@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: .12 } }

/* ---------- RSVP ---------- */
#sc-rsvp { background: #6EA84A; }
#sc-rsvp::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky) 0, var(--sky) 28%, #7EC850 28%, #6EA84A 100%);
}
.rsvp-scroll {
  position: absolute; inset: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--u) * 18px);
}
.rsvp-head { text-align: center; }
.rsvp-h1 { font-size: calc(var(--u) * 16px); margin-bottom: calc(var(--u) * 5px); }
.rsvp-h2 { font-size: calc(var(--u) * 10px); color: #6b5a3e; }

.form { text-align: left; }
.fld { display: block; margin: calc(var(--u) * 9px) 0; }
.fld-k { display: block; font-size: calc(var(--u) * 11px); margin-bottom: calc(var(--u) * 4px); }
.fld-k i { color: #D0342C; font-style: normal; }
.fld input, .fld textarea {
  display: block; width: 100%;
  /* 不用 inherit（Zpix）：字体子集化后宾客输入的生僻字会变豆腐块 */
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(var(--u) * 11px);
  color: var(--ink); background: #FFFDF5;
  border: 0; outline: 0;
  padding: calc(var(--u) * 6px);
  box-shadow: inset 0 0 0 calc(var(--u) * 2px) var(--ink);
  resize: none;
}
.fld input::placeholder, .fld textarea::placeholder { color: #b3a98f; }
.fld input.bad, .fld textarea.bad { box-shadow: inset 0 0 0 calc(var(--u) * 2px) #D0342C; }

.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 5px); }
.chip {
  font-family: inherit; font-size: calc(var(--u) * 10px);
  color: var(--ink); background: #FFFDF5;
  border: 0; padding: calc(var(--u) * 5px) calc(var(--u) * 7px);
  box-shadow: inset 0 0 0 calc(var(--u) * 2px) var(--ink);
  cursor: pointer;
}
.chip.on {
  background: var(--gold);
  box-shadow: inset 0 0 0 calc(var(--u) * 2px) var(--ink), 0 0 0 calc(var(--u) * 2px) rgba(16,16,16,.22);
}
.chips.bad .chip { box-shadow: inset 0 0 0 calc(var(--u) * 2px) #D0342C; }

.err { min-height: calc(var(--u) * 14px); color: #C0261E; font-size: calc(var(--u) * 10px); text-align: center; }
.fld.gone { display: none; }

/* ---------- 感谢 ---------- */
#sc-thanks { background: var(--sky); }
.thanks-scroll { position: absolute; inset: 0; overflow-y: auto; padding-top: calc(var(--u) * 24px); }
.thanks-photo { margin: 0 calc(var(--u) * 14px); }
.thanks-photo img {
  display: block; width: 100%; height: calc(var(--u) * 120px);
  object-fit: cover; image-rendering: pixelated;
  background: #cfc4a8;
  box-shadow: 0 0 0 calc(var(--u) * 3px) var(--paper), 0 0 0 calc(var(--u) * 5px) var(--ink);
}
.thanks-box { text-align: center; }
.thanks-h1 { font-size: calc(var(--u) * 17px); margin-bottom: calc(var(--u) * 8px); }
.thanks-t { font-size: calc(var(--u) * 11px); line-height: 1.9; white-space: pre-line; }

/* 桌面端给舞台加个边框 */
@media (min-aspect-ratio: 3/5) {
  #stage { box-shadow: 0 0 0 2px #000, 0 0 40px rgba(0,0,0,.6); }
}