/* Ludo Kana v9.10e | site.css — shared by landing page and About / Contact / Privacy / Rules pages */
body.site{display:block!important;padding:0!important;min-height:100vh;margin:0;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden;position:relative;
background:linear-gradient(135deg,#ffffff1c 25%,transparent 25%) 0 0/120px 120px,linear-gradient(315deg,#0000001f 25%,transparent 25%) 60px 60px/120px 120px,#1c56b8}
body.site::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 0,#2f74ee66 0,transparent 60%)}
body.site *{box-sizing:border-box}
body.site #menu{max-width:none!important;width:100%!important;text-align:left!important}
body.site a{color:inherit;text-decoration:none}

/* floating game decorations */
.bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bgfx i{position:absolute;font-style:normal;opacity:.13;animation:fx 9s ease-in-out infinite;filter:drop-shadow(0 4px 4px #0006)}
.bgfx i:nth-child(1){left:6%;top:18%;font-size:54px}.bgfx i:nth-child(2){right:7%;top:30%;font-size:70px;animation-delay:-2s}
.bgfx i:nth-child(3){left:12%;top:62%;font-size:60px;animation-delay:-4s}.bgfx i:nth-child(4){right:12%;top:74%;font-size:48px;animation-delay:-6s}
.bgfx i:nth-child(5){left:48%;top:10%;font-size:40px;animation-delay:-3s}.bgfx i:nth-child(6){left:70%;top:52%;font-size:44px;animation-delay:-5s}
@keyframes fx{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-26px) rotate(14deg)}}

/* header */
.sh{position:sticky;top:0;z-index:50;background:linear-gradient(#1b4aa8,#0f3180);border-bottom:3px solid #f5c242;box-shadow:0 4px 14px #0009;padding-top:env(safe-area-inset-top)}
.sh::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:5px;background:linear-gradient(90deg,#ed1c24 0 25%,#00a14b 25% 50%,#ffd21a 50% 75%,#1e90e0 75%);opacity:.95}
.shi{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:6px 14px 4px}
.shi .klogo{flex:none}
.snav{display:flex;gap:6px;margin-left:auto;align-items:center}
.snav a{padding:9px 14px;border-radius:12px;font-weight:800;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:#cfe0ff;border:2px solid transparent;transition:.15s;white-space:nowrap}
.snav a:hover{color:#fff;background:#ffffff1f}
.snav a.here{color:#ffd23c;background:#0b2166;border-color:#f5c242;box-shadow:0 0 10px #ffd23c66}
.dlbtn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:3px solid #ffd23c;border-radius:14px;background:linear-gradient(#3ddc5a,#0a8a2a);color:#fff;font:900 15px system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;padding:10px 16px;cursor:pointer;box-shadow:0 4px 0 #064d17,0 0 14px #ffd23c88;text-shadow:0 2px 0 #0a5a1c;white-space:nowrap;transition:transform .12s}
.dlbtn:hover{transform:translateY(-2px)}.dlbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #064d17}
.dlbtn.xl{font-size:26px;padding:16px 34px;border-radius:18px;animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 4px 0 #064d17,0 0 28px 8px #ffd23caa}}
.shi .dlbtn{flex:none}

/* logo (same artwork as in-game home screen) */
.klogo{display:inline-block;zoom:var(--z,1);text-align:center;line-height:1;padding-top:30px}
.klogo .lt{display:block;white-space:nowrap}
.klogo .lt span{display:inline-block;position:relative;width:54px;height:54px;border-radius:50%;border:3px solid #cfd8e8;background:#fff;font-size:38px;font-weight:900;line-height:48px;margin:0 2px;box-shadow:0 4px 6px #0007}
.klogo .sit{position:absolute;left:50%;top:-28px;width:40px;height:44px;margin-left:-20px;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 2px #0006)}
.klogo .sit .dl{transform-box:fill-box;transform-origin:50% 0;animation:dg 1.8s ease-in-out infinite}.klogo .sit .dl.b{animation-delay:.9s}
.klogo .lt span:nth-child(even) .sit .dl{animation-delay:.45s}
@keyframes dg{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(12deg)}}
.klogo .king{display:block;text-align:right;padding-right:22px;margin-top:24px}
.klogo .kn{position:relative;display:inline-block;line-height:1}
.klogo .kt{display:inline-block;font:900 italic 34px Georgia,'Times New Roman',serif;letter-spacing:3px;padding:0 4px 4px;background:linear-gradient(#fffbd0 0,#ffe066 38%,#ffb300 62%,#d97a00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(1.5px 0 0 #2e1c00) drop-shadow(-1.5px 0 0 #2e1c00) drop-shadow(0 1.5px 0 #2e1c00) drop-shadow(0 -1.5px 0 #2e1c00) drop-shadow(0 3px 2px #0009)}
.klogo .kn::after{content:'';position:absolute;left:0;right:-6px;bottom:-4px;height:5px;border-radius:5px;background:linear-gradient(90deg,#fff0,#ffd23c 25%,#fff3a0 55%,#ffd23c 80%,#fff0);box-shadow:0 2px 0 #2e1c00aa;transform:skewX(-20deg)}
.klogo .kn .sit{top:-26px}
/* compact one-line logo for the header */
.klogo.h{--z:.62;padding-top:30px;display:flex;align-items:flex-end;gap:10px;text-align:left}
.klogo.h .king{margin:0 0 4px;padding:0}
.klogo.h .kn .sit{display:none}
@media(prefers-reduced-motion:reduce){.klogo .sit .dl,.bgfx i,.dlbtn.xl{animation:none}}

/* hero (landing) */
.hero{position:relative;z-index:1;text-align:center;padding:34px 16px 30px;max-width:900px;margin:0 auto}
.hero .klogo{--z:1.35;margin:10px 0 0}
.hero h2{margin:14px 0 4px;font-size:24px;font-weight:900;color:#fff;text-shadow:0 3px 0 #0a2a70,0 6px 10px #0008}
.hero p{margin:0 auto 18px;font-size:18px;opacity:.95;max-width:520px}
.hero .hint{margin-top:16px;min-height:44px;font-size:16px}
.feat{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin:6px auto 28px;padding:0 14px}
.feat div{background:linear-gradient(#2a62c9cc,#123a8ccc);border:3px solid #f5c242;border-radius:16px;padding:14px 10px;text-align:center;font-weight:800;box-shadow:0 4px 0 #0a2a70,0 0 14px #ffd23c44}
.feat b{display:block;font-size:34px;margin-bottom:4px;filter:drop-shadow(0 3px 2px #0007)}
.feat small{display:block;font-weight:600;opacity:.85;margin-top:3px;font-size:12.5px}

/* inner pages */
.kpg{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:30px 14px 36px}
.ph{text-align:center;margin:6px 0 24px}
.ph h1{display:inline-block;margin:0;padding:10px 34px 12px;font-size:clamp(26px,6vw,40px);font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#fff;background:linear-gradient(#ffd23c,#e59a00);border:4px solid #fff3a0;border-radius:18px;text-shadow:0 3px 0 #a56a00,0 0 8px #a56a00;box-shadow:0 6px 0 #8a5200,0 0 22px #ffd23c88;transform:rotate(-1.2deg)}
.ph p{margin:16px auto 0;max-width:600px;font-size:17px;opacity:.95}
.panel{background:#0b2a74cc;border:3px solid #ffd23c;border-radius:20px;padding:18px 20px;margin:18px 0;backdrop-filter:blur(3px);box-shadow:0 5px 0 #06194a,0 0 16px #ffd23c33}
.panel h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:21px;font-weight:900;color:#ffd23c;text-shadow:0 2px 0 #000a;letter-spacing:.5px}
.panel h2 .pic{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(#2f7bff,#0d3fa8);border:2px solid #ffd23c;box-shadow:0 3px 0 #06194a}
.panel h3{margin:16px 0 4px;color:#ffe9a0;font-size:16px}
.panel p,.panel li{line-height:1.65;font-size:16px;color:#eaf1ff}
.panel p{margin:8px 0}.panel ul{padding-left:22px;margin:8px 0}.panel li{margin:5px 0}
.panel a.lnk{color:#ffd23c;font-weight:700;text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:10px}
.kc{background:#0e2f7c;border:2px solid #ffffff33;border-radius:14px;padding:12px 14px;border-left:6px solid var(--c,#ffd23c)}
.kc b{display:block;font-size:16px;color:#fff;margin-bottom:3px}.kc span{font-size:14.5px;color:#cfe0ff;line-height:1.5}
.steps{list-style:none;padding:0!important;counter-reset:s;margin:10px 0}
.steps li{counter-increment:s;position:relative;padding:10px 12px 10px 58px;margin:10px 0;background:#0e2f7c;border-radius:14px;border:2px solid #ffffff2a;min-height:52px}
.steps li::before{content:counter(s);position:absolute;left:10px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:50%;background:var(--c,#1e90e0);border:3px solid #fff;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #0006;text-shadow:0 2px 0 #0007}
.steps li:nth-child(4n+1){--c:#1e90e0}.steps li:nth-child(4n+2){--c:#ed1c24}.steps li:nth-child(4n+3){--c:#00a14b}.steps li:nth-child(4n){--c:#e6a800}
.tag{display:inline-block;padding:2px 10px;border-radius:20px;background:#ffd23c;color:#222;font-weight:900;font-size:12px;letter-spacing:.5px;margin-right:6px;vertical-align:middle}
.note{background:#ffd23c22;border:2px dashed #ffd23c;border-radius:14px;padding:10px 14px;margin:12px 0;font-size:15px}
.faq details{background:#0e2f7c;border:2px solid #ffffff2a;border-radius:14px;margin:8px 0;padding:0}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:'＋';color:#ffd23c;font-weight:900}.faq details[open] summary::after{content:'－'}
.faq summary::-webkit-details-marker{display:none}.faq details p{margin:0;padding:0 14px 14px}
.cta{position:relative;z-index:1;text-align:center;margin:10px auto 40px;max-width:900px;padding:0 14px}
.cta .box{background:linear-gradient(#2a62c9,#123a8c);border:3px solid #ffd23c;border-radius:22px;padding:22px 16px;box-shadow:0 5px 0 #06194a,0 0 22px #ffd23c55}
.cta h2{margin:0 0 4px;font-size:24px;color:#ffd23c;text-shadow:0 2px 0 #000a}.cta p{margin:0 0 14px;opacity:.9}

/* contact */
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:10px 0}
.cg a{display:flex;align-items:center;gap:12px;background:#0e2f7c;border:2px solid #ffffff33;border-radius:14px;padding:12px 14px;font-weight:800;transition:.15s}
.cg a:hover{border-color:#ffd23c;transform:translateY(-2px)}
.cg a i{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:20px;font-weight:900;background:var(--b,#1e90e0);border:2px solid #fff;box-shadow:0 3px 0 #0006}
.cg a small{display:block;font-weight:600;opacity:.8;font-size:13px;overflow-wrap:anywhere}
.kform{display:grid;gap:10px;margin-top:8px}
.kform label{font-weight:800;font-size:14px;color:#ffe9a0}
.kform input,.kform select,.kform textarea{width:100%;padding:12px 14px;border-radius:12px;border:3px solid #6f93e0;background:#081c55;color:#fff;font:16px system-ui,sans-serif;outline:none}
.kform input:focus,.kform select:focus,.kform textarea:focus{border-color:#ffd23c;box-shadow:0 0 10px #ffd23c88}
.kform textarea{min-height:130px;resize:vertical}
.hid{display:none!important}

/* footer */
.sf{position:relative;z-index:1;margin-top:30px;background:linear-gradient(#0f3180,#071a4d);border-top:3px solid #f5c242;padding:0 14px calc(18px + env(safe-area-inset-bottom))}
.sf::before{content:'';display:block;height:8px;margin:0 -14px 22px;background:linear-gradient(90deg,#ed1c24 0 25%,#00a14b 25% 50%,#ffd21a 50% 75%,#1e90e0 75%)}
.sfi{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px}
.sf h4{margin:0 0 10px;color:#ffd23c;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 2px 0 #000a}
.sf .flinks a{display:block;padding:6px 0;color:#cfe0ff;font-weight:700;font-size:15px}
.sf .flinks a:hover{color:#ffd23c;padding-left:4px}
.sf .flinks a::before{content:'🎲 ';font-size:12px}
.sf .about p{margin:10px 0 0;font-size:14px;line-height:1.6;color:#b9ccf5}
.sf .about .klogo{--z:.75;padding-top:30px;margin-left:0;text-align:left}
.sf .about .klogo .king{padding-right:0}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;border:3px solid #fff;box-shadow:0 4px 0 #0007;background:var(--b)}
.soc a:hover{transform:translateY(-3px)}
.sfb{max-width:1000px;margin:22px auto 0;padding-top:14px;border-top:2px dashed #ffffff33;text-align:center;font-size:13px;color:#9db6ec;line-height:1.7}
@media(max-width:820px){.sfi{grid-template-columns:1fr 1fr}.sf .about{grid-column:1/-1}}
@media(max-width:760px){
.shi{flex-wrap:wrap;padding:6px 10px 0;gap:6px}
.shi .dlbtn{margin-left:auto;padding:9px 12px;font-size:13px}
.snav{order:3;width:100%;margin:0 -2px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.snav::-webkit-scrollbar{display:none}
.snav a{padding:7px 12px;font-size:12.5px;flex:none}
.hero .klogo{--z:1.15}.dlbtn.xl{font-size:22px;padding:14px 26px}
.panel{padding:14px}.panel h2{font-size:18px}
.sh::after{bottom:-7px}
}
@media(max-width:420px){.sfi{grid-template-columns:1fr}.klogo.h{--z:.52}}

.pawnrow{display:flex;justify-content:center;gap:16px;margin:6px 0 10px;flex-wrap:wrap}
.pawnrow .kpw{width:64px;height:70px;overflow:visible;filter:drop-shadow(0 4px 3px #0007)}
.pawnrow .kpw .dl{transform-box:fill-box;transform-origin:50% 0;animation:dg 1.8s ease-in-out infinite;min-height:0;padding:0;display:inline}
.pawnrow .kpw:nth-child(even) .dl{animation-delay:.5s}.pawnrow .kpw .dl.b{animation-delay:.9s}
body.site svg .dl{min-height:0;padding:0;display:inline}

@media(max-width:560px){.feat{grid-template-columns:repeat(2,1fr)}}