:root{
  --bg:#07070f; --panel:#0e0e1a; --cyan:#00f0ff; --pink:#ff2fb3;
  --yellow:#ffe14d; --text:#eef2ff; --dim:#8b93b8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,240,255,.08), transparent),
                   radial-gradient(ellipse 60% 40% at 50% 110%, rgba(255,47,179,.07), transparent);
}
.bar{
  width:100%; max-width:960px; display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px;
}
.logo{font-weight:800; letter-spacing:2px; font-size:15px}
.logo-glow{filter:drop-shadow(0 0 6px var(--cyan))}
.live-badge{
  font-size:12px; font-weight:700; letter-spacing:1px; color:var(--cyan);
  border:1px solid rgba(0,240,255,.5); border-radius:999px; padding:5px 12px;
  display:flex; align-items:center; gap:7px;
}
.dot{width:8px;height:8px;border-radius:50%;background:#3dff7a;box-shadow:0 0 8px #3dff7a;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
main{width:100%;max-width:960px;padding:0 20px 40px}
.hero{text-align:center;padding:56px 0 44px}
.hero h1{font-size:clamp(38px,7vw,64px);line-height:1.05;font-weight:900;letter-spacing:-1px}
.neon{color:var(--cyan);text-shadow:0 0 18px rgba(0,240,255,.8),0 0 60px rgba(0,240,255,.4)}
.sub{color:var(--dim);max-width:520px;margin:16px auto 26px;font-size:17px;line-height:1.55}
.cta{
  display:inline-block;background:linear-gradient(135deg,var(--cyan),#00a8ff);color:#04121a;
  font-weight:800;font-size:18px;padding:15px 34px;border-radius:14px;text-decoration:none;
  box-shadow:0 0 24px rgba(0,240,255,.45);transition:transform .15s;
}
.cta:active{transform:scale(.96)}
.hint{margin-top:14px;color:var(--dim);font-size:13px}
.games h2,.how h2,.feedback h2{font-size:22px;margin:34px 0 16px;letter-spacing:.5px}
.game-card{
  display:flex;gap:20px;background:var(--panel);border:1px solid rgba(0,240,255,.18);
  border-radius:18px;padding:20px;margin-bottom:16px;align-items:center;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.game-card.soon{opacity:.85;border-color:rgba(139,147,184,.25)}
.game-art{flex:0 0 120px;height:120px;border-radius:14px;position:relative;overflow:hidden}
.pong-art{background:linear-gradient(160deg,#0b1026,#160b26)}
.pong-art span{position:absolute;inset:0;
  background:
    radial-gradient(circle 10px at 50% 50%, var(--cyan) 60%, transparent 61%),
    linear-gradient(var(--cyan),var(--cyan)) left 18% top 12%/8px 76px no-repeat,
    linear-gradient(var(--pink),var(--pink)) right 18% top 12%/8px 76px no-repeat;
  filter:drop-shadow(0 0 8px var(--cyan));
  animation:bounce 2.2s ease-in-out infinite alternate;
}
@keyframes bounce{from{background-position:50% 50%,left 18% top 12%,right 18% top 12%}to{background-position:62% 38%,left 18% top 12%,right 18% top 12%}}
.sort-art{background:linear-gradient(160deg,#150e2e,#0a1428)}
.sort-art::before{
  content:"";position:absolute;left:22%;right:22%;top:10%;bottom:12%;
  background:linear-gradient(180deg,rgba(0,240,255,.38),rgba(0,240,255,.06));
  clip-path:polygon(0 0,100% 0,64% 60%,64% 92%,36% 92%,36% 60%);
  filter:drop-shadow(0 0 10px rgba(0,240,255,.9));
  animation:spinrock 5s ease-in-out infinite;
  transform-origin:50% 45%;
}
@keyframes spinrock{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.sort-art span{position:absolute;inset:0;
  background:
    radial-gradient(circle 8px at 50% 18%, var(--yellow) 55%, transparent 62%),
    radial-gradient(circle 8px at 50% 62%, var(--pink) 55%, transparent 62%),
    radial-gradient(circle 8px at 30% 80%, var(--green) 55%, transparent 62%),
    radial-gradient(circle 8px at 70% 80%, var(--cyan) 55%, transparent 62%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
  animation:sortfall 2.6s ease-in infinite;
}
@keyframes sortfall{
  0%{background-position:0 -34px,0 0,0 0,0 0}
  55%{background-position:0 30px,0 0,0 0,0 0;opacity:1}
  70%{background-position:0 44px,0 0,0 0,0 0;opacity:0}
  71%{background-position:0 -34px,0 0,0 0,0 0;opacity:0}
  85%{background-position:0 -34px,0 0,0 0,0 0;opacity:1}
  100%{background-position:0 -34px,0 0,0 0,0 0;opacity:1}
}
.farm-art{background:linear-gradient(180deg,#0a0a24 0%,#101a3a 55%,#0c2418 100%)}
.farm-art span{position:absolute;inset:0;
  background:
    radial-gradient(circle 2px at 18% 20%, #fff 60%, transparent 61%),
    radial-gradient(circle 2px at 38% 12%, #fff 60%, transparent 61%),
    radial-gradient(circle 2px at 62% 24%, #fff 60%, transparent 61%),
    radial-gradient(circle 2px at 80% 14%, #fff 60%, transparent 61%),
    radial-gradient(circle 2px at 50% 32%, #fff 60%, transparent 61%),
    radial-gradient(circle 14px at 72% 30%, var(--yellow) 55%, transparent 62%),
    linear-gradient(var(--green),var(--green)) left 12% bottom 18%/34px 10px no-repeat,
    linear-gradient(var(--green),var(--green)) left 42% bottom 18%/34px 10px no-repeat,
    linear-gradient(var(--green),var(--green)) left 70% bottom 18%/34px 10px no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,225,77,.7));
  animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{50%{opacity:.75}}
.breakout-art{background:linear-gradient(180deg,#160b26 0%,#0b1026 60%,#061018 100%)}
.breakout-art span{position:absolute;inset:0;
  background:
    linear-gradient(var(--pink),var(--pink)) left 12% top 16%/30px 10px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left 36% top 16%/30px 10px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) left 60% top 16%/30px 10px no-repeat,
    linear-gradient(var(--pink),var(--pink)) left 24% top 30%/30px 10px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left 48% top 30%/30px 10px no-repeat,
    radial-gradient(circle 9px at 50% 72%, #fff 55%, transparent 62%),
    linear-gradient(var(--green),var(--green)) left 40% bottom 10%/20% 8px no-repeat;
  filter:drop-shadow(0 0 8px rgba(255,47,179,.6));
  animation:twinkle 2.4s ease-in-out infinite;
}
.game-info{flex:1;min-width:0}
.game-meta{display:flex;gap:8px;margin-bottom:8px}
.tag{font-size:11px;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.neon-tag{color:var(--cyan);background:rgba(0,240,255,.12)}
.dim-tag{color:var(--dim)}
.game-info h3{font-size:22px;margin-bottom:6px}
.game-info p{color:var(--dim);font-size:14.5px;line-height:1.5;margin-bottom:14px}
.play-btn{
  display:inline-block;background:var(--pink);color:#fff;font-weight:700;font-size:15px;
  padding:11px 26px;border-radius:12px;text-decoration:none;box-shadow:0 0 18px rgba(255,47,179,.4);
}
.play-btn.disabled{background:rgba(139,147,184,.25);color:var(--dim);box-shadow:none;cursor:default}
.how ol{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.how li{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.how strong{color:var(--cyan);font-size:15px}
.how span{color:var(--dim);font-size:14px;line-height:1.5}
.feedback p{color:var(--dim);margin-bottom:14px;font-size:15px}
.feedback form{display:grid;gap:10px;max-width:520px}
.feedback input,.feedback textarea{
  background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  color:var(--text);padding:13px 15px;font-size:15px;font-family:inherit;resize:vertical;
}
.feedback input:focus,.feedback textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.15)}
.feedback button{
  background:linear-gradient(135deg,var(--cyan),#00a8ff);border:none;color:#04121a;font-weight:800;
  font-size:16px;padding:14px;border-radius:12px;cursor:pointer;
}
.thanks{color:#3dff7a!important;font-weight:600}
footer{text-align:center;padding:26px 20px 40px;color:var(--dim);font-size:13px}
footer .dim{opacity:.6;margin-top:4px}
@media (max-width:560px){ .game-card{flex-direction:column;align-items:stretch} .game-art{flex:none;height:150px} }

/* ---------- AI chat widget ---------- */
#chatFab{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;font-size:26px;
  background:linear-gradient(135deg,#00f0ff,#00a8ff);box-shadow:0 4px 22px rgba(0,240,255,.5);
  transition:transform .15s;
}
#chatFab:active{transform:scale(.9)}
#chatPanel{
  position:fixed;right:14px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:60;
  width:min(350px,calc(100vw - 28px));height:430px;max-height:60vh;
  background:#0e0e1a;border:1px solid rgba(0,240,255,.3);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 44px rgba(0,0,0,.6);
}
#chatPanel[hidden]{display:none}
#chatHead{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;font-weight:800;letter-spacing:1px;font-size:14px;color:#00f0ff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#chatHead button{background:none;border:none;color:#8b93b8;font-size:22px;cursor:pointer;line-height:1}
#chatMsgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5}
.chat-msg.ai{background:rgba(0,240,255,.1);border:1px solid rgba(0,240,255,.2);align-self:flex-start}
.chat-msg.user{background:rgba(255,47,179,.16);border:1px solid rgba(255,47,179,.3);align-self:flex-end}
#chatForm{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08)}
#chatForm input{
  flex:1;background:#07070f;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  color:#eef2ff;padding:11px 13px;font-size:14px;font-family:inherit;
}
#chatForm input:focus{outline:none;border-color:#00f0ff}
#chatForm button{
  width:44px;border:none;border-radius:10px;cursor:pointer;font-size:18px;color:#04121a;
  background:linear-gradient(135deg,#00f0ff,#00a8ff);
}