*{
box-sizing:border-box;
}

:root{
--gold-900:#6a4a00;
--gold-700:#c58d10;
--gold-500:#f0b429;
--gold-300:#ffd36b;
--gold-200:#ffe29a;
--gold-50:#fff1c2;
--ink:#0f172a;
}

body{
font-family:'Plus Jakarta Sans',sans-serif;
margin:0;
background:radial-gradient(1200px 500px at 10% -5%, #ffe7a3 0%, #fff6d6 55%, #ffffff 100%);
color:var(--ink);
}

.container{
width:min(1120px, 92vw);
margin:auto;
}

img{
max-width:100%;
display:block;
}

/* HEADER */
.site-header{
position:sticky;
top:0;
z-index:10;
background:var(--gold-700);
color:white;
box-shadow:0 10px 24px rgba(122, 74, 0, 0.25);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px 0;
}

.logo{
display:flex;
align-items:center;
gap:12px;
color:white;
text-decoration:none;
font-family:'Space Grotesk',sans-serif;
font-weight:700;
letter-spacing:0.4px;
}

.logo-icon{
width:40px;
height:40px;
display:grid;
place-items:center;
background:rgba(255,255,255,0.16);
border-radius:12px;
padding:4px;
}

.logo-icon svg{
width:32px;
height:32px;
}

.nav{
display:flex;
gap:18px;
align-items:center;
}

.nav a{
color:white;
text-decoration:none;
font-weight:600;
padding:6px 10px;
border-radius:999px;
transition:all .2s ease;
}

.nav a:hover{
background:rgba(255,255,255,0.16);
transform:translateY(-1px);
}

.nav-toggle{
display:none;
}

.burger{
display:none;
width:40px;
height:40px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.3);
align-items:center;
justify-content:center;
flex-direction:column;
gap:4px;
cursor:pointer;
}

.burger span{
width:18px;
height:2px;
background:white;
display:block;
border-radius:4px;
transition:all .2s ease;
}

/* HERO */
.hero{
background:var(--gold-700);
color:white;
padding:70px 0 90px;
}

.hero-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
}

.hero-text h1{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(2.2rem, 3vw, 3.4rem);
margin:0 0 12px 0;
}

.hero-text p{
margin:0 0 18px 0;
font-size:1.05rem;
opacity:0.9;
}

.hero-meta{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
gap:12px 20px;
}

.hero-meta li{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
}

.meta-icon{
display:inline-flex;
width:28px;
height:28px;
border-radius:999px;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.2);
font-size:0.95rem;
}

.hero-img{
position:relative;
}

.hero-img img{
width:min(460px, 80vw);
filter:drop-shadow(0 18px 30px rgba(0,0,0,0.25));
}

/* STRIP */
.strip{
background:#e5e7eb;
padding:15px;
text-align:center;
}

.strip-row{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.strip-row span{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
color:var(--ink);
}

.strip-row svg{
width:20px;
height:20px;
}

/* FEATURES */
.features{
padding:60px 0;
text-align:center;
}

.features h2{
font-family:'Space Grotesk',sans-serif;
margin-top:0;
}

.features-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.feature-card{
background:white;
padding:22px 24px;
border-radius:16px;
text-align:left;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
border:1px solid #eef2f7;
transition:transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 30px rgba(15, 23, 42, 0.12);
}

.feature-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.feature-head h3{
margin:0;
font-size:1.05rem;
}

.feature-icon{
width:46px;
height:46px;
border-radius:14px;
display:grid;
place-items:center;
background:#f5f3ff;
}

.feature-icon svg{
width:30px;
height:30px;
}

.feature-divider{
height:1px;
background:#e6ebf2;
margin:14px 0 12px;
}

.feature-list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:10px;
}

.feature-list li{
display:flex;
gap:10px;
align-items:flex-start;
font-size:0.95rem;
}

.check{
color:var(--gold-500);
font-weight:700;
}

.dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--gold-500);
display:inline-block;
margin-right:8px;
}

/* TOP GAMES */
.top-games{
text-align:center;
padding:50px 0 20px;
}

.top-games-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}

