* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0f; }
body { font-family: system-ui, -apple-system, "Segoe UI", Meiryo, sans-serif; color: #e8eef7;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }

#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; }

#topbar { position: fixed; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; background: rgba(12,14,20,.82); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); z-index: 10; font-size: 13px; }
#topbar .spacer { flex: 1; }
#title { font-weight: 800; letter-spacing: 1px; font-size: 13px; color: #ffd54a; }
#fps { font-variant-numeric: tabular-nums; color: #8b93a3; font-size: 12px; }
.tb { background: rgba(255,255,255,.08); color: #e8eef7; border: 1px solid rgba(255,255,255,.14);
  padding: 6px 10px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tb:active { transform: scale(.94); }
.tb.on { background: #ffd54a; color: #1a1300; }
.brush { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b9c1cf; }
.brush input[type=range] { width: 90px; }
.brush select { background: rgba(255,255,255,.08); color: #e8eef7; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 4px 6px; font-size: 12px; font-weight: 700; }
.brush select option { background: #141a26; }

#palette { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(12,14,20,.9);
  border-top: 1px solid rgba(255,255,255,.1); z-index: 10; }
.el { display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.12); cursor: pointer; font-size: 12px; font-weight: 700; }
.el .sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.35); }
.el.active { border-color: #ffd54a; background: rgba(255,213,74,.16); }

#rxlog { position: fixed; right: 10px; top: 52px; display: flex; flex-direction: column; gap: 5px; z-index: 9; pointer-events: none; align-items: flex-end; max-width: 68vw; }
.rxline { background: rgba(12,14,20,.82); border: 1px solid rgba(255,255,255,.14); border-left: 3px solid #ffd54a;
  color: #eef2f8; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 7px; white-space: nowrap;
  animation: rxin .25s ease; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.rxline.out { animation: rxout .4s ease forwards; }
@keyframes rxin { from { opacity: 0; transform: translateX(16px); } }
@keyframes rxout { to { opacity: 0; transform: translateX(16px); } }
@media (max-width: 640px) { #rxlog { top: auto; bottom: 92px; } .rxline { font-size: 11px; } }

.panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(92vw, 460px);
  max-height: 80vh; overflow-y: auto; background: #141a26; border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; padding: 18px; z-index: 30; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.panel.hidden { display: none; }
.panel h2 { font-size: 16px; margin: 10px 0 8px; color: #ffd54a; }
.panel h2:first-child { margin-top: 0; }
.panel ul { padding-left: 18px; line-height: 1.7; font-size: 13px; }
.close { margin-top: 14px; width: 100%; padding: 10px; border-radius: 10px; border: none; background: #ffd54a; color: #1a1300; font-weight: 800; cursor: pointer; }

@media (max-width: 640px) {
  #topbar { flex-wrap: wrap; height: auto; padding: 6px 8px; gap: 6px; }
  .brush input { width: 70px; }
  #title { display: none; }
}