/* V10 · The Card Edition. V1's look (cream cards with a brown rim, Lilita One titles, a dark ruler with a gold rim,
   a white speech bubble in the speaker's colour), V9's content. Every card has the same frame: a header, a big visual
   on the left, a column of text on the right, a foot. The cards fill the space left of the dolls. */
:root{
  --red:#c91a09; --yellow:#f2cd37; --blue:#0055bf; --green:#237841; --orange:#fe8a18; --azure:#36aebf; --gold:#b8892f;
  --ink:#1b1b1b; --cream:#fff8e6; --brown:#6b4423; --rim:#d9a35f;
  --cc:var(--red); --below-ruler:104px;
  --gut:clamp(16px,3vw,52px);
  --card-w:min(62vw,1100px);
  --card-h:min(calc(100svh - var(--below-ruler) - 26px),840px);
  --zone:calc(100vw - var(--gut) - var(--card-w) - 2vw);          /* the room right of the cards, where the dolls stand */
}
*{box-sizing:border-box}
html{background:#0d0d0d;overflow-x:clip;overscroll-behavior:none}
html,body{margin:0}
body{color:var(--ink);font-family:Nunito,system-ui,sans-serif;background:#0d0d0d;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
button{font:inherit}
[hidden]{display:none!important}
img{display:block}

/* ---------- the scene: one place per chapter, fixed behind the story ---------- */
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:#111}
/* a place not in use is not drawn at all (visibility), so the browser only prepares the one being shown */
.place{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.place.on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
/* the places are pictures with their soft focus and light already in them (assets/lugares): no filter at run time */
.place .room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.place[data-ch="1"]{background:#e9dcc6}
.place[data-ch="6"]{background:#1a0f08}
.place[data-ch="6"] .cone{position:absolute;top:-10%;width:34vw;height:120%;margin-left:-17vw;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,214,140,.2),rgba(255,214,140,0) 70%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen}
.cone.c1{left:22%}.cone.c2{left:52%;opacity:.8}.cone.c3{left:84%}
.place[data-ch="7"]{background:radial-gradient(ellipse at 30% 20%,#3a2477,#160d35 55%,#07051a)}
.planet{will-change:transform;position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);opacity:.8;filter:drop-shadow(0 0 22px rgba(160,140,255,.35));animation:drift 14s ease-in-out infinite alternate;animation-delay:var(--s)}
@keyframes drift{from{transform:translate(-1.2vmin,.6vmin) rotate(-4deg)}to{transform:translate(1.2vmin,-.6vmin) rotate(4deg)}}
/* the same place, later: the galaxy darkens the moonbase's sky, night falls on the street for the auction */
.place::after{content:"";position:absolute;inset:0;background:rgba(4,6,22,.62);opacity:0;transition:opacity 1.2s;pointer-events:none}
#scene:is([data-key="galaxy"],[data-key="auction"],[data-key="gold"]) .place::after{opacity:1}
#scene[data-key="auction"] .place[data-ch="4"]::after,#scene[data-key="gold"] .place[data-ch="4"]::after{background:linear-gradient(rgba(10,10,40,.78),rgba(30,15,40,.6))}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.06) 60%,rgba(0,0,0,0));pointer-events:none}
body.on-cover .veil{background:linear-gradient(90deg,rgba(20,10,0,.6),rgba(20,10,0,.2) 55%,rgba(0,0,0,0))}

/* ---------- the dolls: in the room right of the cards, standing on the floor ---------- */
#dolls{position:fixed;left:calc(var(--gut) + var(--card-w) + 2vw);right:.5vw;bottom:0;z-index:12;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;transition:opacity .5s,transform .5s}
body.on-cover #dolls{opacity:0;transform:translateY(40px)}
.doll-wrap{position:relative;display:flex;justify-content:center}
.doll-wrap.j{margin-left:calc(min(46vh, var(--zone) / 1.34) * -.1)}
.doll{will-change:transform;position:relative;z-index:1;height:min(46vh,calc(var(--zone) / 1.34));width:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));transform-origin:50% 100%}
.doll-wrap .shadow{position:absolute;left:12%;right:12%;bottom:-6px;height:16px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.45),rgba(0,0,0,0) 70%)}
.doll.hop{animation:hop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes hop{0%{transform:translateY(18px) scale(.94,1.05)}55%{transform:translateY(-12px)}100%{transform:none}}
.doll.talk{animation:talk .42s ease-in-out infinite alternate}
@keyframes talk{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg) translateY(-3px)}}
.space-on .doll-wrap{animation:float 5s ease-in-out infinite alternate}
.space-on .doll-wrap.j{animation-delay:-2.2s}
.space-on .doll-wrap .shadow{opacity:.3}
@keyframes float{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-16px) rotate(2deg)}}

/* ---------- speech bubble: white, the speaker's colour on its name and edge, a tail down to her ---------- */
.bubble{--c:#9a3f1c;--soft:#fdeee6;position:fixed;z-index:40;width:max-content;max-width:var(--bw,380px);min-width:200px;padding:.7rem 1.05rem .8rem;
  border-radius:18px;background:#fff;border:3px solid var(--c);color:var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.16),0 16px 30px rgba(0,0,0,.28);
  opacity:0;transform:translate(-50%,-100%) translateY(10px) scale(.92);transform-origin:var(--tail,50%) 100%;transition:opacity .22s,transform .32s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.bubble.show{opacity:1;transform:translate(-50%,-100%)}
.bubble.j{--c:#9a3f1c;--soft:#fdeee6}
.bubble.l{--c:#1f4e8c;--soft:#e8f0fb}
.b-head{display:flex;align-items:center;gap:.45rem;margin-bottom:.25rem}
.b-av{width:1.9rem;height:1.9rem;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--c);background:var(--soft)}
.bubble .who{font:400 .95rem 'Lilita One';letter-spacing:.03em;color:var(--c)}
.bubble .txt{margin:0;font:800 clamp(1rem,1.15vw,1.16rem)/1.35 Nunito}
.b-tail{position:absolute;left:var(--tail,50%);bottom:-15px;width:24px;height:16px;margin-left:-12px;background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%)}
.b-tail::after{content:"";position:absolute;left:4px;right:4px;top:-1px;height:11px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)}

/* ---------- the ruler: the topics ---------- */
.ruler{position:fixed;top:14px;left:50%;z-index:30;display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);
  width:min(1160px,calc(100vw - 2 * 150px));padding:9px clamp(14px,1.8vw,24px) 9px 9px;border-radius:16px;
  background:rgba(24,16,8,.88);border:2px solid var(--rim);box-shadow:0 8px 24px rgba(0,0,0,.4);
  transform:translateX(-50%);transition:opacity .5s,transform .5s}
body.on-cover .ruler{opacity:0;transform:translate(-50%,-30px);pointer-events:none}
.r-now{flex:none;display:flex;align-items:center;gap:.6rem;width:15.5rem;padding:.35rem .9rem .3rem .35rem;border:0;border-radius:10px;cursor:pointer;
  background:var(--cc);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.4);transition:background .4s}
.r-now.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.06)}}
.r-num{position:relative;display:grid;place-items:center;flex:none;width:2.1rem;height:1.7rem;border-radius:5px;background:#fff;color:var(--cc);
  font:400 1.15rem/1 'Lilita One';font-style:normal;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);transition:color .4s}
