@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
--bg:#07141a;
--bg-soft:#10252d;
--panel:rgba(8,24,31,0.78);
--text:#f5efe3;
--muted:#d6c9b3;
--accent:#e7bf6d;
--accent-strong:#ffd98d;
}

body{
margin:0;
font-family:"Manrope","Segoe UI",sans-serif;
background:radial-gradient(circle at top,#123340 0%,#07141a 55%,#050b0f 100%);
color:var(--text);
scroll-behavior:smooth;
line-height:1.6;
}

header{
position:fixed;
top:0;
width:100%;
background:rgba(7,20,26,0.88);
backdrop-filter:blur(14px);
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 8%;
z-index:1000;
box-sizing:border-box;
border-bottom:1px solid rgba(231,191,109,0.16);
gap:14px;
}

header h2{
color:var(--accent);
font-family:"Cormorant Garamond",serif;
font-size:34px;
letter-spacing:0.04em;
margin:0;
}

nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}

nav a{
color:var(--muted);
margin-left:14px;
text-decoration:none;
font-weight:700;
transition:color .25s ease;
}

nav a:hover{
color:var(--accent-strong);
}

.lang-switch{
display:inline-flex;
gap:6px;
margin-left:16px;
padding:4px;
border-radius:999px;
border:1px solid rgba(231,191,109,0.22);
background:rgba(231,191,109,0.06);
}

.lang-switch a{
margin:0;
padding:5px 11px;
border-radius:999px;
font-size:13px;
font-weight:800;
letter-spacing:0.04em;
color:var(--muted);
text-transform:uppercase;
}

.lang-switch a.active{
background:var(--accent);
color:#08141a;
}

.geo-banner{
position:fixed;
top:64px;
left:50%;
transform:translateX(-50%);
z-index:1200;
display:none;
align-items:center;
gap:14px;
max-width:92%;
padding:12px 18px;
border-radius:14px;
background:rgba(16,37,45,0.97);
border:1px solid rgba(231,191,109,0.3);
box-shadow:0 18px 50px rgba(0,0,0,0.4);
font-weight:600;
}

.geo-banner a{
padding:8px 16px;
border-radius:10px;
background:var(--accent);
color:#08141a;
text-decoration:none;
font-weight:800;
white-space:nowrap;
}

.geo-banner button{
background:transparent;
border:none;
color:var(--muted);
font-size:20px;
cursor:pointer;
line-height:1;
}

