/* ============================================================
   Board & Quill Portal — portal.css
   Stage 1 production styles, matching v13 canonical reference
   Companion: Portal_Shelf_Behavior_Spec_v1.md + portal_shelf_v13_canonical_reference.png
   Created: Session 48, April 27, 2026
   ============================================================ */

:root {
  --bq-green:        #2C5F2E;
  --bq-green-felt:   #1a5e3a;
  --bq-cream:        #FFFDF7;
  --bq-card-cream:   #f4ecd8;
  --bq-gold:         #C9A24C;
  --bq-gold-deep:    #b48a3a;
  --bq-gold-soft:    #8a7340;

  --bq-wood-light:   #6b4423;
  --bq-wood-dark:    #4a2e18;
  --bq-wood-border:  #5c3a1e;

  --bq-navy-light:   #2a4570;
  --bq-navy-mid:     #15294a;
  --bq-navy-dark:    #0a1530;

  --bq-ink:          #1b1b1b;
  --bq-muted:        #6b6b6b;

  --bq-serif-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --bq-serif-body:     'Lora', Georgia, 'Times New Roman', serif;
  --bq-handwriting:    'Caveat', 'Bradley Hand', cursive;
  --bq-sans-fallback:  Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--bq-sans-fallback);
  color: var(--bq-ink);
  background: var(--bq-cream);
}

main.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
}

.auth-page {
  text-align: center;
}
.auth-page label {
  text-align: center;
}

.app {
  min-height: 100vh;
  background: var(--bq-cream);
  border-radius: 12px;
  overflow: hidden;
}

.topbar {
  background: var(--bq-green);
  color: var(--bq-cream);
  padding: 2px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px 12px 0 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  object-fit: contain;
}

.brand .name {
  font-family: var(--bq-serif-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--bq-cream);
}

.burger {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--bq-cream);
  border-radius: 1px;
}

/* Topbar menu (hamburger) */
.bq-drawer-overlay,
.bq-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 1100;
}
.bq-drawer-overlay.is-open,
.bq-menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bq-drawer,
.bq-menu {
  position: fixed;
  width: min(280px, calc(100vw - 16px));
  background: #FBF5E5;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22);
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 1101;
  overflow: hidden;
  padding: 10px 10px 10px;
}
.bq-drawer.is-open,
.bq-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bq-drawer-close,
.bq-menu-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,253,247,0.9);
  color: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
}

.bq-drawer-link,
.bq-menu-link {
  display: block;
  padding: 16px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--bq-serif-display);
  font-size: 17px;
  color: var(--bq-green);
  background: transparent;
  border: 0;
  margin-top: 6px;
  position: relative;
}
.bq-drawer-link + .bq-drawer-link,
.bq-menu-link + .bq-menu-link {
  border-top: 1px solid rgba(184,134,11,0.28);
}
.bq-drawer-link:hover,
.bq-drawer-link:focus,
.bq-menu-link:hover,
.bq-menu-link:focus {
  background: rgba(201,162,76,0.10);
  outline: none;
}

.content { padding: 0; }

.shelf-stage {
  position: relative;
  margin-bottom: 18px;
}

.portal-frame {
  position: relative;
  margin: 0 0 18px;
}

.portal-frame-inner {
  position: relative;
  z-index: 1;
  padding: 0 18px;
}

/* greeting-zone: reserved space above the wood frame.
   Originally housed the "Hey there, [name]" greeting (removed Session 62).
   Now an empty zone that preserves vertical space for the Don't Panic
   companion book and future Customization items (plants, lights, seasonal
   decor — Stage 2). min-height sized for book (~34px) plus headroom for
   decor that may extend above the book line. */
.greeting-zone {
  position: relative;
  padding: 0 14px;
  min-height: 110px;
}

.side-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  background: #B8860B;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}
.side-bar--L { left: 0; }
.side-bar--R { right: 0; }

.portal-frame .side-bar {
  z-index: 2;
}

.bottom-bar {
  height: 2px;
  background: #B8860B;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  display: block;
  width: 100%;
  position: relative;
}

.portal-frame .bottom-bar {
  z-index: 2;
}

.shelf-stage .bottom-bar::before,
.shelf-stage .bottom-bar::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #B8860B;
  top: -16px;
  pointer-events: none;
  border-radius: 0 0 8px 0;
}
.shelf-stage .bottom-bar::before { left: 14px; border-radius: 0 0 8px 0; }
.shelf-stage .bottom-bar::after { right: 14px; border-radius: 0 0 0 8px; }

