*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#220d0d;color:#f3f4f6}
header{padding:24px;text-align:center;background:#331010}
header h1{margin:0}
#search{margin-top:12px;padding:10px;width:300px;max-width:90%;border-radius:8px;border:0}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:20px;max-width:1000px;margin:0 auto}
.card{background:#1f2937;border-radius:12px;padding:16px;cursor:pointer;transition:.2s}
.card:hover{transform:scale(1.03);background:#273449}
.card .emoji{font-size:48px}
.card h3{margin:10px 0 6px}
.card p{font-size:14px;color:#9ca3af}
.card button{margin-top:10px;padding:8px 12px;border:0;border-radius:8px;background:#2563eb;color:#eff6ff;font-weight:bold;cursor:pointer}
#player{position:fixed;inset:5%;background:#000;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 40px #000}
#player.hidden{display:none}
.player-head{display:flex;justify-content:space-between;align-items:center;background:#1f2937;padding:10px 14px}
#close{background:#ef4444;color:#fff;border:0;border-radius:8px;padding:8px 12px;cursor:pointer}
#frame{flex:1;width:100%;background:#fff}
footer{text-align:center;padding:20px;color:#9ca3af;font-size:14px}
code{background:#374151;padding:2px 6px;border-radius:6px}