/* ==========================================================================
   The Vault (/vault, app/Views/vault/index.php). docs/VAULT.md.
   The look, the motion and the sizes are those of Joshua's prototype, fase 1:
   the code page, the lobby, the two sheets, the waitlist card, the loading screen.
   Two pages are the build's own and stand still: the one sentence of an account
   the room is closed to, and the page of a key that came before the room accepts
   players (the plate and the title of the code page, the key, the moment).

   How this file is kept from leaking:
   - the page is a document of its own and only that page links this file;
   - every rule sits under .vt (the root of the page), html.vt-js or .vt-body,
     every class, id and keyframe carries the prefix vt;
   - the 800 weight of Barlow Condensed is declared here only. The other three
     fonts are the files of the site, at the same addresses (so they come from
     the cache of a player who has been on the site).

   Two ways to stand:
   - without script (or when the script did not arrive): a plain page that
     scrolls. The code form posts, a member reads the status, the date the Vault
     opens and the perks and keys as rows;
   - with script (html.vt-js, set by one inline line in the head and taken away
     again when vault.js does not report in): the full-screen room of the
     prototype. Layer one (vault.js) works on a still image of the door, layer
     two (vault-scene.js) draws the 3D world on the canvas under it.

   Motion: every endless animation and every transition stops under
   prefers-reduced-motion (one rule, at the end). No element depends on an
   animation to become visible, and a layer that only an animation moves rests
   where that animation starts (the sheen of a button waits out of sight).

   Sizes: the sizes of the prototype stay. A control lower than 44px gets a
   clear box around it that takes the tap (the section "tap areas"). The room
   itself never scrolls; a window too low for the smallest door (a phone held
   sideways) gets the countdown without the door (vt-low, set by vault.js).

   The view carries a handful of display rules of this file inline in its head,
   for a page whose stylesheet did not arrive (the loading screen, Key accepted,
   the waitlist card, the welcome, a scene that is not on): change one here,
   change it there.
   ========================================================================== */
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