.greeting {
  padding: 18px 4px 8px;
  text-align: center;
}
.greeting h1 {
  font-family: var(--bq-serif-display);
  font-weight: 600;
  color: var(--bq-green);
  font-size: 26px;
  margin: 0 0 4px;
  line-height: 1.15;
  text-align: center;
}
.greeting .sub {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: var(--bq-muted);
  font-size: 14px;
  margin: 0;
  text-align: center;
}

.shelf-frame {
  margin: 14px 14px 0;
  padding: 14px 14px;
  border-radius: 8px;
  background-color: var(--bq-wood-border);
  position: relative;
  z-index: 1;
  background-image:
    linear-gradient(180deg,
      rgba(255,220,170,0.15) 0%,
      rgba(0,0,0,0) 8%,
      rgba(0,0,0,0) 92%,
      rgba(0,0,0,0.25) 100%),
    repeating-linear-gradient(90deg,
      rgba(60,30,10,0.35) 0px,
      rgba(60,30,10,0.35) 1px,
      transparent 1px,
      transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(255,200,140,0.08) 0px,
      rgba(255,200,140,0.08) 1px,
      transparent 1px,
      transparent 7px),
    linear-gradient(180deg, var(--bq-wood-light) 0%, var(--bq-wood-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,0.3),
    0 6px 14px rgba(0,0,0,0.18);
}

.felt {
  border-radius: 4px;
  background-color: var(--bq-green-felt);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.10) 0px,
      rgba(0,0,0,0.10) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 6px);
  position: relative;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.3);
}

.felt.felt-top {
  padding: 22px 14px 0;
  min-height: 184px;
  position: relative;
}

.felt.felt-bottom {
  padding: 16px 14px 0;
  margin-top: 8px;
  min-height: 110px;
}

.shelf-divider.shelf-divider--faded {
  opacity: 0.55;
}

.felt.felt-seasonal {
  padding: 16px 14px 0;
  margin-top: 8px;
  min-height: 110px;
  overflow: hidden;
  background-color: rgba(26, 94, 58, 0.52);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.055) 0px,
      rgba(0,0,0,0.055) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.016) 0px,
      rgba(255,255,255,0.016) 1px,
      transparent 1px,
      transparent 6px);
  position: relative;
}
.felt.felt-seasonal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 247, 0.55);
  pointer-events: none;
}
.felt.felt-seasonal::after {
  opacity: 0.55;
}
.seasonal-whisper {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: #2C5F2E;
  font-size: 13px;
  line-height: 1.35;
  z-index: 1;
}

.felt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.spines {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 0 4px;
  height: 168px;
}
.felt.felt-bottom .spines {
  gap: 6px;
  height: 102px;
}

.spine {
  position: relative;
  border-radius: 1px 1px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w, 42px);
  height: var(--h, 152px);
  box-shadow:
    2px 0 0 rgba(0,0,0,0.18),
    -1px 0 0 rgba(255,255,255,0.15);
  background: var(--bg, linear-gradient(180deg, #f6f6f6, #ffffff));
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.26s ease, opacity 0.26s ease;
}
.spine:hover { transform: translateY(-2px); }

.spine.spine-no-booklet { cursor: default; }
.spine.spine-no-booklet:hover { transform: none; }

a.spine,
a.spine:hover,
a.spine:visited,
a.spine:active {
  text-decoration: none;
  color: inherit;
}

button.spine {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
}

.spine.sneak-preview.is-sneak-revealed {
  filter: grayscale(1);
  opacity: 0.5;
}

.spine-title {
  font-family: var(--bq-serif-display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--title-color, var(--bq-ink));
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: var(--title-shadow, 0 1px 2px rgba(0,0,0,0.25));
  text-align: center;
  max-height: 80%;
  overflow: hidden;
}

.spine .dots {
  position: absolute;
  bottom: 9px;
  left: 0;
  right: 0;
  display: flex;
  gap: 3px;
  justify-content: center;
}
.spine .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bq-gold);
  border: 0;
}

