* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1b2430;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: #e8f0ef; }
#scene { position: fixed; inset: 0; display: block; touch-action: none; }
#marquee { display: none; position: fixed; border: 1px solid #7dffe8;
  background: rgba(63,214,196,.14); pointer-events: none; z-index: 5; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.bar-top { position: absolute; top: 10px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: rgba(20,28,38,.82); border: 1px solid #35505a; border-radius: 8px;
  padding: 6px 10px; font-size: 13px; letter-spacing: .03em; }
.chip.shard { color: #ffc94d; }
.bar-bases { position: absolute; top: 10px; right: 12px; width: min(240px, 42vw); }
.hpwrap { background: rgba(20,28,38,.82); border: 1px solid #35505a; border-radius: 8px;
  padding: 5px 8px; margin-bottom: 6px; }
.hplabel { font-size: 10px; letter-spacing: .12em; opacity: .8; display: block; }
.hpfill { height: 7px; border-radius: 4px; margin-top: 3px; transition: width .25s; }
.hpfill.p { background: linear-gradient(90deg, #1d6e66, #3fd6c4); }
.hpfill.e { background: linear-gradient(90deg, #8e2f45, #ff5e7a); }

.bar-build { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: center;
  width: min(96vw, 560px); }
.btn { pointer-events: auto; cursor: pointer; border-radius: 10px; border: 1px solid #3fd6c4;
  background: rgba(29,110,102,.9); color: #eafff9; font-size: 13px; padding: 10px 14px;
  font-family: inherit; letter-spacing: .02em; }
.btn:active { transform: translateY(1px); }
.btn.ghost { border-color: #35505a; background: rgba(20,28,38,.85); color: #b9d2cf; }
.btn.off { opacity: .45; }
.btn.big { font-size: 18px; padding: 14px 34px; }

#stick { position: absolute; right: 18px; bottom: 18px; width: 92px; height: 92px;
  border-radius: 50%; background: rgba(20,28,38,.6); border: 1px solid #35505a;
  pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(63,214,196,.55);
  border: 1px solid #7dffe8; }

#msg { position: absolute; top: 72px; left: 50%; transform: translateX(-50%);
  background: rgba(20,28,38,.88); border: 1px solid #ffc94d; color: #ffd97a;
  padding: 8px 16px; border-radius: 10px; font-size: 14px; opacity: 0;
  transition: opacity .3s; pointer-events: none; white-space: nowrap; }
#msg.show { opacity: 1; }

#overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(12,17,24,.78); backdrop-filter: blur(4px); z-index: 20; }
.obox { max-width: min(92vw, 620px); text-align: center; padding: 28px 30px;
  border: 1px solid #3fd6c4; border-radius: 18px; background: rgba(22,31,42,.95); }
.obox h2 { font-size: 26px; letter-spacing: .06em; color: #7dffe8; margin-bottom: 6px; }
.otag { color: #ffc94d; font-size: 14px; margin-bottom: 12px; letter-spacing: .08em; }
.obox p { font-size: 14px; line-height: 1.55; margin-bottom: 12px; color: #cfdfdd; }
.ohow { text-align: left; font-size: 13px; line-height: 1.8; margin: 0 0 16px 18px; color: #a8bfbb; }
.ohow b { color: #e8f0ef; }

@media (max-width: 640px) {
  .bar-build { bottom: 118px; }
  #stick { bottom: 16px; right: 16px; }
  .btn { font-size: 12px; padding: 9px 10px; }
  .bar-bases { width: 46vw; }
}