/* Come APK — non-critical styles (critical CSS is inlined in each page's ) */ /* sections & prose */ .home-body,.page-body{padding-block:8px 32px} .section{padding-block:32px 8px} .home-body>.section+.section{border-top:1px solid var(--edge)} .section>h2,.prose h2{scroll-margin-top:80px} .prose{max-width:780px} .prose h2{margin-top:1.8em} .prose h3{margin-top:1.4em} .prose ul,.prose ol,.section ul:not([role]),.section ol:not([role]){padding-left:1.3em;margin:0 0 1.2em} .prose li,.section li{margin-bottom:.4em} .prose a,.section p a,.section li a,.faq-a a{color:var(--neon);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .prose a:hover,.section p a:hover{color:#e9d5ff} .prose strong{color:#fff} .lead p:last-child{margin-bottom:.4em} .more-link a{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:600;color:var(--gold);text-decoration:none} .more-link .ic{width:18px;height:18px} /* lists */ ol.steps{list-style:none;counter-reset:step;padding:0!important;margin:0 0 1.5em;display:grid;gap:12px} ol.steps>li{counter-increment:step;position:relative;padding:16px 16px 14px 68px;margin:0;background:var(--bg-card);border:1px solid var(--edge);border-radius:var(--radius);min-height:64px} ol.steps>li::before{content:counter(step);position:absolute;left:14px;top:14px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--purple),var(--neon));color:#fff;font-family:var(--font-head);font-weight:800} ol.steps>li h3{margin:0 0 .3em;font-size:1.0625rem} ol.steps>li p:last-child{margin-bottom:0} ul.checklist{list-style:none;padding:0!important;margin:0 0 1.2em} ul.checklist>li{position:relative;padding-left:32px;margin-bottom:.6em} ul.checklist>li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border-radius:6px;background:rgba(255,215,0,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23ffd700' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat} /* callouts, CTA */ .callout{margin:1.2em 0;padding:14px 16px;border-radius:14px;background:rgba(124,58,237,.14);border:1px solid rgba(192,132,252,.3);border-left:4px solid var(--neon)} .callout--warn{background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.3);border-left-color:var(--gold)} .callout p:last-child,.callout ul:last-child{margin-bottom:0} .cta-box{margin:1.8em 0;padding:20px;border-radius:20px;background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(24,13,46,.9));border:1px solid rgba(192,132,252,.35);text-align:center} .cta-box .cta-title{font-family:var(--font-head);font-weight:700;font-size:1.25rem;margin-bottom:.8em;color:#fff} .lang-hi .cta-box .cta-title{font-family:'Sora','Noto Sans Devanagari',system-ui,sans-serif} .cta-box .btn-row{justify-content:center;margin-bottom:.6em} .cta-box .btn{flex:1 1 100%} .cta-box .cta-note{margin:0;color:var(--muted);font-size:.875rem} .prose .cta-box a{text-decoration:none;color:inherit} .prose .cta-box .btn-gold{color:#1a0b00} .cta-panel{padding:28px 20px;border-radius:24px;text-align:center;background:radial-gradient(100% 120% at 50% 0%,rgba(192,132,252,.35),rgba(24,13,46,.95));border:1px solid rgba(192,132,252,.35)} .cta-panel p{max-width:62ch;margin-inline:auto;color:#e4dbf3} .cta-panel .btn-row{justify-content:center;margin-top:1.2em} .final-cta{padding-bottom:24px} /* tables */ .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0;border:1px solid var(--edge);border-radius:14px;background:var(--bg-card)} .table-wrap table{width:100%;min-width:520px;border-collapse:collapse;font-size:.9375rem} .table-wrap .info-table{min-width:0} .table-wrap caption{padding:12px 14px 0;text-align:left;color:var(--muted);font-size:.875rem} .table-wrap th,.table-wrap td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--edge)} .table-wrap thead th{background:rgba(124,58,237,.22);color:#fff;font-family:var(--font-head);font-size:.875rem} .table-wrap tbody tr:last-child>*{border-bottom:0} .info-table th{width:42%;color:var(--muted);font-weight:600} .info-table td{color:#fff;overflow-wrap:anywhere} /* screenshot & howto */ .shot{margin:1.5em auto;max-width:240px;text-align:center} .shot img{border-radius:24px;border:6px solid rgba(192,132,252,.35);box-shadow:0 16px 40px rgba(124,58,237,.35)} .shot figcaption{margin-top:8px;color:var(--muted);font-size:.875rem} .howto{display:grid;gap:8px;align-items:start} /* game grid */ .game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 20px;padding:0;list-style:none} .game-card{display:flex;flex-direction:column;margin:0;background:var(--bg-card);border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease,transform .2s ease} .game-card:hover{border-color:rgba(192,132,252,.45);transform:translateY(-2px)} .game-card img{width:100%;aspect-ratio:211/260;object-fit:cover;background:#221340} .game-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1} .game-name{margin:0;font-family:var(--font-head);font-size:1rem;font-weight:700;color:#fff;line-height:1.3} .game-body p:not(.game-name){margin:0;color:var(--muted);font-size:.875rem;line-height:1.45} .game-body .tag{align-self:flex-start;margin:4px 0 0} .game-grid--compact .game-body{padding:8px 10px 10px} .game-grid--compact .game-name{font-size:.875rem} .game-grid--inline{margin:1.2em 0} .prose .game-grid{padding:0!important} .prose .game-grid li{margin:0} /* filters */ .filters{display:flex;gap:8px;overflow-x:auto;margin:20px 0 4px;padding:4px 2px 8px;scrollbar-width:thin} .filters button{flex:none;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--edge);background:var(--glass);color:#e9ddff;font:600 .9375rem var(--font-body);cursor:pointer} .lang-hi .filters button{font-family:var(--font-hi)} .filters button[aria-pressed="true"]{background:var(--purple);border-color:var(--neon);color:#fff} /* post cards */ .post-grid{display:grid;gap:14px;margin:16px 0} .post-card{display:flex;gap:14px;padding:12px;background:var(--bg-card);border:1px solid var(--edge);border-radius:var(--radius);position:relative;transition:border-color .2s ease} .post-card:hover{border-color:rgba(192,132,252,.45)} .post-card img{flex:none;width:92px;height:auto;aspect-ratio:211/260;object-fit:cover;object-position:top;border-radius:10px} .post-card-body{min-width:0;display:flex;flex-direction:column} .post-card .tag{align-self:flex-start;margin-bottom:6px} .post-card-title{font-size:1.0625rem;margin:0 0 .35em;line-height:1.35} .post-card-title a{color:#fff;text-decoration:none} .post-card-title a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)} .post-card-title a:hover{color:var(--neon)} .post-card p:not(.tag):not(.meta){margin:0 0 .5em;color:#d6cbe8;font-size:.9375rem;line-height:1.5} .post-card .meta{margin:auto 0 0;font-size:.8125rem} /* FAQ */ .faq-list{display:grid;gap:10px;margin-top:12px} .faq-item{background:var(--bg-card);border:1px solid var(--edge);border-radius:14px} .faq-item summary{position:relative;list-style:none;cursor:pointer;padding:14px 52px 14px 16px;min-height:52px;font-weight:600;color:#fff} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(124,58,237,.3);font-size:1.25rem;line-height:1;color:var(--gold)} .faq-item[open] summary::after{content:"–"} .faq-a{padding:0 16px 14px;color:#dcd2ec} .faq-a p{margin:0} /* post layout */ .post-layout{padding-block:20px 8px} .post-main{max-width:780px} .takeaways{margin:0 0 20px;padding:16px 18px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(124,58,237,.12));border:1px solid rgba(255,215,0,.25)} .takeaways-title,.toc-title{margin:0 0 10px;font-family:var(--font-head);font-weight:700;font-size:1.0625rem;color:#fff} .lang-hi .takeaways-title,.lang-hi .toc-title{font-family:'Sora','Noto Sans Devanagari',system-ui,sans-serif} .takeaways ul.checklist{margin:0} .toc{margin:0 0 12px;padding:16px 18px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--edge)} .toc ol{margin:0;padding-left:1.3em} .toc li{margin:0} .toc a{display:block;padding:8px 0;color:#e1d6f2;text-decoration:none;line-height:1.4} .toc a:hover{color:var(--neon)} .post .faq{padding-top:24px} .related{padding-bottom:24px} /* sitemap list, 404 */ .sitemap-list ul{columns:1} .sitemap-list a{display:inline-block;padding:6px 0} .not-found{padding:48px 0 64px;text-align:center} .not-found .btn-row{justify-content:center} .big-404{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(4rem,22vw,8rem);line-height:1;background:linear-gradient(90deg,var(--neon),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent} /* drawer */ .drawer{position:fixed;inset:0;z-index:60} .drawer-backdrop{position:absolute;inset:0;background:rgba(5,2,12,.7)} .drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);display:flex;flex-direction:column;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--bg-card);border-left:1px solid var(--edge);overflow-y:auto;animation:drawer-in .22s ease-out} @keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}} .drawer-head{display:flex;align-items:center;justify-content:space-between} .drawer-title{font-family:var(--font-head);font-weight:700;color:var(--muted)} .drawer-nav{list-style:none;margin:0;padding:0;display:grid;gap:4px} .drawer-nav a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:600} .drawer-nav a:hover,.drawer-nav a[aria-current]{background:rgba(124,58,237,.28)} .drawer-cta{display:grid;gap:10px;margin-top:auto;padding-top:12px} body.drawer-open{overflow:hidden} /* footer */ .site-footer{margin-top:24px;padding-top:32px;background:linear-gradient(180deg,transparent,rgba(24,13,46,.8));border-top:1px solid var(--edge)} .footer-grid{display:grid;gap:24px} .footer-brand p{color:var(--muted);max-width:44ch} .footer-title{margin:0 0 6px;font-family:var(--font-head);font-weight:700;color:#fff} .lang-hi .footer-title{font-family:'Sora','Noto Sans Devanagari',system-ui,sans-serif} .footer-col ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px} .footer-col a{display:flex;align-items:center;min-height:48px;color:#d9cdef;text-decoration:none} .footer-col a:hover{color:var(--gold)} .footer-legal{padding-block:16px 24px;border-top:1px solid var(--edge);margin-top:16px} .disclaimer{color:var(--muted);font-size:.875rem} .badge-18{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:6px;background:#b91c1c;color:#fff;font-weight:700;font-size:.8125rem} .copy{color:#7f7299;font-size:.8125rem;margin:0} @media (min-width:600px){ .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .game-grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))} .cta-box{padding:28px} .cta-box .btn{flex:0 1 auto} .post-card img{width:110px} .footer-col ul{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} .sitemap-list ul{columns:2;column-gap:32px} .howto{grid-template-columns:1fr 200px;gap:24px} .howto .shot{margin-top:0} } @media (min-width:900px){ .section{padding-block:48px 12px} .game-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .game-grid--compact{grid-template-columns:repeat(6,minmax(0,1fr))} .game-grid--inline{grid-template-columns:repeat(3,minmax(0,1fr))} .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr} .footer-brand{grid-column:auto} .cta-panel{padding:48px} .home-body .section>p,.home-body .section>ul,.home-body .section>ol,.home-body .section>.callout{max-width:820px} } @media (min-width:1200px){ .game-grid{grid-template-columns:repeat(5,minmax(0,1fr))} .game-grid--compact{grid-template-columns:repeat(8,minmax(0,1fr))} .game-grid--inline{grid-template-columns:repeat(3,minmax(0,1fr))} .post-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .post-grid--index{grid-template-columns:repeat(2,minmax(0,1fr))} .post-card{flex-direction:column} .post-grid--index .post-card{flex-direction:row} .post-card img{width:100%;aspect-ratio:16/10} .post-grid--index .post-card img{width:130px;aspect-ratio:211/260} } @media (hover:none){.game-card:hover{transform:none}}