/* Carcassonne: royal blue edge frame (AHEA booth vote winner).
   box-sizing: border-box (set globally above) keeps this 4px border
   inside the spine's --w/--h, so the landscape gradient fills inside
   the frame rather than the frame pushing the spine wider. The seal,
   if one renders, hangs above the spine top via .bq-seals and is not
   affected by this border. */
.spine[aria-label="Carcassonne"] {
  border: 4px solid #2E55C9;
}

.spine.current::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--bq-gold);
  box-shadow: 0 0 8px rgba(201,162,76,0.85);
  pointer-events: none;
}

.spine.placeholder {
  border: 1.5px dashed rgba(255,253,247,0.22);
  border-bottom: none;
  background: rgba(255,253,247,0.04);
  box-shadow: none;
  cursor: default;
}
.spine.placeholder:hover { transform: none; }
.spine.placeholder .placeholder-copy {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: rgba(255,253,247,0.4);
  font-size: 9px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
}

.spine.placeholder-ahea {
  border: 1.5px dashed rgba(80,120,180,0.55);
  border-bottom: none;
  background: rgba(42,69,112,0.08);
  flex-direction: column;
  padding: 6px 3px;
}
.spine.placeholder-ahea .placeholder-copy {
  color: rgba(180,200,230,0.75);
  font-size: 7px;
  line-height: 1.2;
  writing-mode: horizontal-tb;
  text-orientation: initial;
}

.spine.placeholder-quill {
  border: 1.5px dashed rgba(201,162,76,0.45);
  border-bottom: none;
  background: rgba(201,162,76,0.05);
  flex-direction: column;
  padding: 8px 4px;
}
.spine.placeholder-quill svg {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  opacity: 0.55;
}
.spine.placeholder-quill .placeholder-copy {
  color: rgba(201,162,76,0.65);
  font-size: 9px;
  line-height: 1.2;
  writing-mode: horizontal-tb;
  text-orientation: initial;
}

/* Event placeholders (Quarter Quill, Open Vote) */
.spine.placeholder-event {
  border: 1.5px dashed rgba(255,253,247,0.22);
  border-bottom: none;
  background: rgba(255,253,247,0.04);
  box-shadow: none;
  cursor: default;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 6px 10px;
}
.spine.placeholder-event--quill {
  border-color: #B8860B;
}
.spine.placeholder-event--open {
  border-color: var(--bq-navy-mid);
}
.spine.placeholder-event:hover { transform: none; }
.spine.placeholder-event .event-label {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 10.5px;
  line-height: 1.25;
  color: rgba(255,253,247,0.70);
  text-align: center;
}
.spine.placeholder-event .bq-event-seal {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  z-index: 4;
}
.spine.placeholder-event .bq-event-seal:focus-visible {
  box-shadow: 0 0 0 2px rgba(44,95,46,0.25);
}
.spine.placeholder-event .bq-event-seal--quill,
.spine.placeholder-event .bq-event-seal--open {
  background: transparent;
  border: 0;
  padding: 0;
}
.spine.placeholder-event .bq-event-seal img {
  width: 28px !important;
  height: 28px !important;
}

/* Filled event slot wrapper (Premium only between announced and shipped) */
.bq-event-slot {
  width: var(--w, 54px);
  height: var(--h, 156px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 1.5px dashed rgba(255,253,247,0.22);
  border-bottom: none;
  border-radius: 1px 1px 0 0;
  padding: 0;
  position: relative;
}
.bq-event-slot--quill {
  border-color: #B8860B;
}
.bq-event-slot--open {
  border-color: var(--bq-navy-mid);
}

/* Permanent seals on spines */
.spine .bq-seals {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}
.spine .bq-seal {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  outline: none;
}
.spine .bq-seal:focus-visible {
  box-shadow: 0 0 0 2px rgba(44,95,46,0.25);
}
.spine .bq-seal--quill {
  background: radial-gradient(circle at 35% 30%, #d4a826 0%, var(--bq-gold-deep) 60%, #8a6420 100%);
  border: 1px solid #5a4218;
}
.spine .bq-seal--quill .q {
  width: 10px;
  height: 14px;
  position: relative;
  display: block;
}
.spine .bq-seal--quill .q::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,253,247,0.90);
  border-radius: 2px;
}
.spine .bq-seal--quill .q::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  width: 8px;
  height: 6px;
  border: 2px solid rgba(255,253,247,0.90);
  border-left: 0;
  border-top: 0;
  transform: rotate(-35deg);
  border-radius: 2px;
}
.spine .bq-seal--open {
  background: radial-gradient(circle at 35% 30%, var(--bq-navy-light) 0%, var(--bq-navy-mid) 60%, var(--bq-navy-dark) 100%);
  border: 1px solid var(--bq-gold);
  padding-top: 1px;
}
.spine .bq-seal--open .t1,
.spine .bq-seal--open .t2 {
  font-family: var(--bq-serif-display);
  font-weight: 700;
  color: var(--bq-gold);
  letter-spacing: 0.05em;
  text-shadow: 0 0.5px 0 rgba(0,0,0,0.3);
  display: block;
  line-height: 1;
}
.spine .bq-seal--open .t1 { font-size: 5px; }
.spine .bq-seal--open .t2 { font-size: 6px; margin-top: 1px; }

