* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05060a; font-family: system-ui, sans-serif; color: #fff; }
canvas { display: block; }
#menu, #result { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(5, 8, 20, 0.88); text-align: center; padding: 20px; z-index: 5; }
#menu[hidden], #result[hidden], #hud[hidden] { display: none; }
h1 { font-size: 44px; margin: 0; }
.sub { margin: 0 0 8px; color: #b8c4e0; }
.row { display: flex; align-items: center; gap: 14px; }
.row > span { width: 70px; text-align: right; color: #b8c4e0; }
#lines, #dirs { display: flex; gap: 8px; }
.opt { border: 3px solid transparent; border-radius: 10px; padding: 8px 16px; font-weight: bold; font-size: 20px; cursor: pointer; background: #1c2540; color: #fff; }
.opt.sel { border-color: #fff; }
.opt.line { width: 56px; height: 56px; border-radius: 50%; padding: 0; }
#dirs .opt { font-size: 16px; }
#play { margin-top: 8px; font-size: 22px; padding: 14px 28px; border: 0; border-radius: 12px; background: #2f7bff; color: #fff; cursor: pointer; font-weight: bold; }
.help { max-width: 640px; font-size: 14px; line-height: 1.7; color: #c8d2ea; margin-top: 10px; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 12px; align-items: center; }
#badge { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: bold; border: 3px solid #fff; }
#next { background: rgba(0, 0, 0, 0.55); padding: 8px 14px; border-radius: 10px; }
#nextname { font-size: 20px; font-weight: bold; }
#nextdist { font-size: 14px; color: #cfd8ee; }
#score { margin-left: auto; background: rgba(0, 0, 0, 0.55); padding: 8px 14px; border-radius: 10px; font-size: 18px; }
#msg { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); max-width: 80%; text-align: center; font-size: 26px; font-weight: bold; text-shadow: 0 2px 6px #000; background: rgba(0, 0, 0, 0.35); padding: 6px 16px; border-radius: 10px; }
#msg:empty { display: none; }
#bottom { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 14px; align-items: flex-end; background: rgba(0, 0, 0, 0.55); padding: 10px 16px; border-radius: 12px; }
#speed { font-size: 46px; font-weight: bold; line-height: 1; color: #6dff8a; text-align: center; }
#limit { width: 54px; height: 54px; border-radius: 50%; border: 5px solid #e02020; background: #fff; color: #000; display: grid; place-items: center; font-weight: bold; font-size: 22px; }
.u { font-size: 12px; color: #b8c4e0; text-align: center; }
#levercol { width: 220px; }
#lever { position: relative; height: 16px; background: #222; border-radius: 8px; overflow: hidden; margin: 4px 0; }
#lever::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; }
#leverfill { position: absolute; top: 0; bottom: 0; }
#doors { font-size: 14px; font-weight: bold; }