/* Bloom invite page, 2026-11-04 rebuild. Same grammar as the GLYTCH invite pages that sell (glytchenergy.com/i/*):
   the character's world owns the first screen, the inviter says "invited you to GLYTCH.", one game button.
   Fonts are served from this host because bloomverse.io's CSP allows font-src 'self' only. */
:root{color-scheme:dark;--bg:#080810;--ink:#eff4f1;--dim:#b9c4c0;--mint:#7FFFE6;--ease:cubic-bezier(.16,1,.3,1);
  --display:"Supreme","Helvetica Neue",Arial,sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
a{color:inherit}

/* ---------- first screen: the character select ---------- */
.scene{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.world{position:absolute;inset:0;z-index:-1}
.world .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;transition:opacity .45s var(--ease)}
/* the floor the text stands on: a directional fade from the bottom, not a glow */
.world:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08081000 0%,#08081000 34%,#080810b8 56%,#080810f2 72%,var(--bg) 100%)}
.world .ch{position:absolute;right:-6vw;top:76px;height:min(62svh,640px);width:auto;max-width:none;
  filter:drop-shadow(0 24px 40px #000c);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%);mask-image:linear-gradient(180deg,#000 78%,transparent 99%);transition:opacity .35s var(--ease),transform .45s var(--ease)}
body.swap .world .ch{opacity:0;transform:translateX(18px)}
body.swap .world .bg{opacity:.35}

.glytch{position:absolute;left:18px;top:max(16px,env(safe-area-inset-top));z-index:2}
.glytch img{width:76px;height:auto}

.card{padding:0 18px calc(22px + env(safe-area-inset-bottom));max-width:560px}
h1{margin:0;font:700 31px/1.08 var(--display);letter-spacing:-.01em;text-shadow:0 2px 18px #000a}
h1 .bloom{width:178px;height:auto;margin:0 0 10px -4px}
h1 span{display:block}

.who{margin:16px 0 10px;font:600 15px/1 var(--body);color:var(--dim);letter-spacing:.01em}
.who b{font:700 26px/1 var(--cond);text-transform:uppercase;letter-spacing:.04em;color:var(--tone);margin-right:6px;transition:color .3s}

.roster{display:flex;gap:8px}
.roster button{flex:1 1 0;min-width:0;height:64px;padding:0;border:0;border-radius:10px;cursor:pointer;overflow:hidden;
  background:#ffffff10;box-shadow:inset 0 0 0 1px #ffffff1f;transition:box-shadow .2s,background .2s,transform .2s var(--ease)}
.roster button img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;opacity:.72;transition:opacity .2s}
.roster button[aria-pressed="true"]{background:#ffffff1a;box-shadow:inset 0 0 0 2px var(--tone),0 0 22px -6px var(--tone);transform:translateY(-3px)}
.roster button[aria-pressed="true"] img,.roster button:hover img{opacity:1}
.roster button:focus-visible{outline:3px solid #e3fff2;outline-offset:3px}

.deal{margin:14px 0 18px;font-size:15px;line-height:1.55;color:var(--dim)}
.deal b{color:var(--ink);font-weight:600;font-size:17px}
.deal span{color:var(--mint)}

/* the house game button (glytchenergy.com/i/i.css .go.accept), unchanged */
.go{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;height:64px;padding:0 13px 0 28px;margin:0 6px 10px;
  border-radius:10px;transform:skewX(-8deg);text-decoration:none;overflow:hidden;
  background:linear-gradient(180deg,#d9fff6 0%,#7FFFE6 48%,#22D8C0 100%);color:#04201c;
  font:italic 900 29px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;
  box-shadow:inset 0 2px 0 #ffffffd9,inset 0 -3px 0 #0e8f8259,0 8px 0 #0E8F82,0 10px 0 #04201c,0 18px 30px #000000a0,0 0 36px -6px #7FFFE6;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .2s}
.go>.lbl,.go>.chip{transform:skewX(8deg)}
.go>.lbl{white-space:nowrap}
.go .chip{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;background:#04201c;color:#7FFFE6;box-shadow:inset 0 0 0 1px #0E8F82}
.go:hover{background:linear-gradient(180deg,#ecfffb 0%,#9bffec 48%,#3be3cd 100%)}
.go:active{transform:skewX(-8deg) translateY(8px);box-shadow:inset 0 2px 0 #ffffffb3,0 0 0 #0E8F82,0 2px 0 #04201c,0 6px 12px #00000080}
.go:focus-visible{outline:3px solid #e3fff2;outline-offset:6px}
.go:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%) no-repeat;background-size:220% 100%;background-position:160% 0}
.scene .go:after{animation:sweep 1.1s .5s cubic-bezier(.3,.6,.3,1) 1 both}
@keyframes sweep{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
.cap{margin:12px 0 0;font-size:13px;color:#8f9a97}

/* ---------- second screen: the box ---------- */
.box{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding:56px 18px 40px;max-width:1180px;margin:0 auto}
.box .shot{width:100%;max-width:420px;height:auto;margin:0 auto;border-radius:14px;box-shadow:0 30px 60px -20px #000}
.box h2{margin:0 0 10px;font:700 27px/1.12 var(--display);letter-spacing:-.01em}
.box p{margin:0 0 14px;color:var(--dim)}
.box .facts{list-style:none;padding:0;margin:4px 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.box .facts li{color:var(--dim);font-size:15px}
.box .facts b{display:block;font:700 24px/1.1 var(--cond);color:var(--ink);letter-spacing:.02em}
.extras{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:22px 0 14px}
.extras img{height:84px;width:auto}
.extras img:last-child{height:46px}
.box .go{max-width:420px;margin-top:22px}

footer{padding:26px 18px 40px;border-top:1px solid #ffffff12;font-size:12px;color:#7d8784;text-align:center}
footer p{margin:0 0 8px;max-width:760px;margin-inline:auto}

@media (max-width:360px){.extras img{height:64px}.extras img:last-child{height:36px}.go{font-size:24px;gap:10px;padding-left:18px}.go .chip{width:34px;height:34px}h1{font-size:28px}.deal{font-size:14px}}
@media (min-width:900px){
  .world .bg{object-position:50% 45%}
  .world:after{background:linear-gradient(90deg,var(--bg) 0%,#080810e6 26%,#08081080 44%,#08081000 62%),linear-gradient(0deg,#080810cc 0%,#08081000 30%)}
  .world .ch{right:12vw;top:auto;bottom:0;height:min(94vh,1000px)}
  .scene{justify-content:center}
  .glytch{left:6vw;top:32px}.glytch img{width:96px}
  .card{padding:60px 0 0 6vw;max-width:680px}
  h1{font-size:66px}
  h1 .bloom{width:300px;margin-bottom:16px}
  .who{margin-top:30px}
  .who b{font-size:32px}
  .roster{gap:10px;max-width:580px}
  .roster button{height:92px}
  .deal{font-size:19px;margin:22px 0 28px}
  .deal b{font-size:21px}
  .box .facts{grid-template-columns:repeat(4,auto);justify-content:start;gap:10px 34px}
  .go{width:460px;height:70px;font-size:34px;margin-left:6px}
  .box{grid-template-columns:440px 1fr;align-items:center;gap:64px;padding:96px 6vw}
  .box .shot{max-width:440px}
  .box h2{font-size:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 2026-11-04b (Bloom-approved mock): badge, the quick facts, up to 3 boxes, live member faces. The text sits on its own
   dark floor, never on the character, and never climbs under the logo. */
.plate{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:9px 12px;margin:14px 0 0;border:1px solid #FFD24D99;border-radius:8px;
  background:#2a2410cc;color:#FFD24D;font:400 11px/1 "Press Start 2P",monospace;letter-spacing:.02em}
.plate svg{width:18px;height:18px;flex:none}
.facts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.facts li{position:relative;padding-left:20px;font-size:15px;color:var(--dim);line-height:1.3}
.facts li b{color:var(--ink);font-weight:600}
.facts li:before{content:"";position:absolute;left:2px;top:5px;width:9px;height:9px;transform:rotate(45deg);background:var(--mint);border-radius:2px}
.pickh{margin:16px 0 8px;font:600 14px/1 var(--body);color:var(--dim);display:flex;justify-content:space-between;gap:10px}
.pickh b{color:var(--ink)}
.roster button{position:relative}
.roster button[aria-pressed="true"]{transform:none;box-shadow:inset 0 0 0 2px var(--t,var(--tone)),0 0 22px -6px var(--t,var(--tone))}
.roster button .n{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;display:none;place-items:center;background:var(--t,#fff)}
.roster button .n:after{content:"";width:9px;height:5px;border:solid #08080f;border-width:0 0 2.5px 2.5px;transform:translateY(-1px) rotate(-45deg)}
.roster button[aria-pressed="true"] .n{display:grid}

.scene .who{margin:12px 0 14px}
.proof{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:14px;color:var(--dim)}
.proof .faces{display:flex}
.proof .faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-8px}
.proof .faces img:first-child{margin-left:0}
.scene .legal{margin:14px 0 0;font-size:10.5px;line-height:1.4;color:#79837f}
.scene{padding-top:104px}
.card{position:relative;padding-top:64px;background:linear-gradient(180deg,#08081000 0,#080810d9 64px,#080810f2 140px,var(--bg) 100%)}
.world:after{background:linear-gradient(180deg,#08081000 0%,#08081000 40%,#08081066 60%,#080810 100%)}
.world .ch{top:64px;height:min(56svh,600px)}
@media (min-width:900px){.scene{padding-top:0}.card{background:none;padding-top:120px}
  .world:after{background:linear-gradient(90deg,var(--bg) 0%,#080810e6 28%,#08081080 46%,#08081000 64%),linear-gradient(0deg,#080810cc 0%,#08081000 30%)}
  .world .ch{top:auto;bottom:0;height:min(94vh,1000px)}}
.ai-line{margin:6px 0 0;font-size:15px;line-height:1.3;color:#fff;opacity:.86}
.ai-line[hidden]{display:none}