* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #14161c; font-family: system-ui, sans-serif; color: #fff; }
#stage { position: relative; width: min(100vw, 160vh); aspect-ratio: 960 / 600; }
canvas { width: 100%; height: 100%; display: block; background: #3f9140; }
.panel { position: absolute; inset: 0; margin: auto; width: min(90%, 480px); height: fit-content; padding: 24px 28px; text-align: center; background: rgba(15, 18, 28, 0.9); border: 3px solid #ffd60a; border-radius: 18px; }
.panel[hidden] { display: none; }
h1 { margin: 0 0 8px; color: #ffd60a; font-size: clamp(22px, 4vw, 36px); }
ul { text-align: left; margin: 12px auto; padding-left: 20px; line-height: 1.6; }
button { font: bold 22px system-ui, sans-serif; padding: 10px 34px; margin: 8px 6px; border: 0; border-radius: 12px; background: #e63946; color: #fff; cursor: pointer; }
button:hover { background: #ff4d5a; }
button.alt { background: #3a4156; }
small { display: block; opacity: 0.7; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 18px; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #fff3; }
tr.me { background: rgba(230, 57, 70, 0.35); font-weight: bold; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -2px; border: 2px solid #fff; }