@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,400;100,500;100,600;100,700;100,800;100,900&display=swap");
/* ===== Yellow Project website, "solar" look (EPK colours). Everything is scoped under .ypx ===== */
.ypx{--y:#FEDC2F;--ink:#141414;--cream:#FFF3B3;--orange:#FFA41C;--soft:rgba(20,20,20,.72);--line:rgba(20,20,20,.14);
  display:flex;flex-direction:column;min-height:100vh;overflow:hidden;
  background:var(--y) url("/yp-assets/yp-paper.jpg") repeat;background-size:160px;color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55}
html body:has(.ypx),body:has(.ypx) #page-container,body:has(.ypx) #et-main-area,body:has(.ypx) #main-content,body:has(.ypx) .et_pb_section,body:has(.ypx) .et_builder_inner_content{background:#FEDC2F!important}
.ypx *,.ypx *::before,.ypx *::after{box-sizing:border-box}
.ypx a{color:inherit}
.ypx img{max-width:100%;height:auto;display:block}
.ypx p{margin:0}
.ypx h1,.ypx h2,.ypx h3{font-family:inherit;font-weight:900;line-height:.95;letter-spacing:-.02em;margin:0;color:inherit;overflow-wrap:break-word}
.ypx .wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 40px}
.ypx .kick{display:block;font-weight:800;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase}
.ypx .ul{font-weight:700;text-decoration:underline;text-underline-offset:4px}
/* buttons */
.ypx .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 26px;font-weight:800;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:2px solid var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.ypx .btn svg{width:18px;height:18px;flex:none}
.ypx .btn-y{background:var(--ink);color:var(--y)}
.ypx .btn-y:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,20,20,.25);color:var(--y)}
.ypx .btn-o{background:var(--y);color:var(--ink)}
.ypx .btn-o:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,20,20,.18);color:var(--ink)}
/* header */
.ypx .nav{position:sticky;top:0;z-index:20;background:rgba(254,220,47,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ypx .nav > .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:18px}
.ypx .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.ypx .brand img{width:36px;height:46px;object-fit:contain}
.ypx .brand span{font-weight:800;font-size:.8rem;letter-spacing:.32em;line-height:1.15;text-transform:uppercase}
.ypx .navr{display:flex;align-items:center;gap:30px}
.ypx .menu{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.ypx .menu a{font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.ypx .menu a:hover,.ypx .menu a.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.ypx .lang{font-weight:800;font-size:.72rem;letter-spacing:.14em;text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:6px 11px}
.ypx .dd{position:relative}
.ypx .dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.ypx .dd .sub{position:absolute;top:100%;left:-14px;min-width:220px;list-style:none;margin:0;padding:8px;background:var(--cream);border:2px solid var(--ink);border-radius:16px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s}
.ypx .dd:hover .sub,.ypx .dd:focus-within .sub{opacity:1;visibility:visible;transform:none}
.ypx .dd .sub a{display:block;padding:10px 12px;border-radius:10px}
.ypx .dd .sub a:hover{background:rgba(20,20,20,.07);text-decoration:none}
/* hero */
.ypx .hero2{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:60px;align-items:center;padding-top:30px;padding-bottom:70px}
.ypx .hero2 .txt{display:flex;flex-direction:column;gap:24px}
.ypx .hero2 h1{font-size:clamp(3.4rem,10.5vw,8.6rem);line-height:.88;letter-spacing:-.03em}
.ypx .hero2 .tag{font-weight:600;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.35;max-width:560px}
.ypx .cta3{display:flex;flex-wrap:wrap;gap:12px}
.ypx .quick{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.95rem}
.ypx .portrait-box{position:relative}
.ypx .portrait-box img{width:100%;aspect-ratio:400/540;object-fit:cover;object-position:50% 18%;border-radius:28px;border:2px solid var(--ink)}
.ypx .sticker{position:absolute;left:-44px;bottom:34px;background:var(--ink);color:var(--y);border-radius:999px;padding:12px 20px;font-weight:800;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
/* latest release (black accent) */
.ypx .rel-home{background:var(--ink);color:#fff;border-radius:32px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:48px;padding:44px;align-items:center}
.ypx .rel-home .cover{width:320px;aspect-ratio:1;border-radius:14px;object-fit:cover}
.ypx .rel-home .kick{color:var(--y)}
.ypx .rel-home h2{color:var(--y);font-size:clamp(2.2rem,5.6vw,4.6rem);margin:12px 0 10px}
.ypx .rel-home .date{color:rgba(255,255,255,.72);font-weight:600;margin-bottom:6px}
.ypx .listen-l{font-weight:800;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:10px 0 10px}
.ypx .plats{display:flex;flex-wrap:wrap;gap:10px}
.ypx .sbtn{display:inline-flex;align-items:center;gap:10px;border-radius:14px;padding:12px 18px;font-weight:800;font-size:.95rem;text-decoration:none;color:var(--ink);background:var(--y);border:2px solid var(--y)}
.ypx .sbtn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.ypx .sbtn svg{width:20px;height:20px;flex:none}
.ypx .sbtn.all{background:transparent;color:var(--y);border-style:dashed}
.ypx .sbtn.all:hover{background:rgba(254,220,47,.1);color:var(--y)}
.ypx .extl{margin:12px 0 0;font-size:.85rem;color:rgba(255,255,255,.72)}
.ypx .extl span{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--y)}
.ypx .extl a{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:#fff}
/* the game + SoundVault */
.ypx .duo{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;padding-top:28px}
.ypx .live{font-weight:700;font-size:.9rem}
.ypx .live b{font-weight:900}
.ypx .artists{font-size:.88rem}
/* about teaser */
.ypx .abt{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:60px;align-items:center;padding-top:80px;padding-bottom:80px}
.ypx .abt .txt{display:flex;flex-direction:column;gap:22px}
.ypx .abt h2{font-size:clamp(2.2rem,5vw,4.1rem);line-height:.98}
.ypx .abt p{font-weight:500;font-size:1.15rem;line-height:1.55;color:var(--soft);max-width:620px}
.ypx .more{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:4px}
.ypx .more svg{width:18px;height:18px}
.ypx .fan{position:relative;height:340px}
.ypx .fan img{position:absolute;width:230px;height:230px;border-radius:14px;border:2px solid var(--ink);object-fit:cover}
.ypx .fan .f1{left:0;top:40px;transform:rotate(-8deg)}
.ypx .fan .f2{left:230px;top:50px;transform:rotate(7deg)}
.ypx .fan .f3{left:115px;top:0;width:240px;height:240px}
/* footer (black accent) */
.ypx .foot{margin-top:auto;background:var(--ink);color:var(--y)}
.ypx .foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:34px;padding-bottom:36px}
.ypx .foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.88rem}
.ypx .foot nav a{text-decoration:none;color:var(--y)}
.ypx .foot nav a:hover{text-decoration:underline}
.ypx .foot .legal{font-size:.82rem;color:rgba(254,220,47,.8);text-align:right}
.ypx .foot .legal a{text-decoration:none;color:var(--y)}
/* Music page */
.ypx .phero{padding-top:50px;padding-bottom:26px}
.ypx .phero h1{font-size:clamp(2.8rem,8vw,5.6rem)}
.ypx .phero p{font-weight:600;font-size:1.15rem;margin-top:14px;max-width:640px}
.ypx .disco{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding-top:10px;padding-bottom:50px}
.ypx .rel{background:var(--cream);border:2px solid var(--ink);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.ypx .rel img{width:100%;aspect-ratio:1;object-fit:cover}
.ypx .rel .rb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ypx .rel h3{font-size:1.12rem;font-weight:800;letter-spacing:0;line-height:1.2}
.ypx .rel .meta{color:var(--soft);font-size:.85rem;font-weight:600}
.ypx .rel .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;padding-top:6px}
.ypx .rel .links a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem;text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:6px 11px}
.ypx .rel .links a:hover{background:var(--ink);color:var(--y)}
.ypx .rel .links svg{width:15px;height:15px}
.ypx .rel .extl{color:var(--soft);margin-top:8px}
.ypx .rel .extl span{color:var(--ink)}
.ypx .rel .extl a{color:var(--ink)}
.ypx .loading{color:var(--soft);padding:30px 0;font-weight:600}
/* About page */
.ypx .story{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;padding-top:10px;padding-bottom:40px}
.ypx .story .intro{font-size:1.3rem;line-height:1.5;font-weight:600}
.ypx .story .intro b{font-weight:900}
.ypx .portrait{width:100%;border-radius:24px;border:2px solid var(--ink);object-fit:cover;object-position:50% 18%;aspect-ratio:1/2;max-height:620px}
.ypx .blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.ypx .block{background:var(--cream);border:2px solid var(--ink);border-radius:20px;padding:22px}
.ypx .block h3{font-size:1.15rem;font-weight:800;letter-spacing:0;line-height:1.25;margin-bottom:8px}
.ypx .block p{color:var(--soft)}
.ypx .quote{margin:34px 0 10px;font-size:clamp(1.35rem,3vw,2rem);font-weight:900;line-height:1.2;background:var(--ink);color:var(--y);border-radius:20px;padding:24px 26px}
.ypx .contact{margin-top:22px;color:var(--soft);font-weight:600}
.ypx .contact a{color:var(--ink);font-weight:800}
/* phone menu */
.ypx .burger{display:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;background:transparent;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.ypx .burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.ypx .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ypx .nav.open .burger span:nth-child(2){opacity:0}
.ypx .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ypx .mpanel{display:none;border-top:2px solid var(--ink);background:var(--y)}
.ypx .mpanel ul{list-style:none;margin:0 auto;padding:6px 22px 16px;max-width:1240px}
.ypx .mpanel a{display:block;padding:15px 2px;border-bottom:1px solid var(--line);font-weight:800;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
/* Download chooser */
.ypx .dlwrap{position:relative;display:inline-flex}
.ypx .dlwrap > .btn{width:100%}
.ypx .dlpop{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:230px;display:flex;flex-direction:column;padding:8px;background:var(--cream);border:2px solid var(--ink);border-radius:16px}
.ypx .dlpop[hidden]{display:none}
.ypx .dlpop a{padding:11px 12px;border-radius:10px;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.ypx .dlpop a:hover{background:rgba(20,20,20,.07)}
/* Spotify player over the covers: edge to edge */
.ypx .coverbox{position:relative;overflow:hidden}
.ypx .coverbox.has-sp{cursor:pointer}
.ypx .cov-home{width:320px;border-radius:14px}
.ypx .spwrap{position:absolute;left:0;right:0;bottom:0;height:152px;overflow:hidden;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;background:#121212}
.ypx .spwrap iframe{display:block;border:0;width:100%;height:152px;transform-origin:0 0}
.ypx .coverbox.sp-open .spwrap{opacity:1;transform:none;pointer-events:auto}
/* responsive */
@media (max-width:1100px){.ypx .abt{grid-template-columns:1fr}.ypx .fan{max-width:460px;width:100%}}
@media (max-width:980px){
  .ypx .menu{display:none}
  .ypx .burger{display:flex}
  .ypx .nav.open .mpanel{display:block}
  .ypx .navr{gap:10px}
  .ypx .hero2{grid-template-columns:minmax(0,1fr) 300px;gap:30px}
  .ypx .duo{grid-template-columns:1fr}
  .ypx .story{grid-template-columns:1fr}
  .ypx .portrait{aspect-ratio:4/5;max-height:520px}
}
@media (max-width:720px){
  .ypx{font-size:16px}
  .ypx .wrap{padding:0 20px}
  .ypx .nav > .wrap{height:64px}
  .ypx .brand img{width:30px;height:38px}
  .ypx .hero2{grid-template-columns:1fr;gap:18px;padding-top:12px;padding-bottom:36px}
  .ypx .hero2 .txt{display:contents}
  .ypx .hero2 .kick{order:1}
  .ypx .hero2 h1{order:2;font-size:clamp(3rem,17vw,4.6rem)}
  .ypx .portrait-box{order:3}
  .ypx .portrait-box img{aspect-ratio:7/6;border-radius:24px}
  .ypx .sticker{left:12px;bottom:12px;font-size:.66rem;padding:9px 14px}
  .ypx .hero2 .tag{order:4}
  .ypx .cta3{order:5;flex-direction:column}
  .ypx .quick{order:6}
  .ypx .btn{white-space:normal;text-align:center;line-height:1.25;width:100%}
  .ypx .rel-home{grid-template-columns:1fr;gap:16px;padding:22px;border-radius:26px}
  .ypx .rel-home .cover,.ypx .cov-home{width:100%}
  .ypx .plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ypx .sbtn{justify-content:center}
  .ypx .abt{padding-top:50px;padding-bottom:50px}
  .ypx .fan{height:230px}
  .ypx .fan img{width:150px;height:150px}
  .ypx .fan .f2{left:calc(100% - 158px)}
  .ypx .fan .f3{left:calc(50% - 82px);width:164px;height:164px}
  .ypx .blocks{grid-template-columns:1fr}
  .ypx .foot .wrap{flex-direction:column;align-items:flex-start}
  .ypx .foot .legal{text-align:left}
}
@media (prefers-reduced-motion:reduce){.ypx .btn{transition:none}}

/* v4: SoundVault content, stacked actions */
.ypx .mpanel .mgroup{padding:15px 2px 4px;font-weight:900;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase}
.ypx .mpanel .msub a{padding-left:18px;font-size:.85rem;font-weight:700}

/* v5: compact Spotify player, round service icons + legend, SoundVault picture */
.ypx .spwrap{left:0;right:0;bottom:0;height:80px;background:transparent;display:flex;justify-content:center}
.ypx .spwrap iframe{width:100%!important;height:80px!important;transform:none!important;border-radius:0}
.ypx .picons{display:flex;flex-wrap:wrap;gap:8px}
.ypx .pi{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--y);display:flex;align-items:center;justify-content:center;flex:none;text-decoration:none;border:0!important;padding:0!important}
.ypx .pi svg{width:20px;height:20px}
.ypx .rel .links a.pi:hover{background:#000;color:#fff}
.ypx .legend{display:flex;flex-wrap:wrap;gap:12px 22px;padding:0 0 50px;font-weight:700;font-size:.88rem}
.ypx .legend .lg{display:inline-flex;align-items:center;gap:8px}
.ypx .legend .pi{width:28px;height:28px}
.ypx .legend .pi svg{width:16px;height:16px}
.ypx .disco{padding-bottom:24px}
@media (min-width:721px){.ypx #ypxDay{white-space:nowrap}}
@media (max-width:720px){
}

/* v6: brand wordmark, SoundVault safe like Little Yellow, bigger icons, tidy legend */
.ypx .brand .wmark{width:auto;height:32px}
.ypx .foot .brand .wmark{height:30px}
.ypx .wm-h1{margin:0;line-height:0}
.ypx .wm-h1 img{width:min(620px,100%);height:auto}
.ypx .pi svg{width:26px;height:26px}
.ypx .legend .pi svg{width:20px;height:20px}
.ypx .dlpop .dlhead{padding:8px 12px 2px;font-weight:900;font-size:1rem}
.ypx .dlpop .dlsub{padding:0 12px 6px;font-size:.78rem;font-weight:600;color:var(--soft);border-bottom:1px solid var(--line);margin-bottom:4px}
@media (max-width:720px){
  .ypx .brand .wmark{height:26px}
  .ypx .wm-h1 img{width:100%}
  .ypx .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .ypx .legend .lg{align-items:center}
}
.ypx .rel .links .pi svg{width:26px;height:26px}
.ypx .sbtn.txt{justify-content:center}

/* daily challenge label: on a narrow screen, break cleanly after "Daily challenge" rather than mid-date */
@media (max-width:720px){
  .ypx #ypxDay{display:block}
  .ypx #ypxDay .dk-sep{display:none}
  .ypx #ypxDay .dk-a,.ypx #ypxDay .dk-b{display:block}
}

/* ===== The Yellow Drop + SoundVault cards: one clean layout (computer and phone) ===== */
.ypx .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-top:28px}
.ypx .panel{border-radius:32px;border:2px solid var(--ink);padding:40px;min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr) 160px;column-gap:24px;row-gap:14px;align-content:start}
.ypx .panel .col{display:contents}
.ypx .panel h2{font-size:clamp(2.2rem,3.6vw,3.2rem);overflow-wrap:normal;word-break:keep-all;margin:0}
.ypx .panel p{margin:0;font-weight:600;font-size:1.02rem;line-height:1.45}
.ypx .panel .btn{justify-self:start;white-space:nowrap}
.ypx .panel.game{background:var(--cream);grid-template-areas:"k k" "t i" "x i" "b i" "l l" "a a"}
.ypx .panel.vault{background:var(--orange);grid-template-areas:"k k" "t i" "x i" "f i" "a a"}
.ypx .panel .kick{grid-area:k}
.ypx .panel h2{grid-area:t}
.ypx .panel.game .col > p:not(.live),.ypx .panel.vault .col > p{grid-area:x}
.ypx .panel.game .col > .btn{grid-area:b}
.ypx .panel .live{grid-area:l}
.ypx .panel .artists{grid-area:a;justify-self:start;font-size:.88rem}
.ypx .panel .feats{grid-area:f}
.ypx .panel .acts{grid-area:a;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:4px}
.ypx .panel .acts .ul{font-size:.95rem}
/* the pictures: no frame, same size, on the right */
.ypx .panel .duck,.ypx .panel .vimg{grid-area:i;border:0;border-radius:0;background:none;object-fit:contain;height:auto;max-width:100%}
.ypx .panel .duck{width:150px;align-self:center;justify-self:center}
.ypx .panel .vimg{width:160px;align-self:end;justify-self:center}   /* the safe stands on the level of the last feature */
/* SoundVault features */
.ypx .feats{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ypx .feats li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1rem}
.ypx .feats svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--ink);color:var(--orange);flex:none}
@media (max-width:980px){.ypx .duo{grid-template-columns:1fr}}
@media (max-width:720px){
  .ypx .panel{padding:24px;border-radius:26px;grid-template-columns:minmax(0,1fr) 88px;column-gap:14px}
  .ypx .panel.game{grid-template-areas:"k k" "t i" "x x" "b b" "l l" "a a"}
  .ypx .panel.vault{grid-template-areas:"k k" "t i" "x x" "f f" "a a"}
  .ypx .panel h2{font-size:clamp(2rem,9vw,2.6rem)}
  .ypx .panel .duck{width:84px}
  .ypx .panel .vimg{width:88px;align-self:center}
  .ypx .panel .btn{justify-self:stretch;white-space:normal;width:100%}
  .ypx .panel .acts{align-items:stretch;text-align:center}
}

@media (max-width:720px){.ypx .panel .btn{white-space:nowrap;font-size:.8rem;letter-spacing:.03em;padding:14px 12px}}

/* Spotify's compact player needs about 300 px: keep every cover at least that wide on a computer */
.ypx .disco{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
@media (max-width:720px){.ypx .disco{grid-template-columns:1fr}}
.ypx .sphint{display:none!important}

/* v10: The Yellow Games (home), the Games page, the contact form */
.ypx .duo{grid-template-columns:1fr}
.ypx .panel.games{display:flex;flex-direction:column;gap:12px;background:var(--cream)}
.ypx .panel.games .kick{white-space:normal}
.ypx .panel.games h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.ypx .panel.games .gsub{font-weight:600;max-width:640px}
.ypx .gms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ypx .gm{border-radius:22px;background:var(--y);border:2px solid var(--ink);padding:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ypx .gmh{display:flex;align-items:center;gap:12px}
.ypx .gmh img{width:44px;height:54px;object-fit:contain}
.ypx .gmh h3{font-size:1.35rem;font-weight:900;letter-spacing:-.01em}
.ypx .loopico{width:44px;height:44px;border-radius:14px;background:var(--ink);color:var(--y);display:flex;align-items:center;justify-content:center;flex:none}
.ypx .loopico svg{width:24px;height:24px}
.ypx .loopico.big{width:64px;height:64px;border-radius:18px}.ypx .loopico.big svg{width:34px;height:34px}
.ypx .gm p{font-weight:600}
.ypx .live{font-weight:700;font-size:.9rem}
.ypx .panel.vault{grid-column:1/-1}
.ypx .gpage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding-bottom:60px}
.ypx .gcard{border-radius:28px;background:var(--cream);border:2px solid var(--ink);padding:28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ypx .gch{display:flex;align-items:center;gap:14px}
.ypx .gch img{width:64px;height:78px;object-fit:contain}
.ypx .gcard h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.ypx .gcard p{font-weight:600;line-height:1.5}
.ypx .gfeat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-weight:700}
.ypx .gfeat li::before{content:"★";margin-right:8px}
.ypx .cform{margin-top:28px;border-radius:22px;background:var(--cream);border:2px solid var(--ink);padding:22px;display:flex;flex-direction:column;gap:10px}
.ypx .cform h2{font-size:1.5rem;font-weight:900}
.ypx .cform p{font-weight:600}
.ypx .cform form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.ypx .cform label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.9rem}
.ypx .cform input,.ypx .cform textarea{font:inherit;font-size:16px;font-weight:600;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);width:100%}
.ypx .cform button{align-self:flex-start}
.ypx .cstatus{font-weight:800;min-height:1.2em}
.ypx .cstatus.ok{color:#2B8A3E}.ypx .cstatus.bad{color:#B42318}
@media (max-width:820px){.ypx .gms,.ypx .gpage{grid-template-columns:1fr}}
@media (max-width:720px){.ypx .gm .btn,.ypx .gcard .btn{width:100%}.ypx .gcard{padding:20px}.ypx .cform button{align-self:stretch}}

/* v11: icons of the same size, aligned cards, Little Yellow on the block */
.ypx .gtop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ypx .gduck{width:74px;height:92px;object-fit:contain;flex:none}
.ypx .gico{width:48px;height:48px;border-radius:15px;background:var(--ink);color:var(--y);display:flex;align-items:center;justify-content:center;flex:none}
.ypx .gico svg{width:28px;height:28px}
.ypx .gico.big{width:64px;height:64px;border-radius:18px}.ypx .gico.big svg{width:36px;height:36px}
/* both cards share the same rows: title, text, button, no. 1 */
.ypx .gms{align-items:stretch}
.ypx .gm{display:grid!important;grid-template-rows:auto 1fr auto auto;align-items:start;justify-items:start}
.ypx .gm p:not(.live){min-height:3em}
.ypx .gpage{align-items:stretch}
.ypx .gcard{display:grid!important;grid-template-rows:auto auto 1fr auto auto auto;justify-items:start}
.ypx .gphero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.ypx .gphero img{width:110px;height:136px;object-fit:contain;flex:none}
@media (max-width:720px){.ypx .gphero img{width:72px;height:90px}.ypx .gm p:not(.live){min-height:0}}

/* v12: three games */
.ypx .gms{grid-template-columns:repeat(3,minmax(0,1fr))}
.ypx .gpage{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.ypx .gpage{grid-template-columns:1fr}}
@media (max-width:900px){.ypx .gms{grid-template-columns:1fr}}
/* v12b: each card is a column; the same heights line up the text, the button and the no. 1 */
.ypx .gm{display:flex!important;flex-direction:column;align-items:flex-start;gap:10px;grid-template-rows:none}
.ypx .gm .gmh{min-height:48px}
.ypx .gm p:not(.live){min-height:3.2em;margin:0}
.ypx .gm .btn{margin-top:auto}
.ypx .gm .live{min-height:2.6em;margin:0}
.ypx .gcard{display:flex!important;flex-direction:column;align-items:flex-start;grid-template-rows:none}
.ypx .gcard .btn{margin-top:auto}
@media (max-width:900px){.ypx .gm p:not(.live),.ypx .gm .live{min-height:0}}
.ypx .gm .btn,.ypx .gcard .btn{max-width:100%;white-space:normal;text-align:left;line-height:1.25}

/* v13: the games block and the games page, aligned row by row from one card to the next */
.ypx .gtop .gtl{flex:1;min-width:0}
.ypx .panel.games .gsub{max-width:none;margin:6px 0 0}
.ypx .gms{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.ypx .gpage{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.ypx .gcard h2{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.08;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ypx .gcard .gk{margin-top:4px}
.ypx .gcard .live{margin:0}
@supports (grid-template-rows: subgrid){
  @media (min-width:901px){
    .ypx .gms{grid-template-rows:repeat(4,auto);row-gap:0}
    .ypx .gm{display:grid!important;grid-template-rows:subgrid;grid-row:span 4;row-gap:10px;align-items:start}
    .ypx .gm p:not(.live),.ypx .gm .live{min-height:0}
    .ypx .gm .btn{margin-top:0;align-self:end}
  }
  @media (min-width:1001px){
    .ypx .gpage{grid-template-rows:repeat(7,auto);row-gap:0}
    .ypx .gcard{display:grid!important;grid-template-rows:subgrid;grid-row:span 7;row-gap:14px;align-items:start}
    .ypx .gcard .btn{margin-top:0}
  }
}
@media (max-width:900px){.ypx .gms{grid-auto-flow:row;grid-auto-columns:auto}}
@media (max-width:1000px){.ypx .gpage{grid-auto-flow:row;grid-auto-columns:auto}}
.ypx .gm .live,.ypx .gcard .live{grid-area:auto}
@media (min-width:901px){.ypx .gm .btn{align-self:stretch!important;justify-content:center;min-height:54px;margin-top:0}}

/* v14: four games, a 2 × 2 grid (home and games page), aligned row by row */
.ypx .gms,.ypx .gpage{grid-auto-flow:row!important;grid-auto-columns:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important}
@supports (grid-template-rows: subgrid){
  @media (min-width:901px){ .ypx .gms{grid-auto-rows:auto;row-gap:16px} .ypx .gm{grid-row:span 4} }
  @media (min-width:1001px){ .ypx .gpage{grid-auto-rows:auto;row-gap:22px} .ypx .gcard{grid-row:span 7} }
}
@media (max-width:900px){.ypx .gms{grid-template-columns:1fr!important}}
@media (max-width:760px){.ypx .gpage{grid-template-columns:1fr!important}}

/* v15: SoundVault first, on one dense row */
.ypx .panel.vault{display:grid!important;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr) auto!important;grid-template-areas:"i t f a"!important;align-items:center;gap:20px 26px;padding:22px 26px!important}
.ypx .panel.vault .vimg{grid-area:i;width:96px!important;height:auto!important;margin:0!important;align-self:center}
.ypx .panel.vault .vtx{grid-area:t;display:flex;flex-direction:column;gap:4px;min-width:0}
.ypx .panel.vault .vtx h2{font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;margin:0}
.ypx .panel.vault .vtx p{margin:0;font-weight:600;font-size:.92rem}
.ypx .panel.vault .feats{grid-area:f;margin:0!important;gap:8px!important}
.ypx .panel.vault .feats li{font-size:.9rem}
.ypx .panel.vault .acts{grid-area:a;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0!important}
@media (max-width:1000px){.ypx .panel.vault{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"i t" "f f" "a a"!important}.ypx .panel.vault .feats{display:flex!important;flex-wrap:wrap;gap:8px 16px!important}.ypx .panel.vault .acts{flex-direction:row;flex-wrap:wrap;align-items:center}}
@media (max-width:560px){.ypx .panel.vault .vimg{width:70px!important}.ypx .panel.vault .acts .btn{width:100%}}
/* v15: compact game cards: icon, title and its sentence; then the button and the no. 1 */
.ypx .gm{display:flex!important;flex-direction:column!important;gap:12px!important;padding:14px 16px!important;grid-row:auto!important}
.ypx .gm .gmh{display:flex;align-items:flex-start;gap:12px;min-height:0!important}
.ypx .gm .gmt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ypx .gm .gmt h3{margin:0;line-height:1.15}
.ypx .gm .gmt p{margin:0!important;min-height:0!important;font-size:.86rem;font-weight:600;line-height:1.35}
.ypx .gm .gmf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto}
.ypx .gm .gmf .btn{margin:0!important;min-height:0!important;align-self:auto!important}
.ypx .gm .gmf .live{margin:0;min-height:0!important;font-weight:800;font-size:.95rem}
.ypx .gms{grid-auto-rows:auto!important;row-gap:14px!important;column-gap:14px!important}
@media (max-width:560px){.ypx .gm .gmf .btn{flex:1 1 100%;justify-content:center}}
@media (min-width:561px){.ypx .gm .gmf .live{margin-left:auto!important;text-align:right}}
/* v20: the game icons, transparent: the drawing only, in the colour of the text */
.ypx .gico,.ypx .gico.big{background:transparent!important;color:var(--ink)!important;border-radius:0!important;box-shadow:none!important}
.ypx .gico{width:40px!important;height:40px!important}
.ypx .gico svg{width:32px!important;height:32px!important}
.ypx .gico.big{width:56px!important;height:56px!important}
.ypx .gico.big svg{width:46px!important;height:46px!important}

/* v21: theme and lyrics of a song, beside its card on the Music page */
.ypx .rel .rhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ypx .rel .rhead h3{margin:0}
.ypx .infobtn{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.ypx .infobtn svg{width:20px;height:20px}
.ypx .infobtn:hover,.ypx .rel.open .infobtn{background:var(--ink);color:var(--bg,#FEDC2F)}
.ypx .rel.open{grid-column:span 2;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:22px;align-items:start}
.ypx .rel.open > .coverbox{grid-column:1}
.ypx .rel.open > .rb{grid-column:1}
.ypx .rel .rinfo{grid-column:2;grid-row:1 / span 3;max-height:560px;overflow:auto;padding:4px 6px 4px 0}
.ypx .rinfo .rik{display:block;font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:6px 0 6px;opacity:.7}
.ypx .rinfo .rit{margin:0 0 14px;font-weight:600;line-height:1.5}
.ypx .rinfo .rly{white-space:pre-line;line-height:1.6;font-size:.95rem}
@media (max-width:760px){.ypx .rel.open{grid-column:auto;grid-template-columns:1fr}.ypx .rel .rinfo{grid-column:1;grid-row:auto;max-height:none;margin-top:12px;border-top:2px solid var(--ink);padding:10px 14px 14px}}

/* v22: theme and lyrics clearly apart; closing really closes */
.ypx .rel .rinfo[hidden]{display:none!important}
.ypx .rinfo .rtheme{background:rgba(34,24,74,.08);border-radius:14px;padding:12px 14px;margin:2px 0 16px}
.ypx .rinfo .rtheme .rik{margin-top:0}
.ypx .rinfo .rtheme .rit{margin:0;font-weight:700;line-height:1.5}
.ypx .rinfo .rlyrics .rik{margin-bottom:8px}
.ypx .rinfo .rly{border-left:4px solid var(--ink);padding:2px 0 2px 14px;font-style:italic;line-height:1.75}
.ypx .rinfo .rik{opacity:1;font-size:.74rem}

/* v23: the home page shows one featured game and a link to all the games */
.ypx .gfeat1{display:flex;gap:18px;align-items:center;background:var(--y,#FEDC2F);border:2px solid var(--ink);border-radius:20px;padding:16px;margin-top:14px}
.ypx .gfeat1 .gfcov{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:none;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.ypx .gfeat1 .gftx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.ypx .gfeat1 h3{margin:0;line-height:1.1}
.ypx .gfeat1 p{margin:0;font-weight:600;font-size:.92rem}
.ypx .gfeat1 .gmf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.ypx .gfeat1 .gmf .btn{margin:0}
.ypx .gfeat1 .live{margin:0;font-weight:800}
.ypx .gall{margin-top:14px;display:inline-flex}
@media (max-width:560px){.ypx .gfeat1{flex-direction:column;align-items:flex-start}.ypx .gfeat1 .gmf .btn{width:100%;justify-content:center}}

/* v24: home · the featured game: cover at the top left; to its right the kick, the title, the sentence; the button on the right (computer) or below (phone); the no. 1 centred */
.ypx .panel.games .gsub{max-width:none!important;width:100%;margin:6px 0 0}
.ypx .gfeat1{display:grid!important;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"cov tx btn" "live live live";column-gap:18px;row-gap:12px;align-items:center}
.ypx .gfeat1 .gfcov{grid-area:cov;align-self:start}
.ypx .gfeat1 .gftx{grid-area:tx}
.ypx .gfeat1 .gfbtn{grid-area:btn;margin:0!important;justify-self:end}
.ypx .gfeat1 .gflive{grid-area:live;text-align:center;margin:0;font-weight:800}
@media (max-width:560px){
  .ypx .gfeat1{grid-template-columns:84px minmax(0,1fr);grid-template-areas:"cov tx" "btn btn" "live live"}
  .ypx .gfeat1 .gfcov{width:84px;height:84px}
  .ypx .gfeat1 .gfbtn{justify-self:stretch;justify-content:center;width:100%}
}
/* v24: games page · two families: the Yellow Project games, and the games made for a song */
.ypx .gfam{margin-top:34px}
.ypx .gfam .famh{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.ypx .gfam .famh h2{margin:0;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05}
.ypx .gfam .famh p{margin:0;font-weight:600;max-width:760px}
.ypx .famchip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px;background:var(--ink);color:var(--y,#FEDC2F)}
.ypx .famchip::before{content:"";width:12px;height:12px;border-radius:3px;background:currentColor;display:inline-block}
.ypx .famchip.single{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.ypx .famchip.single::before{border-radius:50%;background:radial-gradient(circle,var(--y,#FEDC2F) 0 28%,var(--ink) 30%)}
@media (min-width:1001px){.ypx .gpage{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:1000px){.ypx .gpage{grid-template-columns:1fr!important}}
.ypx .gcard .lives{display:flex;flex-direction:column;gap:4px}
.ypx .gcard .lives .live{margin:0;display:flex;gap:8px;align-items:baseline}
.ypx .gcard .lives .live span{display:inline-block;min-width:68px;font-weight:700;font-size:.8rem;opacity:.75}
.ypx .gsingles{display:flex;flex-direction:column;gap:18px}
.ypx .gsingle{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;background:var(--panel,#FFF6CF);border:2px solid var(--ink);border-radius:24px;padding:20px}
.ypx .gsingle .gscov{width:220px;height:220px;border-radius:16px;object-fit:cover;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.ypx .gsingle .gsbody{display:flex;flex-direction:column;gap:10px;min-width:0}
.ypx .gsingle h2{margin:0;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.05}
.ypx .gsingle p{margin:0}
.ypx .gsingle .gfeat{margin:0}
.ypx .gsingle .gmf{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ypx .gsingle .gmf .btn{margin:0}
.ypx .gsingle .gmf .gk{margin:0}
.ypx .gsingle .gmf .live{margin:0;font-weight:800}
@media (max-width:700px){.ypx .gsingle{grid-template-columns:1fr}.ypx .gsingle .gscov{width:100%;height:auto;aspect-ratio:1}}

/* v25: room under the phoenix quote; room under the song games at the bottom of the games page */
.ypx .quote{padding:24px 26px 30px!important;line-height:1.25}
.ypx .gfam.singles{margin-bottom:64px}

/* v26: the anecdote, after the lyrics: a story told, on a light card with a dashed edge */
.ypx .rinfo .rlyrics{margin-bottom:16px}
.ypx .rinfo .ranec{border:2px dashed rgba(34,24,74,.45);border-radius:14px;padding:12px 14px}
.ypx .rinfo .ranec .rik{margin-top:0}
.ypx .rinfo .ranec .rit{margin:0;line-height:1.55}

/* v27: guest artists: "with …" under the title, and their presentation after the anecdote */
.ypx .rel .rfeat{font-weight:700;font-size:.88rem;margin:-2px 0 4px;opacity:.85}
.ypx .rinfo .ranec{margin-bottom:16px}
.ypx .rinfo .rguests .rik{margin-bottom:8px}
.ypx .rinfo .rguest{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-top:1px solid rgba(34,24,74,.2)}
.ypx .rinfo .rguest:first-of-type{border-top:0;padding-top:0}
.ypx .rinfo .rgname{font-weight:900;font-size:1rem;color:var(--ink);text-decoration:none}
.ypx .rinfo a.rgname{text-decoration:underline;text-underline-offset:3px}
.ypx .rinfo .rguest p{margin:0;line-height:1.5}

/* v28: the guests' names in the card's info line open their presentation; their links as small pills */
.ypx .rel .meta .rglink{all:unset;cursor:pointer;font:inherit;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-thickness:2px}
.ypx .rel .meta .rglink:hover{text-decoration-style:solid}
.ypx .rinfo .rglinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ypx .rinfo .rglinks a{font-weight:800;font-size:.8rem;border:2px solid var(--ink);border-radius:999px;padding:3px 10px;color:var(--ink);text-decoration:none}
.ypx .rinfo .rglinks a:hover{background:var(--ink);color:var(--y,#FEDC2F)}
.ypx .rinfo .rguest.flash{background:rgba(255,210,31,.55);border-radius:10px;transition:background .3s}
.ypx .rel .rfeat{display:none}
/* v29: the paragraphs and blank lines typed in the admin are kept */
.ypx .rinfo .rit,.ypx .rinfo .rguest p{white-space:pre-line}
.ypx .rinfo .rguest p{line-height:1.55}

/* v30: the panel shows the song, or one artist; the chosen artist's name stays marked */
.ypx .rel .meta .rglink.on{text-decoration-style:solid;font-weight:800}
.ypx .infobtn.on{background:var(--ink);color:var(--y,#FEDC2F)}
.ypx .rinfo .rguest.one{padding:0;border:0}
.ypx .rinfo .rguest.one .rgname{font-size:1.15rem;margin:2px 0 6px;display:block}
.ypx .rinfo .rguest.one .rglinks{margin-top:10px}

/* ---- SoundVault: the download page (on the site's yellow background) ---- */
#ypxVault{display:flex;flex-direction:column;gap:22px;margin:10px 0 40px;color:#16142A}
.vfeat{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:26px;align-items:center;background:rgba(255,255,255,.55);border:2px solid #16142A;border-radius:22px;padding:22px;box-shadow:6px 6px 0 #16142A}
@media(max-width:720px){.vfeat{grid-template-columns:1fr;padding:16px}}
.vfeat .vcov img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block;box-shadow:0 14px 30px rgba(22,20,42,.35)}
.vkick{display:inline-block;background:var(--yv-new,#16142A);color:var(--yv-new-ink,#FFD21F);font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 12px;margin-bottom:10px}
.vkick.soon{background:var(--yv-soon,#FF2D95);color:var(--yv-soon-ink,#fff)}
.vfeat .vt{font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 6px;line-height:1.1}
.vmeta{opacity:.75;font-size:.9rem;margin-bottom:10px}
.vbtns{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.vrowb{display:grid;grid-template-columns:72px 1fr 1fr;gap:8px;align-items:center}
.vlab{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.vbtn.fmt-mp3{background:var(--yv-mp3,#16142A)}.vbtn.fmt-wav{background:var(--yv-wav,#3B2F7A)}.vbtn.off{background:transparent}.vbtn.ph{visibility:hidden}.vrowb.empty .vlab{visibility:hidden}
.vlisten{margin:6px 0 2px}
.vpre{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:var(--yv-soon,#FF2D95);color:var(--yv-soon-ink,#fff)!important;font-weight:800;font-size:.85rem;text-decoration:none!important}
.vbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 10px;border-radius:12px;background:var(--yv-btn,#16142A);color:var(--yv-btn-ink,#FFD21F)!important;font-weight:700;font-size:.86rem;text-decoration:none!important;transition:transform .12s}
.vbtn:hover{transform:translateY(-1px)}.vbtn svg{width:16px;height:16px}.vbtn .vb2{font-weight:900;color:#fff}
.vbtn.off{background:transparent;color:#16142A!important;border:2px dashed rgba(22,20,42,.45);opacity:.8}.vbtn.off .vb2{color:#16142A}
.vgate{background:#16142A;color:#fff;border-radius:18px;padding:18px 20px;scroll-margin-top:120px}
.vgate h2{margin:0 0 4px;font-size:1.25rem;color:#FFD21F}.vgp{margin:0 0 12px;opacity:.9}
.vrow{display:flex;gap:8px;flex-wrap:wrap}.vrow input{flex:1 1 220px;min-width:0;padding:12px 14px;border-radius:12px;border:2px solid #FFD21F;background:#fff;color:#16142A;font:inherit}
.vgo{padding:12px 22px;border-radius:12px;border:0;background:#FFD21F;color:#16142A;font-weight:800;cursor:pointer}.vgo[disabled]{opacity:.6}
.vnews{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.9rem;cursor:pointer}
.verr{color:#FF8A8A;font-weight:700;margin:8px 0 0;min-height:1em}.vpriv{opacity:.65;font-size:.8rem;margin:4px 0 0}
.vwho{opacity:.8;font-size:.85rem;margin:-6px 0 0}.vwho a{color:inherit;text-decoration:underline}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.vcard{display:flex;flex-direction:column;background:rgba(255,255,255,.55);border:1px solid rgba(22,20,42,.18);border-radius:16px;padding:12px}
.vcard .vcov img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block;background:rgba(22,20,42,.08)}
.vcard .vbody{display:flex;flex-direction:column;flex:1}.vcard .vbtns{margin-top:auto;padding-top:10px}
.vcard .vt{font-size:1.02rem;margin:10px 0 2px;line-height:1.2}.vcard .vmeta{margin-bottom:0}.vcard .vbtn{font-size:.8rem}
.vcode{letter-spacing:.35em;font-weight:800;font-size:1.25rem;text-align:center;max-width:220px}
.vlinks{font-size:.85rem;margin:10px 0 0;opacity:.9}.vlinks a{color:#FFD21F;text-decoration:underline}.vlinks a.dis{opacity:.5;pointer-events:none;text-decoration:none}