*{box-sizing:border-box}
html,body{margin:0;background:#050403;color:#f7edd2;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}
.mf{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#050403;isolation:isolate}
.heroPic,.hero{position:absolute;inset:0;width:100%;height:100%}
.hero{object-fit:cover;object-position:center;transition:filter 1.4s ease}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,2,2,.95) 0%,rgba(2,2,2,.82) 28%,rgba(2,2,2,.30) 48%,rgba(0,0,0,.03) 69%),linear-gradient(0deg,rgba(0,0,0,.32),transparent 45%)}
#ambient,#burstCanvas{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
#burstCanvas{z-index:15}
.basinGlow{position:absolute;z-index:3;right:7%;bottom:10%;width:41%;height:25%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,208,86,.28),rgba(255,186,37,.08) 48%,transparent 72%);filter:blur(13px);opacity:.76;animation:breathe 3.8s ease-in-out infinite;transition:opacity 1.4s ease,filter 1.4s ease}
.topbar{position:relative;z-index:10;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:21px clamp(24px,4vw,62px);border-bottom:1px solid rgba(255,220,120,.07);background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)}
.brand{display:flex;align-items:center;gap:10px;font:21px Georgia,serif;letter-spacing:.05em;color:#edc565}.brand img{width:37px;height:37px;border-radius:50%}
nav{display:flex;justify-content:center;gap:clamp(15px,2.5vw,34px);font-size:11px;font-weight:800;letter-spacing:.08em}
.wallet{min-height:42px;border:1px solid rgba(237,189,77,.48);border-radius:9px;background:rgba(0,0,0,.38);color:#efc86a;padding:0 16px;font-size:10px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.wallet.on{color:#80e2aa;border-color:rgba(90,214,142,.48)}
.copy{position:relative;z-index:7;width:min(610px,49vw);padding:clamp(88px,9vw,128px) 0 100px clamp(28px,6vw,94px)}
.kicker{font-size:11px;letter-spacing:.21em;font-weight:850;color:#e9bd55;margin-bottom:16px}
h1{margin:0;font:500 clamp(56px,6.3vw,104px)/.86 Georgia,serif;letter-spacing:-.045em;background:linear-gradient(#fff8df,#e3bf62 55%,#936a23);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 10px 40px #000}
.copy p{font:clamp(19px,1.8vw,25px)/1.5 Georgia,serif;color:#e8dfcd;max-width:500px;margin:28px 0}.copy p b{color:#f1c75c;font-weight:500}
.claimDock{
  position:absolute;
  z-index:18;
  left:72%;
  bottom:clamp(48px,6.5vh,84px);
  transform:translateX(-50%);
  width:min(540px,42vw);
  text-align:center
}
.claim{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  width:100%;
  min-height:82px;
  border:1px solid rgba(255,224,139,.88);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(60,45,19,.97),rgba(10,8,5,.985));
  color:#ffe7a5;
  padding:11px 34px 11px 13px;
  font-size:16px;
  font-weight:950;
  letter-spacing:.095em;
  text-shadow:0 1px 12px rgba(255,209,98,.18);
  box-shadow:
    0 0 0 1px rgba(255,220,125,.06) inset,
    0 18px 52px rgba(0,0,0,.58),
    0 0 42px rgba(226,171,40,.26),
    0 0 90px rgba(226,171,40,.10);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .2s ease,opacity .2s ease;
  animation:mainEventGlow 3s ease-in-out infinite
}
.claim img{width:47px;height:47px;border-radius:50%;filter:drop-shadow(0 0 11px rgba(255,193,54,.46))}
.claim:hover{transform:translateY(-2px)}
.claim:active{transform:translateY(1px) scale(.992)}
.claim:disabled{opacity:.52;cursor:not-allowed;animation:none}
.meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 0;font-size:12px;color:#c8ba9b;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.meta i{width:8px;height:8px;border-radius:50%;background:#55d78b;box-shadow:0 0 11px rgba(85,215,139,.65)}
.sep{opacity:.4}
.card{display:none;margin:17px auto 0;max-width:420px;padding:15px 18px;border:1px solid rgba(235,188,82,.25);border-radius:16px;background:rgba(5,4,3,.68);backdrop-filter:blur(9px);text-align:center;color:#d5c8ad}
.card.show{display:flex;flex-direction:column;gap:4px;animation:rise .4s ease}
.card strong{font:24px Georgia,serif;color:#f2c861}.card small{line-height:1.4}
.pool{position:absolute;z-index:6;right:7%;bottom:12%;width:37%;height:22%;transition:opacity 1.1s ease}
.poolCoin{position:absolute;width:64px;height:64px;border-radius:50%;filter:drop-shadow(0 0 13px rgba(255,193,54,.58));animation:bob 4.3s ease-in-out infinite}
.p1{left:19%;top:51%;rotate:-10deg}.p2{left:50%;top:64%;width:54px;height:54px;animation-delay:-1.7s}.p3{left:73%;top:43%;width:60px;height:60px;rotate:10deg;animation-delay:-3s}
.coins{position:absolute;inset:0;z-index:16;pointer-events:none}
.flyCoin{position:absolute;width:72px;height:72px;border-radius:50%;filter:drop-shadow(0 0 16px rgba(255,205,72,.88))}
.demo{position:absolute;z-index:25;right:16px;bottom:15px;display:flex;gap:6px;padding:7px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(3,3,3,.74);backdrop-filter:blur(11px)}
.demo button{border:0;border-radius:999px;background:rgba(255,255,255,.07);color:#e7ddc8;padding:8px 10px;font-size:9px;font-weight:800;cursor:pointer}
.mf[data-state=low] .hero{filter:brightness(.79) saturate(.78)}
.mf[data-state=low] .basinGlow{opacity:.32;filter:blur(16px) saturate(.65)}
.mf[data-state=low] .meta i{background:#dca43a}
.mf[data-state=dry] .hero{filter:brightness(.44) saturate(.23)}
.mf[data-state=dry] .basinGlow{opacity:.02}
.mf[data-state=dry] .pool{opacity:.08}
.mf[data-state=dry] .meta i{background:#cf5c50}
.mf.surge .basinGlow{animation:surge .85s ease-out both}
.mf.refilling .basinGlow{animation:refill 1.5s ease-out both}
@keyframes breathe{50%{transform:scale(1.04);opacity:.9}}
@keyframes buttonGlow{0%,100%{box-shadow:0 15px 40px rgba(0,0,0,.44),0 0 24px rgba(226,171,40,.14)}50%{box-shadow:0 15px 40px rgba(0,0,0,.44),0 0 38px rgba(226,171,40,.28)}}
@keyframes bob{50%{translate:0 -8px;rotate:3deg}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes surge{35%{transform:scale(1.24);opacity:1}100%{transform:scale(1);opacity:.78}}
@keyframes refill{0%{transform:scale(.7);opacity:.02}45%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:.78}}
@media(max-width:700px){
  .mf{min-height:max(960px,100vh);min-height:max(960px,100svh)}
  .hero{object-position:center bottom}
  .shade{background:linear-gradient(180deg,rgba(0,0,0,.87) 0%,rgba(0,0,0,.59) 25%,rgba(0,0,0,.14) 48%,rgba(0,0,0,.02) 68%,rgba(0,0,0,.26) 100%)}
  .topbar{grid-template-columns:1fr auto;padding:16px}.brand{font-size:16px}.brand img{width:31px;height:31px}nav{display:none}.wallet{min-height:38px;padding:0 11px;font-size:9px}
  .copy{width:100%;padding:62px 17px 0}
  .kicker{font-size:9px}h1{font-size:clamp(51px,15.2vw,72px)}.copy p{font-size:18px;max-width:345px;margin:20px 0 0}
  .claimDock{left:50%;bottom:145px;transform:translateX(-50%);width:min(90%,390px);text-align:center}
  .claim{width:100%;min-height:76px;justify-content:center;font-size:15px;padding-right:26px;box-shadow:0 18px 48px rgba(0,0,0,.54),0 0 42px rgba(226,171,40,.27)}
  .claim img{width:52px;height:52px}
  .meta{font-size:11px}
  .pool{right:3%;bottom:8%;width:94%;height:29%}
  .basinGlow{right:-10%;bottom:2%;width:120%;height:35%}
  .demo{left:9px;right:9px;bottom:9px;justify-content:center;overflow:hidden}.demo button{padding:8px 9px}
}
@media(max-width:390px){.mf{min-height:max(920px,100vh);min-height:max(920px,100svh)}.claimDock{bottom:132px}.copy{padding-left:15px;padding-right:15px}h1{font-size:49px}.copy p{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
50%{transform:translate(12px,-12px) scale(1.25);opacity:1}100%{transform:translate(-2px,-18px) scale(.7);opacity:.15}}

50%{transform:scale(1.08);opacity:1}
}

.flyCoinWrap{
  position:absolute;
  pointer-events:none;
  width:88px;
  height:88px;
}
.flyCoinWrap::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,238,185,.15) 0%,
    rgba(255,205,92,.08) 36%,
    rgba(255,190,47,.03) 56%,
    transparent 74%);
  filter:blur(12px);
  animation:coinHaze 1.05s ease-in-out infinite;
}
.flyCoinWrap .flyCoin{
  position:absolute;
  left:8px;
  top:8px;
  width:72px;
  height:72px;
}
@keyframes coinHaze{
  0%,100%{transform:scale(.94);opacity:.48}
  50%{transform:scale(1.08);opacity:.82}
}


nav a{color:inherit;text-decoration:none}
.message{min-height:19px;margin-top:12px;text-align:center;color:#e6c573;font-size:12px}
.tinyStats{position:absolute;z-index:10;right:20px;top:82px;display:flex;gap:8px;align-items:center;color:rgba(239,226,195,.66);font-size:11px;text-shadow:0 2px 7px #000}
.tinyStats b{color:#edc568;font-weight:800}
.mf.pending .basinGlow{animation:pendingGlow .75s ease-in-out infinite}
.mf.pending .claim{box-shadow:0 15px 40px rgba(0,0,0,.44),0 0 40px rgba(226,171,40,.3)}
@keyframes pendingGlow{50%{transform:scale(1.09);opacity:1}}
@media(max-width:700px){
  .tinyStats{top:auto;right:50%;bottom:101px;transform:translateX(50%);width:100%;justify-content:center;font-size:10px}
}

.flyCoinWrap{position:absolute;pointer-events:none;width:88px;height:88px}
.flyCoinWrap::before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(255,238,185,.15),rgba(255,205,92,.08) 36%,rgba(255,190,47,.03) 56%,transparent 74%);filter:blur(12px)}
.flyCoinWrap .flyCoin{position:absolute;left:8px;top:8px;width:72px;height:72px}

/* Production hotfix */
html,body{min-height:100%;background:#050403}
.demo[hidden]{display:none!important}
.heroPic{overflow:hidden}


/* V5.2.5 reliable wallet dropdown */
.walletWrap{position:relative;justify-self:end}
.walletMenu[hidden]{display:none!important}
.walletMenu{
  position:absolute;
  right:0;
  top:calc(100% + 9px);
  z-index:9999;
  width:245px;
  padding:7px;
  border:1px solid rgba(235,193,92,.28);
  border-radius:14px;
  background:rgba(8,7,5,.985);
  box-shadow:0 20px 60px rgba(0,0,0,.58),0 0 28px rgba(222,169,43,.08);
  backdrop-filter:blur(14px);
}
.walletMenu button{
  width:100%;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:3px;
  padding:9px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#f1d891;
  cursor:pointer;
  text-align:left;
}
.walletMenu button:hover{background:rgba(255,211,101,.075)}
.walletMenu button b{font-size:13px}
.walletMenu button small{font-size:10px;color:#a99977}
.walletMenu .disconnectItem{
  margin-top:5px;
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:0 0 9px 9px;
  color:#edaaa1;
}
@media(max-width:700px){
  .walletMenu{right:0;width:min(255px,82vw)}
}

/* V5.4 MAIN EVENT */
#waterFx{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
}
.claim::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-34%;
  width:22%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,246,208,.30),transparent);
  animation:claimSweep 4.2s ease-in-out infinite;
  pointer-events:none;
}
.claim img{
  width:58px!important;
  height:58px!important;
  filter:drop-shadow(0 0 16px rgba(255,198,52,.66))!important;
}
.claim:hover{
  transform:translateY(-3px) scale(1.012);
  box-shadow:
    0 20px 58px rgba(0,0,0,.58),
    0 0 58px rgba(234,182,52,.38),
    0 0 120px rgba(234,182,52,.14);
}
.claim:disabled{
  transform:none;
}
.claimDock .meta{
  margin-top:11px;
  color:rgba(235,220,186,.86);
}
@keyframes mainEventGlow{
  0%,100%{
    box-shadow:0 18px 52px rgba(0,0,0,.58),0 0 32px rgba(226,171,40,.20),0 0 72px rgba(226,171,40,.07)
  }
  50%{
    box-shadow:0 18px 52px rgba(0,0,0,.58),0 0 54px rgba(239,188,54,.36),0 0 108px rgba(239,188,54,.14)
  }
}
@keyframes claimSweep{
  0%,68%{left:-34%;opacity:0}
  74%{opacity:1}
  100%{left:122%;opacity:0}
}
.fountainLive .basinGlow{
  opacity:.9;
}
.mf.surge .basinGlow{
  filter:blur(10px) brightness(1.45);
}
.tinyStats{
  padding:7px 10px;
  border:1px solid rgba(236,193,92,.10);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(6px);
}
@media(max-width:900px) and (min-width:701px){
  .claimDock{left:69%;width:min(500px,48vw)}
  .claim{font-size:14px;min-height:76px}
}
@media(max-width:700px){
  .claimDock{
    left:50%;
    bottom:145px;
    transform:translateX(-50%);
    width:min(92%,410px);
  }
  .claim{
    min-height:78px;
    font-size:15px;
    padding-right:24px;
  }
  .claim img{width:54px!important;height:54px!important}
}


/* V5.5 VISUAL-ONLY VIDEO HERO
   Functional V5.4.5 JS is intentionally untouched. */
.heroVideo{
  display:block;
  object-fit:cover;
  object-position:center center;
  background:#050403;
  filter:saturate(1.035) contrast(1.025) brightness(.99);
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* Real water is now in the video. Keep the existing canvas water as only
   a faint highlight layer rather than competing with the footage. */
#waterFx{
  opacity:.24;
}

/* A restrained cinematic edge treatment; no layout or interaction changes. */
.mf::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 73% 53%,transparent 0 30%,rgba(0,0,0,.035) 53%,rgba(0,0,0,.16) 100%),
    linear-gradient(180deg,rgba(0,0,0,.055),transparent 24%,transparent 77%,rgba(0,0,0,.10));
}

@media(max-width:700px){
  /* Source is 16:9. This crop deliberately tracks the Fountain on the
     right side of the Grok frame for a strong vertical composition. */
  .heroVideo{
    object-position:72% center;
    filter:saturate(1.035) contrast(1.025) brightness(.97);
  }
  #waterFx{opacity:.18}
}

/* V5.5.1 PERFORMANCE */
#waterFx{mix-blend-mode:normal}


/* =========================================================
   V5.6 FINAL FRONTEND POLISH
   Presentation/state only. Wallet + payout plumbing unchanged.
   ========================================================= */

/* Active poster sits behind video so autoplay-blocking browsers still look intentional. */
.activePoster{
  z-index:0;
  pointer-events:none;
}
.heroVideo{
  z-index:1;
  pointer-events:none;
  opacity:1;
  transition:opacity .32s ease,filter 1.4s ease;
}
.mf.videoFallback .heroVideo{opacity:0}

/* True dry/daytime hero supplied by the Founder. */
.dryHero{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease,visibility .45s ease;
}
.dryHeroImage{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.mf.balanceDry .heroPic{
  opacity:0;
  visibility:hidden;
}
.mf.balanceDry .dryHero{
  opacity:1;
  visibility:visible;
}
.mf.balanceDry .basinGlow,
.mf.balanceDry .pool,
.mf.balanceDry #ambient,
.mf.balanceDry #waterFx{
  opacity:0!important;
}
.mf.balanceDry .shade{
  background:
    linear-gradient(90deg,rgba(2,2,2,.76) 0%,rgba(2,2,2,.57) 28%,rgba(2,2,2,.16) 51%,rgba(0,0,0,.02) 72%),
    linear-gradient(0deg,rgba(0,0,0,.18),transparent 48%);
}
.mf.balanceDry::after{
  background:
    radial-gradient(ellipse at 58% 54%,transparent 0 34%,rgba(0,0,0,.025) 57%,rgba(0,0,0,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.025),transparent 30%,transparent 80%,rgba(0,0,0,.08));
}

/* Public scoreboard: all-time wishes + meaningful state only. */
.tinyStats #publicState{color:rgba(239,226,195,.78)}
.mf[data-state=active] .tinyStats #publicState{color:rgba(159,224,181,.86)}
.mf[data-state=low] .tinyStats #publicState{color:rgba(230,187,89,.90)}
.mf[data-state=dry] .tinyStats #publicState{color:rgba(229,176,122,.90)}

/* Small mobile polish + browser safe areas. */
@media(max-width:700px){
  .claimDock{
    bottom:max(145px,calc(env(safe-area-inset-bottom) + 116px));
  }
  .tinyStats{
    bottom:max(101px,calc(env(safe-area-inset-bottom) + 72px));
  }
  .dryHeroImage{
    object-position:center center;
  }
  .mf.balanceDry .shade{
    background:
      linear-gradient(180deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.42) 25%,rgba(0,0,0,.10) 49%,rgba(0,0,0,.02) 72%,rgba(0,0,0,.16) 100%);
  }
}
@media(max-width:390px){
  .claimDock{
    bottom:max(132px,calc(env(safe-area-inset-bottom) + 105px));
  }
}

/* Nothing internal should accidentally become visible. */
#remaining[hidden]{display:none!important}


/* V5.6.1 — match main-site Mansioncoin header branding */
.brand{
  text-decoration:none;
  color:inherit;
}
.brand span{
  font-family:Manrope,Inter,sans-serif;
  font-weight:800;
  letter-spacing:.12em;
}

/* V5.6.2 — complete Mansioncoin desktop nav */
@media (min-width:701px) and (max-width:1180px){
  .topbar{gap:16px;padding-left:24px;padding-right:24px}
  .topbar nav{gap:clamp(9px,1.35vw,18px);font-size:10px}
}


/* =========================================================
   V5.6.3 — MANSIONCOIN SITE HEADER MATCH
   Mirrors the main Mansioncoin header visual system.
   No wallet, claim, API, animation, or payout logic changed.
   ========================================================= */

.siteHeaderMatch{
  position:relative;
  z-index:100;
  height:76px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  padding:0 max(24px,calc((100vw - 1280px)/2));
  border-bottom:1px solid rgba(255,255,255,.085);
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}

.siteHeaderMatch .brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:max-content;
  color:#f5f1e8;
  text-decoration:none;
}

.siteHeaderMatch .brand img{
  width:38px;
  height:38px;
  border-radius:50%;
  filter:drop-shadow(0 4px 16px rgba(227,184,66,.22));
}

.siteHeaderMatch .brand-name{
  font-family:Manrope,Inter,sans-serif;
  font-weight:800;
  letter-spacing:.12em;
  font-size:.84rem;
  color:#f5f1e8;
}

.siteHeaderMatch nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:27px;
  margin-left:auto;
  font-family:Inter,system-ui,sans-serif;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
}

.siteHeaderMatch nav a{
  color:#d2cdc4;
  text-decoration:none;
  transition:color .18s ease;
}

.siteHeaderMatch nav a:hover{
  color:#fff;
}

.siteHeaderMatch .walletWrap{
  justify-self:end;
}

.siteHeaderMatch .wallet{
  min-height:42px;
  padding:0 18px;
  border:1px solid rgba(255,236,170,.52);
  border-radius:10px;
  background:linear-gradient(180deg,#f5d77e,#e3b842);
  color:#0a0906;
  font-family:Inter,system-ui,sans-serif;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 8px 30px rgba(227,184,66,.12);
}

.siteHeaderMatch .wallet:hover{
  filter:brightness(1.04);
}

.siteHeaderMatch .wallet.on{
  color:#07120c;
  border-color:rgba(159,224,181,.58);
  background:linear-gradient(180deg,#a9e8c0,#6fcb93);
}

/* Keep the wallet chooser luxurious but align it directly to the main header button. */
.siteHeaderMatch .walletMenu{
  top:calc(100% + 10px);
}

/* Tablet: preserve the same visual system while fitting all nav items. */
@media (min-width:701px) and (max-width:1180px){
  .siteHeaderMatch{
    gap:16px;
    padding-left:24px;
    padding-right:24px;
  }
  .siteHeaderMatch nav{
    gap:clamp(10px,1.4vw,18px);
    font-size:.72rem;
  }
  .siteHeaderMatch .wallet{
    padding:0 13px;
    font-size:.68rem;
  }
}

/* Mobile keeps the existing working Fountain wallet access,
   but uses the same main-site header dimensions, typography and surface. */
@media(max-width:700px){
  .siteHeaderMatch{
    height:68px;
    grid-template-columns:1fr auto;
    gap:14px;
    padding:0 15px;
    background:rgba(5,5,5,.88);
  }
  .siteHeaderMatch nav{
    display:none;
  }
  .siteHeaderMatch .brand{
    gap:10px;
  }
  .siteHeaderMatch .brand img{
    width:34px;
    height:34px;
  }
  .siteHeaderMatch .brand-name{
    font-size:.78rem;
  }
  .siteHeaderMatch .wallet{
    min-height:40px;
    padding:0 12px;
    font-size:.66rem;
  }
}


/* =========================================================
   V5.6.4 — BUY + CONNECT WALLET
   BUY remains visible without replacing the Fountain's primary wallet action.
   ========================================================= */

.siteHeaderMatch{
  grid-template-columns:auto 1fr auto auto;
}

.siteHeaderMatch .fountainBuy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(227,184,66,.48);
  border-radius:10px;
  background:rgba(227,184,66,.055);
  color:#f5d77e;
  text-decoration:none;
  font-family:Inter,system-ui,sans-serif;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.055em;
  white-space:nowrap;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.siteHeaderMatch .fountainBuy:hover{
  background:rgba(227,184,66,.105);
  border-color:rgba(245,215,126,.72);
  color:#fff0b2;
}

.siteHeaderMatch .fountainBuy:active{
  transform:translateY(1px);
}

@media (min-width:701px) and (max-width:1180px){
  .siteHeaderMatch .fountainBuy{
    min-height:40px;
    padding:0 12px;
    font-size:.66rem;
  }
}

/* Mobile: brand + BUY + wallet stay visible in one clean row. */
@media(max-width:700px){
  .siteHeaderMatch{
    grid-template-columns:1fr auto auto;
    gap:8px;
  }

  .siteHeaderMatch .fountainBuy{
    min-height:38px;
    padding:0 10px;
    border-radius:9px;
    font-size:.61rem;
    letter-spacing:.04em;
  }

  .siteHeaderMatch .wallet{
    min-height:38px;
    padding:0 10px;
    font-size:.61rem;
  }
}

@media(max-width:390px){
  .siteHeaderMatch .brand-name{
    font-size:.72rem;
    letter-spacing:.095em;
  }

  .siteHeaderMatch .brand img{
    width:32px;
    height:32px;
  }

  .siteHeaderMatch .fountainBuy{
    padding:0 8px;
    font-size:.57rem;
  }

  .siteHeaderMatch .wallet{
    padding:0 8px;
    font-size:.57rem;
  }
}


/* =========================================================
   V5.6.6 — iPhone / Safari stability
   Decorative video can never act like a tappable media player.
   Wallet/claim controls get explicit touch behavior.
   ========================================================= */

.heroPic,
.heroVideo,
.activePoster{
  pointer-events:none!important;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

button,
.walletMenu button,
.fountainBuy,
.brand{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

@media(max-width:700px){
  .walletMenu button{
    min-height:60px;
  }

  .claim,
  .wallet,
  .fountainBuy{
    -webkit-user-select:none;
    user-select:none;
  }
}


/* V5.6.7 — iOS first-tap response */
.siteHeaderMatch .wallet{
  touch-action:manipulation;
}
.siteHeaderMatch .wallet:active{
  transform:translateY(1px) scale(.985);
  filter:brightness(1.08);
}
.siteHeaderMatch .wallet[aria-expanded="true"]{
  box-shadow:
    0 0 0 2px rgba(245,215,126,.14),
    0 10px 34px rgba(227,184,66,.18);
}


/* V5.6.10 — mobile wallet chooser uses genuine universal-link anchors */
.walletMenu a[data-wallet]{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  min-height:52px;
  padding:10px 14px;
  border:0;
  background:transparent;
  color:inherit;
  text-decoration:none;
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.walletMenu a[data-wallet] b,
.walletMenu a[data-wallet] small{
  display:block;
}
.walletMenu a[data-wallet]:hover,
.walletMenu a[data-wallet]:active{
  background:rgba(227,184,66,.08);
}
@media(max-width:700px){
  .walletMenu a[data-wallet]{min-height:60px}
}


/* V5.6.11 — idle GPU fix
   Full-screen FX canvases wake only during the claim celebration. */
#waterFx,
#ambient,
#burst{
  pointer-events:none!important;
  will-change:auto;
}