/* Best Family theme layer. The background is a single real image.
   Buttons remain live HTML controls, not flattened into the artwork. */
.best-home {
  --deep:#062b1c; --deep2:#0b3b27; --gold:#e7b84f; --cream:#fff0cf;
  --ink:#1c1710; color:var(--ink); font-family:Georgia,"Times New Roman",serif;
  width:100%; overflow:hidden; background:#082a1c;
}
.best-topbar {
  min-height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:8px clamp(18px,3vw,48px); color:var(--cream);
  background:linear-gradient(100deg,#052719,#0b3b27 55%,#052719);
  border-bottom:3px solid var(--gold); font-size:clamp(17px,2vw,27px);
}
.best-brand { color:inherit; text-decoration:none; display:flex; gap:10px; align-items:center; }
.brand-club { color:#f4c85e; font-size:1.6em; }
.private-label { font-size:.72em; }
.best-scene {
  min-height:770px; position:relative; isolation:isolate; padding:26px clamp(18px,5vw,78px) 24px;
  background-image:linear-gradient(180deg,rgba(8,20,13,.04),rgba(8,20,13,.03) 55%,rgba(26,12,3,.16)),
    url("/assets/best-family-background.jpg");
  background-position:center center; background-size:cover;
}
.switch-family {
  position:absolute; right:clamp(18px,3vw,48px); top:24px; z-index:3;
  color:var(--cream); background:linear-gradient(#0b432c,#042718);
  border:2px solid var(--gold); border-radius:30px; padding:12px 23px;
  box-shadow:0 3px 9px #0007; font:700 17px Georgia,serif; cursor:pointer;
}
.best-title-wrap { text-align:center; max-width:800px; margin:0 auto; padding-top:2px; }
.ace-fan { display:flex; justify-content:center; align-items:flex-end; height:120px; margin:0 auto -4px; }
.ace {
  width:78px; height:112px; display:block; padding:7px 8px; border-radius:10px;
  border:2px solid #d5b26c; background:linear-gradient(135deg,#fff5df,#dfc99f);
  box-shadow:0 5px 12px #0006; color:#17120c; text-align:left;
  font:bold 21px Georgia,serif; line-height:1.2;
}
.ace + .ace { margin-left:-8px; }
.ace-clubs { transform:rotate(-13deg); }.ace-spades{transform:rotate(-5deg) translateY(-9px)}
.ace-diamonds{transform:rotate(5deg) translateY(-8px)}.ace-hearts{transform:rotate(13deg)}
.ace-diamonds,.ace-hearts { color:#b3221b; }
.family-name-plaque {
  display:flex; align-items:center; justify-content:center; gap:18px;
  max-width:740px; margin:0 auto; padding:8px 25px;
  color:#fff0ca; background:linear-gradient(180deg,#12482f,#052619);
  border:4px solid #d8a83e; border-radius:70px; box-shadow:0 5px 0 #6f4a12,0 8px 16px #0007;
}
.family-name-plaque h1 { margin:0; font-size:clamp(32px,4.5vw,62px); line-height:1.08; }
.family-name-plaque span { color:#f3c75d; font-size:clamp(23px,3vw,40px); }
.family-motto { margin:10px 0 0; color:#120e09; font:bold italic clamp(17px,2vw,27px) Georgia,serif; text-shadow:0 1px 3px #fff8; }
.gold-divider { color:#e7b84f; font-size:28px; text-shadow:0 2px 3px #432b0c; margin:0 auto 14px; }
.share-memory {
  display:flex; align-items:center; justify-content:center; gap:20px;
  width:min(760px,88%); min-height:112px; margin:14px auto 20px;
  color:#fff1d2; background:linear-gradient(180deg,#0c4a30,#032719);
  border:4px solid #d7aa46; border-radius:70px; box-shadow:0 5px 0 #785015,0 9px 17px #0007;
  font:700 clamp(27px,4vw,54px) Georgia,serif; cursor:pointer;
}
.share-memory .plus { display:grid; place-items:center; width:58px; height:58px; border:4px solid #f4dfae; border-radius:50%; font:700 48px/1 Arial,sans-serif; }
.contribution-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:1370px; margin:0 auto 24px; }
.contribution-card {
  position:relative; min-height:148px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#102e20; background:linear-gradient(145deg,#fff6df,#f0d9a8);
  border:3px solid #c99536; border-radius:22px; box-shadow:inset 0 0 0 3px #fff8e7,0 6px 10px #0005;
  cursor:pointer; font-family:Georgia,serif;
}
.contribution-card .suit { position:absolute; left:14px; top:8px; font-size:27px; }
.suit.diamond,.suit.heart { color:#b4211b; }.suit.spade{color:#101512}
.button-icon { font:48px/1 Arial,sans-serif; margin:4px 0 7px; color:#0c3a27; }
.contribution-card strong { font-size:clamp(19px,2vw,28px); line-height:1.05; text-align:center; }
.family-links { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1450px; margin:0 auto; }
.family-link-card {
  display:grid; grid-template-columns:190px 1fr 56px; align-items:center; gap:14px;
  min-height:145px; padding:12px 20px; text-align:left; color:#17130d;
  background:linear-gradient(110deg,#fff0ca,#f4dfb3); border:3px solid #d2a24b;
  border-radius:26px; box-shadow:inset 0 0 0 3px #fff9e9,0 6px 10px #0005; cursor:pointer;
}
.link-art { display:grid; place-items:center; height:112px; color:#31552d; font-size:92px; text-shadow:0 4px 5px #8b6a32; }
.collection-art { color:#8c4c20; }
.link-copy strong { display:block; font-size:clamp(20px,2.3vw,34px); margin-bottom:6px; }
.link-copy em { font-size:clamp(14px,1.45vw,20px); line-height:1.25; }
.round-arrow { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; color:#fff0c9; background:linear-gradient(#0d482d,#052619); border:2px solid #d8ac4b; font:32px Arial,sans-serif; }
.best-bottom-nav {
  min-height:88px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding:6px 5%; background:linear-gradient(100deg,#052719,#0b3b27,#052719); border-top:3px solid #d4a33c;
}
.best-bottom-nav button {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:#fff0cf; background:transparent; border:0; font:30px Georgia,serif; cursor:pointer;
}
.best-bottom-nav button span { font-size:16px; font-weight:bold; }
.best-bottom-nav button.active { color:#f4c45a; border-bottom:4px solid #f0b72f; }
.best-home button:focus-visible { outline:4px solid #ffdb70; outline-offset:3px; }
@media(max-width:800px) {
 .best-scene { padding:95px 14px 20px; }
 .best-title-wrap { padding-top:0; }
 .ace-fan { height:80px; transform:scale(.76); transform-origin:bottom center; }
 .family-name-plaque { padding:8px 10px; gap:8px; border-width:3px; }
 .family-name-plaque h1 { font-size:clamp(26px,7vw,42px); }
 .family-motto { font-size:16px; }
 .share-memory { width:100%; min-height:76px; font-size:clamp(23px,6vw,34px); gap:10px; margin:12px auto 15px; border-width:3px; }
 .share-memory .plus { width:42px; height:42px; font-size:34px; border-width:3px; }
 .contribution-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .contribution-card { min-height:118px; }
 .contribution-card strong { font-size:20px; }
 .family-links { grid-template-columns:1fr; gap:10px; }
 .family-link-card { grid-template-columns:80px 1fr 42px; min-height:110px; padding:8px 10px; gap:8px; }
 .link-art { height:80px; font-size:58px; }
 .link-copy strong { font-size:20px; }.link-copy em { font-size:13px; }
 .round-arrow { width:38px; height:38px; font-size:24px; }
 .switch-family { top:14px; right:14px; font-size:14px; padding:9px 15px; }
 .best-bottom-nav { min-height:76px; padding:4px 2%; }
 .best-bottom-nav button { font-size:24px; }.best-bottom-nav button span { font-size:12px; }
}