html, body { margin: 0; padding: 0; height: 100%; background: #0d1117; overflow: hidden; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #e6edf3; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

#hud { position: fixed; top: 10px; left: 10px; right: 10px; display: flex; gap: 10px; flex-wrap: wrap; z-index: 10; pointer-events: none; }
.pill { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 10px 14px; font-size: 14px; backdrop-filter: blur(8px); }

#controls { position: fixed; left: 0; right: 0; bottom: 0; height: 255px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; z-index: 10; pointer-events: none; }
#joystickArea { position: relative; width: 190px; height: 190px; margin-left: 12px; margin-bottom: 12px; pointer-events: auto; touch-action: none; }
#joystickBase { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); }
#joystickKnob { position: absolute; width: 72px; height: 72px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(99, 186, 255, 0.35); border: 1px solid rgba(99, 186, 255, 0.6); }

#buttons { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; justify-content: flex-end; padding-right: 12px; pointer-events: auto; }
button { background: rgba(255,255,255,0.08); color: #e6edf3; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 14px 16px; font-size: 16px; min-width: 180px; }
button:active { transform: translateY(1px); }

#modal.hidden { display: none; }
#modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: grid; place-items: center; z-index: 30; }
#modalCard { width: min(720px, 92vw); background: #0f1623; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; box-shadow: 0 16px 60px rgba(0,0,0,0.45); overflow: hidden; }
#modalHeader { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.10); }
#modalTitle { font-weight: 700; }
#modalBody { padding: 14px 16px; max-height: 60vh; overflow: auto; }
#modalFooter { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.10); }
#nameInput { flex: 1; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #e6edf3; padding: 12px 12px; font-size: 16px; outline: none; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.10); font-size: 14px; }
.small { opacity: 0.8; font-size: 12px; }

#fail.hidden { display:none; }
#fail { position: fixed; inset:0; background: rgba(0,0,0,0.70); z-index: 40; display:grid; place-items:center; }
#failCard { width: min(820px, 92vw); background: #0f1623; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; box-shadow: 0 16px 60px rgba(0,0,0,0.55); padding: 16px; }
#bossRow { display:flex; gap: 14px; align-items: center; margin-bottom: 14px; }
#bossImg { width: 92px; height: 92px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }
#bossTitle { font-weight: 800; font-size: 18px; margin-bottom: 6px; }
#bossLine { font-weight: 900; font-size: 18px; letter-spacing: 0.3px; }
#restartAllBtn { width: 100%; min-width: auto; }