body { margin: 0; overflow: hidden; font-family: system-ui, sans-serif; background: #8ecae6; }
canvas { display: block; }
#hud { position: fixed; top: 12px; left: 16px; color: #fff; font-size: 24px; font-weight: bold; text-shadow: 0 2px 4px #0008; display: flex; gap: 24px; pointer-events: none; }
#msg { z-index: 5; pointer-events: auto !important; position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: #0006; text-align: center; text-shadow: 0 2px 4px #0008; pointer-events: none; }
#msg h1 { font-size: 56px; margin: 0 0 8px; }
#msg p { font-size: 26px; margin: 4px; }
#msg .small { font-size: 18px; line-height: 1.6; }
#msg.hidden { display: none; }
#center { display: none; position: fixed; top: 22%; left: 0; right: 0; text-align: center; color: #fff; font-size: 34px; font-weight: bold; text-shadow: 0 2px 6px #000a; pointer-events: none; }
#menu { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: #123c; text-align: center; text-shadow: 0 2px 4px #0008; }
#menu.hidden { display: none; }
#menu h1 { font-size: 64px; margin: 0 0 4px; }
#menu p { font-size: 24px; margin: 4px; }
#menu .label { margin-top: 18px; font-weight: bold; }
#menu .small { font-size: 16px; margin-top: 20px; }
#menu .row { display: flex; gap: 10px; }
#menu button { font-size: 22px; padding: 10px 20px; border-radius: 10px; border: 3px solid #fff8; background: #0004; color: #fff; cursor: pointer; }
#menu button.on { background: #f59e0b; border-color: #fff; }
#menu #play { margin-top: 26px; font-size: 36px; padding: 14px 60px; background: #22c55e; border-color: #fff; }
#msg button { font-size: 24px; padding: 12px 28px; border-radius: 10px; border: 3px solid #fff8; background: #0004; color: #fff; cursor: pointer; }
#msg button.on { background: #f59e0b; border-color: #fff; }
#msg .split { display: flex; gap: 0; margin-top: 16px; }
#msg .half { width: 380px; min-height: 300px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
#msg .half + .half { border-left: 3px solid #fff6; }
#msg .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#msg .label { font-size: 20px; font-weight: bold; margin-top: 16px; }
#msg .half p.small { margin-top: 18px; }
#settings.hidden { display: none; }
#done { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: #0008; text-align: center; text-shadow: 0 2px 4px #0008; pointer-events: none; }
#done.hidden { display: none; }
#done h1 { font-size: 60px; margin: 0 0 8px; }
#done p { font-size: 28px; margin: 6px; }
#done .gold { color: #fcd34d; font-weight: bold; font-size: 34px; }
#done .small { font-size: 20px; margin-top: 20px; }
#doneBoard { margin: 10px; padding: 10px 24px; background: #0006; border-radius: 12px; font-size: 22px; text-align: left; }
#doneBoard .me { color: #fcd34d; font-weight: bold; }
#rank { position: fixed; top: 80px; right: 20px; z-index: 6; padding: 10px 18px; background: #000a; color: #fff; border-radius: 12px; font-size: 20px; pointer-events: none; }
#rank.hidden { display: none; }
#rank b { color: #fcd34d; }