/* ===== the page ===== */
.vt-body{margin:0;background:#000;color:#fff;font-family:'Barlow',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html.vt-js,html.vt-js .vt-body{height:100%;overflow:hidden;overscroll-behavior:none}
html.vt-js .vt-body{touch-action:manipulation}
.vt{
  color-scheme:dark;
  --bg:#0A0A0A; --y:#FFC629; --y2:#FFE08A; --w:#FFFFFF; --m:#A3A3A3; --dim:#6B6B6B;
  --line:rgba(255,255,255,.12); --glass:rgba(14,14,14,.66); --ylow:rgba(255,198,41,.16);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  position:relative;min-height:100vh;overflow:hidden;background:#030303;color:var(--w);
}
/* the room itself never scrolls: a closed sheet hangs below it, and the fragment of a card
   in the address or focus in a sliding sheet must not pull the room down to it (clip;
   hidden stays for a browser without it, where vault.js puts a scrolled root back) */
html.vt-js .vt{position:fixed;top:0;right:0;bottom:0;left:0;min-height:0;overflow:clip;user-select:none;-webkit-user-select:none}
.vt,.vt *,.vt *::before,.vt *::after{box-sizing:border-box}
.vt *{margin:0;padding:0}
.vt button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.vt img{display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.vt a{color:inherit;text-decoration:none}
.vt [hidden]{display:none !important}
.vt :focus-visible{outline:2px solid var(--y);outline-offset:2px}

/* layers of the room (script only) */
.vt .vt-gl,.vt .vt-fx,.vt .vt-flash,.vt .vt-snd,.vt .vt-boot,.vt .vt-toast{display:none}
html.vt-js .vt .vt-gl{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;transition:opacity .6s}
html.vt-js .vt .vt-gl.off{opacity:0}
html.vt-js .vt .vt-fx{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:7;pointer-events:none}
html.vt-js .vt .vt-flash{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:9;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#fff 0%,#FFF3C4 35%,#FFC629 75%,#a77300 100%)}

/* type */
.vt .vt-d{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
.vt .vt-kick{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--y)}
.vt .vt-c{text-align:center}
.vt .vt-muted{color:var(--m)}

/* scenes */
.vt .vt-scene{position:relative;z-index:4;display:none}
.vt .vt-scene.on{display:block}
html.vt-js .vt .vt-scene{position:absolute;top:0;right:0;bottom:0;left:0}
.vt .vt-wrapc{position:relative;z-index:2;width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;padding:calc(var(--sat) + 16px) 20px calc(var(--sab) + 18px)}
html.vt-js .vt .vt-wrapc{height:100%}
.vt .vt-grow{flex:1 1 auto;min-height:0}
.vt .vt-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;position:relative;z-index:3}
/* the bar holds in any font (a fallback is a third wider than Barlow Condensed): the name
   of the room stays on one line and the status gives way, so the season badge stays clear
   of the sound button */
.vt .vt-wm{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.08em;font-size:19px;color:var(--y);white-space:nowrap}
.vt .vt-wm b{color:#fff;font-weight:800}
.vt .vt-s1{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--y);color:var(--y);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;box-shadow:0 0 14px rgba(255,198,41,.35) inset}
.vt .vt-chip{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;padding:6px 11px;border-radius:999px;background:var(--ylow);border:1px solid rgba(255,198,41,.5);color:var(--y);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vt .vt-tr{display:flex;align-items:center;gap:8px;min-width:0}

.vt .vt-btn{position:relative;display:block;width:100%;padding:16px 14px;border-radius:14px;background:var(--y);color:#0A0A0A;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:.06em;text-transform:uppercase;text-align:center;overflow:hidden;box-shadow:0 10px 30px rgba(255,198,41,.25),0 0 0 1px rgba(255,255,255,.25) inset;transition:transform .12s}
.vt .vt-btn:active{transform:scale(.97)}
/* the sheen rests where its animation starts (120% 0, out of sight), so with reduced motion no streak stands still on the button */
.vt .vt-btn::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);background-size:260% 100%;background-position:120% 0;animation:vt-sheen 3.2s ease-in-out infinite}
.vt .vt-btn.vt-ghost{background:rgba(10,10,10,.55);color:#fff;border:1.5px solid rgba(255,255,255,.22);box-shadow:none}
.vt .vt-btn.vt-ghost::after{display:none}
.vt .vt-btn.vt-sm{display:inline-block;width:auto;font-size:15px;padding:9px 16px;border-radius:10px}
.vt .vt-btn[disabled]{opacity:.55;cursor:default}
.vt .vt-btn[disabled]::after{display:none}
@keyframes vt-sheen{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}

/* sound button and toast */
html.vt-js .vt .vt-snd{position:absolute;z-index:10;top:calc(var(--sat) + 14px);right:14px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.vt-js .vt[data-vt-view="closed"] .vt-snd,html.vt-js .vt[data-vt-view="early"] .vt-snd{display:none}
.vt .vt-snd svg{width:18px;height:18px}
.vt .vt-snd.mute .vt-on{display:none}
.vt .vt-snd:not(.mute) .vt-off{display:none}
html.vt-js .vt .vt-toast{display:block;position:absolute;z-index:13;left:50%;bottom:calc(var(--sab) + 90px);width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,20px);opacity:0;background:rgba(18,18,18,.95);border:1px solid rgba(255,198,41,.5);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;line-height:1.35;text-align:center;transition:.35s;pointer-events:none}
html.vt-js .vt .vt-toast.on{opacity:1;transform:translate(-50%,0)}
html.vt-js .vt .vt-toast.link{pointer-events:auto;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}

/* messages the server left for this page (a redirect back from the code form) */
.vt .vt-flashes{position:relative;z-index:14;display:flex;flex-direction:column;gap:8px;max-width:460px;margin:0 auto;padding:12px 20px 0}
html.vt-js .vt .vt-flashes{position:absolute;top:calc(var(--sat) + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 100px);padding:0}
.vt .vt-flashes p{padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.35;text-align:center;background:rgba(18,18,18,.95);border:1px solid rgba(255,198,41,.5);color:#fff;cursor:pointer}
.vt .vt-flashes p.bad{border-color:rgba(255,90,79,.6);color:#ff7b72}

/* ===== the code page ===== */
html.vt-js .vt .vt-code .vt-wrapc{justify-content:flex-end}
.vt .vt-gate-shade{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 72%,#000 100%)}
.vt .vt-gate{display:flex;flex-direction:column;gap:14px;margin-top:40px}
html.vt-js .vt .vt-gate{margin-top:0}
.vt .vt-gate form{display:flex;flex-direction:column;gap:14px}
.vt .vt-title{font-size:84px;letter-spacing:.01em}
.vt .vt-neon{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7),0 0 22px rgba(255,198,41,.65),0 0 60px rgba(255,198,41,.35)}
.vt .vt-neon .vt-y{color:var(--y)}
.vt .vt-flicker{animation:vt-flick 3.8s linear 1}
@keyframes vt-flick{0%{opacity:0}4%{opacity:.9}6%{opacity:.1}9%{opacity:1}12%{opacity:.3}14%{opacity:1}52%{opacity:1}53%{opacity:.4}55%{opacity:1}100%{opacity:1}}
.vt .vt-lead{font-size:17px;color:#d8d8d8}
.vt .vt-plate{position:relative;display:flex;align-items:center;justify-content:center;gap:2px;height:68px;border-radius:14px;background:linear-gradient(180deg,#1e1e1e 0%,#101010 55%,#161616 100%);border:1px solid rgba(255,198,41,.4);box-shadow:0 0 0 1px #000 inset,0 2px 0 rgba(255,255,255,.06) inset,0 12px 30px rgba(0,0,0,.6),0 0 30px rgba(255,198,41,.12);overflow:hidden}
.vt .vt-plate::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.vt .vt-plate .vt-pre,.vt .vt-plate input{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:34px;letter-spacing:.24em;color:#fff;text-transform:uppercase}
.vt .vt-plate .vt-pre{color:var(--y);text-shadow:0 0 12px rgba(255,198,41,.6)}
/* the field holds the widest code (four W with their letter spacing are 8.31ch), so no character is cut;
   the negative margin leaves the plate centring the key on the 6.2ch of the prototype */
.vt .vt-plate input{width:8.4ch;margin-right:-2.2ch;background:transparent;border:0;outline:0;caret-color:var(--y);padding:0;border-radius:0;user-select:text;-webkit-user-select:text}
.vt .vt-plate input::placeholder{color:#3d3d3d}
.vt .vt-plate:focus-within{border-color:rgba(255,198,41,.85)}
.vt .vt-plate.bad{border-color:#ff5a4f}
.vt .vt-plate.ok{border-color:var(--y);box-shadow:0 0 40px rgba(255,198,41,.55),0 0 0 1px rgba(255,198,41,.8) inset}
.vt .vt-plate.shut{opacity:.6}
@keyframes vt-shake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.vt .vt-err{min-height:18px;font-size:14px;color:#ff7b72;text-align:center;font-weight:600}
.vt .vt-small{font-size:14px;color:var(--m);text-align:center}
html:not(.vt-js) .vt .vt-small.vt-needs-js{display:none}
.vt .vt-linkbtn{color:#fff;text-decoration:underline;text-decoration-color:var(--y);text-underline-offset:3px;cursor:pointer}
.vt .vt-access{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;pointer-events:none}
html.vt-js .vt .vt-access.on{display:flex;animation:vt-out .5s 2.2s forwards}
html.vt-js .vt .vt-access.on.vt-hold{animation:none}
.vt .vt-access .vt-d{font-size:56px}
.vt .vt-access .vt-d.vt-y{color:var(--y);text-shadow:0 0 30px rgba(255,198,41,.7)}
.vt .vt-access .vt-user{color:#fff}
html.vt-js .vt .vt-access.on > *{animation:vt-pop .5s cubic-bezier(.34,1.56,.64,1) both}
html.vt-js .vt .vt-access.on > :nth-child(2){animation-delay:.12s}
html.vt-js .vt .vt-access.on > :nth-child(3){animation-delay:.24s}
@keyframes vt-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes vt-out{to{opacity:0}}
/* the page comes in, and leaves after a good key */
html.vt-js .vt .vt-code.in .vt-gate > *{animation:vt-rise .8s cubic-bezier(.215,.61,.355,1) both}
html.vt-js .vt .vt-code.in .vt-gate > :nth-child(1){animation-delay:.2s}
html.vt-js .vt .vt-code.in .vt-gate > :nth-child(2){animation-delay:.27s}
html.vt-js .vt .vt-code.in .vt-gate > :nth-child(3){animation-delay:.34s}
html.vt-js .vt .vt-code.in .vt-gate > :nth-child(4){animation-delay:.41s}
html.vt-js .vt .vt-code.in .vt-gate > :nth-child(5){animation-delay:.48s}
html.vt-js .vt .vt-code.in .vt-gate > :nth-child(6){animation-delay:.55s}
@keyframes vt-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
html.vt-js .vt .vt-gate.leaving{opacity:0;transform:translateY(20px);transition:opacity .5s .25s,transform .5s .25s;pointer-events:none}
html.vt-js .vt .vt-code .vt-plate.bad{animation:vt-shake .45s}

/* the page of a key that came before the room accepts players: the plate and the title of
   the code page, the key and one line with the moment. The moment keeps together: when it
   does not fit behind the first words it stands on a line of its own, whole */
.vt .vt-moment{display:inline-block}
/* the 18+ line closes that page: at the foot of the screen with script, a line under the key without.
   A window too low for it all (a small phone held sideways) scrolls: nothing of that page is cut off */
.vt .vt-early .vt-legal{margin-top:14px}
html.vt-js .vt .vt-early .vt-wrapc{overflow-y:auto}

/* ===== the page of a guest: the invitation =====
   The code page with what a guest needs to decide: the key a link brought, what is behind
   the door and two buttons. It holds more lines than the code page, so its gaps are
   tighter, the shade starts higher, and a window too low for all of it scrolls: nothing
   of that page is cut off (the spacer above the gate keeps it at the foot of the screen).
   A box that scrolls cuts what reaches outside it, so here the box is as wide as the
   screen and keeps its column with padding: the glow of the title and of the button is
   whole on a wide screen too. */
html.vt-js .vt .vt-invite .vt-wrapc{justify-content:flex-start;overflow-y:auto;max-width:none;padding-left:max(20px,calc(50% - 210px));padding-right:max(20px,calc(50% - 210px))}
.vt .vt-invite .vt-gate-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 14%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.94) 62%,#000 100%)}
.vt .vt-invite .vt-gate,.vt .vt-invite .vt-gate form{gap:12px}
/* on a window where the page scrolls no spacer is left above the gate: the title keeps its distance to the bar */
html.vt-js .vt .vt-invite .vt-gate{margin-top:10px}
/* the 18+ line stands at the foot of the box. On its way in it does not rise like the lines above it, it only
   shows: a line that rises from below the box makes the box scroll for that second, and a browser whose
   scrollbar takes room then flashes one at the edge of the window */
html.vt-js .vt .vt-invite.in .vt-gate > .vt-legal{animation-name:vt-fade}
.vt .vt-invite .vt-lead{text-wrap:balance}
/* the key a link brought: the plate is lit, the field is not one to type in */
.vt .vt-plate.vt-mine{border-color:rgba(255,198,41,.7);box-shadow:0 0 0 1px #000 inset,0 2px 0 rgba(255,255,255,.06) inset,0 12px 30px rgba(0,0,0,.6),0 0 34px rgba(255,198,41,.26)}
.vt .vt-plate.vt-mine input{caret-color:transparent;cursor:default}
/* the line under the field takes no room until it says something */
.vt .vt-invite .vt-err:empty{display:none}
/* (the plate is a positioned box: the line under it is one too, so the shadow of the plate does not lie over it) */
.vt .vt-keynote{position:relative;margin-top:-4px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:12px;line-height:1.3;color:var(--y);text-align:center}
.vt .vt-behind{display:flex;flex-direction:column;gap:7px}
.vt .vt-behind ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.vt .vt-behind li{position:relative;padding-left:17px;font-size:15px;line-height:1.3;color:#e6e6e6}
.vt .vt-behind li::before{content:"";position:absolute;left:2px;top:.42em;width:6px;height:6px;background:var(--y);transform:rotate(45deg)}
.vt .vt-invite .vt-btn{padding:14px}
.vt .vt-invite .vt-btn.vt-ghost{padding:12px 14px;font-size:18px}

/* the plaque above the title */
.vt .vt-plaque{display:flex;align-items:center;gap:12px;align-self:flex-start}
.vt .vt-plaque span{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.34em;font-size:20px;padding:6px 2px 6px 6px}
.vt .vt-plaque i{display:block;width:34px;height:1px;background:linear-gradient(90deg,transparent,#FFC629)}
.vt .vt-plaque i:last-child{background:linear-gradient(90deg,#FFC629,transparent)}
.vt .vt-plaque i::after{content:"";display:block;width:7px;height:7px;margin-top:-3px;background:#FFC629;transform:rotate(45deg);box-shadow:0 0 10px #FFC629}
.vt .vt-plaque i:first-child::after{margin-left:auto}

/* the waitlist card */
.vt .vt-modal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.vt-js .vt .vt-modal.on{display:flex}
.vt .vt-modal .vt-card{width:100%;max-width:460px;background:linear-gradient(180deg,#151515,#0b0b0b);border-top:1px solid rgba(255,198,41,.4);border-radius:24px 24px 0 0;padding:22px 22px calc(var(--sab) + 22px);display:flex;flex-direction:column;gap:12px;text-align:center}
/* the second line of the card is the sentence of the server: without one the card has no empty line */
.vt .vt-modal .vt-card .vt-muted:empty{display:none}
html.vt-js .vt .vt-modal.on .vt-card{animation:vt-up .55s cubic-bezier(.215,.61,.355,1) both}
@keyframes vt-up{from{transform:translateY(300px)}to{transform:none}}

/* rolling digits */
.vt .vt-dg{position:relative;display:inline-block;height:1em;overflow:hidden;line-height:1}
.vt .vt-dg .vt-reel{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.18,1.35,.42,1)}
.vt .vt-dg .vt-reel span{height:1em;line-height:1;display:block;text-align:center}

/* the status plate and its shine */
.vt .vt-status{align-self:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:30px;letter-spacing:.04em;line-height:1;padding:10px 18px;border-radius:12px;border:1px solid rgba(255,198,41,.6);background:linear-gradient(180deg,rgba(255,198,41,.18),rgba(255,198,41,.04));position:relative;overflow:hidden}
.vt .vt-holo{background-image:linear-gradient(100deg,#FFC629 0%,#FFF6D6 22%,#FFC629 38%,#ffb000 55%,#FFF6D6 72%,#FFC629 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vt-holo 3s linear infinite}
@keyframes vt-holo{to{background-position:-220% 0}}
@keyframes vt-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ===== the lobby ===== */
.vt .vt-lobby .vt-wrapc{padding-bottom:calc(var(--sab) + 14px)}
/* The door: a still image, and the picture above it. With script both are placed by
   vault.js from the room that is left between the top bar and the two cards. */
.vt .vt-doorbox{position:relative;height:330px;margin:8px 0 4px;pointer-events:none}
.vt .vt-still{position:absolute;left:50%;top:150px;width:600px;height:600px;max-width:none;transform:translate(-50%,-50%)}
.vt .vt-char{display:none}
html.vt-js .vt .vt-doorbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:0}
html.vt-js .vt .vt-still{top:0;transform:translateX(-50%);opacity:0;transition:opacity .6s}
html.vt-js .vt .vt-still.on{opacity:1}
html.vt-js .vt .vt-char{display:block;position:absolute;left:0;top:0;width:0;height:auto;max-width:none;opacity:0;will-change:transform}
.vt .vt-lobby-ui{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1}
html.vt-js .vt .vt-lobby-ui{position:absolute;left:0;right:0}
/* without script nothing counts down: the date stands alone */
html:not(.vt-js) .vt .vt-lobby:not([data-vt-open="1"]) .vt-lobby-ui .vt-kick,html:not(.vt-js) .vt .vt-cd{display:none}
.vt .vt-lobby[data-vt-open="1"] .vt-cd,.vt .vt-lobby[data-vt-open="1"] .vt-when{display:none}
/* a daily limit: nothing counts down either, the date stands alone */
.vt .vt-lobby[data-vt-limits="1"]:not([data-vt-open="1"]) .vt-lobby-ui .vt-kick,.vt .vt-lobby[data-vt-limits="1"] .vt-cd{display:none}
.vt .vt-cd{display:flex;gap:10px;align-items:flex-start;justify-content:center}
.vt .vt-cd .vt-u{display:flex;flex-direction:column;align-items:center;gap:6px}
.vt .vt-cd .vt-pair{display:flex;gap:3px}
.vt .vt-cd .vt-dg{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:44px;width:.62em;height:1.3em;border-radius:7px;background:linear-gradient(180deg,#1b1b1b 0%,#0d0d0d 50%,#151515 100%);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.5);color:#fff;text-shadow:0 0 14px rgba(255,198,41,.4)}
.vt .vt-cd .vt-dg::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6)}
.vt .vt-cd .vt-dg .vt-reel span{height:1.3em;line-height:1.3em}
.vt .vt-cd .vt-sep{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:34px;color:var(--y);margin-top:10px;animation:vt-pulse 1s steps(2) infinite}
.vt .vt-cd .vt-lab{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.2em;font-size:10px;line-height:1.2;color:var(--m);text-transform:uppercase}
.vt .vt-when{font-size:13px;line-height:1.2;color:var(--m)}
.vt .vt-teaser{font-size:14px;line-height:1.2;color:#cfcfcf;text-align:center;max-width:300px}
.vt .vt-lobby-ui .vt-btn{max-width:300px;margin-top:6px}
.vt .vt-hot{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:3;margin-top:18px}
html.vt-js .vt .vt-hot{margin-top:0}
/* A solid card: a blur over a canvas that moves on every frame costs a phone too much. */
.vt .vt-hs{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:16px;background:rgba(14,14,14,.9);border:1px solid var(--line);text-align:left;overflow:hidden;transition:transform .15s,border-color .2s}
.vt .vt-hs:active{transform:scale(.97)}
.vt .vt-hs img{height:62px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.vt .vt-hs img.vt-hs-key{height:44px;margin:9px 0}
.vt .vt-hs b{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:18px;line-height:1.2;letter-spacing:.03em}
.vt .vt-hs small{font-size:12px;line-height:1.2;color:var(--m);margin-top:-4px;text-wrap:balance}
.vt .vt-hs .vt-badge{position:absolute;top:10px;right:10px;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:var(--y);color:#0A0A0A;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;display:grid;place-items:center;box-shadow:0 0 18px rgba(255,198,41,.6)}
.vt .vt-hs .vt-badge.zero{background:#2a2a2a;color:#8c8c8c;box-shadow:none}
.vt .vt-hs .vt-badge.done{background:#1f3a24;color:#7BD88F;box-shadow:none}
.vt .vt-hs::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:16px;padding:1px;background:linear-gradient(120deg,transparent 30%,rgba(255,198,41,.9) 50%,transparent 70%);background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:vt-edge 3.6s linear infinite;pointer-events:none}
@keyframes vt-edge{to{background-position:-300% 0}}
/* "while you wait", "while the door is closed": gone once nothing can be claimed any more */
.vt .vt-lobby[data-vt-claims="0"] .vt-while{display:none}
/* a member with a daily limit never reads them */
.vt .vt-lobby[data-vt-limits="1"] .vt-while{display:none}

/* ===== the two sheets ===== */
.vt .vt-sheet-back{display:none}
html.vt-js .vt .vt-sheet-back{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s}
html.vt-js .vt .vt-sheet-back.on{opacity:1;pointer-events:auto}
.vt .vt-sheet{position:relative;z-index:6;max-width:460px;margin:22px auto 0;background:linear-gradient(180deg,#151515,#0b0b0b);border-top:1px solid rgba(255,198,41,.45);border-radius:26px 26px 0 0;padding:10px 18px calc(var(--sab) + 18px);display:flex;flex-direction:column;gap:12px}
html.vt-js .vt .vt-sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-height:88%;overflow-y:auto;transform:translateY(105%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.9,.25,1),visibility 0s .5s;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
html.vt-js .vt .vt-sheet.on{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.9,.25,1),visibility 0s 0s}
.vt .vt-sheet:focus{outline:0}
.vt .vt-handle{display:block;width:44px;height:5px;border-radius:3px;background:#444;margin:0 auto 2px;flex:none}
html.vt-js .vt .vt-handle{position:relative}
html.vt-js .vt .vt-handle::before{content:"";position:absolute;top:-10px;right:-30px;bottom:-20px;left:-30px}
.vt .vt-sheet-t{font-size:34px}
.vt .vt-sheet-sub{margin-top:-6px}
.vt .vt-notice{font-size:13.5px;line-height:1.4;color:var(--y2);background:rgba(255,198,41,.08);border:1px solid rgba(255,198,41,.3);border-radius:12px;padding:9px 12px}
.vt .vt-board{position:relative;height:150px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.2)),repeating-linear-gradient(90deg,#1a1a1b 0 2px,#161617 2px 5px);border:1px solid #2c2c2c;box-shadow:inset 0 2px 10px rgba(0,0,0,.6);overflow:hidden;flex:none}
.vt .vt-board .vt-bar{position:absolute;left:18px;right:18px;top:22px;height:9px;border-radius:5px;background:linear-gradient(180deg,#6a6a6a,#2a2a2a);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.vt .vt-board .vt-slots{position:absolute;left:18px;right:18px;top:26px;bottom:0;display:flex;justify-content:space-around}
.vt .vt-hook{position:relative;width:64px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.vt .vt-hook .vt-h{width:10px;height:16px;border:3px solid #8a8a8a;border-top:0;border-radius:0 0 8px 8px;margin-left:8px}
.vt .vt-hook .vt-kimg{width:96px;height:auto;max-width:none;margin-top:-10px;transform:rotate(90deg);transform-origin:50% 50%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.vt .vt-hook.taken .vt-kimg{opacity:0}
.vt .vt-hook.shared .vt-kimg{opacity:.55;filter:grayscale(.3) drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.vt .vt-hook.locked .vt-kimg{filter:grayscale(1) brightness(.5)}
.vt .vt-hook .vt-tag{position:absolute;top:58px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#8c8c8c;white-space:nowrap;text-transform:uppercase}
/* from four keys on the hooks stand closer, so five keys fit a 375 px phone */
.vt .vt-slots.many .vt-hook{width:52px}
.vt .vt-slots.many .vt-kimg{width:72px;margin-top:-4px}
.vt .vt-kimg.swing{animation:vt-swing 1.6s ease-out}
@keyframes vt-swing{0%{transform:rotate(90deg)}15%{transform:rotate(106deg)}35%{transform:rotate(79deg)}55%{transform:rotate(97deg)}75%{transform:rotate(86deg)}100%{transform:rotate(90deg)}}
.vt .vt-krows{display:flex;flex-direction:column;gap:8px}
.vt .vt-krow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#121212;border:1px solid var(--line)}
.vt .vt-krow.sel{border-color:var(--y);box-shadow:0 0 0 1px rgba(255,198,41,.4) inset}
.vt .vt-krow > img{width:40px;height:auto;flex:none}
.vt .vt-krow.dim > img{opacity:.5;filter:grayscale(.5)}
.vt .vt-krow .vt-code-t{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.14em;font-size:19px;user-select:text;-webkit-user-select:text}
.vt .vt-krow .vt-tx{flex:1;min-width:0}
.vt .vt-krow small{display:block;color:var(--m);font-size:12.5px}
.vt .vt-krow .vt-klink{display:block;font-size:12px;color:var(--m);overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
html.vt-js .vt .vt-krow .vt-klink{display:none}
.vt .vt-krow .vt-ok{color:#7BD88F;font-weight:700;font-size:20px}
.vt .vt-share{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vt .vt-share button{padding:11px 0;border-radius:12px;border:1px solid #333;background:#141414;font-weight:600;font-size:14px}
.vt .vt-note{font-size:13px;color:var(--m);text-align:center}
html:not(.vt-js) .vt .vt-share,html:not(.vt-js) .vt .vt-krow .vt-btn,html:not(.vt-js) .vt .vt-perk .vt-btn,html:not(.vt-js) .vt .vt-handle{display:none}

/* the arrival moment */
.vt .vt-arrive{display:none}
html.vt-js .vt .vt-arrive{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;opacity:0;text-align:center}
.vt .vt-arrive .vt-arrive-t{font-size:84px;color:#fff;text-shadow:0 0 30px rgba(255,198,41,.8),0 0 90px rgba(255,198,41,.45)}
html.vt-js .vt .vt-lobby.arriving .vt-arrive{animation:vt-arrive 2.55s .15s both}
html.vt-js .vt .vt-lobby.arriving .vt-arrive .vt-status{animation:vt-rise-s .6s .7s cubic-bezier(.34,1.56,.64,1) both}
html.vt-js .vt .vt-lobby.arriving .vt-topbar{animation:vt-fade .8s 1.2s both}
html.vt-js .vt .vt-lobby.arriving .vt-lobby-ui{animation:vt-rise-ui .9s 2.2s cubic-bezier(.215,.61,.355,1) both}
html.vt-js .vt .vt-lobby.arriving .vt-hot{animation:vt-rise-hot .9s 2.7s cubic-bezier(.215,.61,.355,1) both}
@keyframes vt-arrive{0%{opacity:0;transform:scale(1.15)}35%{opacity:1;transform:none}72%{opacity:1;transform:none}100%{opacity:0;transform:scale(.94)}}
@keyframes vt-rise-s{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vt-fade{from{opacity:0}to{opacity:1}}
@keyframes vt-rise-ui{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes vt-rise-hot{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* the perks */
.vt .vt-perks{display:flex;flex-direction:column;gap:10px}
.vt .vt-perk{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:linear-gradient(150deg,#1d180a,#121212 62%);border:1px solid rgba(255,198,41,.32);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.vt .vt-perk::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.1) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;animation:vt-sheen 4.5s infinite;pointer-events:none}
.vt .vt-perk .vt-pv{width:66px;height:66px;flex:none;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle,rgba(255,198,41,.28),rgba(255,198,41,0) 70%)}
.vt .vt-perk .vt-pv img{height:62px;width:auto;filter:drop-shadow(0 0 12px rgba(255,198,41,.55))}
.vt .vt-perk .vt-pv img.vt-look{height:64px;width:64px;filter:drop-shadow(0 0 8px rgba(255,198,41,.4))}
.vt .vt-perk .vt-pv .vt-big{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:31px;line-height:1;color:#FFC629;text-shadow:0 0 14px rgba(255,198,41,.85)}
.vt .vt-perk .vt-tx{flex:1;min-width:0}
.vt .vt-perk .vt-tx b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.vt .vt-perk .vt-tx small{display:block;font-size:12.5px;color:var(--m);margin-top:3px;line-height:1.35}
.vt .vt-perk .vt-tx small.on{color:#FFE08A}
.vt .vt-perk .vt-tx small.on a{text-decoration:underline;text-underline-offset:2px}
.vt .vt-perk .vt-tx small.vt-terms{font-size:11.5px;color:#8c8c8c}
.vt .vt-perk .vt-act{flex:none;position:relative;z-index:2}
.vt .vt-perk .vt-stamp{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:#FFC629;border:2px solid #FFC629;border-radius:8px;padding:5px 9px;transform:rotate(-8deg);box-shadow:0 0 16px rgba(255,198,41,.4),inset 0 0 10px rgba(255,198,41,.25)}
.vt .vt-perk.claimed{border-color:#FFC629;box-shadow:0 0 30px rgba(255,198,41,.22)}
html.vt-js .vt .vt-perks.in .vt-perk{animation:vt-slide .5s cubic-bezier(.215,.61,.355,1) both}
html.vt-js .vt .vt-perks.in .vt-perk:nth-child(1){animation-delay:.25s}
html.vt-js .vt .vt-perks.in .vt-perk:nth-child(2){animation-delay:.35s}
html.vt-js .vt .vt-perks.in .vt-perk:nth-child(3){animation-delay:.45s}
html.vt-js .vt .vt-perks.in .vt-perk:nth-child(n+4){animation-delay:.55s}
html.vt-js .vt .vt-perk.pulse{animation:vt-beat .36s ease-in-out}
html.vt-js .vt .vt-perk.glow{animation:vt-glow 1.2s ease-out}
html.vt-js .vt .vt-perk .vt-stamp.slam{animation:vt-slam .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes vt-slide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes vt-beat{50%{transform:scale(1.04)}}
@keyframes vt-glow{from{box-shadow:0 0 60px rgba(255,198,41,.7)}to{box-shadow:0 0 30px rgba(255,198,41,.22)}}
@keyframes vt-slam{from{opacity:0;transform:rotate(-32deg) scale(2.4)}to{opacity:1;transform:rotate(-8deg)}}

/* the small print: the 18+ line of the site and the two links */
.vt .vt-legal{font-size:11.5px;line-height:1.5;color:#8c8c8c;text-align:center}
.vt .vt-legal a{color:#b9b9b9;text-decoration:underline;text-underline-offset:2px}

/* ===== the page for an account the room is closed to ===== */
html.vt-js .vt .vt-closed .vt-wrapc{justify-content:space-between}
.vt .vt-closed-in{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin:60px 0}
.vt .vt-closed-in .vt-title{font-size:64px;color:#fff}
.vt .vt-closed-in .vt-title .vt-y{color:var(--y)}
.vt .vt-closed-in p{font-size:16px;line-height:1.45;color:#d8d8d8;max-width:320px}

/* ===== the loading screen: only while the script is on its way ===== */
html.vt-js .vt .vt-boot{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#151209 0%,#030303 70%);transition:opacity .7s}
html.vt-js .vt .vt-boot.gone{opacity:0;pointer-events:none}
.vt .vt-boot .vt-b-in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.vt .vt-boot .vt-b-t{font-size:64px;color:#fff;text-shadow:0 0 24px rgba(255,198,41,.45)}
.vt .vt-boot .vt-b-t span{color:var(--y)}
.vt .vt-boot .vt-b-bar{width:180px;height:3px;border-radius:2px;background:#1e1e1e;overflow:hidden}
.vt .vt-boot .vt-b-bar i{display:block;height:100%;width:40%;background:var(--y);box-shadow:0 0 12px var(--y);animation:vt-bootload 1.1s ease-in-out infinite}
.vt .vt-boot p{font-size:13px;color:var(--m);letter-spacing:.04em;max-width:260px}
@keyframes vt-bootload{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ===== tap areas =====
   The sizes are those of the prototype. Where a control is lower than 44px, a clear box
   around it (::before) takes the tap: nothing moves and nothing looks different. The
   small button lets that box out (overflow) and rounds its own shine instead. The key
   rows stay above the row of three, so the glow of a Share button still falls over it.
   The box of the wordmark grows upward only: under the bar stands the picture. */
.vt .vt-share button,.vt .vt-linkbtn,.vt .vt-legal a,.vt .vt-perk .vt-tx small.on a,.vt .vt-topbar .vt-wm{position:relative}
.vt .vt-btn.vt-sm::before,.vt .vt-share button::before,.vt .vt-snd::before,.vt .vt-linkbtn::before,.vt .vt-legal a::before,.vt .vt-perk .vt-tx small.on a::before,.vt .vt-topbar .vt-wm::before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}
.vt .vt-btn.vt-sm{overflow:visible}
.vt .vt-btn.vt-sm::after{border-radius:inherit}
.vt .vt-krows{position:relative;z-index:1}
.vt .vt-snd::before{top:-5px;right:-5px;bottom:-5px;left:-5px}
.vt .vt-linkbtn::before{top:-14px;bottom:-14px}
.vt .vt-perk .vt-tx small.on a::before{top:-14px;right:-10px;bottom:-14px}
.vt .vt-legal a::before{top:-15px;right:-3px;bottom:-15px;left:-10px}
.vt .vt-legal a + a::before{right:-10px;left:-4px}
.vt .vt-topbar .vt-wm::before{top:-17px;bottom:-5px}

/* ===== sizes ===== */
@media (min-width:700px){
  .vt .vt-title{font-size:110px}
}
/* the invitation is taller than the code page: on a wide screen its title keeps to one line,
   and on a low phone the plaque above the title gives way */
@media (min-width:700px) and (min-height:701px){
  .vt .vt-invite .vt-title{font-size:96px}
}
/* narrower than 375 px (360 px is the usual Android phone) the title of 84 px is wider than the
   column and would stand on two lines, which the invitation has no room for: it follows the
   width of the column there. The title is 3.94 em wide, so a quarter of the column leaves it
   the room it has at 375 px (about 4 px). A window of 700 px high or lower has the title of
   64 px, which fits */
@media (max-width:374px) and (min-height:701px){
  .vt .vt-invite .vt-title{font-size:min(84px,calc((100vw - 40px)/4))}
}
@media (max-height:660px){
  .vt .vt-invite .vt-plaque{display:none}
}
@media (max-height:700px){
  .vt .vt-title{font-size:64px}
  .vt .vt-cd .vt-dg{font-size:36px}
  .vt .vt-hs img{height:48px}
  .vt .vt-hs img.vt-hs-key{height:34px;margin:7px 0}
}
@media (max-height:740px){
  html.vt-js .vt .vt-lobby:not([data-vt-limits="1"]) .vt-teaser{display:none}
}
/* the sound button stands in the corner: the status and the season badge keep clear of it */
@media (max-width:560px){
  html.vt-js .vt .vt-lobby .vt-topbar{padding-right:40px}
}
/* from 354 to 374 px wide (360 px is the usual Android phone) a card gives up 4 px of
   padding on each side, so the line under its title stays on one line; narrower than
   that it cannot, and the line breaks into two even halves (text-wrap on the line) */
@media (min-width:354px) and (max-width:374px){
  .vt .vt-hs{padding:12px 8px}
}
@media (max-width:350px){
  .vt .vt-chip{letter-spacing:.06em;font-size:10px;padding:6px 8px}
  .vt .vt-plate .vt-pre,.vt .vt-plate input{font-size:30px}
}
/* A window too low for the smallest door (a phone held sideways): vault.js puts vt-low
   on the root. The door, the picture above it and the 3D world stay out, the countdown
   stands in line under the top bar, clear of the two cards, and the room scrolls when
   even that does not fit. */
html.vt-js .vt.vt-low .vt-doorbox{display:none}
html.vt-js .vt.vt-low .vt-gl{visibility:hidden}
html.vt-js .vt.vt-low .vt-lobby .vt-wrapc{overflow-y:auto}
html.vt-js .vt.vt-low .vt-lobby-ui{position:static;margin-top:12px}
html.vt-js .vt.vt-low .vt-hot{margin-top:8px}

/* ===== no motion ===== */
@media (prefers-reduced-motion:reduce){
  .vt *,.vt *::before,.vt *::after{animation:none !important;transition:none !important}
}