:root{--bg:#0b1020;--bg2:#121a33;--fg:#e7ecf5;--mut:#8a93ab;--acc:#38e7a4;--acc2:#6ea8ff;--danger:#ff5b6e;--card:#152041;--border:#243056;--radius:14px;}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:radial-gradient(1200px 800px at 10% -10%, #1a2553 0%, var(--bg) 60%) fixed;color:var(--fg);font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1040px;margin:0 auto;padding:32px 20px 80px}
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:rgba(11,16,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:1.1rem;color:var(--fg)}.logo{display:inline-block;transform:translateY(1px)}
.nav nav a{margin-left:18px;color:var(--mut);font-weight:500}.nav nav a:hover{color:var(--fg);text-decoration:none}
.hero{padding:56px 0 24px;text-align:center}
.hero h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.1;margin:.2em 0;background:linear-gradient(90deg,#fff 0%,var(--acc) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{color:var(--mut);max-width:620px;margin:0 auto 28px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:600;transition:.15s}
.btn.primary{background:var(--acc);color:#042a1b}.btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(56,231,164,.25);text-decoration:none}
.btn.ghost{border:1px solid var(--border);color:var(--fg)}.btn.ghost:hover{border-color:var(--acc2);text-decoration:none}
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:32px 0}
.game-card{display:block;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);transition:.15s;color:var(--fg)}
.game-card:hover{border-color:var(--acc);transform:translateY(-2px);text-decoration:none}
.game-card h3{margin:.1em 0 .4em;font-size:1.1rem}.game-card p{color:var(--mut);margin:0;font-size:.95rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:40px 0;padding:18px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)}
.stats div{text-align:center;color:var(--mut);font-size:.9rem}.stats span{display:block;font-size:1.6rem;font-weight:700;color:var(--fg)}
.explain{padding:24px 0;color:#cdd5e6}.explain h2{color:#fff}
.game-shell{padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
#game-root{min-height:260px;margin:20px 0;padding:18px;background:var(--bg2);border:1px dashed var(--border);border-radius:var(--radius);color:var(--mut)}
.rules ol,.rules ul{padding-left:20px}.rules li{margin:6px 0}
.posts{list-style:none;padding:0}.posts li{margin:12px 0;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.posts span{color:var(--mut);font-size:.92rem}
table.cookies{width:100%;border-collapse:collapse;margin:16px 0}
table.cookies th,table.cookies td{padding:10px;border-bottom:1px solid var(--border);text-align:left}table.cookies th{color:var(--mut);font-weight:500}
form.contact{display:flex;flex-direction:column;gap:12px;max-width:520px;margin-top:20px}
form.contact label{display:flex;flex-direction:column;gap:6px;color:var(--mut);font-size:.9rem}
form.contact input,form.contact textarea{background:var(--bg2);border:1px solid var(--border);color:var(--fg);padding:10px;border-radius:10px}
form.contact button{padding:12px;border-radius:10px;background:var(--acc);color:#042a1b;font-weight:700;border:0;cursor:pointer}
footer{border-top:1px solid var(--border);padding:40px 20px;color:var(--mut);font-size:.92rem}
.foot-cols{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.foot-cols a{display:block;color:var(--mut);padding:3px 0}.foot-cols a:hover{color:var(--fg)}
.foot-cols h4{color:var(--fg);margin:.2em 0 .6em;font-size:.95rem}.copy{max-width:1040px;margin:24px auto 0;color:var(--mut);font-size:.85rem}
@media(max-width:640px){.nav nav a{margin-left:10px;font-size:.88rem}.hero{padding:36px 0 10px}}

.pp-game input{background:#0b1020;border:1px solid #243056;color:#e7ecf5;padding:8px 12px;border-radius:8px;width:280px;margin-right:8px}
.pp-game button{background:#38e7a4;color:#042a1b;border:0;padding:9px 16px;border-radius:8px;font-weight:700;cursor:pointer}
.pp-help{color:#8a93ab;margin:0 0 14px}
#pp-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.92rem}
#pp-table th,#pp-table td{padding:8px;border-bottom:1px solid #243056;text-align:left}
#pp-table th{color:#8a93ab;font-weight:500}
#pp-table td.hit{background:rgba(56,231,164,.15);color:#9af0cb}
#pp-table td.miss{color:#c9d0e4}
#pp-result{margin-top:14px}