:root {
  --paper: #f4f1e8;
  --ink: #1a1812;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  -webkit-tap-highlight-color: transparent;
}
#game {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  display: block;
}

/* connection dot */
#status {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #bbb; z-index: 5;
}
#status.on { background: #2e9e5b; }
#status.off { background: #d64541; }

#settings {
  position: fixed; top: calc(6px + env(safe-area-inset-top)); right: 10px;
  background: none; border: 2px solid var(--ink); border-radius: 6px;
  color: var(--ink); font: bold 16px/1 inherit;
  font-family: inherit;
  width: 34px; height: 34px; z-index: 5;
}

/* chat bar */
#chatbar {
  position: fixed; left: 0; right: 0;
  bottom: calc(8px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; padding: 0 10px; z-index: 5;
}
#chatinput {
  flex: 1; min-width: 0;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font: 15px/1 inherit; font-family: inherit;
  padding: 10px 12px;
  outline: none;
}
#chatsend {
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font: bold 16px/1 inherit; font-family: inherit;
  padding: 0 16px;
}

/* boot / picker overlay */
#boot {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(244, 241, 232, 0.88);
  display: flex; align-items: center; justify-content: center;
}
#boot.hidden { display: none; }
.card {
  text-align: center; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--paper);
  padding: 22px 26px; max-width: 320px; width: calc(100% - 40px);
}
.card h1 { font-size: 26px; letter-spacing: 4px; }
#bootcat { width: 64px; height: 80px; margin: 8px auto; image-rendering: pixelated; display: block; }
.sub { font-size: 12px; opacity: 0.75; margin-bottom: 10px; }
#swatches { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
#swatches button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
}
#swatches button.sel { border-color: var(--ink); }
#nameinput {
  width: 100%; text-align: center;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font: 15px/1 inherit; font-family: inherit;
  padding: 10px; margin-bottom: 12px; outline: none;
}
#enter {
  width: 100%; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font: bold 16px/1 inherit; font-family: inherit;
  padding: 12px; cursor: pointer;
}