* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #fff;
  color: #111;
  height: 100dvh;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#app {
  height: 100dvh;
  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);
}

header h1 {
  text-align: center;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 5.5vmin, 2.6rem);
  padding: clamp(6px, 1.5vmin, 16px) 0 clamp(2px, 1vmin, 10px);
}

/* ── Axes (anchored to the board so they always hug it) ── */
.axis {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: clamp(9px, 1.9vmin, 14px);
  text-align: center;
  color: #111;
  pointer-events: none;
}
#axisLeft {
  flex-direction: column;
  top: 0;
  bottom: 0;
  right: calc(100% + 2px);
  width: clamp(42px, 8.5vw, 80px);
  padding: 2% 0;
}
#axisLeft .varrow {
  flex: 1;
  width: 2px;
  max-height: 42%;
  background: #111;
  position: relative;
  margin: 10px 0;
}
#axisLeft .varrow::before, #axisLeft .varrow::after {
  content: "";
  position: absolute;
  left: 50%;
  border: 5px solid transparent;
}
#axisLeft .varrow::before { top: -9px; transform: translateX(-50%); border-bottom-color: #111; }
#axisLeft .varrow::after { bottom: -9px; transform: translateX(-50%); border-top-color: #111; }
#axisBottom { left: 0; right: 0; top: calc(100% + 8px); }
#axisBottom .harrow {
  width: clamp(60px, 22vmin, 220px);
  height: 2px;
  background: #111;
  position: relative;
}
#axisBottom .harrow::before, #axisBottom .harrow::after {
  content: "";
  position: absolute;
  top: 50%;
  border: 5px solid transparent;
}
#axisBottom .harrow::before { left: -9px; transform: translateY(-50%); border-right-color: #111; }
#axisBottom .harrow::after { right: -9px; transform: translateY(-50%); border-left-color: #111; }

/* ── Board ── */
#boardBox {
  container-type: size;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* left/bottom padding reserves room for the absolutely-anchored axes */
  padding: 4px clamp(8px, 2vw, 24px) 40px calc(clamp(8px, 2vw, 24px) + clamp(42px, 8.5vw, 80px));
}
#board {
  position: relative;
  aspect-ratio: 15 / 16;
  height: min(100cqh, calc(100cqw * 16 / 15));
  touch-action: none;
  cursor: crosshair;
  container-type: size;
}
.zone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  white-space: pre-line;
  color: #131313;
  line-height: 1.15;
  pointer-events: none;
}
.zone.z-big   { font-size: 5.6cqw; }
.zone.z-mid   { font-size: 4.4cqw; }
.zone.z-small { font-size: 2.5cqw; }
.zone.z-tiny  { font-size: 2.4cqw; font-weight: 700; }
.zone.z-back  { font-size: 4.9cqw; }
.zone span { position: relative; z-index: 1; } /* labels above later-painted zone rects */
.zone.z-back span { transform: rotate(-33deg); display: block; }
.zone.z-murda { align-items: flex-start; padding-top: 4cqw; }

/* ── Avatars ── */
.avatar {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left .45s cubic-bezier(.22, 1, .36, 1), top .45s cubic-bezier(.22, 1, .36, 1);
  z-index: 2;
  cursor: pointer;
}
.avatar.me { z-index: 3; }
.avatar.no-anim { transition: none; z-index: 4; }
.avatar .face {
  width: clamp(34px, 12cqw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 6.5cqw, 30px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.avatar.me .face { border-width: 4px; }
.avatar .tag {
  margin-top: 2px;
  font-size: clamp(9px, 2.6cqw, 12px);
  font-weight: 700;
  background: rgba(255, 255, 255, .88);
  border-radius: 999px;
  padding: 1px 7px;
  max-width: clamp(84px, 24cqw, 150px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.avatar.offline { opacity: .55; }
.avatar.offline .face { filter: saturate(.35); }

/* ── Bottom bar ── */
#bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px clamp(10px, 3vmin, 24px) 8px;
  min-height: 44px;
}
#meChip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #ddd;
  background: #fafafa;
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#meChip .hint { font-weight: 400; font-size: 11px; color: #999; }
.face { flex: none; }
#chipFace, #prevFace {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
#onlineCount { font-size: 12px; font-weight: 600; color: #444; }
#onlineCount::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38b24a;
  margin-right: 5px;
}

/* ── Dialog ── */
dialog {
  margin: auto;
  border: none;
  border-radius: 18px;
  padding: 20px;
  width: min(92vw, 400px);
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
#dlgForm { display: flex; flex-direction: column; gap: 10px; }
#dlgForm h2 { font-weight: 900; font-size: 1.3rem; }
#dlgPreview { display: flex; justify-content: center; }
#dlgPreview .face { width: 52px; font-size: 28px; border-width: 4px; }
#dlgForm label { font-size: 12px; font-weight: 700; color: #555; display: flex; flex-direction: column; gap: 4px; }
#dlgForm input {
  font: inherit;
  font-size: 16px; /* prevents iOS zoom-on-focus */
  padding: 9px 12px;
  border: 1.5px solid #ccc;
  border-radius: 10px;
  -webkit-user-select: text;
  user-select: text;
}
.plabel { font-size: 12px; font-weight: 700; color: #555; }
.pickgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.pickgrid button {
  font-size: 20px;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #f4f4f4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pickgrid button.sel { border-color: #111; background: #fff; }
.pickgrid.colors button { border-radius: 50%; border: 3px solid transparent; }
.pickgrid.colors button.sel { border-color: #111; }
.pickgrid.colors button i { width: 70%; aspect-ratio: 1; border-radius: 50%; display: block; }
#dlgError { color: #c22; font-size: 13px; font-weight: 600; }
#dlgSubmit {
  font: inherit;
  font-weight: 800;
  font-size: 16px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}
#dlgLeave {
  font: inherit;
  font-size: 13px;
  background: none;
  border: none;
  color: #c22;
  cursor: pointer;
  padding: 4px;
}

/* ── Toast ── */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(64px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}