:root {
  --bg: #16202a;
  --panel: rgb(24 31 39 / 90%);
  --panel-solid: #232c36;
  --panel-hover: #303b47;
  --text: #f6f3ec;
  --muted: #b5bcc6;
  --accent: #ffb02e;
  --accent-ink: #2a1c02;
  --go: #35c46a;
  --danger: #e5484d;
  --off: #66707c;
  --hud-gap: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 ui-rounded, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overflow: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; border-radius: 12px; }
button:disabled { opacity: .6; cursor: progress; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Joining */
#join {
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  padding: 24px 16px;
  background:
    radial-gradient(60rem 30rem at 15% 0%, #14523b 0%, transparent 70%),
    radial-gradient(50rem 30rem at 100% 100%, #8a3a1c 0%, transparent 65%),
    var(--bg);
}
#join-form {
  position: relative;
  width: min(26rem, 100%);
  margin: auto; /* Centres it, but still lets you scroll to the top on a short screen. */
  padding: 34px 28px 28px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--panel-solid);
  box-shadow: 0 18px 50px rgb(0 0 0 / 40%);
}
/* The Irish tricolour running into the Spanish flag. */
.stripes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg,
    #169b62 0 16.6%, #ffffff 16.6% 33.3%, #ff883e 33.3% 50%,
    #aa151b 50% 62.5%, #f1bf00 62.5% 87.5%, #aa151b 87.5% 100%);
}
.greeting { margin: 0 0 2px; color: var(--accent); font-weight: 600; }
#join-form h1 { margin: 0 0 6px; font-size: 2.4rem; letter-spacing: -.02em; }
#join-text { margin: 0 0 20px; color: var(--muted); }
#join-form label, legend { display: block; margin: 0 0 6px; padding: 0; font-weight: 600; font-size: .92rem; }
#name {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--off);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
fieldset { margin: 18px 0 22px; padding: 0; border: 0; }
#swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 25%);
}
.swatch[aria-pressed="true"], .look-swatch[aria-pressed="true"] { border-color: var(--text); }
.designer-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#look-preview {
  flex: 1;
  min-width: 0;
  height: 170px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, #3b4a5a, var(--bg));
}
#look-surprise { flex: none; padding: 10px 14px; background: var(--panel-hover); font-weight: 600; font-size: .9rem; }
.look-row { margin-top: 10px; }
.look-title { display: block; margin-bottom: 4px; color: var(--muted); font-size: .84rem; font-weight: 600; }
.look-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.look-choices .swatch, .look-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 25%);
}
.look-chip { padding: 6px 11px; background: var(--panel-hover); font-size: .86rem; }
.look-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
#look-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(24rem, 100%);
  overflow-y: auto;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--panel-solid);
  box-shadow: -8px 0 28px rgb(0 0 0 / 35%);
  z-index: 3;
}
#look-panel fieldset { margin: 0 0 14px; }
#look-done { width: 100%; padding: 13px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* Choosing a floor */
#floors {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 16px;
  background: rgb(0 0 0 / 60%);
  z-index: 7;
}
#floors-box {
  width: min(24rem, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--panel-solid);
  box-shadow: 0 18px 50px rgb(0 0 0 / 50%);
}
#floors-box h2 { margin: 0 0 12px; font-size: 1.25rem; }
#floors-list { display: grid; gap: 8px; }
#floors-list button { display: grid; gap: 2px; width: 100%; padding: 12px 14px; background: var(--panel-hover); text-align: left; }
#floors-list button:hover:not(:disabled) { outline: 2px solid var(--accent); }
#floors-list button:disabled { cursor: default; }
#floors-list strong { font-size: 1.05rem; }
#floors-list span { color: var(--muted); font-size: .86rem; }
#floors-stay { width: 100%; margin-top: 10px; padding: 12px; background: none; color: var(--muted); }

