:root { --ink:#f5f5f2; --muted:#9c9b9f; --bg:#101011; --line:rgba(255,255,255,.11); --blue:#70a8ff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--ink); background:var(--bg); font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; } a { color:inherit; }
.site-nav { height:72px; padding:0 clamp(1.25rem,5vw,5rem); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.wordmark { display:flex; align-items:center; gap:.55rem; text-decoration:none; font-size:.92rem; font-weight:700; letter-spacing:-.015em; }.wordmark > span:last-child { color:var(--muted); font-weight:500; }.wordmark-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#0d0d0e; background:#fff; font-size:.8rem; }.nav-link { color:var(--muted); font-size:.875rem; text-decoration:none; transition:color .2s; }.nav-link:hover { color:var(--ink); }
.directory-hero { min-height:420px; padding:6rem clamp(1.25rem,10vw,10rem) 5rem; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(ellipse 70% 80% at 50% 0,rgba(85,111,182,.25),transparent 70%); }.eyebrow { margin:0 0 .75rem; color:var(--blue); font-size:.7rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }h1,h2,h3,p { margin-top:0; }h1 { max-width:800px; margin-bottom:1.25rem; font-size:clamp(2.8rem,7vw,5.5rem); line-height:1.01; letter-spacing:-.065em; }h1 em { color:#b2b4bc; font-style:normal; }.lead { max-width:560px; margin-bottom:0; color:var(--muted); font-size:clamp(1rem,2vw,1.18rem); }
.apps-section { max-width:1180px; margin:auto; padding:5rem clamp(1.25rem,5vw,2.5rem) 6rem; }.section-heading { margin-bottom:1.75rem; }h2 { margin-bottom:0; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.045em; }.app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.app-card { min-height:365px; padding:1.6rem; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid var(--line); border-radius:22px; text-decoration:none; transition:transform .2s,border-color .2s; }.app-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.32); }.score-card { background:linear-gradient(145deg,#1c2536,#141518 70%); }.lucky-card { background:radial-gradient(circle at 80% 0,rgba(255,184,61,.22),transparent 40%),linear-gradient(145deg,#32251b,#191613 70%); }.app-card-top { display:flex; justify-content:space-between; align-items:flex-start; }.app-icon { width:70px; height:70px; border-radius:17px; object-fit:cover; box-shadow:0 12px 30px rgba(0,0,0,.25); }.platform { padding:.27rem .55rem; border:1px solid var(--line); border-radius:999px; color:#d0d0d1; font-size:.68rem; font-weight:650; }.app-card h3 { margin-bottom:.5rem; font-size:1.55rem; line-height:1.1; letter-spacing:-.04em; }.app-card p { max-width:390px; margin-bottom:1.5rem; color:#b7b5b4; font-size:.94rem; }.card-action { font-size:.85rem; font-weight:700; }.card-action span { margin-left:.25rem; transition:margin .2s; }.app-card:hover .card-action span { margin-left:.55rem; }
.lucky-icon { width:70px; height:70px; position:relative; display:grid; place-items:center; overflow:hidden; border-radius:17px; background:#f9b830; box-shadow:0 12px 30px rgba(0,0,0,.25); }.lucky-icon i { position:absolute; width:58px; height:19px; border-radius:50%; background:#ffdf72; transform-origin:35px 35px; }.lucky-icon i:nth-child(1){transform:rotate(0deg) translateY(-15px)}.lucky-icon i:nth-child(2){transform:rotate(45deg) translateY(-15px)}.lucky-icon i:nth-child(3){transform:rotate(90deg) translateY(-15px)}.lucky-icon i:nth-child(4){transform:rotate(135deg) translateY(-15px)}.lucky-icon b{position:relative;color:#a34b1e;font-size:25px;text-shadow:0 1px #fff3b8;}
footer { max-width:1180px; margin:auto; padding:2rem clamp(1.25rem,5vw,2.5rem); display:flex; justify-content:space-between; color:var(--muted); border-top:1px solid var(--line); font-size:.8rem; }footer a { text-decoration:none; }footer a:hover { color:var(--ink); }
.app-page { min-height:calc(100vh - 72px); }.app-hero { max-width:1100px; min-height:520px; margin:auto; padding:6rem clamp(1.25rem,6vw,4rem); display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:center; }.app-hero-copy { max-width:610px; }.app-hero h1 { margin-bottom:1rem; font-size:clamp(3rem,7vw,5.8rem); }.app-kicker { margin:0 0 1.15rem; color:var(--muted); font-size:.95rem; }.app-summary { margin:0 0 2rem; color:#bebdc0; font-size:1.12rem; }.store-buttons { display:flex; flex-wrap:wrap; gap:.75rem; }.store-button { min-width:178px; padding:.67rem 1rem; display:flex; align-items:center; gap:.7rem; background:#fff; border-radius:12px; color:#0b0b0c; text-decoration:none; font-weight:750; font-size:.93rem; transition:transform .18s,opacity .18s; }.store-button:hover { transform:translateY(-2px); opacity:.9; }.store-button.android { background:#83c840; }.store-glyph { display:grid; width:25px; height:25px; place-items:center; font-size:1.25rem; }.store-button small { display:block; font-size:.62rem; font-weight:600; opacity:.65; line-height:1.1; }.store-button strong { display:block; line-height:1.1; }.hero-art { width:210px; height:210px; display:grid; place-items:center; border-radius:52px; }.score-art { padding:15px; background:linear-gradient(145deg,#305fab,#112550); box-shadow:0 30px 70px rgba(47,96,171,.25); }.score-art img { width:100%; border-radius:40px; }.lucky-art { width:230px; height:230px; background:radial-gradient(circle at 35% 30%,#fff3b7 0 3%,transparent 4%),radial-gradient(circle at 70% 65%,#fff3b7 0 2%,transparent 3%),linear-gradient(135deg,#ffd95e,#f18c2d); box-shadow:0 30px 70px rgba(240,149,45,.25); }.lucky-art .lucky-icon { width:155px; height:155px; border-radius:38px; background:#ffbd31; box-shadow:none; }.lucky-art .lucky-icon i { width:130px; height:40px; transform-origin:77px 77px; }.lucky-art .lucky-icon i:nth-child(1){transform:rotate(0deg) translateY(-33px)}.lucky-art .lucky-icon i:nth-child(2){transform:rotate(45deg) translateY(-33px)}.lucky-art .lucky-icon i:nth-child(3){transform:rotate(90deg) translateY(-33px)}.lucky-art .lucky-icon i:nth-child(4){transform:rotate(135deg) translateY(-33px)}.lucky-art .lucky-icon b{font-size:55px;}.details { padding:5rem clamp(1.25rem,6vw,4rem); background:#171719; }.details-inner { max-width:1100px; margin:auto; }.details h2 { max-width:530px; margin-bottom:2.5rem; }.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--line); }.feature { padding:1.5rem; background:#1d1d20; }.feature-icon { margin-bottom:.75rem; font-size:1.5rem; }.feature h3 { margin-bottom:.35rem; font-size:1rem; }.feature p { margin:0; color:var(--muted); font-size:.85rem; }.back { color:var(--muted); text-decoration:none; font-size:.85rem; }.back:hover { color:#fff; }
@media (max-width:720px) { .site-nav { height:64px; }.directory-hero { min-height:380px; padding-top:4.5rem; }.app-grid,.feature-list { grid-template-columns:1fr; }.app-card { min-height:325px; }.app-hero { min-height:0; padding-top:4rem; padding-bottom:4rem; grid-template-columns:1fr; gap:2.5rem; }.hero-art { width:150px; height:150px; border-radius:35px; }.lucky-art { width:165px; height:165px; }.lucky-art .lucky-icon { transform:scale(.7); }.store-button { flex:1; min-width:155px; } }

/* Official LuckyShow icon */
.hero-art.lucky-art { overflow:hidden; background:#13112a; }
.hero-art.lucky-art img { width:100%; height:100%; display:block; object-fit:cover; }