.spine .bq-pop {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  max-width: 60vw;
  background: #FFFDF7;
  border: 1px solid rgba(184,134,11,0.35);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18);
  padding: 10px 12px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(122,107,90,0.95);
  text-align: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.bq-event-seal .bq-pop {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  max-width: 60vw;
  background: #FFFDF7;
  border: 1px solid rgba(184,134,11,0.35);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18);
  padding: 10px 12px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(122,107,90,0.95);
  text-align: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.spine .bq-seal:hover .bq-pop,
.spine .bq-seal:focus .bq-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}
.bq-event-seal:hover .bq-pop,
.bq-event-seal:focus .bq-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}
.bq-seal.is-pop-open .bq-pop,
.bq-event-seal.is-pop-open .bq-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

.spine .seal {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.seal.seal-quill {
  background: radial-gradient(circle at 35% 30%,
    #d4a826 0%,
    var(--bq-gold-deep) 60%,
    #8a6420 100%);
  border: 1px solid #5a4218;
}
.seal.seal-quill svg {
  width: 11px;
  height: 11px;
}

.seal.seal-event {
  background: radial-gradient(circle at 35% 30%,
    var(--bq-navy-light) 0%,
    var(--bq-navy-mid) 60%,
    var(--bq-navy-dark) 100%);
  border: 1px solid var(--bq-gold);
}
.seal.seal-event .seal-line {
  font-family: var(--bq-serif-display);
  font-weight: 700;
  color: var(--bq-gold);
  letter-spacing: 0.05em;
  text-shadow: 0 0.5px 0 rgba(0,0,0,0.3);
}
.seal.seal-event .seal-line.seal-line-1 { font-size: 5.5px; }
.seal.seal-event .seal-line.seal-line-2 { font-size: 7px; margin-top: 1px; }

.seal.seal-event-preview {
  background: radial-gradient(circle at 35% 30%,
    rgba(42,69,112,0.5) 0%,
    rgba(21,41,74,0.5) 60%,
    rgba(10,21,48,0.5) 100%);
  border: 1px solid rgba(201,162,76,0.5);
  box-shadow: none;
  position: static;
  transform: none;
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}
.seal.seal-event-preview .seal-line { color: rgba(201,162,76,0.7); }
.seal.seal-event-preview .seal-line.seal-line-1 { font-size: 4.5px; }
.seal.seal-event-preview .seal-line.seal-line-2 { font-size: 6px; }

.shelf-divider {
  position: relative;
  height: 26px;
  margin: 0 -14px;
  background-color: var(--bq-wood-border);
  background-image:
    linear-gradient(180deg,
      rgba(255,220,170,0.18) 0%,
      rgba(0,0,0,0) 14%,
      rgba(0,0,0,0) 86%,
      rgba(0,0,0,0.3) 100%),
    repeating-linear-gradient(90deg,
      rgba(60,30,10,0.4) 0px,
      rgba(60,30,10,0.4) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(90deg,
      rgba(255,200,140,0.1) 0px,
      rgba(255,200,140,0.1) 1px,
      transparent 1px,
      transparent 9px),
    linear-gradient(180deg, var(--bq-wood-light) 0%, var(--bq-wood-dark) 100%);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.4);
  z-index: 1;
}

.library-card {
  position: absolute;
  top: -12px;
  right: 14px;
  width: 76px;
  padding: 5px 8px 5px;
  border-radius: 2px;
  background: var(--bq-card-cream);
  transform: rotate(-5deg);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.2);
  border: 1px solid rgba(180,140,60,0.4);
  z-index: 2;
}

.library-card.tier-premium {
  border-left: 2px solid var(--bq-gold);
  border-right: 2px solid var(--bq-gold);
}

.library-card .label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4.5px;
  letter-spacing: 0.18em;
  color: var(--bq-gold-soft);
  font-weight: 700;
  margin-bottom: -1px;
}
.library-card .value {
  font-family: var(--bq-handwriting);
  color: var(--bq-green);
  line-height: 1;
  margin-bottom: 2px;
}
.library-card .value.value-name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.library-card .value.value-since,
.library-card .value.value-no { font-size: 10px; }

