/* A calm, private ceremony: the interaction brings the emotion, not the chrome. */
.ceremony {
  width: min(100%, 620px);
  margin: 8px auto 28px;
  border: 1px solid #3c363d;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
  background: #1c1a20;
  box-shadow: 0 12px 28px #0000001f;
}

.ceremony:focus { outline: none; }
.ceremony:focus-visible { outline: 3px solid #ffaaa2; outline-offset: 4px; }
.ceremony-kicker { margin: 0 0 9px; color: #ff8b80; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.ceremony-title { max-width: 18ch; margin: 0 0 10px; color: #f8f6f4; font-size: clamp(29px, 8vw, 42px); line-height: .98; letter-spacing: -.06em; overflow-wrap: anywhere; }
.ceremony-copy { max-width: 46ch; margin: 0; color: #c9c1c3; font-size: 14px; line-height: 1.5; }

.ceremony-title-input {
  width: 100%; min-height: 48px; margin: 22px 0 18px;
  border: 1px solid #514a4f; border-radius: 12px; padding: 10px 13px;
  background: #211f24; color: #f8f6f4;
}
.ceremony-title-input::placeholder { color: #8d8588; }

.ceremony-tone,
.ceremony-awards {
  min-width: 0; margin: 0; border: 0; padding: 0;
}
.ceremony-tone { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.ceremony-tone legend,
.ceremony-awards legend { width: 100%; margin-bottom: 9px; color: #d9d1d2; font-size: 13px; font-weight: 760; }
.ceremony-tone label {
  display: inline-flex; min-height: 42px; align-items: center; gap: 8px;
  border: 1px solid #514a4f; border-radius: 999px; padding: 7px 13px;
  background: #211f24; color: #ded6d7; font-size: 13px; font-weight: 700;
}
.ceremony input[type="radio"], .ceremony input[type="checkbox"] { accent-color: #ff6b5e; }

.ceremony-awards { display: grid; gap: 8px; margin-bottom: 20px; }
.ceremony-award-option {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center;
  border: 1px solid #443e43; border-radius: 13px; padding: 12px;
  background: #211f24; color: #eee7e8; font-size: 14px; font-weight: 730; line-height: 1.25;
}
.ceremony-award-option:has(input:checked) { border-color: #b96059; background: #2a2024; }
.ceremony-organizer { grid-column: 2; color: #aaa1a4; font-size: 11px; font-weight: 550; }
.ceremony-organizer summary { cursor: pointer; }
.ceremony-organizer p { margin: 7px 0 0; color: #c9c1c3; line-height: 1.35; }

.ceremony button {
  min-height: 44px; border: 1px solid #514a4f; border-radius: 12px; padding: 10px 14px;
  background: #211f24; color: #f8f6f4; font-weight: 780; line-height: 1.2;
}
.ceremony button:not(:disabled):hover { border-color: #766b70; background: #29262c; }
.ceremony button:disabled { cursor: not-allowed; }
.ceremony button:focus-visible { outline: 3px solid #ffaaa2; outline-offset: 3px; }
.ceremony-start, .ceremony-reveal, .ceremony-export { width: 100%; border-color: #ff6b5e !important; background: #ff6b5e !important; color: #21171a !important; box-shadow: 0 8px 18px #ff6b5e22; }
.ceremony-back, .ceremony-ai { width: 100%; margin-top: 9px; }
.ceremony-empty { margin: 14px 0 0; color: #c9a38a; font-size: 13px; line-height: 1.4; }

.ceremony-stage, .ceremony-finale { min-height: min(480px, calc(100vh - 72px)); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.ceremony-stage .ceremony-back, .ceremony-finale .ceremony-back { width: auto; margin: 0 0 22px; align-self: flex-start; }
.ceremony-stage .ceremony-title, .ceremony-finale .ceremony-title { max-width: 15ch; margin-right: auto; margin-left: auto; }
.ceremony-stage .ceremony-copy, .ceremony-finale .ceremony-copy { margin-right: auto; margin-left: auto; }
.ceremony-emoji { margin: 22px 0 8px; font-size: 46px; line-height: 1; }
.ceremony-recipient { min-height: 37px; margin: 15px 0 7px; color: #f8f6f4; font-size: clamp(27px, 8vw, 40px); font-weight: 850; line-height: .95; letter-spacing: -.06em; overflow-wrap: anywhere; }
.ceremony-stage:not(.is-revealed) .ceremony-recipient { color: #9c9497; letter-spacing: .07em; }
.ceremony-value { margin: 5px 0 15px; color: #ff8b80; font-size: clamp(26px, 7vw, 37px); font-weight: 900; line-height: 1; letter-spacing: -.06em; overflow-wrap: anywhere; }
.ceremony-reveal { max-width: 280px; margin: 20px auto 0; }
.ceremony-card-action { width: 100%; margin: 20px 0 0; }
.ceremony-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 28px; }
.ceremony-controls button { min-width: 0; }
.ceremony-progress { min-width: 48px; margin: 0; color: #aaa1a4; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ceremony-intro .ceremony-next { width: min(100%, 280px); margin: 26px auto 0; }
.ceremony-finale { background: #211f24; }
.ceremony-finale .ceremony-export { margin-top: 25px; }
.ceremony-replay, .ceremony-edit { width: 100%; margin-top: 9px; }

@media (max-width: 360px) {
  .ceremony { margin-top: 0; border-radius: 16px; padding: 18px 14px; }
  .ceremony-title { font-size: 29px; }
  .ceremony-stage, .ceremony-finale { min-height: min(440px, calc(100vh - 48px)); }
  .ceremony-controls { gap: 6px; }
  .ceremony-controls button { padding: 9px 7px; font-size: 12px; }
}