/* Choosing a room */
.join-heading { margin: 16px 0 6px; font-size: .95rem; font-weight: 700; }
#rooms-now { margin-bottom: 14px; }
#room-list { display: grid; gap: 6px; color: var(--muted); font-size: .9rem; }
.room-row { display: grid; gap: 2px; width: 100%; padding: 10px 12px; background: var(--panel-hover); text-align: left; }
.room-row strong { overflow-wrap: anywhere; }
.room-row span { color: var(--muted); font-size: .84rem; }
#room-access { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; font-size: .92rem; }
#room-access label { display: flex; align-items: center; gap: 6px; }
#room-password { margin-bottom: 8px; }
#room-lock { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #14181d; }
#room-lock form { display: grid; gap: 10px; width: min(24rem, 100%); }
#room-lock h2, #room-lock p { margin: 0; }
#room-lock-error { color: #ff9c8f; }
#room-lock-enter { padding: 13px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
#room-lock-back { padding: 10px; background: none; color: var(--muted); }

/* The Jolly Quiz */
#quiz-play {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(38rem, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #123f2b, #0a2118);
  border: 1px solid #d9b24f;
  color: #fff;
  box-shadow: 0 10px 34px rgb(0 0 0 / 55%);
  z-index: 4;
}
#quiz-play h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.quiz-meta { margin: 0; color: #f3d98a; font-size: .84rem; }
.quiz-emoji { font-size: 2.2em !important; letter-spacing: .08em; }
.quiz-time { height: 8px; border-radius: 4px; background: rgb(255 255 255 / 18%); overflow: hidden; }
.quiz-time span { display: block; height: 100%; width: 100%; background: #f3d98a; }
.quiz-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quiz-answer { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border-radius: 10px; color: #fff; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.quiz-answer b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(0 0 0 / 25%); }
.quiz-answer.a0 { background: #b92b2b; }
.quiz-answer.a1 { background: #1f7a4c; }
.quiz-answer.a2 { background: #2f62b5; }
.quiz-answer.a3 { background: #a8741a; }
.quiz-answer:disabled { opacity: .55; cursor: default; }
.quiz-answer.picked { opacity: 1; outline: 3px solid #fff; outline-offset: -3px; }
.quiz-answer.right { opacity: 1; outline: 4px solid #f3d98a; outline-offset: -4px; }
.quiz-answer.wrong, .quiz-answer.dim { opacity: .35; }
.quiz-result { margin: 0; font-weight: 600; }
.quiz-close { padding: 10px; background: #d9b24f; color: #1b160c; font-weight: 700; }
.quiz-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.quiz-board li { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgb(255 255 255 / 8%); }
.quiz-board li.me { outline: 2px solid #f3d98a; outline-offset: -2px; }
.quiz-board .rank { width: 1.6em; color: #f3d98a; font-weight: 700; }
.quiz-board .who { flex: 1; overflow-wrap: anywhere; }
.quiz-board .pts { font-weight: 700; }
#quiz-desk {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(30rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: #0f2a1e;
  border-left: 1px solid #d9b24f;
  color: #fff;
  z-index: 5;
}
#quiz-desk header { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#quiz-desk h2 { margin: 0; font-size: 1.25rem; }
#quiz-desk-close { padding: 9px 16px; background: none; border: 1px solid #d9b24f; color: #f3d98a; }
#quiz-desk-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
#quiz-desk-body h3 { margin: 0; }
.desk-card { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: rgb(255 255 255 / 7%); }
.desk-card p { margin: 0; }
#quiz-desk .small { color: #cfdcd4; font-size: .86rem; }
.desk-link { overflow-wrap: anywhere; font-size: .86rem; color: #f3d98a; }
.desk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.desk-row button { flex: 1; padding: 10px 12px; background: rgb(255 255 255 / 12%); color: #fff; }
.desk-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 6px; }
.desk-pack { display: grid; gap: 3px; padding: 10px; background: rgb(255 255 255 / 8%); color: #fff; text-align: left; }
.desk-pack span { color: #cfdcd4; font-size: .78rem; }
.desk-pack.on { outline: 2px solid #f3d98a; outline-offset: -2px; }
.desk-pack:disabled { opacity: .5; }
.desk-field { flex: 1; display: grid; gap: 4px; font-size: .84rem; }
.desk-form { display: grid; gap: 6px; }
.desk-form button { padding: 10px; background: rgb(255 255 255 / 12%); color: #fff; }
.desk-own, .desk-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.desk-own li, .desk-players li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: rgb(255 255 255 / 6%); font-size: .9rem; overflow-wrap: anywhere; }
.desk-own button, .desk-players button { flex: none; padding: 4px 10px; background: none; color: #f3d98a; }
.desk-go, #quiz-desk .desk-row .desk-go { flex: none; padding: 14px; background: #d9b24f; color: #1b160c; font-weight: 700; }
#quiz-desk .desk-row .desk-go { flex: 1; }
.desk-go:disabled { opacity: .5; }
.desk-quiet { padding: 10px; background: none; color: #cfdcd4; }
.desk-secret { margin: 0; color: #f3d98a; font-weight: 700; }
body[data-view="tv"] { overflow: hidden; background: radial-gradient(circle at 50% 20%, #17523a, #071610 75%); }
#tv { position: fixed; inset: 0; display: grid; place-items: center; padding: 3vmin 5vmin; color: #fff; font-size: 2.6vmin; text-align: center; }
#tv[hidden] { display: none; }
#tv-stage { width: min(100%, 150vmin); display: grid; gap: 2.4vmin; }
#tv-stage h1 { margin: 0; font-size: 7vmin; line-height: 1.15; }
#tv-stage .tv-question { font-size: 5.4vmin; }
#tv-stage .quiz-answer { min-height: 11vmin; font-size: 3.4vmin; text-align: left; }
#tv-stage .quiz-answer b { width: 6vmin; height: 6vmin; }
#tv-stage .quiz-time { height: 1.6vmin; border-radius: 1vmin; }
#tv-stage .quiz-board { font-size: 3.4vmin; }
.tv-join { margin: 0; font-size: 3.6vmin; }
.tv-join b { color: #f3d98a; }
.tv-sub, .tv-answered { margin: 0; color: #f3d98a; font-size: 3vmin; }
.tv-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4vmin; font-size: 3.2vmin; }
.tv-names li { padding: 1vmin 2.4vmin; border-radius: 99vmin; background: rgb(255 255 255 / 12%); }
#tv-status { position: fixed; bottom: 2vmin; left: 0; right: 0; margin: 0; color: #cfdcd4; }
#tv-lock { position: fixed; inset: 0; display: grid; place-items: center; background: #071610; }
#tv-lock[hidden] { display: none; }
#tv-lock form { display: grid; gap: 10px; width: min(26rem, 90%); }
#tv-lock button { padding: 14px; background: #d9b24f; color: #1b160c; font-weight: 700; }

/* The shop */
#shop-panel {
  --shop-gold: #e4c477;
  color: #f4ecdb;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(25rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #16332a, #0f241d);
  border-left: 1px solid var(--shop-gold);
  box-shadow: -8px 0 28px rgb(0 0 0 / 45%);
  z-index: 3;
}
#shop-panel header { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#shop-side { margin: 0; color: var(--shop-gold); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
#shop-panel h2 { margin: 0; font-family: Didot, "Bodoni MT", Georgia, "Noto Serif", "Times New Roman", serif; font-size: 1.6rem; font-weight: 500; letter-spacing: .02em; }
#shop-close { flex: none; padding: 9px 18px; background: none; border: 1px solid var(--shop-gold); color: var(--shop-gold); font-weight: 600; letter-spacing: .04em; }
#shop-close:hover { background: var(--shop-gold); color: #16201b; }
#shop-preview { flex: none; display: flex; height: 26vh; min-height: 130px; }
#shop-preview #look-preview { height: 100%; }
#shop-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-content: start;
  gap: 8px;
}
.shop-item { display: grid; justify-items: center; gap: 8px; padding: 10px 6px; background: rgb(255 255 255 / 5%); border: 1px solid rgb(228 196 119 / 28%); border-radius: 4px; color: inherit; font-size: .84rem; line-height: 1.2; text-align: center; }
.shop-item:hover { background: rgb(255 255 255 / 10%); border-color: rgb(228 196 119 / 70%); }
.shop-item[aria-pressed="true"] { outline: 2px solid var(--shop-gold); outline-offset: -2px; background: rgb(228 196 119 / 14%); font-weight: 600; }
.shop-swatch { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(228 196 119 / 70%), 0 2px 6px rgb(0 0 0 / 40%); }
#enter, #create {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.or { margin: 14px 0 8px; color: var(--muted); font-size: .9rem; text-align: center; }
.code-row { display: flex; gap: 8px; }
#code {
  min-width: 0;
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--off);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
#code::placeholder { font-weight: 400; letter-spacing: normal; text-transform: none; }
#join-code { flex: none; padding: 12px 20px; background: var(--panel-hover); font-weight: 700; }
#join-error { margin: 12px 0 0; color: #ff9a9e; font-size: .92rem; }
.fine-print { margin: 14px 0 0; color: var(--muted); font-size: .84rem; text-align: center; }

/* Lobby */
#lobby { position: fixed; inset: 0; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }

#stick {
  position: absolute;
  right: max(var(--hud-gap), env(safe-area-inset-right));
  bottom: max(var(--hud-gap), env(safe-area-inset-bottom));
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 30%);
  border-radius: 50%;
  background: var(--panel);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#stick.active { border-color: var(--accent); cursor: grabbing; }
#stick-knob {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 3px 10px rgb(0 0 0 / 45%);
  pointer-events: none;
}
#dance, #jump {
  position: absolute;
  left: max(var(--hud-gap), env(safe-area-inset-left));
  bottom: max(var(--hud-gap), env(safe-area-inset-bottom));
  padding: 14px 18px;
  border-radius: 999px;
  background: #1f8a55;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgb(0 0 0 / 35%);
  touch-action: manipulation;
}
#dance:hover { background: #26a165; }
#jump { bottom: calc(max(var(--hud-gap), env(safe-area-inset-bottom)) + 58px); background: #d9651f; }
#jump:hover { background: #ea7730; }
#act {
  position: absolute;
  right: max(var(--hud-gap), env(safe-area-inset-right));
  bottom: calc(max(var(--hud-gap), env(safe-area-inset-bottom)) + 124px);
  max-width: min(62vw, 18rem);
  padding: 14px 18px;
  border-radius: 999px;
  background: #ffb02e;
  color: #1c1408;
  font-weight: 700;
  box-shadow: 0 3px 10px rgb(0 0 0 / 35%);
  touch-action: manipulation;
}

#hud-top {
  position: absolute;
  top: max(var(--hud-gap), env(safe-area-inset-top));
  left: var(--hud-gap);
  right: var(--hud-gap);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.pill, .pill-button {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-size: .9rem;
  pointer-events: auto;
}
.pill { min-width: 0; }
.pill .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--go);
}
.pill.reconnecting .dot { background: var(--accent); }
.hud-actions { flex: none; display: flex; gap: 6px; }
.pill-button { flex: none; font-weight: 600; }
.pill-button:hover { background: var(--panel-hover); }

#hint, #nearby {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--panel);
  font-size: .88rem;
  text-align: center;
  pointer-events: none;
}
#hint { top: calc(max(var(--hud-gap), env(safe-area-inset-top)) + 48px); }
#nearby { bottom: 150px; }
#tooltip {
  position: fixed;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--panel-solid);
  font-size: .85rem;
  pointer-events: none;
  z-index: 3;
}

#hud-bottom {
  position: absolute;
  left: var(--hud-gap);
  right: var(--hud-gap);
  bottom: max(var(--hud-gap), env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
#preview {
  width: 118px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid var(--go);
  background: #000;
  transform: scaleX(-1);
}
#chat-panel {
  width: min(24rem, 100%);
  padding: 12px;
  border-radius: 18px;
  background: var(--panel);
  text-align: center;
  pointer-events: auto;
}
#chat-status { margin: 0 0 10px; font-size: .92rem; }
#chat-button {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.05rem;
  font-weight: 700;
}
#chat-button:hover { filter: brightness(1.06); }
#chat-button.secondary { background: var(--panel-hover); color: var(--text); font-weight: 600; }

/* Darts */
#darts {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(25rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--panel-solid);
  box-shadow: -8px 0 28px rgb(0 0 0 / 35%);
  z-index: 4;
}
#darts header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#darts h2 { margin: 0; font-size: 1.25rem; }
#darts-leave { flex: none; padding: 8px 12px; background: var(--panel-hover); font-size: .9rem; }
#darts-status { min-height: 2.9em; margin: 0; font-weight: 600; }
#darts-board {
  display: block;
  width: 100%;
  max-width: 46vh;
  aspect-ratio: 1;
  margin: 0 auto;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#darts-throw {
  flex: none;
  padding: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.05rem;
  font-weight: 700;
  touch-action: manipulation;
}
#darts-scores { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#darts-scores li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg);
  font-size: .9rem;
}
.dart-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dart-name::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--shirt);
}
.dart-dots { color: var(--accent); letter-spacing: .1em; }
.dart-best, .dart-wins { color: var(--muted); }
.dart-wins { text-align: right; }

.darts-records h3 { margin: 6px 0 6px; color: var(--accent); font-size: .95rem; }
.darts-records p { margin: 0; color: var(--muted); font-size: .9rem; }
.darts-records ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.darts-records li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .9rem;
}
.darts-records li span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.darts-records li span:last-child { flex: none; color: var(--muted); }

