html, body { margin: 0; overflow: hidden; background: #000; font-family: system-ui, sans-serif; color: #fff; }
canvas { display: block; }
#hud { position: fixed; top: 10px; left: 10px; background: #000a; padding: 10px 14px; border-radius: 12px; font-size: 18px; line-height: 1.5; }
#msg { position: fixed; top: 18%; width: 100%; text-align: center; font-size: 34px; font-weight: bold; text-shadow: 0 2px 6px #000; pointer-events: none; }
#prompt { position: fixed; bottom: 14%; width: 100%; text-align: center; font-size: 24px; text-shadow: 0 2px 6px #000; pointer-events: none; }
#help { position: fixed; bottom: 8px; width: 100%; text-align: center; font-size: 14px; opacity: .8; text-shadow: 0 1px 3px #000; pointer-events: none; }
#catch { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000c; padding: 20px 30px; border-radius: 16px; text-align: center; font-size: 18px; }
#catch.hidden { display: none; }
#catchName { font-size: 26px; font-weight: bold; margin-bottom: 12px; }
#bar { position: relative; width: 340px; height: 28px; margin: 0 auto 12px; background: #833; border-radius: 14px; overflow: hidden; }
#zone { position: absolute; top: 0; height: 100%; background: #3c4; }
#cursor { position: absolute; top: 0; width: 6px; height: 100%; background: #fff; }
#balls { color: #7fd0ff; }
#dex { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 92vw); max-height: 80vh; overflow: auto; background: #101830f0; border: 3px solid #e63946; border-radius: 16px; padding: 16px 20px; }
#dex.hidden { display: none; }
#dex h2 { margin: 0 0 10px; text-align: center; }
#dex .row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 6px 0; background: #fff1; border-radius: 10px; font-size: 17px; }
#dex .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; flex: none; }
#dex .unknown { opacity: .5; }
#dex .tip { text-align: center; opacity: .7; margin-top: 8px; font-size: 14px; }