.btn-solid{
display:inline-block;
background:var(--gold-500);
color:white;
padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;
box-shadow:0 10px 20px rgba(22, 163, 74, 0.25);
transition:transform .2s ease, box-shadow .2s ease;
}

.btn-solid:hover{
transform:translateY(-2px);
box-shadow:0 16px 28px rgba(22, 163, 74, 0.35);
}

/* PHONES */
.phones{
display:flex;
justify-content:space-between;
padding:60px 0;
gap:30px;
align-items:center;
}

.phones-text h3{
font-family:'Space Grotesk',sans-serif;
margin-top:0;
}

.phones-text ul{
list-style:none;
padding:0;
margin:16px 0 0;
display:grid;
gap:8px;
}

.split-list{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:16px;
margin-bottom:20px;
}

/* GAME CATALOG */
.game-catalog{
padding:40px 0 10px;
background:linear-gradient(180deg, rgba(15,143,95,0.06), rgba(255,255,255,0));
}

.catalog-head{
text-align:center;
margin-bottom:24px;
}

.catalog-head h2{
font-family:'Space Grotesk',sans-serif;
margin:0 0 6px;
}

.catalog-head p{
margin:0;
color:#475569;
}

.catalog-grid{
display:grid;
grid-template-columns:repeat(5, minmax(0,1fr));
gap:16px;
}

.game-card{
background:white;
border-radius:16px;
padding:14px;
text-decoration:none;
color:var(--ink);
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
display:flex;
flex-direction:column;
gap:12px;
transition:transform .2s ease, box-shadow .2s ease;
}

.game-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 30px rgba(15, 23, 42, 0.12);
}

.game-thumb{
border-radius:12px;
background:#f1f5f9;
padding:10px;
display:grid;
place-items:center;
min-height:110px;
}

.game-thumb img{
max-height:90px;
object-fit:contain;
}

.game-info h4{
margin:0 0 4px;
font-size:0.95rem;
}

.game-info span{
font-size:0.8rem;
color:#64748b;
}

/* CARDS */
.cards-row{
display:flex;
gap:20px;
}

.card{
flex:1;
padding:20px;
border-radius:12px;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
transition:transform .2s ease, box-shadow .2s ease;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 18px 30px rgba(15, 23, 42, 0.12);
}

.purple{
background:#ede9fe;
}

.yellow{
background:#fef3c7;
}

/* REVIEWS */
.reviews-row{
display:flex;
gap:20px;
align-items:center;
}

.reviews{
padding:40px 0 10px;
}

.reviews-head{
text-align:center;
margin-bottom:24px;
}

.reviews-head h2{
font-family:'Space Grotesk',sans-serif;
margin:0 0 6px;
}

.reviews-head p{
margin:0;
color:#475569;
}

.rating-card{
background:white;
border-radius:16px;
padding:20px;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
width:280px;
}

.rating-title{
font-weight:600;
color:#475569;
}

.rating-score{
font-size:2rem;
font-weight:700;
margin:6px 0 2px;
}

.rating-stars{
color:var(--gold-500);
letter-spacing:2px;
}

.rating-note{
color:#94a3b8;
font-size:0.85rem;
margin-top:4px;
}

.rating-bars{
margin-top:16px;
display:grid;
gap:8px;
}

.bar-row{
display:grid;
grid-template-columns:16px 1fr;
gap:8px;
align-items:center;
font-size:0.8rem;
color:#64748b;
}

.bar{
height:6px;
background:#e2e8f0;
border-radius:999px;
overflow:hidden;
}

.bar i{
display:block;
height:100%;
background:#f1d27a;
border-radius:999px;
}

.review-card{
background:white;
padding:18px 20px;
border-radius:16px;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
flex:1;
}

.review-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:12px;
}

.review-user{
display:flex;
gap:12px;
align-items:center;
}

.avatar{
width:44px;
height:44px;
border-radius:50%;
display:grid;
place-items:center;
background:#e0f2fe;
color:var(--ink);
font-weight:700;
}

.name{
font-weight:600;
}

.meta{
color:#e11d48;
font-size:0.85rem;
}

