:root{
  --bg:#0f1a17; --bg2:#15241f; --card:#182a24; --card2:#1d3329; --line:rgba(201,164,92,.28);
  --ink:#f3ecd9; --muted:#b7b09c; --glow:#ffcf70; --brass:#c9a45c; --leaf:#3f6b52; --leaf2:#2c4d3b;
  --ok:#7fd49a; --warn:#ffcf70; --bad:#ff8a7a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); line-height:1.55;
  background:radial-gradient(ellipse at 50% 0%, #22372f 0%, var(--bg2) 38%, var(--bg) 80%) fixed;
  min-height:100vh; overflow-x:hidden; display:flex; flex-direction:column;
}
a{color:var(--glow)}
h1,h2,h3{font-family:Fraunces,Georgia,serif; line-height:1.15}
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 20px}

/* header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(15,26,23,.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:Fraunces,Georgia,serif; font-weight:700; font-size:1.1rem; white-space:nowrap}
.brand svg{width:26px; height:36px; filter:drop-shadow(0 0 8px rgba(255,207,112,.5))}
.brand b{color:var(--glow); font-weight:700}
nav.main{display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:wrap; justify-content:flex-end}
nav.main a, .lang-btn{color:var(--muted); text-decoration:none; font-size:.93rem; padding:8px 12px; border-radius:999px; background:none; border:0; cursor:pointer; font-family:inherit}
nav.main a:hover, nav.main a.on, .lang-btn:hover{color:var(--ink); background:rgba(255,207,112,.1)}
nav.main a.cta{color:#1a1204; background:var(--glow); font-weight:600}
nav.main a.cta:hover{background:#ffdc92}
.lang-btn{border:1px solid var(--line)}

/* buttons */
.btn{display:inline-block; padding:12px 24px; border-radius:999px; border:1px solid var(--brass); color:var(--glow); background:rgba(255,207,112,.06);
     font:inherit; font-weight:600; text-decoration:none; cursor:pointer; font-size:.98rem}
