/* Original illustrated covers for PuzzleVault's two 3D browser adventures. */
.flagship { max-width:1120px; margin:0 auto; padding:45px 24px 28px; }
.flagship-heading { display:flex; justify-content:space-between; align-items:end; gap:38px; margin-bottom:30px; }
.flagship-kicker { display:inline-flex; align-items:center; gap:9px; color:#047857; font-size:.69rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.flagship-kicker::before { content:''; width:7px; height:7px; border-radius:50%; background:#059669; box-shadow:0 0 0 4px #05966912; }
.flagship h1 { font-size:clamp(2rem,4.1vw,3.45rem); line-height:1.12; letter-spacing:-.045em; margin:15px 0 0; text-wrap:balance; }
.flagship-intro { max-width:365px; margin:0 0 3px; padding-left:20px; border-left:2px solid #05966930; color:var(--pv-text-secondary); font-size:.9rem; line-height:1.8; }
.flagship-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.flagship-card { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--pv-border); border-radius:22px; background:var(--pv-card-bg); box-shadow:0 3px 6px #0f172a03,0 18px 45px -18px #163c3526; transition:box-shadow .25s,border-color .25s; }
.flagship-card.cloudweft { box-shadow:0 3px 6px #0f172a03,0 18px 45px -18px #25305f26; }
.flagship-art { position:relative; overflow:hidden; background:#102d2f; aspect-ratio:1.85; }
.flagship-art::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 1px 0 #ffffff14; background:linear-gradient(180deg,#091b2828,transparent 30%,transparent 85%,#0f172a0d); }
.flagship-art svg { display:block; width:100%; height:100%; transition:transform .6s ease; }
.flagship-card.cloudweft .flagship-art { background:#192e59; }
.flagship-stamp { position:absolute; z-index:1; top:16px; left:17px; padding:6px 9px; border:1px solid #ffffff38; border-radius:5px; background:#102b35bf; color:#fff; font-size:.6rem; font-weight:750; letter-spacing:.075em; }
.flagship-number { position:absolute; z-index:1; right:19px; top:18px; color:#ffffffb3; font-size:.68rem; font-variant-numeric:tabular-nums; letter-spacing:.12em; }
.flagship-content { display:flex; flex:1; flex-direction:column; padding:24px 26px 22px; }
.flagship-genre { display:flex; align-items:center; gap:7px; margin:0 0 9px; color:#047857; font-size:.66rem; font-weight:800; letter-spacing:.095em; text-transform:uppercase; }
.flagship-genre::before { content:''; width:15px; height:1px; background:currentColor; opacity:.6; }
.cloudweft .flagship-genre { color:#49568d; }
.flagship-card h2 { margin:0 0 12px; font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.22; letter-spacing:-.035em; }
.flagship-hook { color:var(--pv-text-secondary); font-size:.86rem; line-height:1.75; margin:0 0 18px; min-height:4.5em; }
.flagship-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:21px; }
.flagship-tags span { padding:5px 9px; border-radius:5px; font-size:.66rem; background:#05966908; border:1px solid #0596691c; color:var(--pv-text); }
.cloudweft .flagship-tags span { background:#7c3aed06; border-color:#7c3aed1c; }
.flagship-play { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:auto; min-height:48px; padding:12px 17px; border-radius:9px; background:linear-gradient(120deg,#086b53,#075746); box-shadow:inset 0 1px 0 #ffffff21,0 4px 10px #07574612; color:#fff; font-size:.84rem; font-weight:750; transition:background .2s,box-shadow .2s; }
.cloudweft .flagship-play { background:linear-gradient(120deg,#425389,#334273); box-shadow:inset 0 1px 0 #ffffff21,0 4px 10px #33427312; }
.flagship-play > span:last-child { display:grid; width:23px; height:23px; border-radius:50%; place-items:center; background:#ffffff14; font-size:.85rem; }
.flagship-play:hover { background:#065f46; box-shadow:0 5px 16px #07574626; color:#fff; }
.cloudweft .flagship-play:hover { background:#334273; box-shadow:0 5px 16px #33427326; }
.flagship-play:focus-visible { outline:3px solid var(--pv-blue); outline-offset:4px; }
.flagship-controls { margin:12px 0 0; color:var(--pv-text-secondary); font-size:.66rem; line-height:1.6; }
.flagship-footnote { display:flex; flex-wrap:wrap; gap:10px 20px; color:var(--pv-text-secondary); font-size:.69rem; margin-top:18px; }
.flagship-footnote span::before { content:'✓'; color:var(--pv-emerald); margin-right:6px; }
.arcade-home .arcade-hero { padding-top:38px; }
.arcade-home .arcade-hero h2 { font-size:clamp(1.7rem,3vw,2.65rem); line-height:1.2; letter-spacing:-.045em; margin:18px 0; white-space:pre-line; text-wrap:balance; }
.flagship h1,.flagship-hook,.flagship-intro { word-break:keep-all; overflow-wrap:break-word; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .flagship-card:hover .flagship-art svg { transform:scale(1.025); } .flagship-card:hover { border-color:#a6c8b7; box-shadow:0 12px 35px -10px #163c3526; } .flagship-card.cloudweft:hover { border-color:#b6bdd4; box-shadow:0 12px 35px -10px #25305f26; } }
@media (prefers-color-scheme:dark) { .flagship-kicker,.flagship-genre { color:#86efac; } .flagship-intro { border-color:#86efac30; } .cloudweft .flagship-genre { color:#bfc7ef; } .flagship-tags span { border-color:#86efac33; background:#86efac0a; } .cloudweft .flagship-tags span { border-color:#c4b5fd33; background:#c4b5fd0a; } .flagship-card,.flagship-card.cloudweft { border-color:#ffffff1c; box-shadow:0 18px 45px -18px #0006; } }
@media (max-width:767px) { .flagship { padding:30px 20px 18px; } .flagship-heading { display:block; margin-bottom:23px; } .flagship-intro { max-width:100%; margin-top:16px; padding-left:0; border-left:0; } .flagship-grid { gap:18px; } .flagship-content { padding:21px 20px; } .flagship-hook { min-height:0; } }
@media (max-width:580px) { .flagship-grid { grid-template-columns:1fr; } .flagship-art { aspect-ratio:1.85; } .flagship h1 { font-size:2.2rem; } .flagship-intro { font-size:.86rem; } .flagship-card h2 { font-size:1.55rem; } .flagship-controls { font-size:.7rem; } .flagship-stamp { left:14px; top:13px; font-size:.53rem; } .flagship-number { right:16px; top:17px; font-size:.6rem; } }
@media (prefers-reduced-motion:reduce) { .flagship-play,.flagship-card,.flagship-art svg { transition:none; } }