.review-actions{
display:flex;
align-items:center;
gap:12px;
}

.badge{
background:var(--gold-500);
color:white;
padding:4px 8px;
border-radius:8px;
font-weight:600;
font-size:0.85rem;
}

.arrows{
display:flex;
gap:6px;
}

.arrows button{
width:28px;
height:28px;
border-radius:8px;
border:1px solid #e2e8f0;
background:white;
cursor:pointer;
}

/* DOWNLOAD */
.download{
text-align:center;
padding:60px;
background:linear-gradient(135deg, #fff7db, #f8fafc);
}

.download-head span{
display:block;
color:#64748b;
font-weight:600;
}

.download h2{
font-family:'Space Grotesk',sans-serif;
margin-top:0;
}

.pill-tags{
margin-top:18px;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
background:white;
border-radius:999px;
padding:14px 20px;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
width:fit-content;
margin-left:auto;
margin-right:auto;
}

.pill{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
color:var(--ink);
padding:6px 10px;
border-radius:999px;
}

.pill-icon{
width:24px;
height:24px;
display:grid;
place-items:center;
border-radius:50%;
background:#f1f5f9;
color:var(--gold-700);
font-size:0.85rem;
}

/* EARN MORE */
.earn-more{
padding:40px 0 10px;
text-align:center;
}

.earn-more h2{
font-family:'Space Grotesk',sans-serif;
margin-top:0;
}

.earn-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:20px;
margin-top:24px;
}

.earn-card{
display:flex;
gap:16px;
align-items:center;
padding:20px;
border-radius:16px;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
text-align:left;
}

.earn-visual{
width:68px;
height:68px;
border-radius:16px;
display:grid;
place-items:center;
font-size:28px;
background:rgba(255,255,255,0.7);
}

.earn-text h4{
margin:0 0 6px;
}

.earn-text p{
margin:0 0 12px;
color:#475569;
}

.btn-ghost{
display:inline-block;
background:white;
color:var(--ink);
padding:8px 16px;
border-radius:8px;
text-decoration:none;
font-weight:600;
box-shadow:0 8px 16px rgba(15, 23, 42, 0.1);
}

/* ARTICLES */

/* FOOTER */
footer{
background:#111827;
color:white;
text-align:center;
padding:30px;
}

/* RESPONSIVE */
@media (max-width: 980px){
.hero-inner,
.phones{
flex-direction:column;
text-align:center;
}

.features-grid{
grid-template-columns:1fr;
}

.hero-meta{
justify-content:center;
}

.phones-text ul{
justify-items:center;
}

.split-list{
grid-template-columns:1fr;
}

.cards-row,
.reviews-row{
flex-direction:column;
}

.catalog-grid{
grid-template-columns:repeat(2, minmax(0,1fr));
}

.catalog-grid-new{
grid-template-columns:repeat(2, minmax(0,1fr));
}

.earn-grid{
grid-template-columns:1fr;
}

.rating-card{
width:100%;
}

.review-top{
flex-direction:column;
align-items:flex-start;
}
}

@media (max-width: 780px){
.header-inner{
position:relative;
}

.burger{
display:flex;
}

.nav{
position:absolute;
top:100%;
right:0;
left:0;
background:var(--gold-700);
display:none;
flex-direction:column;
padding:12px 0 18px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
box-shadow:0 16px 30px rgba(7, 41, 24, 0.3);
}

.nav a{
padding:10px 18px;
}

.nav-toggle:checked + .burger + .nav{
display:flex;
}
}

@media (max-width: 560px){
.hero{
padding:55px 0 70px;
}

.hero-text h1{
font-size:2.1rem;
}

.strip-row{
gap:10px;
}

.catalog-grid{
grid-template-columns:1fr;
}

.catalog-grid-new{
grid-template-columns:1fr;
}
}



/* ALT NAV FOR INNER PAGES */
.nav-links{
display:flex;
gap:18px;
align-items:center;
}

.nav-links a{
color:white;
text-decoration:none;
font-weight:600;
padding:6px 10px;
border-radius:999px;
transition:all .2s ease;
}