/* Invite */
#invite-panel {
  position: absolute;
  top: calc(max(var(--hud-gap), env(safe-area-inset-top)) + 48px);
  right: var(--hud-gap);
  width: min(19rem, calc(100% - 32px));
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: var(--panel-solid);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
  z-index: 2;
}
#invite-panel h2 { margin: 0; font-size: 1.1rem; }
#invite-panel p { margin: 0; color: var(--muted); font-size: .9rem; }
#invite-panel #invite-code { color: var(--accent); font-size: 2rem; font-weight: 800; letter-spacing: .18em; }
#invite-panel button { padding: 11px; background: var(--panel-hover); font-weight: 600; }
#invite-panel #invite-close { position: absolute; top: 8px; right: 8px; padding: 6px 10px; background: none; }

/* Asking first */
#confirm {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 60%);
  z-index: 10;
}
#confirm-box {
  width: min(24rem, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--panel-solid);
  box-shadow: 0 18px 50px rgb(0 0 0 / 50%);
}
#confirm-box h2 { margin: 0 0 6px; font-size: 1.25rem; }
#confirm-box p { margin: 0 0 16px; color: var(--muted); }
#confirm-actions { display: grid; gap: 8px; }
#confirm-actions button { padding: 13px; background: var(--panel-hover); font-weight: 600; }
#confirm-actions button.primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