.btn:hover{background:rgba(255,207,112,.15)}
.btn.primary{background:var(--glow); color:#1a1204; border-color:var(--glow)}
.btn.primary:hover{background:#ffdc92}
.btn.small{padding:6px 14px; font-size:.85rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.danger{border-color:var(--bad); color:var(--bad)}

main{flex:1; position:relative; z-index:1}
.eyebrow{font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); margin-bottom:12px}

/* hero */
.hero{text-align:center; padding:64px 0 40px; position:relative}
.hero .lantern{width:120px; margin:0 auto 22px; display:block; filter:drop-shadow(0 0 28px rgba(255,207,112,.45))}
.flame{animation:flicker 3.2s ease-in-out infinite; transform-origin:50% 70%}
@keyframes flicker{0%,100%{opacity:1; transform:scale(1)} 45%{opacity:.82; transform:scale(.96)} 70%{opacity:.95; transform:scale(1.03)}}
.hero h1{font-size:clamp(2.2rem,7vw,3.8rem); letter-spacing:-.01em}
.hero h1 span{color:var(--glow)}
.hero p.lead{margin:18px auto 0; font-size:1.12rem; color:var(--muted); max-width:560px}
.hero .actions{margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.fireflies{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.fly{position:absolute; width:4px; height:4px; border-radius:50%; background:var(--glow); box-shadow:0 0 8px 2px rgba(255,207,112,.7); opacity:0; animation:float 9s ease-in-out infinite}
@keyframes float{0%{transform:translate(0,0);opacity:0}20%{opacity:.9}50%{transform:translate(24px,-40px);opacity:.4}80%{opacity:.9}100%{transform:translate(-12px,-80px);opacity:0}}

section.block{padding:36px 0}
section.block > .wrap > h2{font-size:1.7rem; margin-bottom:6px}
section.block > .wrap > p.sub{color:var(--muted); margin-bottom:22px; max-width:640px}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.step{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
.step .n{width:34px; height:34px; border-radius:50%; background:rgba(255,207,112,.14); color:var(--glow); display:grid; place-items:center; font-weight:700; margin-bottom:10px}
.step h3{font-size:1.1rem; margin-bottom:4px}
.step p{color:var(--muted); font-size:.94rem}

.feature{display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center; background:linear-gradient(135deg,var(--card2),var(--card)); border:1px solid var(--line); border-radius:20px; padding:26px}
.feature h3{font-size:1.5rem; margin-bottom:8px}
.feature p{color:var(--muted); margin-bottom:16px}
.feature .art{aspect-ratio:16/10; border-radius:14px; display:grid; place-items:center; font-size:4rem; color:var(--glow);
              background:radial-gradient(circle at 50% 40%, #2f6a4c, #14291f 75%); border:1px solid var(--line); font-family:Fraunces,serif}
@media(max-width:720px){.feature{grid-template-columns:1fr}}

/* game cards */
.page-title{padding:44px 0 8px}
.page-title h1{font-size:clamp(1.9rem,5vw,2.8rem)}
.page-title p{color:var(--muted); margin-top:8px; max-width:640px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; padding:18px 0 40px}
.game{position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:12px; overflow:hidden}
.game .logo{height:110px; border-radius:12px; display:grid; place-items:center; font-family:Fraunces,Georgia,serif; font-weight:700; font-size:2.6rem; color:#fff8e6;
            text-shadow:0 2px 10px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08)}
.game h3{font-size:1.15rem}
.game p{color:var(--muted); font-size:.9rem; flex:1}
.game .foot{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px}
.game .art{width:100%; height:auto; aspect-ratio:8/5; border-radius:12px; display:block; border:1px solid rgba(255,255,255,.08)}
.game.passive .art{filter:grayscale(.55) brightness(.75)}
.game.passive h3{color:#cfc8b4}
.badge{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--glow); background:rgba(255,207,112,.06)}
.badge.live{color:var(--ok); border-color:rgba(127,212,154,.5); background:rgba(127,212,154,.08)}
.notice{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 18px; color:var(--muted); margin-top:14px}
.notice b{color:var(--ink)}
.notice.warn{border-color:rgba(255,207,112,.5)}

/* forms */
.panel{max-width:440px; margin:40px auto; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px}
.panel h1{font-size:1.6rem; margin-bottom:4px}
.panel .sub{color:var(--muted); margin-bottom:18px; font-size:.95rem}
.tabs{display:flex; gap:6px; margin-bottom:18px; background:rgba(0,0,0,.2); padding:4px; border-radius:999px}
.tabs button{flex:1; padding:9px; border:0; border-radius:999px; background:none; color:var(--muted); font:inherit; cursor:pointer}
.tabs button.on{background:var(--glow); color:#1a1204; font-weight:600}
label{display:block; font-size:.85rem; color:var(--muted); margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=url],select{
  width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:#0f1a17; color:var(--ink); font:inherit}
input:focus,select:focus{outline:2px solid rgba(255,207,112,.45); border-color:var(--glow)}
.panel .btn{width:100%; text-align:center; margin-top:16px}
.sep{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.82rem; margin:18px 0 4px}
.sep::before,.sep::after{content:""; flex:1; height:1px; background:var(--line)}
.sso{display:flex; flex-direction:column; gap:8px}
.sso .btn{margin-top:0; display:flex; gap:10px; align-items:center; justify-content:center}
.msg{margin-top:12px; font-size:.9rem; min-height:1.2em}
.msg.err{color:var(--bad)} .msg.ok{color:var(--ok)}
.linkbtn{background:none; border:0; color:var(--glow); cursor:pointer; font:inherit; text-decoration:underline; padding:0}
.hint{font-size:.8rem; color:var(--muted); margin-top:10px}

/* admin */
.admin-bar{display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 16px}
.admin-bar button{padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--muted); font:inherit; cursor:pointer}
.admin-bar button.on{background:var(--glow); color:#1a1204; font-weight:600; border-color:var(--glow)}
.tools{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.tools input,.tools select{width:auto; min-width:180px}
table.tbl{width:100%; border-collapse:collapse; font-size:.92rem; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
table.tbl th,table.tbl td{padding:10px 12px; text-align:left; border-bottom:1px solid rgba(201,164,92,.14); vertical-align:middle}
table.tbl th{color:var(--brass); font-weight:500; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.18)}
.tbl-scroll{overflow-x:auto; border-radius:14px}
.st{font-size:.74rem; padding:3px 10px; border-radius:999px; border:1px solid var(--line); white-space:nowrap}
.st.approved{color:var(--ok); border-color:rgba(127,212,154,.5)} .st.pending{color:var(--warn)} .st.rejected,.st.disabled{color:var(--bad); border-color:rgba(255,138,122,.5)}
.row-actions{display:flex; gap:6px; flex-wrap:wrap}
.counts{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.count{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 18px; min-width:120px}
.count b{display:block; font-family:Fraunces,serif; font-size:1.6rem; color:var(--glow)}
.count span{font-size:.8rem; color:var(--muted)}
.game-edit{display:grid; grid-template-columns:44px 1.2fr 1fr 1.4fr auto; gap:10px; align-items:center; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:8px}
.game-edit .mini{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-weight:700; font-family:Fraunces,serif; color:#fff8e6}
.game-edit input,.game-edit select{padding:8px 10px; font-size:.88rem}
@media(max-width:820px){.game-edit{grid-template-columns:44px 1fr; } .game-edit > *:nth-child(n+3){grid-column:1 / -1}}

footer.site-footer{border-top:1px solid var(--line); margin-top:40px; padding:24px 0 30px; color:#7f8a7f; font-size:.85rem; position:relative; z-index:1}
footer.site-footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
footer.site-footer a{color:var(--muted)}
.hide{display:none!important}
@media (prefers-reduced-motion: reduce){ .fly,.flame{animation:none} .fly{opacity:.6} html{scroll-behavior:auto} }
@media(max-width:560px){ .site-header .wrap{height:auto; padding-top:10px; padding-bottom:10px; flex-wrap:wrap} nav.main{margin-left:0; justify-content:flex-start} }

/* legal pages */
.legal{max-width:760px; margin:0 auto; padding:44px 0 20px}
.legal h1{font-size:clamp(1.8rem,5vw,2.4rem); margin-bottom:6px}
.legal h3{font-size:1.1rem; color:var(--glow); margin:24px 0 6px}
.legal p{color:var(--ink); margin:0 0 10px}
.legal .legal-meta{color:var(--muted); font-size:.85rem}

/* games page subtitle: one line on wide screens, "Top of the World Series" in a heavier face */
.page-title p.series-line{max-width:none; white-space:nowrap}
.series-line .series{font-family:Fraunces,Georgia,serif; font-weight:700; font-size:1.3rem; color:var(--glow); letter-spacing:.01em}
@media(max-width:820px){.page-title p.series-line{white-space:normal}}