.nav-links a:hover{
background:rgba(255,255,255,0.18);
transform:translateY(-1px);
}

/* HERO SLIM (INNER PAGES) */
.hero.hero-slim{
background:linear-gradient(140deg, var(--gold-700), #9b7210);
color:white;
padding:80px 0 70px;
position:relative;
overflow:hidden;
}

.hero.hero-slim::before{
content:"";
position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
right:-140px;
top:-120px;
}

.hero-grid{
display:grid;
grid-template-columns:1fr;
}

.hero-visual{
display:none;
}

.hero-kicker{
text-transform:uppercase;
letter-spacing:2px;
font-weight:600;
font-size:0.8rem;
opacity:0.85;
}

.hero-links{
margin-top:16px;
display:flex;
gap:16px;
flex-wrap:wrap;
}

.text-link{
color:white;
font-weight:600;
text-decoration:none;
}

.text-link.muted{
opacity:0.7;
}

/* PAGE SECTIONS */
.page-section{
padding:50px 0;
}

/* GAME FRAME */
.game-frame-section{
padding:50px 0 10px;
}

.game-frame-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
flex-wrap:wrap;
}

.game-frame-head h2{
font-family:'Space Grotesk',sans-serif;
margin:0 0 6px;
}

.game-frame-head p{
margin:0;
color:#475569;
}

.frame-badges{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.game-frame{
position:relative;
margin-top:16px;
background:#0b1220;
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 30px rgba(15, 23, 42, 0.2);
aspect-ratio:16 / 9;
min-height:520px;
}

.game-frame iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
}

.frame-note{
margin-top:12px;
color:#64748b;
font-size:0.9rem;
}

.page-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
align-items:start;
}

.info-cards{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
}

.info-card{
background:white;
padding:16px;
border-radius:14px;
box-shadow:0 10px 20px rgba(15, 23, 42, 0.08);
}

.info-list{
list-style:none;
padding:0;
margin:16px 0 0;
display:grid;
gap:8px;
}

/* CATALOG STACK */
.catalog-stack{
display:grid;
gap:20px;
}

.catalog-item{
background:white;
border-radius:18px;
padding:18px;
display:grid;
grid-template-columns:180px 1fr;
gap:18px;
align-items:center;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
}

.catalog-item.reverse{
grid-template-columns:1fr 180px;
}

.catalog-media{
position:relative;
border-radius:14px;
background:#fff7db;
padding:14px;
display:grid;
place-items:center;
text-decoration:none;
color:inherit;
}

.catalog-chip{
position:absolute;
left:12px;
top:12px;
background:var(--gold-500);
color:white;
padding:4px 10px;
border-radius:999px;
font-size:0.75rem;
font-weight:600;
}

.catalog-info h3{
margin:0 0 8px;
}

.catalog-actions{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:12px;
}

.catalog-tag{
background:#fff4c9;
color:#7a5b05;
padding:4px 10px;
border-radius:999px;
font-size:0.75rem;
font-weight:600;
}

.catalog-actions a{
text-decoration:none;
color:var(--gold-700);
font-weight:600;
}

/* MODERN CATALOG */
.catalog-shell{
display:grid;
gap:24px;
}

.catalog-top{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:20px;
flex-wrap:wrap;
}

.catalog-top h2{
font-family:'Space Grotesk',sans-serif;
margin:0 0 6px;
}

.catalog-top p{
margin:0;
color:#475569;
}

.catalog-actions{
display:flex;
flex-direction:column;
gap:12px;
min-width:260px;
}

.catalog-search{
display:flex;
align-items:center;
gap:8px;
background:white;
border-radius:999px;
padding:10px 14px;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
}

.catalog-search input{
border:none;
outline:none;
width:100%;
font-family:inherit;
background:transparent;
}