.hero{
min-height:100vh;
box-sizing:border-box;
padding:120px 20px 60px;
background:
linear-gradient(135deg,rgba(4,16,21,0.3),rgba(4,16,21,0.92)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%230d2d36'/%3E%3Cstop offset='1' stop-color='%23050b0f'/%3E%3C/linearGradient%3E%3CradialGradient id='glow' cx='50%25' cy='35%25' r='45%25'%3E%3Cstop stop-color='%23e7bf6d' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%23e7bf6d' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23bg)'/%3E%3Crect width='1600' height='900' fill='url(%23glow)'/%3E%3Ccircle cx='1260' cy='265' r='170' fill='%23e7bf6d' fill-opacity='.12'/%3E%3Ccircle cx='1290' cy='265' r='110' fill='none' stroke='%23e7bf6d' stroke-opacity='.35' stroke-width='16'/%3E%3Ccircle cx='1290' cy='265' r='70' fill='none' stroke='%23e7bf6d' stroke-opacity='.3' stroke-width='14'/%3E%3Crect x='240' y='175' width='185' height='255' rx='18' transform='rotate(-12 240 175)' fill='%23f5efe3' fill-opacity='.12' stroke='%23f5efe3' stroke-opacity='.35'/%3E%3Crect x='350' y='230' width='185' height='255' rx='18' transform='rotate(8 350 230)' fill='%23f5efe3' fill-opacity='.08' stroke='%23f5efe3' stroke-opacity='.25'/%3E%3Cpath d='M1130 590c90-75 218-88 305-22' fill='none' stroke='%23e7bf6d' stroke-opacity='.22' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M196 720c145-94 314-119 487-71' fill='none' stroke='%23e7bf6d' stroke-opacity='.12' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E");
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

.hero-content{
max-width:760px;
padding:42px 34px;
border:1px solid rgba(231,191,109,0.18);
border-radius:28px;
background:var(--panel);
box-shadow:0 24px 80px rgba(0,0,0,0.35);
}

.hero-kicker{
display:inline-block;
margin-bottom:18px;
padding:8px 16px;
border-radius:999px;
background:rgba(231,191,109,0.12);
border:1px solid rgba(231,191,109,0.22);
color:var(--accent-strong);
font-size:14px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
}

.hero h1{
margin:0;
font-family:"Cormorant Garamond",serif;
font-size:68px;
line-height:0.98;
color:var(--text);
}

.hero p{
max-width:620px;
margin:18px auto 0;
font-size:20px;
color:var(--muted);
}

.hero strong{
color:var(--accent-strong);
font-weight:800;
}

section{
padding:90px 10%;
}

.toc{
background:#112129;
padding:30px;
border-radius:10px;
}

.toc a{
display:block;
color:var(--accent);
margin:8px 0;
text-decoration:none;
}

.games{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
margin-top:30px;
}

.card{
background:#112129;
padding:25px;
border-radius:12px;
text-align:center;
display:flex;
flex-direction:column;
height:100%;
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
border:1px solid rgba(231,191,109,0.08);
}

.card:hover{
transform:translateY(-4px);
border-color:rgba(231,191,109,0.3);
box-shadow:0 18px 44px rgba(0,0,0,0.32);
}

.card h3{margin:0 0 12px;}

.card p{flex:0 0 auto;}

.card img{
width:100%;
max-width:220px;
height:140px;
object-fit:contain;
margin:0 auto 16px;
display:block;
}

.preview-btn{
margin-top:10px;
padding:10px 20px;
background:var(--accent);
border:none;
cursor:pointer;
border-radius:6px;
font-family:inherit;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#08141a;
transition:transform .2s ease,opacity .2s ease;
}

.preview-btn:hover{transform:translateY(-1px);}

.card-actions{
display:flex;
flex-direction:column;
gap:10px;
align-items:center;
margin-top:auto;
padding-top:16px;
}

.card-actions .preview-btn{width:100%;}

.secondary-btn{
background:transparent;
color:var(--text);
border:1px solid rgba(231,191,109,0.22);
}

footer{
background:#09151b;
text-align:center;
padding:40px;
}

footer a{color:var(--accent);text-decoration:none;}

h2{
color:var(--accent);
margin-top:40px;
font-family:"Cormorant Garamond",serif;
font-size:42px;
letter-spacing:0.02em;
}

.guide-layout{
display:grid;
gap:28px;
margin-top:24px;
}

.guide-intro,
.guide-box,
.guide-article{
background:#112129;
border:1px solid rgba(231,191,109,0.12);
border-radius:20px;
padding:28px;
box-shadow:0 14px 40px rgba(0,0,0,0.18);
}

.guide-intro p,
.guide-box p,
.guide-article p,
.guide-article li{
color:var(--muted);
font-size:18px;
}

.guide-box ul,
.guide-article ul{
margin:14px 0 0;
padding-left:20px;
}

.guide-box li,
.guide-article li{
margin-bottom:10px;
}

.guide-article h3{
margin:0 0 14px;
color:var(--accent-strong);
font-size:30px;
font-family:"Cormorant Garamond",serif;
}

.guide-article h4{
margin:24px 0 10px;
color:var(--text);
font-size:23px;
}

.hero-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
justify-content:center;
margin-top:28px;
}

.btn-lg{
padding:15px 30px;
font-size:18px;
border-radius:12px;
transition:transform .2s ease,box-shadow .2s ease;
}

.btn-lg:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(231,191,109,0.25);
}

.mobile-cta{
display:none;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:1500;
gap:10px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(7,20,26,0.96);
backdrop-filter:blur(12px);
border-top:1px solid rgba(231,191,109,0.22);
}

.mobile-cta a{
flex:1;
text-align:center;
padding:13px 10px;
border-radius:12px;
text-decoration:none;
font-weight:800;
font-size:16px;
}

.mobile-cta .m-play{background:var(--accent);color:#08141a;}
.mobile-cta .m-reg{background:rgba(231,191,109,0.1);color:var(--text);border:1px solid rgba(231,191,109,0.3);}

@media (max-width: 768px){
header{padding:14px 18px;}
header h2{font-size:28px;}
nav{display:none;}
.lang-switch{display:inline-flex;margin-left:0;}
.mobile-cta{display:flex;}
body{padding-bottom:74px;}
.hero h1{word-break:break-word;font-size:46px;}
.hero-content{padding:32px 22px;border-radius:22px;}
.hero p{font-size:17px;}
section{padding:70px 18px;}
.guide-intro,
.guide-box,
.guide-article{padding:22px;}
.geo-banner{flex-wrap:wrap;justify-content:center;text-align:center;top:56px;}
}