/* Mini-Pack spine: green-on-green, smaller, "MP" base label.
   MP is short enough to fit in any spine width including narrow mobile.
   Font size sits below the spine title (10px) so it reads as a label, not a competitor. */
.spine.mini {
  width: var(--w, 30px);
  height: var(--h, 92px);
  background: linear-gradient(180deg, #5fa860 0%, var(--bq-green) 100%);
  padding-bottom: 16px;
  overflow: hidden;
}
.spine.mini .spine-title {
  color: var(--bq-gold);
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.spine.mini .minipack-label {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 7px;
  letter-spacing: 0.05em;
  color: rgba(201,162,76,0.85);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.merchant-link-wrap {
  flex: 1;
  padding-left: 8px;
  padding-bottom: 8px;
  text-align: right;
}
.merchant-link {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: rgba(201,162,76,0.85);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.merchant-link:hover {
  color: var(--bq-gold);
  text-decoration: underline solid;
}

.spine.cancelled { cursor: default; }
.spine.cancelled:hover { transform: none; }

.spine-shadow-wrap {
  position: relative;
  display: inline-block;
}

.cancelled-whisper {
  text-align: center;
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: var(--bq-muted);
  font-size: 13px;
  margin: 14px 18px 6px;
  line-height: 1.4;
}
.cancelled-whisper .heart,
.shelf-whisper--cancelled .shelf-whisper-heart {
  color: #b04040;
}
.cancelled-whisper-link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: var(--bq-gold);
  font-size: 13px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.small {
  margin: 0;
  font-size: 14px;
  text-align: center;
  padding: 0 0 18px;
}
.small a {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: var(--bq-gold-soft);
  font-size: 12px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.small a:hover { color: var(--bq-gold); }

.seal-hero {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 0 auto 6px;
  display: block;
  object-fit: contain;
}
form { margin-top: 18px; padding: 0 18px; }
label {
  display: block;
  font-family: var(--bq-serif-body);
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--bq-green);
}

/* Account toggle switch */
.bq-toggle-row {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0 4px;
}
.bq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.bq-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bq-toggle-track {
  position: relative;
  width: 156px;
  height: 40px;
  border-radius: 999px;
  background: rgba(44,95,46,0.08);
  border: 1px solid rgba(44,95,46,0.20);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 4px;
}
.bq-toggle-opt {
  font-family: var(--bq-serif-display);
  font-size: 16px;
  color: rgba(90,84,76,0.75);
  text-align: center;
  position: relative;
  z-index: 2;
}
.bq-toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: rgba(184,134,11,0.20);
  border: 1px solid rgba(184,134,11,0.35);
  box-shadow: 0 6px 12px rgba(0,0,0,0.10);
  transition: transform 160ms ease;
  z-index: 1;
}

.bq-toggle input:checked + .bq-toggle-track .bq-toggle-thumb {
  transform: translateX(100%);
}
.bq-toggle input:not(:checked) + .bq-toggle-track .bq-toggle-off {
  color: var(--bq-green);
  font-weight: 700;
}
.bq-toggle input:checked + .bq-toggle-track .bq-toggle-on {
  color: var(--bq-green);
  font-weight: 700;
}
.bq-toggle input:focus-visible + .bq-toggle-track {
  outline: 2px solid rgba(201,162,76,0.55);
  outline-offset: 2px;
}

/* Account page (Portal Playbook) */
.account-content {
  background: #FBF5E5;
  text-align: center;
}
.account-content label {
  text-align: center;
}
.account-content form {
  text-align: center;
}
.account-content .bq-toggle-row {
  justify-content: center;
}
.acct-back {
  display: inline-block;
  margin: 14px 0 8px;
  font-family: var(--bq-serif-display);
  font-style: italic;
  font-size: 14px;
  color: var(--bq-green);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.acct-top {
  padding: 6px 0 8px;
}
.acct-h1 {
  font-family: var(--bq-serif-display);
  font-weight: 600;
  color: var(--bq-green);
  font-size: 28px;
  margin: 0 0 4px;
  line-height: 1.15;
  text-align: center;
}
.acct-sub {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: #7A6B5A;
  font-size: 14px;
  margin: 0;
  text-align: center;
}
.acct-sections {
  padding: 20px 0 26px;
}
.acct-section {
  padding: 18px 0;
}
.acct-divider {
  height: 1px;
  background: rgba(184,134,11,0.30);
  width: 100%;
}
.acct-h2 {
  font-family: var(--bq-serif-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--bq-green);
  margin: 0 0 10px;
  text-align: center;
}
.acct-note {
  margin: 0 0 12px;
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 14px;
  color: #7A6B5A;
  line-height: 1.4;
  text-align: center;
}

.acct-name-saved {
  margin: 10px 0 0;
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 13px;
  color: rgba(122,107,90,0.88);
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  min-height: 1.25em;
}
.acct-name-saved.is-visible {
  opacity: 1;
}

/* Kids */
.kid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.kid-name {
  font-family: var(--bq-handwriting);
  font-size: 20px;
  color: rgba(44,95,46,0.95);
}
.kid-tier {
  display: block;
  margin-top: 2px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(180,140,60,0.92);
}
.kid-edit {
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 13px;
  color: rgba(122,107,90,0.90);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.kid-edit-panel {
  display: grid;
  gap: 10px;
  padding: 8px 0 14px;
}
.kid-edit-panel form {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.kid-input,
.kid-add-input {
  flex: 1;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(184,134,11,0.55);
  background: rgba(255,255,255,0.70);
  font-family: var(--bq-handwriting);
  font-size: 18px;
  color: rgba(58,52,44,0.95);
}
.bq-tier-row {
  flex: 0 0 100%;
}
.bq-tier-label {
  display: block;
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(58,52,44,0.80);
  margin: 2px 0 6px;
}
.bq-tier-select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(184,134,11,0.55);
  background: rgba(255,255,255,0.70);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: rgba(58,52,44,0.95);
}
.bq-tier-select:focus {
  outline: none;
  border-color: rgba(44,95,46,0.55);
  box-shadow: 0 0 0 2px rgba(44,95,46,0.12);
}

/* Custom select (progressive enhancement for tier dropdown only) */
.bq-cselect {
  position: relative;
  width: 100%;
}
.bq-cselect.is-enhanced select[data-bq-custom-select="1"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.bq-cselect-btn {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(184,134,11,0.55);
  background: rgba(255,255,255,0.70);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: rgba(58,52,44,0.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.bq-cselect-btn:focus {
  outline: none;
  border-color: rgba(44,95,46,0.55);
  box-shadow: 0 0 0 2px rgba(44,95,46,0.12);
}
.bq-cselect-value {
  flex: 1;
  text-align: left;
}
.bq-cselect-arrow {
  width: 18px;
  height: 18px;
  color: rgba(44,95,46,0.85);
  flex: 0 0 auto;
}
.bq-cselect-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #FFFDF7;
  border: 1px solid rgba(184,134,11,0.28);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18);
  padding: 6px;
  z-index: 1200;
  max-height: 220px;
  overflow: auto;
  display: none;
}
.bq-cselect.is-open .bq-cselect-list {
  display: block;
}
.bq-cselect-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 10px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: rgba(58,52,44,0.95);
  cursor: pointer;
}
.bq-cselect-opt .chk {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: rgba(184,134,11,0.9);
  opacity: 0;
}
.bq-cselect-opt[aria-selected="true"] .chk {
  opacity: 1;
}
.bq-cselect-opt.is-active,
.bq-cselect-opt:hover {
  background: #2C5F2E;
  color: #FFFDF7;
}
.bq-cselect-opt.is-active .chk,
.bq-cselect-opt:hover .chk {
  color: #FFFDF7;
  opacity: 0.85;
}
.bq-tier-help {
  margin: 6px 0 0;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(122,107,90,0.90);
  line-height: 1.35;
  white-space: normal;
}
.bq-form-error {
  margin: 10px 0 0;
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 13px;
  color: #8B2A2A;
  text-align: center;
}
.kid-add {
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.kid-add-btn,
.kid-save,
.kid-archive {
  width: auto;
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  background: var(--bq-green);
  color: var(--bq-cream);
  font-family: var(--bq-serif-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 14px;
  cursor: pointer;
  flex: 0 0 auto;
}
.kid-archive {
  background: rgba(122,107,90,0.16);
  color: rgba(58,52,44,0.78);
}

/* Subscription */
.sub-tier {
  font-family: var(--bq-serif-display);
  font-weight: 600;
  font-size: 18px;
  color: rgba(44,95,46,0.95);
  margin: 0 0 10px;
  text-align: center;
}
.sub-manage {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bq-green);
  color: var(--bq-cream);
  text-decoration: none;
  font-family: var(--bq-serif-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 14px;
}
.sub-manage:hover,
.sub-manage:focus {
  background: rgba(44,95,46,0.92);
}

.acct-resubscribe {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 14px;
  color: rgba(58,52,44,0.88);
  line-height: 1.45;
}
.acct-resubscribe-link {
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-weight: 600;
  color: var(--bq-gold);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.acct-resubscribe-link:hover,
.acct-resubscribe-link:focus {
  color: #e6c574;
  text-decoration: underline solid;
}

.sub-footnote {
  margin: 10px 0 0;
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7A6B5A;
  text-align: center;
}
.sub-footnote-lead {
  color: #B8860B;
}

/* Email */
.email-val {
  font-family: var(--bq-serif-display);
  font-size: 16px;
  color: rgba(58,52,44,0.95);
  margin: 0 0 8px;
  text-align: center;
}
.acct-mail {
  color: var(--bq-green);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Founding */
.founding-band {
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 15px;
  color: #B8860B;
  text-align: center;
  background: #FAF1DE;
  border: 1px solid #B8860B;
  border-radius: 4px;
  padding: 14px 20px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* Sign out */
.acct-signout {
  text-align: center;
  padding: 22px 0 6px;
}
.acct-signout a {
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 14px;
  color: #B8860B;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
input[type="email"] {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid rgba(31,90,72,0.35);
  background: #fff;
  font-size: 16px;
  font-family: var(--bq-serif-body);
}
button {
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  background: var(--bq-green);
  color: var(--bq-cream);
  font-family: var(--bq-serif-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 14px;
  cursor: pointer;
}
button[disabled] { opacity: 0.55; cursor: not-allowed; }
.hint {
  margin-top: 14px;
  font-size: 14px;
  color: var(--bq-muted);
  text-align: center;
  font-family: var(--bq-serif-body);
  font-style: italic;
}
.notice {
  margin: 0 0 10px;
  text-align: center;
  font-size: 14px;
  color: var(--bq-muted);
  font-style: italic;
  font-family: var(--bq-serif-body);
}

.devbox {
  margin: 18px 18px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(31,90,72,0.35);
  background: rgba(255,255,255,0.65);
  font-size: 13px;
  color: #333;
}
.devlink {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(31,90,72,0.10);
  border: 1px solid rgba(31,90,72,0.25);
  color: var(--bq-green);
  font-weight: 700;
  text-decoration: none;
}
.devlink:hover { background: rgba(31,90,72,0.14); }

.spine.faded {
  opacity: 0.5;
  cursor: default;
}
.spine.faded:hover {
  transform: none;
}

/* Premium shelf: further-out subscription games render as faded placeholders. */
.spine.further-out {
  border: 1.5px dashed rgba(255,253,247,0.22);
  border-bottom: none;
  box-shadow: none;
}

.shelf-whisper {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 8px 14px;
  letter-spacing: 0.01em;
  background: rgba(26, 46, 30, 0.60);
  border-top: 1px solid rgba(201, 162, 76, 0.45);
  border-bottom: 1px solid rgba(201, 162, 76, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.shelf-whisper-main {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: var(--bq-cream);
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1.3;
}

.shelf-whisper-sub {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: rgba(255, 253, 247, 0.7);
  font-size: 10.5px;
  font-weight: 400;
  margin-top: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1.25;
}

.shelf-whisper-link {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: var(--bq-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.shelf-whisper-link:hover {
  color: #e6c574;
  text-decoration: underline solid;
}
/* Privacy acceptance gate (used on portal/in/ for first-time logins). */
.privacy-accept-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 420px;
  margin: 24px auto 12px;
  text-align: left;
}
.privacy-accept-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--bq-green);
  flex-shrink: 0;
}
.privacy-accept-row label {
  font-family: var(--bq-serif-body);
  font-size: 14px;
  color: var(--bq-ink);
  line-height: 1.55;
  cursor: pointer;
  text-align: left;
}
.privacy-accept-row label a {
  color: var(--bq-green);
  text-decoration: underline;
  font-weight: 500;
}
.privacy-accept-row label a:hover { color: #B8860B; }

.signout-row {
  margin-top: 18px;
  text-align: center;
}
.signout-row a {
  font-family: var(--bq-serif-body);
  font-size: 13px;
  color: var(--bq-muted);
  text-decoration: underline;
}
.signout-row a:hover { color: var(--bq-ink); }


/* ============================================================
   Companion book: "DON'T PANIC" on top of the shelf.
   Lives inside .greeting-zone, sitting on top of the wood frame.
   Visual: green spine (cylindrical shading with curved highlight),
   two parchment end-bands (binding tape look), gold lettering
   running horizontally along the spine length.
   Hidden when the user toggles show_companion_book off in
   Customization. Architectural pattern: first of Stage 2 customizable
   shelf elements (plants, lights, seasonal decor — coming later).
   ============================================================ */
.bq-companion-book {
  position: absolute;
  /* The book rests directly on the wood frame. More negative bottom value
     pushes it further down so the bottom edge of the book touches the wood. */
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 24px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.12s ease;
}
.bq-companion-book:hover {
  transform: translateX(-50%) translateY(-2px);
}
.bq-companion-book:focus-visible {
  outline: 2px solid var(--bq-gold);
  outline-offset: 4px;
}

.bq-companion-book-spine {
  display: flex;
  width: 100%;
  height: 100%;
  /* Curved-spine illusion: dark at top/bottom edges, light highlight band
     running through the middle, simulates the curve of a real cylindrical
     book binding catching light. */
  background: linear-gradient(180deg,
    #1a3a1c 0%,
    #234d24 18%,
    #3a7a3d 50%,
    #234d24 82%,
    #1a3a1c 100%);
  /* Thin green border closes off the top and bottom of the parchment bands
     so they read as binding tape wrapping the spine ends, not just stripes
     of cream against the cream background behind the book. */
  border-top: 1.5px solid #1a3a1c;
  border-bottom: 1.5px solid #1a3a1c;
  border-radius: 2px 2px 1px 1px;
  position: relative;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.bq-companion-book-band {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #E8DFC1;
  opacity: 0.92;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
}
.bq-companion-book-band--left { left: 6px; }
.bq-companion-book-band--right { right: 6px; }

.bq-companion-book-title {
  font-family: var(--bq-serif-display);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--bq-gold);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  line-height: 1;
}


/* ============================================================
   Don't Panic content page (/portal/dontpanic.php).
   Companion book content rendered as a portal page. Universal
   access. Reuses portal-frame chrome (gold side bars + bottom
   bar) for visual consistency with the account page.
   ============================================================ */
.dontpanic-content {
  background: #FBF5E5;
  text-align: left;
}
.dontpanic-top {
  padding: 6px 0 18px;
  text-align: center;
}
.dontpanic-eyebrow {
  font-family: var(--bq-serif-body);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--bq-gold-soft);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dontpanic-h1 {
  font-family: var(--bq-serif-display);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--bq-gold);
  font-size: 36px;
  margin: 0 0 6px;
  line-height: 1.1;
}
.dontpanic-sub {
  font-family: var(--bq-serif-body);
  font-style: italic;
  color: #7A6B5A;
  font-size: 14px;
  margin: 0;
}

.dontpanic-body {
  padding: 8px 0 26px;
}

.dontpanic-section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(184, 134, 11, 0.18);
}
.dontpanic-section:last-of-type {
  border-bottom: 0;
}

.dontpanic-h2 {
  font-family: var(--bq-serif-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--bq-green);
  margin: 0 0 8px;
}

.dontpanic-p {
  font-family: var(--bq-serif-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bq-ink);
  margin: 0;
}

.dontpanic-signature {
  font-family: var(--bq-handwriting);
  font-size: 26px;
  color: var(--bq-green);
  text-align: center;
  margin: 24px 0 8px;
}