.catalog-filters{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.filter{
border:none;
background:#fff7db;
color:#7a5b05;
padding:8px 14px;
border-radius:999px;
font-weight:600;
cursor:pointer;
}

.filter.active{
background:var(--gold-500);
color:white;
}

.catalog-grid-new{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:18px;
}

.game-tile{
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
transition:transform .2s ease, box-shadow .2s ease;
}

.game-tile:hover{
transform:translateY(-6px);
box-shadow:0 18px 30px rgba(15, 23, 42, 0.14);
}

.tile-link{
display:flex;
flex-direction:column;
height:100%;
color:inherit;
text-decoration:none;
}

.tile-media{
position:relative;
padding:18px;
background:linear-gradient(180deg, #fff7db, #ffffff);
display:grid;
place-items:center;
min-height:170px;
}

.tile-media img{
max-height:120px;
object-fit:contain;
filter:drop-shadow(0 12px 20px rgba(122, 74, 0, 0.18));
}

.tile-tag{
position:absolute;
top:14px;
left:14px;
background:var(--gold-500);
color:white;
padding:4px 10px;
border-radius:999px;
font-size:0.75rem;
font-weight:600;
}

.tile-body{
padding:16px 18px 18px;
display:grid;
gap:8px;
}

.tile-body h3{
margin:0;
}

.tile-body p{
margin:0;
color:#475569;
}

.tile-foot{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:6px;
font-weight:600;
color:#7a5b05;
}

/* INTERACTIVE VAULT SECTION */
.vault-interactive{
padding:60px 0;
}

.vault-head{
text-align:center;
margin-bottom:24px;
}

.vault-head h2{
font-family:'Space Grotesk',sans-serif;
margin:0 0 6px;
}

.vault-head p{
margin:0;
color:#475569;
}

.vault-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:18px;
}

.vault-panel{
background:white;
padding:18px;
border-radius:16px;
box-shadow:0 10px 24px rgba(15, 23, 42, 0.08);
}

.chip-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}

.chip{
background:#fff7db;
color:#7a5b05;
padding:6px 12px;
border-radius:999px;
font-weight:600;
font-size:0.8rem;
}

.vault-panel details{
margin-top:10px;
border-top:1px solid #f1e6c0;
padding-top:10px;
}

.vault-panel summary{
cursor:pointer;
font-weight:600;
}

/* ABOUT PAGE REDESIGN */
.about-story{
background:linear-gradient(180deg, #fff6d6, #ffffff);
}

.story-grid{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:24px;
align-items:start;
}

.story-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
}

.story-tags span{
background:#fff1c2;
color:#7a5b05;
padding:6px 12px;
border-radius:999px;
font-weight:600;
font-size:0.85rem;
}

.story-cards{
display:grid;
gap:14px;
}

.tone-card{
background:white;
padding:16px;
border-radius:16px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
border:1px solid #f1e6c0;
}

.about-principles{
background:linear-gradient(180deg, #ffffff, #fff6d6);
}

.principles-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
align-items:start;
}

.principle-card{
background:white;
padding:20px;
border-radius:18px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
border:1px solid #f1e6c0;
}

.principle-steps{
display:grid;
gap:12px;
}

.step-item{
display:flex;
gap:12px;
align-items:flex-start;
background:white;
padding:14px;
border-radius:16px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.06);
}

.step-dot{
width:32px;
height:32px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--gold-500);
color:white;
font-weight:700;
}

/* ACHIEVEMENTS REDESIGN */
.achievement-dashboard{
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:24px;
align-items:start;
}

.progress-card{
background:white;
border-radius:20px;
padding:18px;
display:grid;
grid-template-columns:160px 1fr;
gap:18px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
}