.r-num::before{content:"";position:absolute;left:4px;right:4px;top:-5px;height:5px;background:radial-gradient(circle at 4px 3px,#fff 3px,transparent 3.5px) 0 0/12px 6px}
.r-name{font:400 1.12rem/1.05 'Lilita One';text-align:left;text-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-track{position:relative;flex:1 1 auto;min-width:150px;height:40px}
.r-segs{position:absolute;left:0;right:0;top:9px;height:7px}
.r-seg{position:absolute;top:0;height:7px;border-radius:4px;background:var(--c);opacity:.28;transition:opacity .4s,box-shadow .4s}
.r-seg.done{opacity:.8}
.r-seg.now{opacity:1;box-shadow:0 0 10px var(--c)}
.r-seg span{position:absolute;left:50%;top:13px;transform:translateX(-50%);white-space:nowrap;font:400 .8rem 'Lilita One';color:rgba(255,255,255,.4);transition:color .3s}
.r-seg.now span{color:#fff}
.r-seg.done span{color:rgba(255,236,200,.75)}
.r-dot{position:absolute;top:1.5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(255,255,255,.8)}
.r-mark{position:absolute;top:3.5px;left:0;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--cc);border:3px solid #fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.5);transition:background .4s}
.r-hit{position:absolute;left:-10px;right:-10px;top:0;height:40px;cursor:pointer;border-radius:8px;outline:none}
.r-hit:focus-visible{box-shadow:0 0 0 2px var(--yellow)}
.r-tip{position:absolute;top:44px;transform:translateX(-50%);padding:.3rem .6rem;border-radius:8px;background:#fff;color:var(--ink);font:800 .8rem Nunito;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .15s}
.r-tip.show{opacity:1}
.r-tip i{font-style:normal;color:var(--tc,#8E4B22)}
.shelf{flex:none;display:flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border:2px solid rgba(217,163,95,.6);border-radius:10px;background:rgba(255,255,255,.06);
  color:#f6ead2;font:800 .95rem Nunito;cursor:pointer}
.shelf b{font:400 1.2rem 'Lilita One';color:var(--yellow)}
.shelf small{font:800 .7rem Nunito;letter-spacing:.08em;text-transform:uppercase;color:var(--rim)}
.shelf.bump{animation:bump .6s}
.sh-ico{width:20px;height:16px;border-radius:3px;background:var(--rim);position:relative;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.sh-ico::before{content:"";position:absolute;left:3px;right:3px;top:-4px;height:4px;background:radial-gradient(circle at 3px 2px,var(--rim) 2px,transparent 2.5px) 0 0/7px 4px}
.sound{position:fixed;top:16px;right:16px;z-index:35;display:flex;align-items:center;gap:.4rem;height:42px;padding:0 .9rem 0 .7rem;border:0;cursor:pointer;
  border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font:800 .9rem Nunito;box-shadow:0 3px 0 rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.25);transition:transform .15s}
.sound:hover{transform:translateY(-2px)}
.sound .ico{font-size:1.15rem;line-height:1}
.sound[aria-pressed="true"]{background:var(--yellow);color:#5a4500}

/* ---------- the story: one beat = one window ---------- */
#story{position:relative;z-index:20}
.beat{position:relative;height:100vh;height:100svh;display:flex;align-items:flex-start;padding:calc(var(--below-ruler) + 6px) 0 0 var(--gut);overflow:hidden}
/* a page far from the window is not laid out or painted at all (the browser keeps its size): a light start, a light scroll */
.beat{content-visibility:auto;contain-intrinsic-size:auto 100vh}

/* the cover */
.beat.cover{align-items:center;padding:0 0 0 7vw}
.cover-in{max-width:min(48vw,660px);position:relative;z-index:2}
.kicker{margin:0 0 .5rem;font:800 .85rem Nunito;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.brick-title{margin:0 0 1.1rem;line-height:.9}
.brick-title .word{display:inline-block;font:400 clamp(4.4rem,11vw,9.5rem) 'Lilita One';color:var(--yellow);
  -webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--red),0 12px 20px rgba(0,0,0,.5);animation:drop 1s cubic-bezier(.34,1.56,.64,1) both}
.brick-title .sub{display:block;margin-top:.5rem;font:400 clamp(1.5rem,3.2vw,2.5rem) 'Lilita One';color:#fff;text-shadow:0 3px 0 var(--ink),0 6px 14px rgba(0,0,0,.6);animation:drop 1s .25s cubic-bezier(.34,1.56,.64,1) both}
@keyframes drop{from{transform:translateY(-120px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.cover-q{display:flex;align-items:center;gap:.7rem;margin:0 0 1.8rem;font:800 clamp(1.05rem,1.6vw,1.4rem)/1.35 Nunito;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);animation:fadeUp .8s .6s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
.stud-dot{flex:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#ff6a55,var(--red) 55%,#7d0f05);box-shadow:0 3px 0 #6d0c03,0 0 0 2px rgba(255,255,255,.25)}
.cover-how{display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 0;font:800 .9rem Nunito;color:rgba(255,255,255,.85);animation:fadeUp .8s 1.2s both}
.cover-dolls{position:absolute;right:4vw;bottom:0;display:flex;align-items:flex-end}
.cover-doll{height:min(72vh,38vw);filter:drop-shadow(0 18px 24px rgba(0,0,0,.5));animation:fadeUp 1s .4s both}
.cover-doll.j{margin-left:-3vw;animation-delay:.55s}
.mouse{position:relative;flex:none;width:18px;height:28px;border:2px solid currentColor;border-radius:10px}
.mouse i{position:absolute;left:50%;top:5px;width:4px;height:6px;margin-left:-2px;border-radius:2px;background:#f3c56b;animation:wheel 1.4s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

/* LEGO brick button (V1) */
.brick-btn{position:relative;display:inline-block;font:400 1.35rem 'Lilita One';color:#5a4500;background:var(--yellow);border:0;border-radius:6px;padding:1.05rem 2.1rem .85rem;cursor:pointer;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 6px 0 #b08d12,0 12px 24px rgba(0,0,0,.35);transition:transform .15s;animation:pulse 2s ease-in-out infinite, fadeUp .8s .8s both}
.brick-btn:hover{transform:translateY(-3px)}
.brick-btn:active{transform:translateY(4px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 2px 0 #b08d12}
.brick-btn .studs{position:absolute;left:12%;right:12%;top:-10px;display:flex;justify-content:space-between}
.brick-btn .studs i{width:26px;height:12px;border-radius:6px 6px 2px 2px;background:var(--yellow);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.brick-btn.small{align-self:flex-start;font-size:1.1rem;padding:.8rem 1.5rem .65rem;animation:none;margin:.9rem 0 .4rem}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
.ghost-btn{display:block;margin-top:1.3rem;padding:.3rem 0;border:0;background:none;color:#fff;font:800 .95rem Nunito;cursor:pointer;opacity:.85;text-decoration:underline;text-underline-offset:4px;animation:fadeUp .8s 1s both;text-align:left}
.ghost-btn:hover{opacity:1}
.ghost-btn.dark{color:#8E4B22;animation:none;margin-top:.5rem}

/* a chapter opens: its title on the scene, its number as a big brick */
.beat.opener{align-items:center}
.ch-title{position:relative;max-width:min(62vw,880px);padding-left:clamp(96px,9.5vw,150px)}
.ch-title>*{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.3,1)}
.beat.in .ch-title>*{opacity:1;transform:none}
.beat.in .ch-title .kicker{transition-delay:.1s}.beat.in .ch-title h2{transition-delay:.18s}.beat.in .ch-title .lead{transition-delay:.3s}.beat.in .ch-title .ch-list{transition-delay:.42s}
.ch-brick{position:absolute;left:0;top:50%;display:grid;place-items:center;width:clamp(76px,7.4vw,118px);aspect-ratio:1.05;margin-top:calc(clamp(76px,7.4vw,118px) * -.55);border-radius:10px;background:var(--c);
  color:#fff;font:400 clamp(2.6rem,4.4vw,4.2rem)/1 'Lilita One';font-style:normal;box-shadow:inset 0 -9px 0 rgba(0,0,0,.2),0 9px 0 rgba(0,0,0,.35)}
.ch-title>.ch-brick{transform:translateY(-50px) rotate(-12deg)}
.beat.in .ch-title>.ch-brick{transform:rotate(-4deg);transition:opacity .3s,transform .6s cubic-bezier(.3,1.6,.5,1)}
.ch-brick::before{content:"";position:absolute;left:12%;right:12%;top:-12px;height:13px;background:radial-gradient(ellipse 11px 7px at 50% 100%,var(--c) 97%,transparent) 0 0/50% 13px repeat-x}
.ch-title .kicker{display:inline-block;padding:.25rem .7rem;border-radius:6px;background:var(--c);color:#fff;text-shadow:none;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.ch-title h2{margin:.35rem 0 .45rem;font:400 clamp(3rem,7vw,6.2rem)/.95 'Lilita One';color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  text-shadow:0 7px 0 var(--c),0 12px 26px rgba(0,0,0,.5)}
.ch-title .lead{margin:0;font:800 clamp(1.1rem,1.8vw,1.5rem) Nunito;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.ch-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;padding:0;list-style:none}
.ch-list li{display:flex;align-items:center;gap:.45rem;padding:.35rem .8rem .35rem .4rem;border-radius:999px;background:rgba(255,248,230,.95);color:#2a2118;font:800 .92rem Nunito;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.ch-list li i{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--c);color:#fff;font:400 .8rem 'Lilita One';font-style:normal}

/* ---------- the cards: one frame for all ---------- */
.card{position:relative;display:flex;flex-direction:column;width:var(--card-w);height:var(--card-h);padding:clamp(16px,1.6vw,26px) clamp(18px,2vw,32px) 0;border-radius:18px;
  background:rgba(255,248,230,.97);border:3px solid var(--brown);box-shadow:0 10px 0 rgba(0,0,0,.18),0 24px 60px rgba(0,0,0,.35);
  opacity:0;transform:translateY(46px) scale(.985);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.3,1)}
.beat.in .card{opacity:1;transform:none}
.card::before{content:"";position:absolute;left:22px;right:22px;top:-3px;height:7px;border-radius:0 0 5px 5px;background:var(--c)}
.c-head{flex:none;padding-right:5.5rem}
.c-kicker{display:inline-flex;align-items:center;gap:.45rem;margin:0;font:800 .78rem Nunito;letter-spacing:.14em;text-transform:uppercase;color:#8E4B22}
.c-kicker::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.card h3{margin:.2rem 0 .1rem;font:400 clamp(1.8rem,2.7vw,2.9rem)/1.02 'Lilita One';color:var(--c);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.card h3 em{font-style:normal;color:var(--yellow)}
.c-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,30%,360px);gap:clamp(14px,1.8vw,28px);padding:clamp(10px,1.4vh,18px) 0}
.c-vis{position:relative;min-width:0;min-height:0;border-radius:14px}
/* the size queries cost a lot of layout: only the cards near the window use them (main.js marks them .near) */
.beat.near .card{container-type:inline-size}
.beat.near .c-vis{container-type:size;container-name:vis}
.c-text{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.15rem;padding-right:2px;scrollbar-width:thin}
.card p{margin:.45rem 0;font:600 clamp(1rem,1.12vw,1.14rem)/1.5 Nunito;color:#2a2118}
.card strong{font-weight:900}
.card .src{margin-top:auto;padding-top:.6rem;font-size:.76rem;line-height:1.4;color:#7a6a58}
.card .src a{color:#8E4B22}
.card .hint{font:800 .9rem/1.4 Nunito;color:#8E4B22}
.card .big-q{font:900 clamp(1.15rem,1.5vw,1.45rem)/1.3 Nunito;color:#2a2118}
.card .note{font-weight:800;color:#8E4B22}
.stat{display:flex;flex-direction:column;margin:.2rem 0 .5rem!important}
.stat b{font:400 clamp(2.2rem,3.2vw,3.3rem)/1 'Lilita One';color:var(--c);-webkit-text-stroke:1.2px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);font-variant-numeric:tabular-nums}
.stat b{white-space:nowrap}
.stat>span{font:800 .82rem/1.3 Nunito;letter-spacing:.06em;text-transform:uppercase;color:#8E4B22}
/* the content arrives in order: the header, the visual, the text */
.c-head,.c-vis,.c-text{opacity:0;transform:translateY(14px);transition:opacity .45s,transform .5s cubic-bezier(.2,.8,.3,1)}
.beat.in .c-head{opacity:1;transform:none;transition-delay:.12s}
.beat.in .c-vis{opacity:1;transform:none;transition-delay:.24s}
.beat.in .c-text{opacity:1;transform:none;transition-delay:.36s}
/* dark cards: the night, the auction, the velvet room, space */
.card.night{background:rgba(14,20,40,.96);border-color:#3b4a78;color:#e8ecf8}
.card.velvet{background:rgba(32,18,8,.96);border-color:#8a6a2a;color:#f6ead2}
.card.space{background:rgba(24,14,58,.95);border-color:#6c56c9;color:#ece6ff}
.card:is(.night,.velvet,.space) p{color:inherit}
.card:is(.night,.velvet,.space) .c-kicker,.card:is(.night,.velvet,.space) .hint,.card:is(.night,.velvet,.space) .stat>span{color:#ffcf6b}
.card:is(.night,.velvet,.space) .src,.card:is(.night,.velvet,.space) .src a{color:rgba(232,226,210,.62)}
.card:is(.night,.velvet,.space) h3{color:#fff;-webkit-text-stroke:1.5px #000;text-shadow:0 4px 0 #000}
.card:is(.night,.velvet,.space) h3 em{color:#ffd23f}
.card:is(.night,.velvet,.space) .stat b{color:#fff;-webkit-text-stroke:1.2px #000;text-shadow:0 3px 0 #000}
.card .stat.gold b{color:#ffd23f}
.card:is(.night,.velvet,.space) .card-foot{border-top-color:rgba(255,255,255,.16)}
.card:is(.night,.velvet,.space) .step{color:#ffcf6b}
.card:is(.night,.velvet,.space) .ghost-btn.dark{color:#ffcf6b}

/* the foot of every card: the cards of this topic, where you are, what comes next */
.card-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 0 .8rem;border-top:2px dashed rgba(107,68,35,.3)}
.step{display:flex;align-items:center;gap:.6rem;font:800 .85rem Nunito;color:#8E4B22;letter-spacing:.06em}
.pips{display:flex;gap:4px}
.pips i{width:18px;height:8px;border-radius:2px;background:rgba(107,68,35,.22)}
.pips i.on{background:var(--c)}
.card:is(.night,.velvet,.space) .pips i{background:rgba(255,255,255,.18)}
.card:is(.night,.velvet,.space) .pips i.on{background:var(--c)}
.next-btn{font:400 1rem 'Lilita One';color:#fff;background:var(--c);border:0;border-radius:10px;padding:.55rem 1rem .45rem;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .15s;text-align:left}
.next-btn:hover{transform:translateY(-2px)}
.next-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.next-btn span{display:inline-block;margin-left:.35rem;animation:arrowDown 1.4s ease-in-out infinite}
@keyframes arrowDown{50%{transform:translateY(4px)}}
/* the card number, a small brick in the top corner */
.c-no{position:absolute;right:clamp(18px,2vw,32px);top:clamp(16px,1.7vw,26px);display:grid;place-items:center;min-width:3.4rem;height:2.2rem;padding:0 .5rem;border-radius:6px;
  background:var(--c);color:#fff;font:400 1.05rem 'Lilita One';box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.25)}
.c-no::before{content:"";position:absolute;left:6px;right:6px;top:-6px;height:6px;background:radial-gradient(ellipse 6px 4px at 50% 100%,var(--c) 98%,transparent) 0 0/16px 6px repeat-x}

/* stamps (RETIRED, RECORD, YOUR PICK) */
.stamp{position:absolute;padding:.2rem .7rem .1rem;border:4px solid var(--red);border-radius:6px;color:var(--red);font:400 1.5rem 'Lilita One';letter-spacing:.06em;white-space:nowrap;
  background:rgba(255,248,230,.9);transform:rotate(-8deg) scale(1.8);opacity:0;transition:opacity .2s,transform .3s cubic-bezier(.5,0,.75,0)}
.stamp.on{opacity:1;transform:rotate(-8deg) scale(1)}
.pick-stamp{position:absolute;top:10px;left:50%;padding:.15rem .5rem .05rem;border:3px solid var(--blue);border-radius:5px;background:#fff;color:var(--blue);font:400 .95rem 'Lilita One';
  transform:translateX(-50%) rotate(-6deg);animation:stampIn .3s cubic-bezier(.5,0,.75,0) both;white-space:nowrap}
@keyframes stampIn{from{opacity:0;transform:translateX(-50%) rotate(-6deg) scale(1.7)}}

/* ===== 1 · the shelf ===== */
.v-shelf{position:absolute;inset:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:stretch;padding:2cqh 1cqw 0;border-radius:14px;overflow:hidden;background:linear-gradient(#f3e6cc,#ead8b6)}
.v-shelf figure{flex:0 0 33.333%;height:50%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.v-shelf img{max-width:92%;max-height:calc(50cqh - 4.6rem);object-fit:contain;filter:grayscale(1) brightness(1.25) contrast(.55);opacity:.35;transform:translateX(60px);
  transition:transform .6s cubic-bezier(.2,.9,.3,1.2) calc(var(--i) * .2s + .3s),opacity .5s calc(var(--i) * .2s + .3s),filter .25s calc(var(--i) * .2s + .85s)}
.beat.in .v-shelf img{transform:none;opacity:1;filter:drop-shadow(0 8px 8px rgba(0,0,0,.3))}
.v-shelf b{position:relative;align-self:stretch;margin-top:6px;padding:1.4cqh 0 1cqh;text-align:center;background:var(--red);color:#fff;font:400 clamp(1rem,4.6cqh,1.7rem) 'Lilita One';box-shadow:inset 0 -6px 0 rgba(0,0,0,.2);font-variant-numeric:tabular-nums}
.v-shelf b::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px;background:radial-gradient(ellipse 8px 5px at 50% 100%,var(--red) 98%,transparent) 0 0/24px 7px repeat-x}
.v-shelf figcaption{padding:1.2cqh .2rem 1.8cqh;align-self:stretch;text-align:center;background:#7a2a1e;color:#fff;font:800 clamp(.7rem,2.6cqh,.95rem)/1.15 Nunito}

/* the empty place */
.v-slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6cqw;border-radius:14px;background:repeating-linear-gradient(45deg,rgba(185,154,116,.07) 0 14px,transparent 14px 28px)}
.slot{position:relative;flex:none;width:min(62cqh,46cqw);aspect-ratio:1.05;border:5px dashed #b99a74;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.4)}
.qstuds{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2cqh;margin-bottom:8cqh}
.qstuds i{width:min(6cqh,4.4cqw);aspect-ratio:1;border-radius:50%;visibility:hidden}
.qstuds i.on{visibility:visible;background:radial-gradient(circle at 38% 35%,#ff6a55,var(--red) 60%,#7d0f05);box-shadow:0 3px 0 #6d0c03;transform:translateY(60px);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.3) calc(var(--k) * 35ms + .5s),opacity .3s calc(var(--k) * 35ms + .5s)}
.beat.in .qstuds i.on{transform:none;opacity:1}
.slot .stamp{left:50%;bottom:7%;font-size:clamp(1.2rem,5cqh,2rem);transform:translateX(-50%) rotate(-8deg) scale(1.8)}
.beat.in .slot .stamp{opacity:1;transform:translateX(-50%) rotate(-8deg) scale(1);transition-delay:1.6s}
.odo-q{text-align:center}
.odo-q b{display:block;font:400 min(30cqh,22cqw)/.9 'Lilita One';color:var(--red);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink)}
.odo-q span{font:800 1rem Nunito;letter-spacing:.14em;text-transform:uppercase;color:#8E4B22}

/* ===== 2 · bigger or more wanted? ===== */
.v-pick{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:2cqh 2cqw}
@container vis (min-aspect-ratio:2/1){.v-pick{grid-template-columns:repeat(4,1fr);grid-template-rows:minmax(0,1fr)}}
.opt{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.1rem;padding:1.4cqh .6rem 1.4cqh;border:3px solid #d8c3a0;border-radius:14px;background:#fff;cursor:pointer;
  box-shadow:0 5px 0 #d8c3a0;transition:transform .2s,box-shadow .2s,opacity .3s,border-color .2s}
.opt:hover:not(:disabled){transform:translateY(-4px);border-color:var(--blue)}
.opt:disabled{cursor:default}
.opt img{flex:1;min-height:0;width:100%;object-fit:contain;margin-bottom:.4rem}
.opt b{font:400 clamp(1rem,1.3vw,1.3rem) 'Lilita One';color:var(--ink)}
.opt span{font:800 .82rem Nunito;color:#7a6a58}
.opt .mq{flex:1;min-height:0;display:grid;place-items:center;width:70%;margin-bottom:.4rem;border-radius:10px;background:repeating-linear-gradient(45deg,#e9f0fb 0 10px,#dbe6f7 10px 20px);border:3px dashed #7aa0d8;
  font:400 clamp(2.4rem,9cqh,4.4rem) 'Lilita One';font-style:normal;color:var(--blue)}
.opt.picked{border-color:var(--blue);box-shadow:0 5px 0 var(--blue),0 0 0 4px rgba(0,85,191,.2)}
.opt.dim{opacity:.45}

/* the galaxy of wishes */
#gx{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;background:radial-gradient(ellipse at 50% 50%,#1b2350,#0a0f26 72%)}
.gx-count{position:absolute;left:16px;top:12px;max-width:60%;font:800 .9rem/1.3 Nunito;color:#cfd8f5;text-shadow:0 2px 6px #000;pointer-events:none}
.gx-count b{display:block;font:400 clamp(1.8rem,7cqh,2.6rem)/1 'Lilita One';color:#fff;font-variant-numeric:tabular-nums}
.gx-key{position:absolute;right:14px;bottom:12px;padding:.2rem .6rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#cfd8f5;font:800 .75rem Nunito}
.gx-tabs{display:flex;flex-direction:column;gap:.45rem}
.gx-tabs button{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border:2px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.04);color:#e8ecf8;font:800 .95rem/1.15 Nunito;text-align:left;cursor:pointer;transition:background .3s,border-color .3s}
.gx-tabs button i{flex:none;width:13px;height:13px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.gx-tabs button small{display:block;font:700 .74rem Nunito;color:rgba(232,236,248,.6)}
.gx-tabs button b{margin-left:auto;font:400 1.1rem 'Lilita One';color:var(--c);white-space:nowrap}
.gx-tabs button.on{border-color:var(--c);background:rgba(255,255,255,.1)}
.gx-tabs button.mine small::after{content:"· your pick";margin-left:.3rem;color:var(--c);font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.gx-set{display:flex;align-items:center;gap:.7rem;min-height:4.2rem;margin-top:.6rem}
.gx-set img{flex:none;width:64px;height:52px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.92);padding:3px}
.gx-set b{display:block;font:400 1.15rem/1.2 'Lilita One';margin-bottom:.15rem}
.gx-set>div{min-width:0}
.gx-set small{display:block;font:700 .74rem/1.3 Nunito;color:rgba(207,216,245,.7)}
.gx-set i{font-style:normal;font-variant-numeric:tabular-nums}
.gx-set span{display:block;font:800 .85rem Nunito;color:#cfd8f5}
.verdict-line{margin-top:.6rem!important;padding:.6rem .8rem;border-radius:10px;background:rgba(255,210,63,.1);border-left:4px solid #ffd23f;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.verdict-line.on{opacity:1;transform:none}
.verdict-line em{font-style:normal;color:#ffd23f;font-weight:900}
.verdict-line .yp{display:block;font:900 .78rem Nunito;letter-spacing:.1em;text-transform:uppercase;color:#ffd23f}

/* the scatter: pieces vs wishes */
#sc{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;background:#18213a}
.sc-legend{position:absolute;left:46px;top:10px;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font:800 .72rem Nunito;color:#cfd8f5;pointer-events:none}
.sc-legend .d{width:8px;height:8px;border-radius:50%;background:rgba(190,205,240,.8);margin-left:.4rem}
.sc-legend .d.sw{background:#ffd23f}.sc-legend .d.top{background:#ffd23f;box-shadow:0 0 0 2px #fff;width:10px;height:10px}.sc-legend .d.big{background:#ff8a3d;box-shadow:0 0 0 2px #fff;width:10px;height:10px}
.sc-group{padding:.5rem .65rem;margin-bottom:.5rem;border-radius:10px;border:2px solid #e2cfae;background:#fff}
.sc-group.top{border-color:#e6b800}
.sc-group.big{border-color:#ff8a3d}
.sc-group b{display:block;font:400 1.05rem 'Lilita One';color:var(--ink)}
.sc-group>span{display:block;font:800 .74rem Nunito;color:#7a6a58}
.sc-group em{display:block;margin:.2rem 0;font:700 .8rem/1.3 Nunito;font-style:normal;color:#2a2118}
.sc-group em i{font-style:normal;color:#b38600;font-weight:900}
.sc-group ul{margin:.2rem 0 0;padding:0;list-style:none;columns:2;column-gap:.6rem}
.sc-group li{font:700 .74rem/1.55 Nunito;color:#4a3a2a;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;padding:0 .2rem}
.sc-group li.sw{color:#9a7300;font-weight:900}
.sc-group li:hover{background:#fff2b8}

/* ===== 3 · characters ===== */
.v-case{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly;padding:2cqh 2cqw;border-radius:12px;background:linear-gradient(#efe4cf,#e2d2b4);border:10px solid #9c6b3c;
  box-shadow:inset 0 0 0 2px #6b4423,inset 0 10px 22px rgba(0,0,0,.18)}
.shelfrow{position:relative;padding:4cqh 1cqw 0;border-bottom:9px solid rgba(190,220,235,.85);border-radius:4px 4px 0 0}
.shelfrow::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(255,248,200,.95),rgba(255,248,200,0) 70%);opacity:0;transition:opacity .6s}
.shelfrow.lit::before{opacity:1}
.figs{position:relative;display:flex;align-items:flex-end;justify-content:space-around;gap:4px}
.shelfrow img{height:min(34cqh,17cqw);width:auto;filter:grayscale(1) brightness(1.3) contrast(.5);opacity:.4;transition:filter .3s calc(var(--i) * .12s),opacity .3s calc(var(--i) * .12s),transform .4s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .12s)}
.shelfrow.lit img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));opacity:1;transform:translateY(-4px)}
.shelfrow .tag{position:absolute;left:1cqw;top:.6cqh;z-index:1;padding:.1rem .5rem;border-radius:6px;background:rgba(255,255,255,.88);font:800 .78rem Nunito;color:#5a4632;opacity:0;transition:opacity .4s .5s}
.shelfrow.lit .tag{opacity:1}
.shelfrow .tag b{margin-right:.3rem;font:400 .95rem 'Lilita One';color:var(--green)}

/* find the 3 differences */
.v-diff{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:6cqw;padding-bottom:1cqh;border-radius:14px;background:radial-gradient(ellipse at 50% 100%,rgba(35,120,65,.12),transparent 70%)}
.v-diff figure{margin:0;text-align:center}
.v-diff figcaption{margin-top:.4rem;font:400 clamp(.95rem,1.2vw,1.2rem) 'Lilita One';color:#5a4632}
.v-diff img{height:80cqh;width:auto;max-width:42cqw;object-fit:contain}
.find-area{position:relative;display:block;padding:0;border:3px dashed #9fc79f;border-radius:12px;background:rgba(35,120,65,.06);cursor:crosshair}
.find-area:focus-visible{outline:3px solid var(--green)}
.find-ring{position:absolute;border:4px solid var(--green);border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.8);animation:ringIn .45s cubic-bezier(.2,.9,.3,1.4) both;pointer-events:none}
.find-ring.answer{border-style:dashed;border-color:var(--orange)}
.find-ring i{position:absolute;right:-14px;top:-14px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:400 .85rem 'Lilita One';font-style:normal}
.find-ring.answer i{background:var(--orange)}
@keyframes ringIn{from{transform:scale(.3);opacity:0}}
.find-miss{position:absolute;margin:-14px 0 0 -10px;font:900 1.6rem Nunito;color:var(--red);pointer-events:none;animation:miss .9s ease-out forwards}
@keyframes miss{to{transform:scale(1.4);opacity:0}}
.find-count{display:flex;align-items:center;gap:.35rem;margin:.4rem 0;font:400 1.35rem 'Lilita One';color:var(--ink)}
.find-count i{width:20px;height:20px;border-radius:50%;border:3px solid var(--green);background:#fff}
.find-count i.on{background:var(--green)}
.find-count b{margin-left:.35rem;font-weight:400}
.find-list{margin:.3rem 0 0;padding:0;list-style:none;counter-reset:d}
.find-list li{counter-increment:d;display:flex;align-items:center;gap:.5rem;margin:.45rem 0;font:800 1.02rem Nunito;color:#b9a88f;filter:blur(4px);transition:filter .4s,color .4s}
.find-list li::before{content:counter(d);flex:none;width:26px;height:26px;border-radius:50%;background:#d8c9b0;color:#fff;display:grid;place-items:center;font:400 .9rem 'Lilita One'}
.find-list li.on,.find-list li.ans{color:#2a2118;filter:none}
.find-list li.on::before{background:var(--green)}
.find-list li.ans::before{background:var(--orange)}
.find-verdict{align-self:flex-start;margin-top:.7rem;padding:.35rem .8rem;border-radius:8px;background:var(--green);color:#fff;font:400 1.1rem 'Lilita One';animation:fadeUp .4s both}

/* 1 set vs 3 sets */
.v-onevsthree{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2cqw}
.v-onevsthree .side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1.6cqh;padding:2cqh 1.5cqw;border-radius:14px;background:#fff;border:3px solid #e2cfae;text-align:center}
.v-onevsthree .side.one{border-color:var(--green);background:#eef7ef}
.v-onevsthree img{flex:1;min-height:0;max-height:44cqh;width:auto;object-fit:contain}
.v-onevsthree .side span{font:700 clamp(.9rem,1.05vw,1.05rem)/1.35 Nunito;color:#2a2118}
.plate-num{position:relative;display:inline-grid;place-items:center;min-width:4.2rem;height:3.6rem;padding:0 .6rem;border-radius:7px;background:var(--green);color:#fff;font:400 2.6rem/1 'Lilita One';box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 4px 0 rgba(0,0,0,.25)}
.plate-num::before{content:"";position:absolute;left:7px;right:7px;top:-7px;height:7px;background:radial-gradient(ellipse 7px 5px at 50% 100%,var(--green) 98%,transparent) 0 0/18px 7px repeat-x}
.side.three .plate-num{background:#8a8f95}.side.three .plate-num::before{background-image:radial-gradient(ellipse 7px 5px at 50% 100%,#8a8f95 98%,transparent)}
.boxes{display:flex;gap:min(8px,1.4cqw)}
.boxes i{position:relative;width:min(46px,8cqw);height:min(38px,6.6cqw);border-radius:3px;background:linear-gradient(135deg,#3a6fb8,#1d4a8c);box-shadow:4px 4px 0 #123266;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) .5s}
.boxes i::before{content:"";position:absolute;left:4px;top:4px;width:12px;height:12px;background:#d01712;box-shadow:inset 0 -4px 0 #ffd500}
.beat.in .boxes i{transform:none}
.beat.in .boxes i:nth-child(2){transition-delay:.65s}.beat.in .boxes i:nth-child(3){transition-delay:.8s}

/* ===== 4 · the hunt ===== */
.v-shop{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:3cqw}
.shop{position:relative;width:min(58cqw,76cqh);height:94cqh;border-radius:12px 12px 0 0;background:#b8473c;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18);overflow:hidden;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 2px,transparent 2px 24px)}
.shop-sign{position:absolute;left:9%;right:9%;top:4%;padding:.35rem;border-radius:6px;background:#fff8e6;text-align:center;font:400 clamp(1rem,5cqh,1.5rem) 'Lilita One';color:#8a2a1e;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.glass{position:absolute;left:9%;right:9%;top:20%;bottom:6%;display:grid;place-items:center;border:8px solid #f1efe8;background:linear-gradient(160deg,#cfe6f5,#9cc4e0)}
.glass img{width:78%;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.shutter{position:absolute;left:9%;right:9%;top:20%;height:0;background:repeating-linear-gradient(0deg,#8a9097 0 12px,#6f757c 12px 14px);box-shadow:0 4px 8px rgba(0,0,0,.4);transition:height 1s cubic-bezier(.6,0,.4,1) 1.4s}
.beat.in .shutter{height:74%}
.shop .stamp{left:50%;top:56%;font-size:clamp(1.3rem,6cqh,2.2rem);transform:translate(-50%,-50%) rotate(-8deg) scale(1.8)}
.beat.in .shop .stamp{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1);transition-delay:2.5s}
.pricetag{position:relative;display:flex;flex-direction:column;padding:.7rem 1rem .6rem 1.6rem;border-radius:6px 16px 16px 6px;background:var(--yellow);color:#3a2b00;box-shadow:0 4px 0 #b08d12,0 8px 16px rgba(0,0,0,.25);transform:rotate(-3deg)}
.pricetag::before{content:"";position:absolute;left:.5rem;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#fff8e6;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.pricetag .when{font:800 .74rem Nunito;letter-spacing:.06em;text-transform:uppercase}
.pricetag b{font:400 clamp(1.8rem,9cqh,2.8rem)/1.05 'Lilita One';font-variant-numeric:tabular-nums}
.pricetag .what,.pricetag .usd{font:700 .82rem Nunito}
.v-shop .pricetag{align-self:center;opacity:0;transform:translateX(-20px) rotate(-6deg);transition:opacity .5s .7s,transform .5s .7s}
.beat.in .v-shop .pricetag{opacity:1;transform:rotate(-3deg)}

.v-auction{position:absolute;inset:0;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto minmax(0,1fr);gap:1cqh 3cqw;align-items:center}
.years{grid-column:1/-1;display:flex;align-items:baseline;gap:.8rem}
.years b{font:400 min(18cqh,11cqw)/1 'Lilita One';color:#fff;font-variant-numeric:tabular-nums}
.years span{font:800 .85rem Nunito;letter-spacing:.14em;text-transform:uppercase;color:#ffcf6b}
.podium{position:relative;align-self:end;height:76cqh;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse 60% 90% at 50% 0,rgba(255,230,160,.3),rgba(255,230,160,0) 75%)}
.podium::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:12cqh;border-radius:4px 4px 0 0;background:linear-gradient(#3a2d55,#241a3a);box-shadow:inset 0 3px 0 rgba(255,255,255,.12)}
.podium img{position:relative;z-index:1;width:88%;margin-bottom:11cqh;transition:filter 2.6s .3s}
.beat.in .podium img{filter:drop-shadow(0 0 24px rgba(255,200,60,.85)) saturate(1.2)}
/* the auctioneer's gavel: a barrel head on a long handle, swinging from the handle's end */
.gavel{position:absolute;right:-4%;top:8%;z-index:2;width:120px;height:42px;transform-origin:100% 50%;transform:rotate(-35deg)}
.gavel::before{content:"";position:absolute;left:0;top:0;width:32px;height:42px;border-radius:6px;background:linear-gradient(90deg,#6b3f1d,#b07a44 40%,#7a4a24);box-shadow:inset 0 5px 0 #c8955c,inset 0 -5px 0 #c8955c}
.gavel::after{content:"";position:absolute;left:30px;right:0;top:50%;height:9px;margin-top:-4.5px;border-radius:4px;background:linear-gradient(#a06d3c,#5d3b1f)}
.gavel.hit{animation:gavel .5s ease-in-out 2}
@keyframes gavel{40%{transform:rotate(12deg)}}
.pricetag.sale{justify-self:start;transform:rotate(2deg) scale(.7);opacity:0;transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.3,1.4)}
.pricetag.sale.on{opacity:1;transform:rotate(2deg)}

.v-gold{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:4cqw;padding:0 2cqw 1cqh}
.v-gold b{display:block;font:400 1.3rem 'Lilita One';color:#fff;text-align:center}
.v-gold span{display:block;font:700 .85rem Nunito;color:#cfd8f5;text-align:center}
.g-one,.g-pile{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.gbrick{position:relative;display:block;width:var(--bw,46px);height:calc(var(--bw,46px) * .36);border-radius:3px;background:linear-gradient(#ffe680,#f2c230 45%,#b9820a);box-shadow:inset 0 -3px 0 rgba(90,55,0,.35),0 0 12px rgba(255,200,60,.35)}
.gbrick::before{content:"";position:absolute;left:8%;right:8%;top:-4px;height:4px;background:radial-gradient(ellipse 4px 3px at 50% 100%,#ffe680 98%,transparent) 0 0/25% 4px repeat-x}
.g-one .gbrick{margin-bottom:.5rem}
.pile{position:relative;width:100%;flex:1;margin-bottom:.5rem}
.pile .gbrick{position:absolute;bottom:0;opacity:0;transform:translateY(-120px) rotate(var(--r));transition:opacity .2s var(--d),transform .35s cubic-bezier(.5,0,.75,0) var(--d)}
.pile.go .gbrick{opacity:1;transform:none}
.pill-key b{display:inline-block;padding:.25rem .8rem;border-radius:999px;background:rgba(255,210,63,.15);border:2px solid #ffd23f;color:#ffd23f;font:800 .85rem Nunito}

/* ===== 5 · how far ===== */
.v-guess{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6cqh;padding:5cqh 4cqw 3cqh}
.guess-brick{position:relative;flex:1;max-height:22cqh;padding:0 1.6rem;border:0;border-radius:8px;background:var(--azure);color:#fff;font:400 clamp(1.4rem,8cqh,2.6rem) 'Lilita One';text-align:left;cursor:pointer;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.2),0 7px 0 #1d6c77;transition:transform .15s,opacity .3s}
.guess-brick::before{content:"";position:absolute;left:18px;right:18px;top:-12px;height:13px;background:radial-gradient(ellipse 14px 8px at 50% 100%,var(--azure) 97%,transparent) 0 0/44px 13px repeat-x}
.guess-brick:nth-child(2){background:#2f97a6}.guess-brick:nth-child(2)::before{background-image:radial-gradient(ellipse 14px 8px at 50% 100%,#2f97a6 97%,transparent)}
.guess-brick:nth-child(3){background:#247f8c}.guess-brick:nth-child(3)::before{background-image:radial-gradient(ellipse 14px 8px at 50% 100%,#247f8c 97%,transparent)}
.guess-brick:hover:not(:disabled){transform:translateY(-3px)}
.guess-brick:disabled{cursor:default}
.guess-brick.picked{box-shadow:inset 0 -9px 0 rgba(0,0,0,.2),0 7px 0 #1d6c77,0 0 0 5px var(--yellow)}
.guess-brick.dim{opacity:.45}
.guess-brick .pick-stamp{left:auto;right:18px;top:50%;transform:translateY(-50%) rotate(-6deg);border-color:var(--ink);color:var(--ink);animation:none}

#wall{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;background:linear-gradient(#1d2c35,#0c1419)}
.c-vis .pill{position:absolute;left:12px;top:12px;padding:.2rem .6rem;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font:800 .78rem Nunito}
.stamp.record{right:24px;bottom:20px;border-color:var(--azure);color:var(--azure);background:rgba(12,20,25,.8)}
.wall-guesses{margin:.2rem 0 .4rem;padding:0;list-style:none}
.wall-guesses li{display:inline-block;margin:0 .3rem .35rem 0;padding:.25rem .6rem;border-radius:6px;background:rgba(54,174,191,.85);color:#fff;font:400 .95rem 'Lilita One';transition:opacity .3s,background .3s}
.wall-guesses li.out{opacity:.4;text-decoration:line-through;text-decoration-thickness:3px}
.wall-guesses li.win{background:var(--yellow);color:#3a2b00;box-shadow:0 0 16px rgba(255,210,63,.7)}
.wall-guesses li.mine::after{content:" · your pick";font:800 .7rem Nunito}

/* ===== 6 · the grail ===== */
.v-c3po{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.4cqw}
.v-c3po figure{position:relative;min-width:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.v-c3po .beam{position:absolute;left:-30%;right:-30%;top:0;bottom:4cqh;background:linear-gradient(rgba(255,226,150,0),rgba(255,226,150,.26));clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:0;transition:opacity .6s}
.v-c3po img{position:relative;height:66cqh;width:auto;max-width:100%;object-fit:contain;filter:brightness(.16) saturate(0);transform:translateY(12px);transition:filter .5s,transform .5s cubic-bezier(.2,.9,.3,1.4)}
.v-c3po .ped{position:relative;width:80%;height:8cqh;border-radius:3px 3px 0 0;background:linear-gradient(#3a2a16,#1d140a);box-shadow:inset 0 2px 0 rgba(255,220,150,.2)}
.v-c3po figure.lit .beam{opacity:1}
.v-c3po figure.lit img{filter:drop-shadow(0 0 18px rgba(255,200,80,.75)) saturate(1.2);transform:none}
.v-grail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;border-radius:14px}
.v-grail .halo{position:absolute;left:50%;bottom:6cqh;width:80cqh;height:80cqh;margin-left:-40cqh;border-radius:50%;background:radial-gradient(rgba(255,214,120,.5),rgba(255,214,120,0) 65%);animation:halo 3s ease-in-out infinite alternate}
@keyframes halo{to{transform:scale(1.08);opacity:.75}}
.v-grail img{position:relative;height:78cqh;width:auto;filter:drop-shadow(0 0 26px rgba(255,200,80,.8)) saturate(1.2);transform:translateY(20px);opacity:0;transition:transform .7s cubic-bezier(.2,.9,.3,1.3) .3s,opacity .5s .3s}
.beat.in .v-grail img{transform:none;opacity:1}
.v-grail .ped{position:relative;width:min(40cqw,34cqh);height:7cqh;border-radius:3px 3px 0 0;background:linear-gradient(#3a2a16,#1d140a);box-shadow:inset 0 2px 0 rgba(255,220,150,.25)}
.tag5{position:absolute;right:4cqw;top:6cqh;padding:.4rem .8rem;border-radius:10px;background:rgba(255,210,63,.12);border:2px solid #ffd23f;color:#ffd23f;font:800 1rem Nunito}
.tag5 b{font:400 2rem 'Lilita One';margin-right:.2rem}
.estimate{padding:.8rem 1rem;border:3px dashed var(--gold);border-radius:12px;background:rgba(255,214,120,.08);opacity:0;transform:translateY(16px);transition:opacity .5s 1.1s,transform .5s 1.1s}
.beat.in .estimate{opacity:1;transform:none}
.estimate .eyebrow{display:block;font:800 .72rem Nunito;letter-spacing:.12em;text-transform:uppercase;color:#ffcf6b}
.estimate b{display:block;font:400 2.5rem/1.1 'Lilita One';color:#ffd23f}
.estimate .nt{font:700 .82rem/1.4 Nunito;color:rgba(246,234,210,.85)}

/* ===== 7 · your missing set ===== */
.v-const{position:absolute;left:50%;top:50%;width:min(100cqw,194cqh);aspect-ratio:640/330;transform:translate(-50%,-50%)}
.v-const svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cl{fill:none;stroke:#f6e7b6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;filter:drop-shadow(0 0 4px rgba(255,230,160,.7));transition:stroke-dashoffset .8s}
.beat.in .cl{stroke-dashoffset:0}
.beat.in .cl:nth-child(1){transition-delay:1s}.beat.in .cl:nth-child(2){transition-delay:1.7s}
.cl.dash{stroke-dasharray:6 8;stroke-dashoffset:0;opacity:0;stroke:#c9b8ff;transition:opacity .6s 2.5s}
.beat.in .cl.dash{opacity:.8}
.cworld,.cstar{position:absolute;transform:translate(-50%,-50%) scale(.2);opacity:0;transition:opacity .5s,transform .5s cubic-bezier(.2,.9,.3,1.4)}
.cworld{width:17%;aspect-ratio:1;filter:drop-shadow(0 0 16px rgba(120,160,255,.8))}
.cnum{position:absolute;display:grid;place-items:center;width:26px;height:26px;margin:-50px 0 0 18px;border-radius:50%;background:var(--c);color:#fff;font:400 .9rem 'Lilita One';font-style:normal;opacity:0;transition:opacity .4s}
.beat.in .cnum{opacity:1}.beat.in .cnum.n1{transition-delay:.8s}.beat.in .cnum.n2{transition-delay:1.5s}.beat.in .cnum.n3{transition-delay:2.2s}
.cstar{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,var(--c) 45%,transparent 72%);box-shadow:0 0 24px var(--c)}
.cstar.missing{width:62px;height:62px;display:grid;place-items:center;border:3px dashed #ffd23f;background:rgba(255,210,63,.08);box-shadow:none;color:#ffd23f;font:400 2.2rem 'Lilita One';animation:pulseQ 1.6s ease-in-out 3.2s infinite}
@keyframes pulseQ{50%{box-shadow:0 0 26px rgba(255,210,63,.7)}}
.beat.in .cworld{transition-delay:.5s}.beat.in .cstar.s2{transition-delay:1.2s}.beat.in .cstar.s3{transition-delay:1.9s}.beat.in .cstar.missing{transition-delay:2.7s}
.beat.in :is(.cworld,.cstar){opacity:1;transform:translate(-50%,-50%) scale(1)}
.ings{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.75rem}
.ings li{display:flex;gap:.65rem;opacity:0;transform:translateX(12px);transition:opacity .4s,transform .4s}
.ings li i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font:400 .95rem 'Lilita One';font-style:normal}
.ings li b{display:block;font:400 1.1rem/1.2 'Lilita One';color:#fff}
.ings li span{font:700 .86rem/1.4 Nunito;color:rgba(236,230,255,.82)}
.ings li.next i{background:transparent;border:2px dashed #ffd23f;color:#ffd23f}
.ings li.next b{color:#ffd23f}
.beat.in .ings li{opacity:1;transform:none}
.beat.in .ings li:nth-child(1){transition-delay:.7s}.beat.in .ings li:nth-child(2){transition-delay:1.4s}.beat.in .ings li:nth-child(3){transition-delay:2.1s}.beat.in .ings li:nth-child(4){transition-delay:2.9s}

.card h3.final{font-size:clamp(1.9rem,3vw,3rem)}
.v-compare{position:absolute;inset:0;overflow:auto;padding:1rem 1.2rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.v-compare label{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;font:800 1.05rem Nunito}
.v-compare input{width:7.5rem;padding:.35rem .6rem;border:2px solid #ffd23f;border-radius:8px;background:#fff;color:var(--ink);font:400 1.3rem 'Lilita One'}
.cmp-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.3rem .8rem;margin-top:.9rem}
.cmp-row .mbs{grid-column:1/-1}
.cmp-row .who{font:800 .95rem/1.15 Nunito}
.cmp-row .who small{display:block;font:600 .74rem Nunito;opacity:.7}
.cmp-row .mbs{display:flex;flex-wrap:wrap;gap:3px}
.mb{width:min(12px,1.9cqw);height:min(9px,1.45cqw);border-radius:1.5px;background:var(--c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.cmp-row b{font:400 1.35rem 'Lilita One';text-align:right;color:#ffd23f}
.cmp-pct{margin:1rem 0 0!important;font:800 .9rem Nunito!important;color:#ffcf6b!important}

/* ---------- the brick wall between topics: bricks fall, the page changes behind them, they fly off ---------- */
.brickwall{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:calc(100vh / var(--rows));visibility:hidden}
.brickwall.build,.brickwall.built,.brickwall.break{visibility:visible}
.brickwall .b{position:relative;margin:1px;border-radius:4px;background:var(--b0);transform:translate3d(0,-120vh,0);will-change:transform;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.12)}
.brickwall .b.k1{background:var(--b1)}.brickwall .b.k2{background:var(--b2)}.brickwall .b.k3{background:var(--b3)}
.brickwall .b::before{content:"";position:absolute;left:16%;right:16%;top:-8px;height:9px;border-radius:5px 5px 1px 1px;background:inherit;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.brickwall.build .b{animation:fall .36s cubic-bezier(.5,0,.75,0) forwards;animation-delay:var(--d)}
.brickwall.built .b{transform:none}
.brickwall.break .b{transform:none;animation:fly .45s cubic-bezier(.25,1,.5,1) forwards;animation-delay:var(--e)}
@keyframes fall{0%{transform:translate3d(0,-120vh,0)}85%{transform:translate3d(0,4px,0)}100%{transform:none}}
@keyframes fly{to{transform:translate3d(var(--fx),120vh,0) rotate(var(--fr))}}
.bw-title{position:fixed;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%) scale(.85);opacity:0;text-align:center;transition:opacity .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.bw-title.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bw-title small{display:block;font:800 .95rem Nunito;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.bw-title b{display:block;font:400 clamp(2.6rem,6vw,5rem)/1 'Lilita One';color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}

/* the mouse at the bottom */
.scroll-hint{position:fixed;left:calc(var(--gut) + var(--card-w) / 2);bottom:10px;z-index:31;transform:translate(-50%,10px);display:flex;align-items:center;gap:.6rem;padding:.4rem .9rem .4rem .6rem;border-radius:999px;
  background:rgba(24,16,8,.86);border:2px solid var(--rim);color:#f6ead2;font:800 .85rem Nunito;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s}
.scroll-hint.show{opacity:1;transform:translate(-50%,0)}
.scroll-hint .mouse{width:16px;height:24px}

/* ---------- the collector card (V1) and the shelf of cards ---------- */
.cc-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,6,2,.66);opacity:0;pointer-events:none;transition:opacity .4s}
.cc-wrap.show{opacity:1;pointer-events:auto}
.cc-in{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;max-width:100%}
.ccard{width:270px;padding:1rem 1.1rem 1.1rem;border-radius:16px;text-align:center;background:linear-gradient(#fff8e6,#f3e0bb);border:6px solid var(--c,#b98a4f);
  box-shadow:0 0 0 3px #6b4423,0 20px 60px rgba(0,0,0,.6),0 0 60px rgba(255,210,80,.45)}
.cc-wrap.show .ccard{animation:ccIn .8s cubic-bezier(.3,1.4,.5,1) both}
.ccard.locked{filter:grayscale(1);opacity:.55}
@keyframes ccIn{from{transform:rotateY(90deg) scale(.6)}to{transform:none}}
.cc-no{margin:0;font:800 .75rem Nunito;letter-spacing:.14em;text-transform:uppercase;color:#8E4B22}
.cc-art{display:flex;align-items:center;justify-content:center;gap:4px;height:150px;margin:.5rem 0;border-radius:10px;background:#fff radial-gradient(circle,#efe6d4 2px,transparent 2.5px) 0 0/16px 16px;border:3px solid #6b4423}
.cc-art img{max-height:130px;max-width:90%;object-fit:contain}
.cc-art.multi img{max-width:30%}
.ccard h4{margin:.2rem 0;font:400 1.55rem/1.05 'Lilita One';color:var(--c,var(--red));-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}
.cc-meta{display:flex;justify-content:space-between;margin:.3rem .3rem;font:400 1.05rem 'Lilita One';color:#4a2c10}
.cc-fact{font:600 .9rem/1.4 Nunito;color:#2a2118;margin:.5rem 0 .8rem}
.cc-close{display:block;margin:1rem auto 0;flex-basis:100%;max-width:220px}

/* ---------- other windows ---------- */
@container (max-width:560px){
  .c-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .c-text{max-height:none;overflow:visible}
}
@media (max-width:1180px){
  .shelf small{display:none}
  .r-seg span{font-size:.7rem}
  .r-now{width:12.5rem}
}
@media (max-width:1100px) and (min-width:761px){
  :root{--card-w:min(66vw,760px)}
  .r-seg span{display:none}
  .r-track{height:24px}
  .r-segs{top:8px}.r-mark{top:2.5px}
}
@media (max-height:800px) and (min-width:761px){
  .sc-group em,.gx-tabs small,.gx-set small{display:none}
  .sc-group{padding:.4rem .55rem;margin-bottom:.4rem}
  .sc-group li{line-height:1.4}
  .gx-tabs button{padding:.4rem .65rem}
  .verdict-line{padding:.45rem .7rem}
}
@media (max-height:660px) and (min-width:761px){
  .gx-set{min-height:0;margin-top:.3rem}.gx-set img{width:48px;height:40px}
  .verdict-line .yp{display:none}
  .sc-group>span{display:none}
  .estimate{padding:.5rem .8rem}.estimate b{font-size:1.9rem}
  .card .src{font-size:.7rem}
}
@media (max-height:760px) and (min-width:761px){
  .card h3{font-size:clamp(1.6rem,2.3vw,2.3rem)}
  .card p{font-size:.92rem;line-height:1.4}
  .stat b{font-size:2.3rem}
}
@media (max-width:1100px) and (orientation:portrait) and (min-width:761px){
  /* the card leaves a strip at the bottom for the subtitle bubble */
  :root{--card-w:calc(100vw - 2 * var(--gut));--card-h:calc(100svh - var(--below-ruler) - 118px)}
  #dolls{display:none}
  .bubble{left:var(--gut)!important;right:var(--gut);top:auto!important;bottom:22px;width:auto;max-width:none;transform:translateY(16px)}
  .bubble.show{transform:none}
  .b-tail{display:none}
  .c-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .c-text{max-height:none;overflow:visible}
  .ch-title{max-width:calc(100vw - 2 * var(--gut))}
  .scroll-hint{display:none}
}
@media (max-width:760px){
  :root{--below-ruler:104px;--card-w:calc(100vw - 24px);--card-h:auto}
  .ruler{top:8px;width:calc(100vw - 16px);padding:7px 9px;gap:8px;flex-wrap:wrap}
  .r-now{width:auto;flex:1 1 auto}
  .r-track{order:3;flex:1 1 100%;height:20px}
  .r-seg span{display:none}
  .r-segs{top:7px}.r-mark{top:1.5px}
  .ruler{left:8px;transform:none;width:calc(100vw - 66px)}
  body.on-cover .ruler{transform:translateY(-30px)}
  .sound{top:12px;right:8px;width:46px;height:46px;padding:0;justify-content:center}
  .sound .lbl{display:none}
  .beat{height:auto;min-height:100svh;padding:calc(var(--below-ruler) + 8px) 12px 96px;overflow:visible;content-visibility:visible}
  .beat.cover{padding:0 16px 34vh;align-items:center}
  .cover-in{max-width:100%}
  .cover-dolls{right:50%;transform:translateX(50%)}
  .cover-doll{height:32vh}
  .card{height:auto}
  .c-body{grid-template-columns:1fr}
  .c-vis{height:56vh}
  .c-text{overflow:visible;max-height:none}
  .c-head{padding-right:4.2rem}
  .ch-title{max-width:100%;padding-left:84px}
  #dolls{display:none}
  .bubble{left:12px!important;right:12px;top:auto!important;bottom:62px;width:auto;max-width:none;transform:translateY(16px)}
  .bubble.show{transform:none}
  .b-tail{display:none}
  .v-diff img{height:70cqh}
  .beat.near.finale .c-vis{height:auto;container-type:normal}
  .v-compare{position:static}
  .scroll-hint{display:none}
}