* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #222;
  font-family: -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: none;
}
#app {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #2b2b2b;
}
#title {
  flex: 0 0 auto; height: 36px; display: flex; align-items: center; gap: 4px; padding: 0 6px;
  background: #1e1e1e; color: #fff; position: relative;
}
#title button {
  width: 34px; height: 34px; border: 0; background: none; color: #fff; padding: 4px;
}
#title button:disabled { color: #6e6e6e; }
#title svg { width: 100%; height: 100%; }
#page-title {
  position: absolute; left: 90px; right: 90px; margin: 0; text-align: center;
  font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
#dots { margin-left: auto; display: flex; gap: 6px; padding-right: 6px; }
#dots i { width: 8px; height: 8px; border-radius: 50%; background: #666; }
#dots i.on { background: #fff; }
#message-bar { flex: 0 0 auto; position: relative; }
#body { flex: 1 1 auto; display: flex; min-height: 0; }
#body.tool-right { flex-direction: row-reverse; }
#tool-bar, #grid { position: relative; height: 100%; }
#grid { flex: 1 1 auto; }
#tool-bar { flex: 0 0 auto; }

.btn {
  position: absolute; border-radius: 7px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 4px 4px 3px; color: #1c1d1e; transition: filter 60ms, transform 60ms;
}
.btn.down { filter: brightness(0.8); transform: scale(0.97); }
.btn img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; pointer-events: none; }
.btn span {
  flex: 0 0 auto; max-width: 100%; text-align: center; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
.btn.no-pic { justify-content: center; }
.btn.no-pic span { white-space: normal; }
.btn .link {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: #2a2a2a; pointer-events: none;
}
.btn .link::after {
  content: ""; position: absolute; left: 5px; top: 4.5px; width: 4px; height: 4px;
  border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);
}
.empty { position: absolute; border-radius: 7px; background: rgba(255, 255, 255, 0.04); }
.scroll { background: #555 !important; color: #fff; justify-content: center; font-size: 28px; }

.window {
  position: absolute; background: #fff; border: 2px solid #1c1d1e; border-radius: 7px;
  display: flex; align-items: stretch; gap: 2px; padding: 3px 6px; overflow: hidden;
}
.window .word {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-width: 40px; color: #111;
}
.window .word img { flex: 1 1 auto; min-height: 0; height: 0; width: auto; max-width: 90px; object-fit: contain; }
.window .word span { flex: 0 0 auto; white-space: nowrap; }

#setup {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center;
  touch-action: auto; -webkit-user-select: text; user-select: text;
}
#setup[hidden] { display: none; }
#setup form {
  background: #fff; border-radius: 12px; padding: 18px 22px; width: min(460px, 92vw); max-height: 92vh; overflow: auto;
  display: flex; flex-direction: column; gap: 10px; font-size: 16px;
}
#setup h2 { margin: 0; font-size: 20px; }
#setup p { margin: 0; color: #444; }
#setup label { display: flex; flex-direction: column; gap: 4px; }
#setup label.check { flex-direction: row; align-items: center; gap: 8px; }
#setup input[type=password], #setup select { font-size: 16px; padding: 8px; border: 1px solid #bbb; border-radius: 8px; }
#setup .row { display: flex; gap: 10px; }
#setup button { font-size: 16px; padding: 9px 16px; border-radius: 8px; border: 0; background: #e6e8ee; }
#setup button[type=submit] { background: #2f6df6; color: #fff; }
#setup-problem { color: #b00020 !important; min-height: 1em; }
#setup hr { width: 100%; border: 0; border-top: 1px solid #ddd; margin: 4px 0; }
#setup h2 small { font-size: 12px; font-weight: 400; color: #888; }