/* 3PatiGame.com - Mobile First */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;line-height:1.6;color:#333;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#1a5f7a;text-decoration:none}
a:hover{text-decoration:underline}

.site-header{background:#1a1a2e;color:#fff;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
.site-header .logo{font-weight:bold;font-size:1.25rem;color:#fff}
.site-header a:hover{text-decoration:none;opacity:.9}
.main-nav a{color:#fff;margin-left:1.5rem}

.home-main{max-width:1100px;margin:0 auto;padding:1.5rem}
.hero{text-align:center;padding:2rem 0;border-bottom:1px solid #eee}
.hero h1{font-size:1.75rem;margin:0 0 .5rem;color:#1a1a2e}
.hero p{margin:0;color:#555;font-size:1.05rem}
.intro{padding:1.5rem 0;font-size:1rem}
.intro p{margin:0 0 1rem}

.games-grid h2,.quick-links-section h2,.content-section h2{font-size:1.35rem;margin:1.5rem 0 1rem;color:#1a1a2e}
.game-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;padding:1rem 0}
.game-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:1rem;text-align:center;transition:box-shadow .2s}
.game-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);text-decoration:none}
.game-card img{width:80px;height:80px;margin:0 auto .5rem;border-radius:12px;object-fit:cover}
.game-icon-placeholder{width:80px;height:80px;margin:0 auto .5rem;background:linear-gradient(135deg,#1a5f7a,#1a1a2e);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.25rem}
.game-name{display:block;font-weight:600;color:#1a1a2e;margin-bottom:.25rem}
.view-details{font-size:.85rem;color:#1a5f7a}

.quick-links-section .quick-links{display:flex;flex-wrap:wrap;gap:.5rem}
.quick-links-section .quick-links a{background:#f5f5f5;padding:.4rem .8rem;border-radius:6px;font-size:.9rem}
.quick-links-section .quick-links a:hover{background:#eee}

.content-section p{margin:0 0 1rem}
.site-footer{background:#1a1a2e;color:#fff;text-align:center;padding:1.5rem;margin-top:3rem;font-size:.9rem}

/* Article */
.article-main{max-width:800px;margin:0 auto;padding:1.5rem}
.article-header{text-align:center;margin-bottom:2rem}
.article-header .featured-img{width:150px;height:150px;margin:0 auto 1rem;border-radius:16px;object-fit:cover}
.article-header h1{font-size:1.6rem;margin:0 0 1rem;line-height:1.3;color:#1a1a2e}
.download-btn{display:inline-block;background:#22c55e;color:#fff!important;padding:.9rem 2rem;border-radius:8px;font-weight:600;text-decoration:none!important;transition:background .2s}
.download-btn:hover{background:#16a34a;text-decoration:none!important}

.game-specs{margin:1.5rem 0}
.spec-table{width:100%;border-collapse:collapse;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}
.spec-table th,.spec-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #eee}
.spec-table th{background:#f8f9fa;font-weight:600;width:40%}
.spec-table tr:last-child td,.spec-table tr:last-child th{border-bottom:none}

.article-content{font-size:1.05rem}
.article-content h2{font-size:1.3rem;margin:2rem 0 .75rem;color:#1a1a2e}
.article-content h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
.article-content p{margin:0 0 1rem}
.article-content ul{margin:0 0 1rem;padding-left:1.5rem}
.article-content li{margin-bottom:.35rem}
.download-cta{text-align:center;margin:2.5rem 0}

@media (min-width:600px){
.hero h1{font-size:2rem}
.game-cards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.article-header h1{font-size:1.9rem}
}

@media (min-width:768px){
.game-card img,.game-icon-placeholder{width:100px;height:100px}
}