/* BOF connected-page layout recovered from the supplied HTML reference. */
body.groovy-nfc-page.groovy-nfc-bof {
  background: #fff1d3 url('/assets/groovy/cream-paper-v2.webp') repeat;
  background-size: 455px auto;
  color: #381c0e;
}
.groovy-nfc-bof [hidden] { display: none !important; }
.groovy-nfc-bof .nfc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.groovy-nfc-bof .nfc-bof-hero { width: 100%; max-width: 520px; margin: 0 auto; overflow: hidden; }
.groovy-nfc-bof .nfc-bof-hero > img { display: block; width: 100%; height: auto; }
.groovy-nfc-page.groovy-nfc-bof .acte2 {
  width: 100%; max-width: 550px; margin: 0 auto; padding: 16px 20px 0;
}
.groovy-nfc-page.groovy-nfc-bof .acte3 {
  width: 100%; max-width: 550px; margin: 0 auto; padding: 0 20px;
}
.groovy-nfc-bof .chien-block {
  display: flex; align-items: flex-start; gap: 12px; margin: 16px auto 34px;
  opacity: 1; transform: none;
}
.groovy-nfc-bof .chien-avatar {
  flex: 0 0 23px; width: 23px; height: 26px; margin-top: 15px;
  padding: 0; border: 0; background: transparent; color: #8b7960;
}
.groovy-nfc-bof .chien-avatar svg { display: block; width: 23px; height: 23px; }
.groovy-nfc-page.groovy-nfc-bof .chien-bubble {
  flex: 1; min-width: 0; border: 1px solid #d9b583; border-radius: 24px;
  padding: 19px 20px; background: #fff3d8a8; box-shadow: 0 5px 0 #d6b98d;
}
.groovy-nfc-bof .chien-bubble::before,
.groovy-nfc-bof .chien-bubble::after { display: none; }
.groovy-nfc-bof .chien-bubble p {
  margin: 0; font: 500 clamp(19px, 4.6vw, 22px)/1.5 'Barlow Condensed', Arial, sans-serif;
  color: #54321e; text-align: left;
}
.groovy-nfc-bof .counter-block { justify-content: center; margin: 0 auto 30px; opacity: 1; transform: none; }
.groovy-nfc-bof .counter-txt { font-size: 15px; color: #7b5339; letter-spacing: 0; }
.groovy-nfc-bof .write-block { margin: 0; opacity: 1; transform: none; }
.groovy-nfc-page.groovy-nfc-bof .write-question,
.groovy-nfc-page.groovy-nfc-bof .list-title {
  font: 900 clamp(25px, 6.5vw, 31px)/1.23 'Fraunces', Georgia, serif;
  letter-spacing: -.035em; color: #381c0e;
}
.groovy-nfc-bof .write-question { margin: 0 0 22px; }
.groovy-nfc-page.groovy-nfc-bof .write-card {
  position: relative; padding: 0; border: 1.5px solid #d9b37d; border-radius: 23px;
  background: #fff5dd88; box-shadow: 0 5px 0 #d8bb8b;
}
.groovy-nfc-bof .write-textarea {
  display: block; width: 100%; min-height: 135px; margin: 0; padding: 19px 20px 74px;
  border: 0; border-radius: 23px; background: transparent; resize: vertical;
  font: 500 19px/1.5 'Barlow Condensed', Arial, sans-serif; color: #381c0e;
}
.groovy-nfc-bof .write-textarea::placeholder { color: #8a684f; font-style: italic; }
.groovy-nfc-bof .write-footer { display: block; margin: 0; padding: 0; border: 0; min-height: 0; }
.groovy-nfc-page.groovy-nfc-bof .btn-poser {
  position: absolute; right: 14px; bottom: 16px; min-height: 48px; padding: 12px 25px;
  border: 2px solid #381c0e; border-radius: 50px; background: linear-gradient(100deg, #ffe29a, #ffb931);
  color: #261307; font: 700 17px/1.25 'Barlow Condensed', Arial, sans-serif;
  box-shadow: 0 2px 0 #54331b; transition: background .2s, box-shadow .2s;
}
.groovy-nfc-bof .btn-poser:hover:not(:disabled) { background: #ffce62; box-shadow: 0 3px 0 #54331b; }
.groovy-nfc-bof .btn-poser:disabled { opacity: .55; cursor: not-allowed; }
.groovy-nfc-bof .write-hint {
  position: absolute; top: calc(100% + 8px); right: 3px;
  font: 500 12px/1.25 'Barlow Condensed', Arial, sans-serif; color: #916a4d;
}
.groovy-nfc-bof .write-hint.warn { color: #a13d1f; }
.groovy-nfc-bof .connected-note { text-align: center; font-size: 13px; color: #73482c; margin: 32px 0 0; }
.groovy-nfc-bof .ack-decline { display: none; }
.groovy-nfc-bof .nfc-bof-bonus { margin: 36px 0 34px; text-align: center; }
.groovy-nfc-bof .nfc-bof-bonus h2 {
  max-width: 460px; margin: 0 auto 22px;
  font: 900 clamp(21px, 5vw, 28px)/1.3 'Fraunces', Georgia, serif;
  letter-spacing: -.025em; color: #3b2115;
}
.groovy-nfc-bof .nfc-bof-flip {
  display: block; width: min(68%, 295px); margin: 0 auto; padding: 0;
  background: transparent; border: 0; border-radius: 14px; cursor: pointer;
  perspective: 1500px; transform: rotate(-1.5deg);
  filter: drop-shadow(3px 7px 7px #5b361f24); -webkit-tap-highlight-color: transparent;
}
.groovy-nfc-bof .nfc-bof-flip-core {
  display: block; position: relative; width: 100%; aspect-ratio: 54 / 85.6;
  transform-style: preserve-3d; transition: transform .85s cubic-bezier(.2,.7,.25,1);
}
.groovy-nfc-bof .nfc-bof-flip[aria-pressed="true"] .nfc-bof-flip-core { transform: rotateY(180deg); }
.groovy-nfc-bof .nfc-bof-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #8c6345; border-radius: 14px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 4px 0 #b9915980;
}
.groovy-nfc-bof .nfc-bof-photo { transform: rotateY(0deg); background: #e6d4b5; }
.groovy-nfc-bof .nfc-bof-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.groovy-nfc-bof .nfc-bof-turn {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: inline-flex; gap: 7px; align-items: center; white-space: nowrap;
  max-width: 90%; padding: 9px 14px; border: 2px solid #48240f; border-radius: 999px;
  background: #ffca55; color: #321807; box-shadow: 0 3px 0 #47250d;
  font: 700 13px/1.2 'Barlow Condensed', Arial, sans-serif; text-transform: uppercase; letter-spacing: .035em;
}
.groovy-nfc-bof .nfc-bof-turn > span { font-size: 23px; line-height: .8; }
.groovy-nfc-bof .nfc-bof-message {
  transform: rotateY(180deg); flex-direction: column; padding: 32px 23px 45px;
  background: #faf1df; color: #381c0e;
  box-shadow: inset 0 0 0 9px #faf1df, inset 0 0 0 10px #d8c4a5;
}
.groovy-nfc-bof .nfc-bof-message-quote { font: 400 clamp(20px, 4.9vw, 27px)/1.45 Georgia, serif; text-align: center; }
.groovy-nfc-bof .nfc-bof-message-quote strong { font-weight: 700; }
.groovy-nfc-bof .nfc-bof-message-number { position: absolute; bottom: 27px; font-size: 11px; color: #997c60; letter-spacing: .22em; }
.groovy-nfc-bof .divider-wrap { margin: 28px 0; }
.groovy-nfc-bof .list-block { margin: 0 0 34px; opacity: 1; transform: none; }
.groovy-nfc-bof .list-header { margin: 0 0 24px; padding: 0; }
.groovy-nfc-bof .nfc-empty { font: 500 17px/1.5 'Barlow Condensed', Arial, sans-serif; color: #754b31; margin: 26px 0 36px; }
.groovy-nfc-page.groovy-nfc-bof .bof-card { border: 1px solid #d7b888; border-radius: 17px; background: #ffefd3c7; padding: 18px 19px; box-shadow: none; }
.groovy-nfc-bof :is(.bof-quote,.my-bof-text) { font: 500 19px/1.5 'Barlow Condensed', Arial, sans-serif; overflow-wrap: anywhere; }
.groovy-nfc-bof .fin-block { max-width: 550px; margin: auto; padding: 22px 20px 40px; opacity: 1; transform: none; }
.groovy-nfc-bof .fin-phrase { display: flex; gap: 12px; align-items: flex-start; font: 500 19px/1.55 'Barlow Condensed', Arial, sans-serif; text-align: left; color: #775035; }
.groovy-nfc-bof #finPhrase { white-space: pre-line; }
.groovy-nfc-page.groovy-nfc-bof .btn-assume { font-size: 17px; margin: 30px auto 0; padding: 12px 20px; max-width: 100%; }
.groovy-nfc-bof .fin-scan { margin-top: 30px; font-size: 10px; letter-spacing: .2em; }
.groovy-nfc-page.groovy-nfc-bof footer {
  padding: 53px 20px 40px; border-radius: 0;
  background: #3d1d0e url('/assets/groovy/collection-paper-v2.webp') center/cover;
}
.groovy-nfc-bof .footer-logo img { width: 125px; }
.groovy-nfc-bof .footer-links { gap: 17px; max-width: 550px; margin: 22px auto; }
.groovy-nfc-bof .footer-links a { font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
.groovy-nfc-bof :is(button,textarea):focus-visible { outline: 3px solid #e87525; outline-offset: 4px; }
@media (max-width: 600px) {
  .groovy-nfc-bof .nfc-bof-flip { width: min(72%, 285px); max-width: 285px; }
}
@media (prefers-reduced-motion: reduce) {
  .groovy-nfc-bof .nfc-bof-flip-core { transition: none; }
}
.groovy-nfc-page.groovy-nfc-bof .auth-modal-card { font-family: 'Barlow Condensed',Arial,sans-serif; }
.groovy-nfc-page.groovy-nfc-bof .auth-modal-title { padding-right: 38px; font-size: 30px; }
.groovy-nfc-page.groovy-nfc-bof #authEmailForm input[type="email"] { letter-spacing: 0; background: #fffcf1; font: 500 19px/1.3 'Barlow Condensed',Arial,sans-serif; }
.groovy-nfc-page.groovy-nfc-bof #authEmailForm label { font: 700 16px/1.4 'Barlow Condensed',Arial,sans-serif; letter-spacing: 0; text-transform: none; }
.groovy-nfc-page.groovy-nfc-bof .auth-email-submit { font-size: 19px; }
.groovy-nfc-page.groovy-nfc-bof .auth-disclaimer { font-size: 16px; }