* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #14182a; color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
canvas { display: block; position: fixed; inset: 0; touch-action: none; }

#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.tag span { display: inline-block; font-weight: 800; font-size: 11px; padding: 1px 7px; border-radius: 8px; background: rgba(20, 24, 38, .72); }

.pill { position: fixed; background: rgba(20, 24, 38, .75); border-radius: 14px; padding: 6px 11px; font-weight: 700; font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
#phase { left: calc(10px + env(safe-area-inset-left)); top: 10px; }
#fps { right: calc(10px + env(safe-area-inset-right)); top: 10px; min-width: 64px; text-align: center; }
.bar { position: fixed; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(0, 0, 0, .3); }
.bar i { display: block; height: 100%; width: 0; background: #ffd54a; transition: width .25s linear; }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(10, 14, 28, .35); }
.card { width: min(440px, 100%); max-height: 100%; overflow: auto; background: rgba(20, 24, 38, .92); border-radius: 18px;
  padding: 16px 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
h1 { margin: 0; font-size: 22px; }
h2 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.sub { margin: 4px 0 12px; color: #c8cde0; font-size: 14px; }
label { display: block; font-size: 12px; font-weight: 700; color: #c8cde0; margin-bottom: 4px; }
input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 2px solid #3a4160;
  background: #0f1324; color: #fff; outline: none; }
input:focus { border-color: #ffd54a; }
button { font: inherit; font-weight: 800; font-size: 15px; border: 0; border-radius: 12px; padding: 11px 14px; cursor: pointer;
  background: #ffd54a; color: #1d2230; }
button:disabled { opacity: .6; }
button.ghost { background: rgba(255, 255, 255, .12); color: #fff; }
#go { width: 100%; margin-top: 10px; }
.tips { margin: 10px 0 4px; padding-left: 18px; font-size: 12px; color: #c8cde0; line-height: 1.5; }
.fine { margin: 6px 0 0; font-size: 11px; color: #9aa1bb; line-height: 1.4; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 5px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
th { color: #9aa1bb; font-weight: 700; font-size: 11px; }
.row { display: flex; gap: 8px; margin-top: 12px; }
.row button { flex: 1; }

#mode { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: 24px; width: 84px; height: 84px; border-radius: 50%;
  font-size: 13px; background: rgba(20, 24, 38, .7); color: #fff; border: 2px solid rgba(255, 255, 255, .5); }
#back { position: fixed; right: calc(10px + env(safe-area-inset-right)); top: 44px; }
button.small { font-size: 12px; padding: 6px 10px; }
.hint { left: 50%; bottom: 14px; transform: translateX(-50%); font-weight: 600; font-size: 11px; white-space: nowrap; }
#joy { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
#joy::before { content: ''; position: absolute; left: -55px; top: -55px; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .45); }
#knob { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .8); }