/* Fifth pass: draft 07's pinned scenes with draft 13's standing laser card. What the five drafts share is here:
   the bar, the card, the list drawer, the console, the numbers, the last screen. Each page has its own first screen and its own way through the games. */
:root { --m: clamp(36px, 4vw, 76px); --acc: #7c8cff; --w: min(29vw, 54vh); --dl-bg: #0d0d14; --dl-acc: var(--acc); --dl-accfg: #000; --dl-r: 28px; }
html { scroll-behavior: auto; }
body { background: #050508; color: #fff; }
.scene { position: relative; --p: 0; }
.pin { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; }
.btn { display: inline-flex; align-items: center; height: 56px; padding: 0 32px; border-radius: 28px; background: #fff; color: #000; font-weight: 800; font-size: 16px; transition: background .25s, color .25s, scale .25s, box-shadow .25s; }
.btn:hover, .btn:focus-visible { background: var(--acc); scale: 1.04; box-shadow: 0 0 40px -6px var(--acc); }
.eye { font: 700 13px/1 Bahnschrift, sans-serif; letter-spacing: .3em; color: var(--acc); }

/* the bar */
.top { position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; padding: 0 var(--m); display: flex; align-items: center; gap: 34px; font-size: 14px; }
.top::before { content: ""; position: absolute; inset: 0 0 -30px; background: linear-gradient(rgba(0, 0, 0, .6), transparent); pointer-events: none; }
.top > * { position: relative; }
.top .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 16px; margin-right: auto; }
.top .brand img { width: 30px; }
.top a.l { opacity: .7; transition: opacity .2s; }
.top a.l:hover, .top a.l.on { opacity: 1; }
.top .get { height: 38px; padding: 0 20px; border-radius: 19px; background: #fff; color: #000; font-weight: 800; display: flex; align-items: center; transition: background .25s; }
.top .get:hover { background: var(--acc); }
.prog { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #ff46c8, #46dcff, #ffec6e); transform-origin: 0 0; scale: 0 1; z-index: 60; }

/* the card. --w is its width; everything on it is a share of that, so one card works at any size.
   .t leans toward the mouse (--rx, --ry) and to wherever the page's scroll puts it (--srx, --sry). */
.kc { position: relative; width: var(--w); height: calc(var(--w) * 1.5); flex: none; }
.kc .t { position: absolute; inset: 0; transform: perspective(calc(var(--w) * 3.2)) rotateX(calc((var(--rx, 0) + var(--srx, 0)) * 1deg)) rotateY(calc((var(--ry, 0) + var(--sry, 0)) * 1deg)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.kc.live .t, .kc.drv .t { transition: transform .08s linear; }
.kc .base { position: absolute; inset: 0; border-radius: calc(var(--w) * .065); overflow: hidden; background: #111; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 0 calc(var(--w) * .28) calc(var(--w) * -.04) var(--t), 0 calc(var(--w) * .14) calc(var(--w) * .2) calc(var(--w) * -.08) #000; }
.kc .base > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kc .base::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .92) 4%, transparent 46%), linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 30%); }
.kc .frame { position: absolute; inset: calc(var(--w) * .03); border-radius: calc(var(--w) * .045); border: 1px solid rgba(255, 255, 255, .3); transform: translateZ(calc(var(--w) * .05)); pointer-events: none; }
.kc .lg { position: absolute; left: 19%; top: 3.5%; width: 62%; height: 20%; object-fit: contain; transform: translateZ(calc(var(--w) * .12)); filter: brightness(1.7) drop-shadow(0 0 calc(var(--w) * .03) var(--t)); pointer-events: none; }
.kc .lg.w { filter: brightness(0) invert(1) drop-shadow(0 0 calc(var(--w) * .03) var(--t)); }
.kc .cut { position: absolute; left: 50%; bottom: var(--cb, 15%); height: var(--ch, 72%); transform: translateX(calc(-50% + var(--cx, 0%))) translateZ(calc(var(--w) * .24)); filter: drop-shadow(0 calc(var(--w) * .05) calc(var(--w) * .06) rgba(0, 0, 0, .6)); pointer-events: none; }
.kc .plate { position: absolute; left: 7%; right: 7%; bottom: 4.5%; display: flex; justify-content: space-between; align-items: flex-end; transform: translateZ(calc(var(--w) * .32)); text-shadow: 0 2px 14px #000; pointer-events: none; }
.kc .plate b { font-size: calc(var(--w) * .068); font-weight: 900; display: block; line-height: 1.2; }
.kc .plate span { font-size: calc(var(--w) * .034); color: rgba(255, 255, 255, .7); display: block; }
.kc .plate em { font: 700 calc(var(--w) * .17)/.9 Bahnschrift, sans-serif; font-style: normal; color: var(--t); text-shadow: 0 0 calc(var(--w) * .08) var(--t); }
/* laser foil: a white spot under the cursor, a band of colours across, and fine lines that catch it */
.shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--sh, .34); transition: opacity .35s; z-index: 1;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .75), transparent 44%),
    repeating-linear-gradient(115deg, transparent 0 5px, rgba(255, 255, 255, .1) 5px 6px),
    linear-gradient(115deg, transparent 18%, rgba(255, 70, 200, .55) 34%, rgba(70, 220, 255, .55) 50%, rgba(255, 236, 110, .55) 66%, transparent 82%) var(--mx, 30%) var(--my, 20%) / 240% 240%; }