#fade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 8;
}
#fade.dark { opacity: 1; }

/* Games */
#game {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #0d0a1f;
  z-index: 5;
}
#game header { flex: none; display: flex; align-items: center; gap: 12px; }
#game h2 { min-width: 0; margin: 0; overflow: hidden; font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; }
#game-score { margin-left: auto; color: var(--accent); font-size: 1.2rem; font-weight: 800; }
#game-exit { flex: none; padding: 8px 12px; background: var(--panel-hover); font-size: .9rem; }
#game-status { flex: none; min-height: 1.4em; margin: 0; color: var(--muted); font-size: .92rem; }
#game-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#game-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#game-menu {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgb(13 10 31 / 90%);
  text-align: center;
}
#game-menu > * { width: min(24rem, 100%); }
#game-menu p { margin: 0; }
#game-howto { color: var(--muted); }
#game-message { min-height: 1.4em; font-weight: 700; }
#game-play, #game-practice { padding: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
#game-practice { background: var(--panel-hover); color: var(--text); }
#game-scores { padding: 12px; border-radius: 12px; background: var(--panel-solid); text-align: left; }
#game-scores h3 { margin: 6px 0; color: var(--accent); font-size: .95rem; }
#game-scores ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .92rem; }
#game-scores li { display: flex; justify-content: space-between; gap: 12px; }
#game-controls { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#game-controls:empty { display: none; }
#game-controls button {
  min-width: 62px;
  min-height: 54px;
  flex: 1;
  max-width: 110px;
  background: var(--panel-hover);
  font-size: 1.25rem;
  font-weight: 700;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#game-controls button:active { background: var(--accent); color: var(--accent-ink); }
