* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, sans-serif; background: #12121a; color: #eee; min-height: 100vh; }
header { display: flex; gap: 16px; align-items: center; padding: 14px 20px; background: #1d1d2b; flex-wrap: wrap; }
header h1 { font-size: 1.2rem; flex: 1; }
header small { color: #9aa; }
#search { padding: 8px 14px; border-radius: 20px; border: 0; background: #2b2b3f; color: #fff; min-width: 220px; }

#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; padding: 24px; }
.card { background: #1d1d2b; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.card:hover, .card:focus { transform: translateY(-4px); box-shadow: 0 8px 24px #7b2cbf66; outline: 2px solid #7b2cbf; }
.cover { aspect-ratio: 1; background: #2b2b3f center/cover no-repeat; display: grid; place-items: center; font-size: 3rem; }
.info { padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.info small { color: #889; }
.empty { grid-column: 1/-1; text-align: center; color: #889; padding: 40px; }

.back { color: #c9a5ff; text-decoration: none; }
#stage { width: min(100%, 1000px); margin: 16px auto; aspect-ratio: 4/3; max-height: 78vh; background: #000; border-radius: 8px; overflow: hidden; }
#game { width: 100%; height: 100%; }
.hint { text-align: center; color: #889; font-size: .8rem; padding: 0 12px 20px; }

.login { display: grid; place-items: center; }
.login form { background: #1d1d2b; padding: 32px; border-radius: 14px; width: min(92%, 340px); display: flex; flex-direction: column; gap: 14px; margin-top: 18vh; }
.login input, .login button { padding: 10px 14px; border-radius: 8px; border: 0; font-size: 1rem; }
.login input { background: #2b2b3f; color: #fff; }
.login button { background: #7b2cbf; color: #fff; cursor: pointer; }
.login .err { color: #ff7b7b; font-size: .9rem; }