.progress-ring{
height:140px;
width:140px;
border-radius:50%;
background:conic-gradient(var(--gold-500) 0 260deg, #f1e6c0 260deg 360deg);
display:grid;
place-items:center;
color:#7a5b05;
font-weight:700;
text-align:center;
}

.progress-ring span{
font-size:1.4rem;
}

.progress-ring small{
display:block;
font-size:0.75rem;
font-weight:600;
opacity:0.8;
}

.progress-info p{
color:#475569;
}

.progress-bars{
display:grid;
gap:10px;
margin-top:10px;
}

.progress-bars div{
display:grid;
grid-template-columns:80px 1fr;
gap:10px;
align-items:center;
font-weight:600;
color:#7a5b05;
font-size:0.85rem;
}

.progress-bars i{
display:block;
height:6px;
background:#f1e6c0;
border-radius:999px;
position:relative;
overflow:hidden;
}

.progress-bars i::after{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
background:var(--gold-500);
width:0;
}

.progress-bars i[style]{
background:#f1e6c0;
}

.progress-bars i[style]::after{
width:inherit;
}

.badge-wall{
display:grid;
gap:12px;
}

.badge-card{
background:white;
padding:16px;
border-radius:16px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
text-align:center;
}

.challenge-grid{
display:grid;
gap:18px;
}

.challenge-head{
display:flex;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
align-items:center;
}

.challenge-filters{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.challenge-cards{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
}

.challenge-card{
background:white;
padding:16px;
border-radius:16px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
display:grid;
gap:10px;
}

.challenge-card .chip{
align-self:flex-start;
}

/* FAQ REDESIGN */
.faq-shell{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:24px;
align-items:start;
}

.faq-aside{
background:white;
border-radius:18px;
padding:18px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
border:1px solid #f1e6c0;
}

.faq-aside h2{
margin-top:0;
}

.faq-aside ul{
list-style:none;
padding:0;
margin:12px 0 18px;
display:grid;
gap:8px;
}

.faq-aside li{
background:#fff1c2;
padding:8px 12px;
border-radius:999px;
font-weight:600;
color:#7a5b05;
}

.faq-tip{
margin-top:14px;
padding:14px;
border-radius:16px;
background:linear-gradient(140deg, #fff7db, #ffffff);
}

.faq-tip h3{
margin:0 0 6px;
}

.faq-accordion{
display:grid;
gap:12px;
}

.faq-accordion details{
background:white;
border-radius:16px;
padding:14px 16px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
border:1px solid #f1e6c0;
}

.faq-accordion summary{
cursor:pointer;
font-weight:700;
list-style:none;
}

.faq-accordion summary::-webkit-details-marker{
display:none;
}

.faq-accordion summary::after{
content:"+";
float:right;
color:#7a5b05;
font-weight:700;
}

.faq-accordion details[open] summary::after{
content:"–";
}

@media (max-width: 980px){
.faq-shell{
grid-template-columns:1fr;
}
}
@media (max-width: 980px){
.story-grid,
.principles-grid,
.achievement-dashboard{
grid-template-columns:1fr;
}

.progress-card{
grid-template-columns:1fr;
text-align:center;
}

.challenge-cards{
grid-template-columns:1fr;
}
}
/* CONTACT FORM */
.form-card{
background:white;
padding:20px;
border-radius:16px;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.08);
}

.form-card h3{
margin-top:0;
}

.form-grid{
display:grid;
gap:14px;
}

.form-grid label{
display:grid;
gap:6px;
font-weight:600;
color:#475569;
}

.form-grid input,
.form-grid textarea{
border:1px solid #e2e8f0;
border-radius:10px;
padding:10px 12px;
font-family:inherit;
font-size:0.95rem;
background:#fffdf4;
}

.form-grid .full{
grid-column:1 / -1;
}

.btn.primary{
border:none;
background:var(--gold-500);
color:white;
padding:12px 18px;
border-radius:10px;
font-weight:600;
cursor:pointer;
}

/* FOOTER */
.footer{
text-align:center;
}

.footer-links-inline{
margin-top:10px;
}

.footer-links-inline a{
margin:0 8px;
text-decoration:none;
color:#fff;
opacity:0.85;
}

@media (max-width: 980px){
.page-grid{
grid-template-columns:1fr;
}

.info-cards{
grid-template-columns:1fr;
}

.catalog-item,
.catalog-item.reverse{
grid-template-columns:1fr;
}

.vault-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 780px){
.nav-links{
position:absolute;
right:0;
left:0;
top:100%;
background:var(--gold-700);
display:none;
flex-direction:column;
padding:12px 0 18px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
box-shadow:0 16px 30px rgba(90, 63, 8, 0.35);
}

.nav-toggle:checked + .burger + .nav-links{
display:flex;
}

.game-frame{
min-height:480px;
}
}

@media (max-width: 560px){
.game-frame{
min-height:420px;
}
}