/* dogesites.com whitelist page: full-screen promo video, copy in the top third, launch in the bottom third.
   The center stays clear for the coin. Mobile first. No glow. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#000}
:root{--display:"Space Grotesk",system-ui,sans-serif;--body:"DM Sans",system-ui,-apple-system,sans-serif}
body{margin:0;min-height:100vh;min-height:100dvh;background:#000;color:#fff8ea;font:16px/1.45 var(--body);overflow-x:clip}
h1,.clock__time,.kicker,.clock__label,.btn,.when,.tease__big,.modal__title,.modal__eyebrow,.hw__label{font-family:var(--display)}
/* Intro: pure black with the copy, then the video (or poster) fades in. soon.js adds .is-in after ~2.5 s. */
.bg{position:fixed;inset:0;z-index:0;background:#000 url("/assets/dogesites-promo.jpg") center/cover no-repeat;opacity:0;transition:opacity 1.2s ease}
.bg.is-in{opacity:1}
.bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.bg__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,9,.92) 0%,rgba(13,11,9,.62) 22%,rgba(13,11,9,0) 36%,rgba(13,11,9,0) 58%,rgba(13,11,9,.72) 70%,rgba(13,11,9,.94) 100%)}
.soon{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(78px + env(safe-area-inset-top)) 18px calc(10px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.top{text-align:center}
.kicker{margin:0 0 12px;font:700 14px "Space Grotesk",sans-serif;letter-spacing:.02em;color:#ffcf40}
h1{margin:0;font-size:clamp(28px,8.4vw,50px);line-height:1.05;letter-spacing:-.025em}
/* "Ɖ" (U+0189): Space Grotesk has no glyph for it, so the page draws Space Grotesk's own D plus the crossbar.
   Numbers come from the D outline (stem 0.138-0.270em, cap height 0.70em): bar centred at 0.35em above the baseline. */
.dstroke{position:relative;display:inline-block;line-height:1}
.dstroke::after{content:"";position:absolute;z-index:1;display:block;left:-.02em;width:.36em;bottom:.454em;height:.1em;background:currentColor;border-radius:.02em}
.sub{margin:8px auto 0;max-width:30ch;font-size:clamp(15px,4.2vw,19px);color:#f3e7d3}
/* The launch block sits at the bottom of the screen, just above the footer (margin-top:auto pushes it down). */
.bottom{display:grid;gap:10px;margin-top:auto;padding-top:24px}
.clocks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.clock{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 10px;border-radius:16px;background:rgba(20,16,12,.78);border:0}
.clock--done{background:rgba(64,48,12,.82)}
.clock p{margin:0}
.clock__label{font:700 clamp(17px,4.8vw,19px)/1.15 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.005em;color:#ffcf40}
.clock__label span{display:block;margin-top:2px;font:500 11.5px/1.3 "DM Sans",system-ui,sans-serif;letter-spacing:0;color:#d8cbb4}
.clock__time{margin-top:6px!important;font-size:clamp(21px,6vw,28px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.clock__when{font-size:11.5px;color:#cbbfa9}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:54px;min-height:54px;padding:15px 30px;border-radius:16px;border:0;background:#ff7138;color:#fff;font:700 17px var(--display);text-decoration:none;cursor:pointer;transition:background-color .15s,transform .15s}
.btn:hover{background:#ff8452;transform:translateY(-1px)}
.btn:disabled{opacity:.7;cursor:progress;transform:none}
.btn--cta{display:inline-flex;gap:14px;height:72px;min-height:72px;padding:12px 30px;font-weight:700;font-size:21px;letter-spacing:-.01em;white-space:nowrap} /* hero CTA only: 72px, two lines */
.btn__label{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto;min-width:0;line-height:1.1}
.btn__sub{margin-top:3px;font:500 13px/1.2 "DM Sans",sans-serif;letter-spacing:0;color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;max-width:100%}
.btn__icon{width:20px;height:20px;flex:0 0 20px}
.btn__arrow{width:18px;height:18px;flex:0 0 18px;margin-left:auto;transition:transform .15s}
.btn--cta .btn__text{min-width:0;max-width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis}
.btn--cta .btn__icon{width:24px;height:24px;flex:0 0 24px}
.btn--cta .btn__arrow{width:20px;height:20px;flex:0 0 20px}
.btn--cta:hover .btn__arrow{transform:translateX(3px)}
.btn--go{background:#ffcf40;color:#17211b}
.btn--go:hover{background:#ffd95f}
/* After the overlay closes: a quieter Share on X in the CTA spot (outlined, same button rules). */
.btn--share{gap:10px;background:rgba(13,11,9,.55);color:#fff8ea;border:1.5px solid #ff7138}
.btn--share:hover{background:rgba(255,113,56,.16);border-color:#ff7138}
.btn--done{background:rgba(20,16,12,.78);color:#ffcf40;border:1.5px solid #ffcf40;cursor:default}
.btn--done:hover{background:rgba(20,16,12,.78);transform:none}
.btn:focus-visible{outline:3px solid #ffcf40;outline-offset:3px}
.when{margin:2px 0 4px;text-align:center;font:700 clamp(20px,5.8vw,26px)/1.2 "Space Grotesk",sans-serif;letter-spacing:-.005em;color:#fff}
.when[hidden]{display:none}
.status:empty{display:none}
.status{margin:0;min-height:2.6em;text-align:center;font-size:14.5px;color:#f3e7d3}
.status strong{color:#ffcf40}
.status .addr{display:block;margin-top:4px;font:500 11.5px/1.35 "Space Grotesk",sans-serif;letter-spacing:.01em;color:rgba(255,255,255,.5);overflow-wrap:anywhere}
.status a{color:#ffcf40;font-weight:700}
/* Contest tease: display type, orange-to-yellow, no glow. Falls back to solid orange where text clipping isn't supported. */
.tease{margin:6px 0 0;text-align:center}
.tease p{margin:0}
.tease__big{display:inline-block;max-width:100%;font:700 clamp(26px,7.4vw,38px)/1.06 "Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.14em;text-wrap:balance;color:#ff9a3c;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))} /* dark contrast shadow, not a glow */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tease__big{background:linear-gradient(90deg,#ff7138 0%,#ffa33a 50%,#ffcf40 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.tease__small{margin-top:6px!important;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.5)}
.foot{margin:10px 0 0;text-align:center;font:400 12.5px "DM Sans",sans-serif;color:rgba(255,255,255,.5)}
.foot a{color:inherit;text-decoration:none;font-weight:400;transition:color .15s}
.below{position:relative;z-index:1;background:#000;padding:56px 22px calc(56px + env(safe-area-inset-bottom));text-align:center}
.legal{max-width:560px;margin:0 auto;font:400 11.5px/1.55 "DM Sans",sans-serif;color:rgba(255,255,255,.4);text-wrap:pretty}
.below .legal a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:2px}
.below .legal a:hover,.below .legal a:focus-visible{color:#ff7138;text-decoration-color:currentColor}
.foot a:hover,.foot a:focus-visible{color:#ff7138}
.foot a:focus-visible{outline:2px solid #ff7138;outline-offset:2px;border-radius:4px}
/* Join celebration: confetti ported from si.dogesoft.io (same fall animation), Doge Soft colours, a few coins. */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-16px;width:10px;height:14px;border-radius:3px;animation:fall linear forwards}
.confetti i.coin{width:14px;height:14px;border-radius:50%;background:#ffcf40!important;border:2px solid #ff7138}
@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r))}}
/* Share overlay */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal__card{position:relative;width:100%;max-width:420px;padding:26px 22px 18px;border-radius:24px;background:#15110d;border:1.5px solid rgba(255,207,64,.3);text-align:center;color:#fff8ea}
.modal__x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;background:transparent;color:#d8cbb4;cursor:pointer}
.modal__x:hover{color:#fff8ea;background:rgba(255,255,255,.06)}
.modal__eyebrow{margin:0 0 8px;font:700 13px "Space Grotesk",sans-serif;letter-spacing:.02em;color:#ffcf40}
.modal__title{margin:0;font:700 clamp(28px,8vw,36px)/1.08 "Space Grotesk",sans-serif;letter-spacing:-.02em}
.modal__line{margin:10px 0 20px;font-size:16px;color:#f3e7d3}
.btn--x{gap:10px}
.modal__later{margin-top:8px;min-height:44px;padding:10px 16px;border:0;background:none;color:rgba(255,255,255,.6);font:500 15px "DM Sans",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.modal__later:hover{color:#fff8ea}
.modal__x:focus-visible,.modal__later:focus-visible{outline:3px solid #ffcf40;outline-offset:2px}
.modal.is-in .modal__card{animation:pop .28s ease both}
.modal.is-in .modal__backdrop{animation:dim .28s ease both}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dim{from{opacity:0}to{opacity:1}}
.page-glimmer{animation:glimmer 1.2s ease both}
@keyframes glimmer{0%{opacity:.6}100%{opacity:1}}
/* Coming soon: only the wallet connect icon, top right. */
.nav{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 12px 0;pointer-events:none}
.nav__btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);background:rgba(20,16,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-decoration:none;cursor:pointer}
.nav__btn:hover{background:rgba(32,26,20,.75)}
.nav__btn:focus-visible{outline:3px solid #ffcf40;outline-offset:2px}
.nav__btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:0;padding:7px 10px;border-radius:10px;background:#15110d;border:1px solid rgba(255,255,255,.14);color:#fff8ea;font:500 12.5px/1.2 var(--body);white-space:nowrap;opacity:0;transform:translateY(-4px);pointer-events:none}
.nav__btn:hover::after,.nav__btn:focus-visible::after{opacity:1;transform:none}
.nav__si{margin-right:0;pointer-events:auto}
.nav__si[aria-expanded="true"]{color:#ff7138;border-color:rgba(255,113,56,.6)}
.mark{width:16px;height:16px;border-radius:5px;background:#ff7138;position:relative;display:block}
.mark::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:3px;background:#ffcf40}
.hw{position:relative;pointer-events:auto}
.hw__btn{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);background:rgba(20,16,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.hw__btn svg{width:20px;height:20px;flex:0 0 20px}
.hw__btn:hover{background:rgba(32,26,20,.75)}
.hw__btn.is-on{color:#ff7138;border-color:rgba(255,113,56,.6)}
.hw__btn:focus-visible{outline:3px solid #ffcf40;outline-offset:2px}
.hw__btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;padding:7px 10px;border-radius:10px;background:#15110d;border:1px solid rgba(255,255,255,.14);color:#fff8ea;font:500 12.5px/1.2 "DM Sans",sans-serif;white-space:nowrap;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s}
.hw__btn:hover::after,.hw__btn:focus-visible::after,.hw__btn.tip::after{opacity:1;transform:none}
.hw__btn[aria-expanded="true"]::after{opacity:0}
.hw__menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:min(300px,calc(100vw - 24px));padding:12px;border-radius:16px;background:#15110d;border:1.5px solid rgba(255,207,64,.25);color:#fff8ea}
.hw__label{margin:0 0 4px;font:700 12px "Space Grotesk",sans-serif;letter-spacing:.02em;color:#ffcf40}
.hw__addr{margin:0 0 10px;font:500 12.5px/1.35 "Space Grotesk",sans-serif;color:rgba(255,255,255,.7);overflow-wrap:anywhere}
.hw__item{width:100%;min-height:44px;padding:10px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:transparent;color:#fff8ea;font:600 15px "DM Sans",sans-serif;cursor:pointer;text-align:left}
.hw__item:hover{border-color:#ff7138;color:#ff7138}
.hw__item:focus-visible{outline:3px solid #ffcf40;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sichat{position:fixed;inset:0;z-index:40;display:grid;place-items:end center;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.sichat__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.sichat__card{position:relative;width:min(520px,100%);max-height:min(88dvh,720px);overflow:auto;padding:18px 16px 14px;border-radius:22px;background:#fffdfa;color:#1f1b18;font:16px/1.5 var(--body)}
.sichat__x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;background:transparent;color:#6d655f;cursor:pointer}
.sichat__eyebrow{margin:0 0 4px;font:600 12px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#ff7138}
.sichat .stage-slot{position:relative;width:100%;height:220px;min-height:180px}
.sichat .stage-wrap{position:absolute;inset:0}
.sichat #stage{width:100%;height:100%;display:block;touch-action:pan-y}
.sichat .stage-fallback{display:none;position:absolute;inset:0;place-items:center}
.no-webgl .sichat #stage{display:none}
.no-webgl .sichat .stage-fallback{display:grid}
.sithread{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.sithread:empty{display:none}
.sithread .me{align-self:flex-end;max-width:85%;background:#ececec;color:#1a1a1a;border-radius:18px 18px 6px 18px;padding:8px 12px;font-size:15px}
.sithread .reply{background:#fff;border:1.5px solid #efe7df;border-radius:6px 18px 18px 18px;padding:12px 14px}
.sithread .reply p{margin:0 0 8px}
.sithread .reply p:last-child{margin:0}
.sithread .go-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sithread .go-links a{font:600 13px/1 var(--display);text-decoration:none;padding:8px 12px;border-radius:99px;background:#fff6ec;color:#1f1b18}
.siask{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #efe7df;border-radius:99px;padding:6px 6px 6px 16px}
.siask:focus-within{border-color:#ff7138}
.siask input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px/1.2 var(--body);color:#1f1b18;padding:8px 0}
.siask button{width:44px;height:44px;border:0;border-radius:50%;background:#ff7138;color:#fff;display:grid;place-items:center;cursor:pointer}
.nojs{position:fixed;left:0;right:0;bottom:0;z-index:2;margin:0;padding:12px;text-align:center;background:#17110b;color:#ffcf40}
[hidden]{display:none!important}
@media (min-width:900px){
  .soon{max-width:760px;padding-top:28px;padding-bottom:24px}
  .bottom{max-width:560px;width:100%;margin:auto auto 0} /* keep margin-top:auto: the block stays anchored at the bottom */
}
@media (prefers-reduced-motion:reduce){
  .bg__video{display:none}
  .btn,.btn__arrow,.foot a,.hw__btn,.hw__btn::after{transition:none}
  .modal.is-in .modal__card,.modal.is-in .modal__backdrop{animation:fade .4s ease both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}
#share{height:72px;min-height:72px;font-size:19px} /* in the joined state Share on X takes the hero CTA slot */