/* Phone version of the 2027 red-and-gold ceremony theme. */
:root {
  --bg: #700d10;
  --gold: #f2ce86;
  --gold-bright: #ffe9b4;
  --text: #fff5e3;
  --dim: #efd8b7;
}

body {
  background: #720e11;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
}
body::before {
  background-image: linear-gradient(180deg, rgba(47, 4, 8, .06), rgba(47, 4, 8, .14)),
    var(--bgimg, url('/assets/h5-gala-2027-v1.webp'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.brand { margin-bottom: 20px; }
.h5-year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffe1a0;
  font-size: 11px;
  letter-spacing: .22em;
}
.h5-year::before,
.h5-year::after {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #edcb8a99);
}
.h5-year::after { transform: rotate(180deg); }
.brand h1 {
  margin: 9px auto 0;
  width: 100%;
  max-width: 410px;
  background: none;
  color: #ffe9b4;
  line-height: 0;
  letter-spacing: 0;
}
.h5-theme-art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px #46090a99);
}
.h5-theme-fallback { display: none; }
.art-error .h5-theme-art { display: none; }
.art-error .h5-theme-fallback { display: block; font-size: 25px; line-height: 1.5; }
.brand #pageTitle { margin-top: 6px; font-size: 13px; letter-spacing: .22em; color: #ffe5bd; }
.steps { padding: 10px 0; margin-bottom: 15px; }
.step { color: #d5ad8f; }
.step.on { color: #fff0c5; }

.card {
  background: linear-gradient(155deg, rgba(99, 15, 18, .64), rgba(63, 7, 13, .74));
  border-color: #f4d39260;
  border-radius: 16px;
  box-shadow: 0 14px 32px #35050933, inset 0 1px 0 #fff0d018;
  backdrop-filter: none;
}
.card h2 { letter-spacing: .16em; color: #ffe8b5; }
.field input,
.num-item input {
  background: rgba(59, 6, 12, .87);
  border-color: #edcc8f60;
  color: #fff3d7;
}
.field input::placeholder,
.num-item input::placeholder { color: #d9b49588; }
.field label,
.num-item label { color: #ffe7c6; }
.btn {
  background: linear-gradient(180deg, #fff0be 0%, #f3cf81 50%, #d7a348 100%);
  box-shadow: 0 7px 18px #d89e362b;
  color: #54230e;
  letter-spacing: .2em;
}
.btn.ghost { background: rgba(56, 6, 12, .26); border-color: #f0cf8766; color: #f3dbb8; }
.tip { color: #f2d4ad; text-shadow: 0 1px 4px #4e090e; }
.identity { border-bottom-color: #f2ce8636; }
.poster {
  background: linear-gradient(180deg, #f1ca8030, #f1ca8007), rgba(64, 7, 13, .7);
  border-color: #f1d38b80;
}
.metric { background: rgba(59, 5, 11, .65); }
.success h2 { color: #ffe9b4; }
.success .sub { color: #f4d5a5; }
.blessing-invite { border-top-color: #efcd8a66; }
.danmaku-card textarea { background: rgba(59, 6, 12, .86); border-color: #edcc8f66; }
.danmaku-rule { color: #edd3af; }
.danmaku-presets button { background: #eac47516; border-color: #eac47570; color: #ffe1a0; }
.dialog { background: linear-gradient(180deg, #73171d, #3e090f); }

@media (max-height: 700px) {
  body { padding-top: calc(15px + env(safe-area-inset-top, 0px)); }
  .brand { margin-bottom: 12px; }
  .brand h1 { max-width: 330px; }
  .brand #pageTitle { margin-top: 2px; }
  .steps { padding: 5px 0; margin-bottom: 12px; }
}