.live { --sh: .9; }
.lit { --sh: .55; }

/* names under the pinned games: where you are */
.rail { position: absolute; z-index: 10; left: var(--m); right: var(--m); bottom: 34px; display: flex; gap: 10px; align-items: center; }
.rail button { flex: 1; height: 44px; position: relative; text-align: left; font-size: 13px; opacity: .5; transition: opacity .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 14px; }
.rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.rail button::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; border-radius: 2px; width: calc(var(--f, 0) * 100%); background: #fff; }
.rail button:hover, .rail button.act { opacity: 1; }
.more { display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 8px 0 26px; border-radius: 27px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-weight: 700; font-size: 16px; transition: background .25s; }
.more b { font: 700 20px/38px Bahnschrift, sans-serif; min-width: 54px; padding: 0 12px; border-radius: 19px; background: var(--t, #fff); color: #000; text-align: center; }
.more:hover, .more:focus-visible { background: rgba(255, 255, 255, .3); }

/* the drawer with one game's list */
.drawer { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: 540px; background: rgba(12, 12, 16, .82); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); padding: 34px 34px 0; display: flex; flex-direction: column; translate: 100% 0; transition: translate .6s cubic-bezier(.2, .8, .2, 1); }
.drawer.on { translate: 0 0; }
.shade { position: fixed; inset: 0; z-index: 79; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .4s; }
.shade.on { opacity: 1; pointer-events: auto; }
.drawer .dh { display: flex; align-items: center; gap: 16px; }
.drawer .dh img { width: 54px; height: 80px; object-fit: cover; border-radius: 8px; }
.drawer .dh b { font-size: 24px; font-weight: 900; display: block; line-height: 1.2; }
.drawer .dh span { font-size: 13px; opacity: .6; }
.drawer .x { margin-left: auto; width: 44px; height: 44px; border-radius: 22px; background: rgba(255, 255, 255, .12); font-size: 18px; transition: background .2s, rotate .3s; }
.drawer .x:hover { background: rgba(255, 255, 255, .28); rotate: 90deg; }
.drawer input { height: 50px; border-radius: 25px; background: rgba(255, 255, 255, .1); padding: 0 22px; margin: 24px 0 14px; font-size: 15px; transition: background .2s; }
.drawer input:focus { background: rgba(255, 255, 255, .18); }
.drawer input::placeholder { color: rgba(255, 255, 255, .4); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tabs button { height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(255, 255, 255, .1); font-size: 13px; transition: background .2s, color .2s; }
.tabs button:hover { background: rgba(255, 255, 255, .22); }
.tabs button.on { background: var(--t, #fff); color: #000; font-weight: 700; }
.dlist { flex: 1; overflow: auto; margin: 0 -34px; padding: 0 34px 34px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 52px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 16px; text-align: left; }
.sw { width: 44px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, .18); position: relative; transition: background .25s; flex: none; }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
.row.on .sw { background: var(--t, var(--acc)); }
.row.on .sw::after { translate: 18px 0; }
.none { opacity: .6; padding: 30px 0; font-size: 15px; }

/* say one sentence: the picture pulls back, the new switch lands as a small laser card */
#kai { height: 170vh; }
#kai .ph { position: absolute; inset: 0; background: center / cover; scale: calc(1.3 - var(--p) * .3); filter: brightness(calc(.75 - var(--p) * .4)); will-change: scale; }
#kai .in { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 480px; align-items: center; gap: 70px; padding: 0 var(--m); }
#kai h2 { font-size: clamp(60px, 6.6vw, 118px); font-weight: 900; line-height: 1.06; letter-spacing: -.02em; margin: 20px 0 36px; }
#form { display: flex; align-items: center; height: 84px; max-width: 700px; border-radius: 42px; padding: 0 12px 0 34px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: background .25s, box-shadow .25s; }
#form:focus-within { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 2px #fff; }
#form input { flex: 1; min-width: 0; font-size: 24px; font-weight: 700; }
#form input::placeholder { color: rgba(255, 255, 255, .45); font-weight: 400; }
#form button { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: #000; font-size: 24px; font-weight: 900; transition: background .2s, scale .2s; }
#form button:hover { background: var(--acc); scale: 1.06; }
.chips { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.chips button { height: 38px; padding: 0 18px; border-radius: 19px; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 14px; transition: background .2s, color .2s; }
.chips button:hover { background: #fff; color: #000; }
#kai .note { margin-top: 30px; font-size: 14px; opacity: .72; }
.hud { position: relative; border-radius: 32px; background: rgba(8, 8, 12, .62); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); padding: 30px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 90px -30px var(--acc); }
.hud h3 { font-size: 13px; font-weight: 400; opacity: .6; display: flex; justify-content: space-between; margin-bottom: 12px; }
#log { min-height: 138px; font-size: 14px; }
#log .say { display: inline-block; background: var(--acc); color: #000; padding: 7px 16px; border-radius: 18px 18px 4px 18px; font-weight: 700; margin-bottom: 10px; }
#log .st { display: flex; align-items: center; gap: 10px; padding: 6px 0; opacity: .5; transition: opacity .3s; }
#log .st::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); border-top-color: transparent; animation: spin .8s linear infinite; }
#log .st.ok { opacity: 1; }
#log .st.ok::before { animation: none; border: 0; background: var(--acc); }
#log .st span { margin-left: auto; font-family: Bahnschrift, sans-serif; opacity: .6; }
@keyframes spin { to { rotate: 1turn; } }
#list { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 12px; }
#list .row { --t: var(--acc); position: relative; }
#list .row.new { animation: land .9s cubic-bezier(.2, .8, .2, 1) both; }
#list .row.new::before { content: ""; position: absolute; inset: 4px -12px; border-radius: 12px; background: linear-gradient(115deg, transparent 10%, rgba(255, 70, 200, .35) 34%, rgba(70, 220, 255, .35) 50%, rgba(255, 236, 110, .35) 66%, transparent 90%) 0 0 / 240% 100%; animation: sweep 2.4s linear infinite; z-index: -1; }
@keyframes sweep { to { background-position: -240% 0; } }
#list .row em { font: 700 11px/20px sans-serif; font-style: normal; background: #fff; color: #000; padding: 0 8px; border-radius: 10px; margin: 0 auto 0 10px; }
@keyframes land { from { opacity: 0; translate: 0 -24px; scale: 1.06; } }

/* the numbers, as three cards standing in a row */
#knum { position: relative; display: flex; justify-content: center; gap: 44px; padding: 190px var(--m) 170px; perspective: 1800px; overflow: hidden; }
#knum .nc { position: relative; width: 340px; height: 420px; --w: 340px; }
#knum .nc:nth-child(1) { transform: rotateY(22deg); } #knum .nc:nth-child(3) { transform: rotateY(-22deg); } #knum .nc:nth-child(2) { transform: translateZ(-70px); }
#knum .nc .t { position: relative; height: 100%; border-radius: 26px; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; background: center / cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 0 90px -30px var(--acc), 0 50px 80px -30px #000; overflow: hidden; }
#knum .nc .t::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 5, 8, .95) 20%, rgba(5, 5, 8, .45)); }
#knum .nc .t > * { position: relative; }
#knum b { font: 700 170px/.9 Bahnschrift, sans-serif; letter-spacing: -.04em; }
#knum span { font-size: 20px; font-weight: 700; margin-top: 12px; color: rgba(255, 255, 255, .85); }
#knum i { position: absolute !important; top: 30px; left: 34px; font-style: normal; font-size: 12px; letter-spacing: .3em; color: var(--acc); }
#knum .shine { position: absolute; }

/* the numbers as draft 07 has them: one a screen, the picture showing through the figures, the row sliding left as the page scrolls */
#knum.scene { height: 300vh; display: block; padding: 0; perspective: none; overflow: visible; }
#knum .strip { position: absolute; top: 0; bottom: 0; left: 0; display: flex; translate: calc(var(--p) * -200vw) 0; will-change: translate; }
#knum .cell { width: 100vw; display: flex; align-items: center; justify-content: center; gap: 4vw; }
#knum .cell b { font: 700 62vh/1 Bahnschrift, sans-serif; letter-spacing: -.05em; background: center / cover; -webkit-background-clip: text; background-clip: text; color: transparent; }
#knum .cell span { font-size: clamp(30px, 3vw, 54px); font-weight: 900; line-height: 1.2; margin: 0; color: #fff; }
#knum .cell span small { display: block; font-size: 15px; font-weight: 400; opacity: .6; margin-top: 10px; }

/* the last screen: the circle opens */
#kend { height: 200vh; }
#kend .ph { position: absolute; inset: 0; background: center / cover; clip-path: circle(calc(8% + var(--p) * 80%)); will-change: clip-path; }
#kend .ph::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
#kend .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
#kend h2 { font-size: clamp(140px, 17vw, 320px); font-weight: 900; line-height: 1; letter-spacing: -.04em; text-shadow: 0 6px 60px rgba(0, 0, 0, .6); }
#kend small { font-size: 13px; opacity: .8; }
footer { position: relative; display: flex; align-items: center; gap: 12px; padding: 34px var(--m) 84px; font-size: 13px; background: #050508; }
footer img { width: 24px; }
footer span { margin-left: auto; opacity: .55; }
@media (max-width: 1400px) { #kai .in { grid-template-columns: 1fr 420px; gap: 44px; } #knum .nc { width: 290px; height: 370px; } #knum b { font-size: 130px; } }