/* The same shape as the arrow keys on a keyboard. */
#game-controls[data-style="arrows"] {
  display: grid;
  grid-template-columns: repeat(3, 62px);
  grid-template-rows: repeat(2, 50px);
  grid-template-areas: ". up ." "left down right";
  justify-content: center;
  gap: 6px;
}
#game-controls[data-style="arrows"] button { min-width: 0; min-height: 0; max-width: none; }
#game-controls [data-control="up"] { grid-area: up; }
#game-controls [data-control="down"] { grid-area: down; }
#game-controls [data-control="left"] { grid-area: left; }
#game-controls [data-control="right"] { grid-area: right; }
#game-controls[data-style="stick"] { align-items: center; justify-content: space-between; padding: 0 12px; }
#game-controls[data-style="stick"]:has(.game-stick:only-child) { justify-content: center; }
#game-controls[data-style="stick"] button { flex: none; width: 96px; min-height: 96px; max-width: none; border-radius: 50%; }
.game-stick {
  flex: none;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 30%);
  border-radius: 50%;
  background: var(--panel);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.game-stick.active { border-color: var(--accent); cursor: grabbing; }
.game-stick-knob {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 3px 10px rgb(0 0 0 / 45%);
  pointer-events: none;
}
/* On a phone held sideways there's no room below the game, so the controls float over its edges. */
@media (orientation: landscape) and (max-height: 520px) {
  #game-controls[data-style="arrows"], #game-controls[data-style="stick"] {
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 1;
  }
  #game-controls[data-style="arrows"] { right: 16px; }
  #game-controls[data-style="stick"] { left: 16px; right: 16px; pointer-events: none; }
  #game-controls[data-style="stick"] > * { pointer-events: auto; opacity: .85; }
}
#game-invite {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel-solid);
  font-weight: 600;
}
#game-invite-text { flex: 1 1 10rem; }
#game-invite button { flex: none; padding: 9px 14px; background: var(--panel-hover); }
#game-invite #game-invite-yes { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* Video */
#video { position: fixed; inset: 0; background: #0c1116; }
#grid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
#grid .tile { border-radius: 0; }
.tile.me {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: clamp(96px, 20vw, 240px);
  aspect-ratio: 4 / 3;
  border: 2px solid rgb(255 255 255 / 55%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 50%);
  z-index: 2;
}
.tile.me .label { font-size: .72rem; left: 4px; bottom: 4px; padding: 1px 6px; }
#video-exit {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(10 14 19 / 72%);
  font-size: 1.05rem;
  z-index: 3;
}
#video-exit:hover { background: var(--danger); }
#video-note {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 64px;
  max-width: calc(100% - 200px);
  margin: 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgb(10 14 19 / 80%);
  font-size: .85rem;
  z-index: 2;
}
.tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel-solid);
}
.tile video { width: 100%; height: 100%; display: block; object-fit: cover; }
.tile.me video { transform: scaleX(-1); }
.tile .label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 9px;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(10 14 19 / 72%);
  font-size: .88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .notice {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  color: var(--muted);
  background: var(--panel-solid);
}
#sound {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  z-index: 2;
}
#controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / 55%));
  transition: opacity .4s;
  z-index: 2;
}
#video.idle #controls, #video.idle #video-exit { opacity: 0; }
#video-exit { transition: opacity .4s; }
#controls button { padding: 12px 16px; background: var(--panel-solid); font-size: .95rem; }
#controls button:hover { background: var(--panel-hover); }
#controls button[aria-pressed="false"] { background: var(--off); }
#controls #return { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

#toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--panel-solid);
  box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
  font-size: .92rem;
  text-align: center;
  z-index: 5;
}

@media (max-width: 600px) {
  .pill-button { padding: 9px 12px; }
}

/* Too narrow to sit side by side, so the chat panel takes the bottom and the rest sit above it. */
@media (max-width: 860px) {
  #hud-bottom { flex-direction: column; align-items: stretch; }
  #preview { width: 96px; align-self: center; }
  #chat-panel { width: 100%; }
  #nearby { bottom: 270px; }
  #stick, #dance { bottom: calc(max(var(--hud-gap), env(safe-area-inset-bottom)) + 146px); }
  #jump { bottom: calc(max(var(--hud-gap), env(safe-area-inset-bottom)) + 204px); }
  #lobby.no-chat #stick, #lobby.no-chat #dance { bottom: max(var(--hud-gap), env(safe-area-inset-bottom)); }
  #lobby.no-chat #jump { bottom: calc(max(var(--hud-gap), env(safe-area-inset-bottom)) + 58px); }
  #act { bottom: calc(max(var(--hud-gap), env(safe-area-inset-bottom)) + 270px); }
  #lobby.no-chat #act { bottom: calc(max(var(--hud-gap), env(safe-area-inset-bottom)) + 124px); }
}