/* Chrome specific to the live game. Tokens, page shell, buttons and the
   board itself come from shared.css — every colour below is a token. */

/* connection chip */
.chip {
  font-size: .8rem;
  padding: 5px 12px 5px 24px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--muted);
  position: relative;
  white-space: nowrap;
}
.chip::before {
  content: "";
  position: absolute; left: 10px; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--gold);
}
.chip[data-state="waiting"]::before { animation: pulse 1.4s ease infinite; }
.chip[data-state="ok"]::before { background: var(--ok); }
.chip[data-state="err"]::before { background: var(--danger); }

/* share card */
#sharecard {
  width: var(--page);
  border: 1px solid var(--gold-line);
  background: var(--gold-wash);
  border-radius: 10px;
  padding: 16px 18px;
  animation: var(--rise); animation-delay: .08s;
}
.share-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold-bright);
}
.share-sub { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.linkrow { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* text fields — the invite link and the player's name share one surface */
#link, #playername {
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--hairline);
  border-radius: 7px;
}
#link { flex: 1 1 260px; min-width: 0; font: .85rem/1.4 var(--mono); padding: 10px 12px; }
#playername { font: .95rem/1.4 var(--serif); padding: 9px 12px; }
#playername:focus { outline: none; border-color: var(--gold); }

/* layout */
#layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
  width: var(--page);
  animation: var(--rise); animation-delay: .14s;
}

/* side panel */
#panel {
  flex: 0 1 300px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#role {
  font-family: var(--serif);
  color: var(--gold-bright);
  font-weight: 500;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
#status {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.25;
  min-height: 1.6em;
}
#substatus { color: var(--muted); font-size: .92rem; min-height: 1.2em; }
#players { color: var(--muted); font-size: .9rem; letter-spacing: .02em; }

#moves {
  list-style-position: inside;
  margin-top: 6px;
  padding: 12px 14px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--well);
  font-size: .95rem;
  columns: 2;
  column-gap: 18px;
}
#moves li { padding: 2px 0; break-inside: avoid; }
#moves li::marker { color: var(--gold); font-size: .85em; }
#moves:empty { display: none; }

/* turn-alert toggle — reads as a checkbox, borrows the connection chip's dot */
.notify {
  align-self: flex-start;
  position: relative;
  padding: 4px 0 4px 20px;
  border: 0;
  background: none;
  font: .85rem/1.3 var(--body-font);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color .15s ease;
}
.notify::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
  border: 1px solid currentColor;
  transition: background .15s ease;
}
.notify:hover:not(:disabled) { color: var(--ink); }
.notify[aria-pressed="true"] { color: var(--gold); }
.notify[aria-pressed="true"]::before { background: var(--gold); }
.notify:disabled { cursor: default; opacity: .65; }

.actions { display: flex; gap: 10px; margin-top: 8px; }

/* promotion overlay */
#promo {
  position: fixed; inset: 0;
  background: rgba(5, 9, 7, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade .15s ease both;
  z-index: 10;
}
#promo[hidden] { display: none; }
.promo-card {
  background: #17231c;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  padding: 20px 24px;
  text-align: center;
  animation: pop .18s ease both;
}
.promo-card p {
  font-family: var(--serif);
  font-weight: 700;
  margin-bottom: 14px;
}
#promo-buttons { display: flex; gap: 10px; }
.promo-piece {
  font-size: 2.6rem;
  line-height: 1;
  width: 64px; height: 64px;
  border-radius: 9px;
  border: 1px solid var(--hairline);
  background: rgba(236, 217, 173, .08);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.promo-piece:hover { background: var(--gold-wash-strong); transform: translateY(-2px); }
.promo-piece.w { color: var(--piece-w); text-shadow: var(--piece-w-shadow); }
.promo-piece.b { color: var(--piece-b); text-shadow: 0 0 1px rgba(246, 239, 220, .4); background: rgba(236, 217, 173, .35); }

@media (max-width: 900px) {
  #layout { flex-direction: column; align-items: center; }
  #panel { width: var(--board-w); flex-basis: auto; }
  #moves { max-height: 180px; }
}