/*! Hái Lộc Thánh – © hailocthanh.com. Bảo lưu mọi quyền. All rights reserved. */
html, body { margin: 0; }
body.play { background: #360206; font-family: "Be Vietnam Pro", system-ui, sans-serif; }
[data-theme="neutral"] body.play { background: #0d1b2e; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.play-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  pointer-events: none;
}
.play-bar > * { pointer-events: auto; }
.play-bar__back {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px;
  color: #fff4dc; text-decoration: none; font-size: 14px; font-weight: 500;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px);
}
.play-bar__back svg { width: 18px; height: 18px; }
.play-bar__parish {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto;
  padding: 4px 14px 4px 4px; border-radius: 999px; color: #fff4dc; font-size: 14px; font-weight: 600;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px);
}
.play-bar__parish img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #fff; }
.play-bar__parish span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.play-bar__parish:not(:has(img)) { padding-left: 14px; }
.play-bar__name input {
  width: min(260px, 52vw); padding: 9px 14px; border-radius: 999px; font: inherit; font-size: 14px;
  color: #fff4dc; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .25); outline: none;
  backdrop-filter: blur(6px);
}
.play-bar__name input::placeholder { color: rgba(255, 244, 220, .65); }
.play-bar__name input:focus { border-color: #f1c35b; }

/* The fixed bar overlays the effect: push the intro and the tree heading below it (height set by play.js). */
.play .lt-intro { padding-top: calc(var(--play-bar-h, 60px) + 2vh); }
.play .lt-scene__head { padding-top: calc(var(--play-bar-h, 60px) + 4px); }

/* Parish page: name field moved into the intro, above the start button. */
.play-name--intro { display: grid; gap: 8px; width: min(340px, 86vw); margin: -1rem auto 1.8rem; }
.play-name--intro > span { font-size: 14px; font-weight: 600; color: #f1c35b; }
.play-name--intro input {
  width: 100%; box-sizing: border-box; padding: 13px 18px; border-radius: 999px; font: inherit; font-size: 16px; text-align: center;
  color: #fff4dc; background: rgba(0, 0, 0, .3); border: 1px solid rgba(241, 195, 91, .55); outline: none;
}
.play-name--intro input::placeholder { color: rgba(255, 244, 220, .6); }
.play-name--intro input:focus { border-color: #f1c35b; box-shadow: 0 0 0 3px rgba(241, 195, 91, .25); }

@media (max-width: 560px) {
  .play-bar { gap: 8px; }
  .play-bar__back { padding: 8px; }
  .play-bar__back span { display: none; }
  .play-bar__name, .play-bar__parish { flex: 1; min-width: 0; margin: 0; }
  .play-bar__name input { width: 100%; box-sizing: border-box; font-size: 16px; }
}

.play-error {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2000;
  max-width: min(92vw, 440px); margin: 0; padding: 12px 18px; transform: translateX(-50%);
  border-radius: 14px; background: #fff4dc; color: #5a1a10; font-size: 15px; text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}