body:has(.mp-board) { background: #252b2d; }
body:has(.mp-board)::before { display: none; }
body:has(.mp) > #app > header { height: 68px; }
.mp {
  --surface: #242529;
  --card: #171b1c;
  --line: #45474f;
  --board-size: clamp(450px, calc(100svh - 198px), 1020px);
  --price-edge: clamp(15px, 2.4vw, 30px);
  --sidebar: clamp(115px, 15vw, 202px);
  width: min(100%, calc(var(--board-size) + var(--sidebar) + 16px + 2 * var(--price-edge)));
  max-width: 100%;
  margin-inline: auto;
  color: #f5f5f6;
  font-family: Inter, Manrope, Arial, sans-serif;
}
.mp-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.mp-toolbar h1 { font-size: clamp(20px, 3vw, 34px); margin: 0; letter-spacing: -.04em; }
.mp-toolbar .back { white-space: nowrap; }
.mp-table {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: calc(var(--price-edge) + 16px);
  padding: var(--price-edge) var(--price-edge) var(--price-edge) 0;
}
.mp-players { display: grid; align-content: start; gap: 10px; }
.mp-player {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 12px 6px;
  min-height: 105px;
  background: var(--card);
  border-left: 3px solid transparent;
  text-align: center;
}
.mp-player b { max-width: 100%; overflow-wrap: anywhere; font-size: 14px; }
.mp-player strong { font-size: clamp(16px, 2vw, 25px); font-weight: 500; font-variant-numeric: tabular-nums; }
.mp-player small { font-size: 11px; color: #d1d1d7; }
.mp-player.mp-current {
  background: linear-gradient(145deg, var(--player), color-mix(in srgb, var(--player) 84%, #191b21));
  border-left-color: var(--player);
}
.mp-out { opacity: .48; }
.mp-avatar {
  border-radius: 50%;
  background: #d0d4d7;
  border: 2px solid var(--player);
  color: #17181b;
}
.mp-avatar {
  display: grid;
  place-items: center;
  width: 37px;
  aspect-ratio: 1;
  margin-bottom: 2px;
  font-weight: 900;
}
.mp-board {
  display: grid;
  grid-template: 1.8fr repeat(9, minmax(0, 1fr)) 1.8fr / 1.8fr repeat(9, minmax(0, 1fr)) 1.8fr;
  min-width: 0;
  aspect-ratio: 1;
  gap: 2px;
  container-type: inline-size;
}
.mp-cell {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: #fff;
  color: #22222a;
  cursor: pointer;
}
.mp-cell:hover { filter: brightness(1.1); z-index: 1; }
.mp-cell:focus-visible { outline: 3px solid white; outline-offset: -3px; z-index: 2; }
.mp-mark { font-weight: 900; white-space: nowrap; font-size: clamp(7px, 1.67cqw, 18px); letter-spacing: -.045em; }
.mp-tile-company:is(.mp-top,.mp-bottom) .mp-mark { writing-mode: vertical-rl; transform: rotate(180deg); }
.mp-price {
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--group);
  color: #fff;
  font-size: clamp(7px, 1.48cqw, 16px);
  font-weight: 700;
  padding: 2px 1px;
}
.mp-owned { background: color-mix(in srgb, var(--owner) 80%, white); }

.mp-cell.mp-top .mp-price { inset: auto 0 100%; height: var(--price-edge); }
.mp-cell.mp-bottom .mp-price { inset: 100% 0 auto; height: var(--price-edge); }
.mp-left .mp-price { inset: 0 100% 0 auto; width: var(--price-edge); writing-mode: vertical-rl; transform: rotate(180deg); }
.mp-right .mp-price { inset: 0 auto 0 100%; width: var(--price-edge); writing-mode: vertical-rl; }
.mp-stars, .mp-lock { position: absolute; color: #ffde72; text-shadow: 0 1px 3px #171818; font-size: 1.9cqw; }
.mp-stars { top: 0; right: 2px; }
.mp-cell.mp-top .mp-stars { top: auto; bottom: 0; }
.mp-lock { left: 3px; bottom: 2px; display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: #b92e46; }
.mp-lock img { width: 68%; }
.mp-pledged .mp-mark { opacity: .48; }
.mp-center {
  grid-area: 2 / 2 / 11 / 11;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: clamp(5px, 1.6cqw, 16px);
}
.mp-center-top, .mp-action-info { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mp-center-top { padding-bottom: 5px; font-size: 11px; color: #d1d5d6; }
.mp-action-info { font-size: clamp(10px, 2cqw, 16px); }
.mp-log {
  overflow: auto;
  margin: 0;
  padding: 10px 4px 10px 0;
  list-style: none;
  scrollbar-color: #5a5c65 transparent;
  font-size: clamp(10px, 2.15cqw, 21px);
  line-height: 1.4;
  color: #dedee2;
}
.mp-log li + li { margin-top: .35em; }
 .mp-controls { padding: clamp(5px, 1.7cqw, 13px); border-radius: 5px; background: #fcfcfc; color: #565d67; box-shadow: 0 3px 10px #0007; }
.mp-action-info strong, .mp-action-info span { display: block; }
.mp-action-info strong { font-size: 1.08em; margin-bottom: 3px; }
.mp-controls .mp-button { flex: 1; background: #edf0f2; border-color: transparent; color: #414955; }
.mp-controls .mp-primary { background: #278470; color: white; }
.mp-controls .mp-action-buttons > span { color: #565d67; }
.mp-action-info .mp-dice { display: inline-flex; }
.mp-log-space { display: flex; flex-direction: column; justify-content: end; min-height: 0; }
.mp-action-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mp-action-buttons > span { font-size: 12px; color: #cbcbd1; }
.mp-button {
  border: 1px solid #545661;
  border-radius: 6px;
  padding: 7px 10px;
  background: #353740;
  color: #fafafa;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mp-button:hover { filter: brightness(1.15); }
.mp-primary { background: #a8df75; color: #1c2714; font-weight: 800; border-color: #a8df75; }
.mp-dice { font-family: Arial, sans-serif; flex-shrink: 0; font-size: clamp(17px, 3.3cqw, 33px); line-height: 1; color: white; }
.mp-cover { display: flex; align-items: center; justify-content: center; gap: 8px; color: #d0edaa; font: 900 88px/1 Arial, sans-serif; transform: rotate(-12deg); }
.mp-cover span + span { color: #bca9ef; transform: rotate(17deg) translateY(12px); }
@media (max-width: 780px) {
  .mp-table { grid-template-columns: minmax(0, 1fr); padding: 0 var(--price-edge) var(--price-edge); gap: calc(6px + var(--price-edge)); }
  .mp-players { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .mp-player { min-height: 0; padding: 5px 1px; gap: 2px; }
  .mp-player b, .mp-player small { font-size: 10px; }
  .mp-avatar { width: 21px; font-size: 11px; }
  .mp-button { font-size: 11px; padding: 4px 6px; }
}

.mp-board { position: relative; }
.mp-pledged .mp-logo { opacity: .48; }
.mp-cell { transition: filter .16s ease, box-shadow .16s ease; }
.mp-cell:hover { box-shadow: inset 0 0 0 2px #fff9; }
.mp-token {
  position: absolute;
  z-index: 3;
  width: clamp(12px, 3.36cqw, 32.4px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--player) 42%, #14151a);
  background: var(--player);
  box-shadow: 0 2px 4px #0009;
  pointer-events: none;
}
.mp-token[hidden] { display: none; }
.mp-dice { display: inline-flex; gap: 5px; }
.mp-die {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  gap: 1px;
  width: clamp(17px, 4.5cqw, 39px);
  aspect-ratio: 1;
  padding: clamp(2px, .55cqw, 5px);
  border-radius: 19%;
  background: #fffaf0;
  box-shadow: inset 0 -2px 0 #b4b3ac, 0 2px 5px #0007;
}
.mp-pip { width: 72%; aspect-ratio: 1; border-radius: 50%; background: #25252a; }
.mp-room { width: min(100%, 680px); }
.mp-room-panel { background: var(--surface); padding: clamp(14px, 4vw, 30px); border: 1px solid var(--line); border-radius: 12px; }
.mp-room-panel h2 { margin-top: 0; }
.mp-room-panel p { color: #d1d1d7; }
.mp-room-panel #mp-room-status:empty { display: none; }
.mp-lobby-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mp-lobby-slots > div { background: var(--card); padding: 14px; border-radius: 7px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.mp-lobby-slots small { color: #d1d1d7; }
.mp-lobby-slots .mp-slot-empty { color: #a2a3ad; }
.mp-join { margin-top: 24px; }
.mp-join input { width: 122px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; text-transform: uppercase; background: #18191e; }
.mp-button[disabled] { opacity: .5; cursor: default; }
#mp-connection { color: #f4d698; font-size: .8em; }
@media (prefers-reduced-motion: reduce) { .mp-cell { transition: none; } }
 .mp-logo {
  position: absolute;
  width: 86%;
  height: 78%;
  top: 50%;
  left: 50%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.mp-tile-company:is(.mp-top, .mp-bottom) .mp-logo {
  width: 152%;
  height: 55%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.mp-cell[data-tile="5"] .mp-logo { width: 85%; height: 85%; transform: translate(-50%, -50%); }
.mp-company-preview { position: absolute; z-index: 5; width: clamp(140px, 30cqw, 225px); pointer-events: none; color: #3c4350; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 16px #0008; font-size: clamp(10px, 2cqw, 14px); }
.mp-company-preview > div { background: color-mix(in srgb, var(--group) 78%, #151719); color: white; padding: 8px 10px; }
.mp-company-preview small { display: block; }
.mp-company-preview dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 10px; }
.mp-company-preview dd { margin: 0; text-align: right; }
.mp-cell-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.mp-tile-jail .mp-cell-art {
  background: linear-gradient(45deg, #e2e6ec 49.3%, #aab1bd 49.6% 50.4%, white 50.7%);
}
.mp-special-icon { position: absolute; inset: 50% auto auto 50%; width: 66%; height: 72%; object-fit: contain; transform: translate(-50%, -50%); }
.mp-tile-chance .mp-special-icon { width: 76%; height: 76%; }
.mp-jail-icon, .mp-visit-icon { position: absolute; width: 41%; height: 41%; }
.mp-jail-icon { left: 10%; bottom: 7%; }
.mp-visit-icon { right: 8%; top: 8%; }

.mp-tile-chance:is(.mp-top, .mp-bottom) .mp-special-icon {
  width: 112%;
  height: 55%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.mp-tile-casino .mp-special-icon, .mp-tile-arrest .mp-special-icon { width: 78%; height: 78%; }

.mp-controls .mp-primary { background: #32b49a; color: #102d27; }
.mp-die { display: block; padding: 0; background: none; box-shadow: none; }
.mp-cell:not(button) { cursor: default; }
.mp-cell:not(button):hover { filter: none; box-shadow: none; }
.mp-cell:is([data-tile="1"],[data-tile="6"],[data-tile="26"],[data-tile="27"],[data-tile="29"]) .mp-logo {
  width: 127%;
  height: 45%;
}
.mp-tile-start .mp-special-icon { top: auto; bottom: 0; width: 95%; height: 96%; transform: translateX(-50%); }
.mp-tile-arrest .mp-special-icon, .mp-tile-casino .mp-special-icon { width: 89%; height: 89%; }
.mp-company-preview { pointer-events: auto; }
.mp-company-preview .mp-preview-actions { display: flex; flex-wrap: wrap; gap: 4px; background: #eef0f2; padding: 6px; }
.mp-player-name { background: none; border: 0; color: inherit; font-weight: 800; cursor: pointer; }
.mp-player-name:disabled { cursor: default; }
.mp-trade {
  position: absolute; inset: 15% 15%; z-index: 6; overflow: auto;
  background: #fcfcfc; color: #414955; border-radius: 6px; padding: 14px;
  box-shadow: 0 4px 20px #0008;
}
.mp-trade-title { display: flex; justify-content: space-between; align-items: center; }
.mp-trade-title button { background: #eef0f2; border: 0; color: #414955; border-radius: 4px; cursor: pointer; }
.mp-trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.mp-trade-sides > div { border: 1px solid #d9dee3; border-radius: 5px; padding: 8px; }
.mp-trade-sides label { display: grid; gap: 3px; margin-top: 8px; font-size: 12px; }
.mp-trade-sides input { width: 100%; background: #eff2f4; color: #242932; border: 1px solid #bcc4ce; border-radius: 4px; }
.mp-trade-sides ul { padding-left: 16px; }
.mp-trade-selected .mp-cell-art { outline: 3px solid #187d69; outline-offset: -3px; }

.mp-rent-stars { color: #616a75; font-size: .78em; letter-spacing: .16em; }
.mp-rent-corporation { color: #d99020; font-size: 1.16em; line-height: 1; }

.mp-controls [data-move="roll"] { color: #fff; background: #278470; }
.mp-player-contract {
  width: calc(100% + 12px);
  margin: 4px -6px -12px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: #e6e9ed;
  color: #24292d;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mp-player-contract:hover { background: #f5f6f8; }
.mp-player-contract svg { width: 15px; height: 15px; flex: none; }
.mp-cash-edit {
  display: flex;
  align-items: baseline;
  justify-self: start;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid #c3cdd1;
  border-radius: 4px;
  background: #eff2f4;
  font-variant-numeric: tabular-nums;
  cursor: text;
}
.mp-cash-edit:focus-within { outline: 2px solid #278470; outline-offset: 1px; }
.mp-trade-sides .mp-cash-edit input {
  width: var(--cash-ch);
  max-width: 100%;
  min-width: 1ch;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}
.mp-cash-edit > span { pointer-events: none; user-select: none; }

dialog:has(.mp-lobby-dialog) { width: min(520px, calc(100% - 28px)); max-height: 90dvh; overflow: auto; }
.mp-lobby-dialog { --card: #25282a; }
.mp-lobby-dialog h2 { margin: 0 30px 18px 0; }
.mp-lobby-dialog h3 { margin: 0 0 8px; font-size: 13px; }
.mp-lobby-heading { display: flex; align-items: baseline; gap: 12px; }
.mp-lobby-heading h2 { margin-right: 0; }
.mp-lobby-code { font: 700 14px monospace; letter-spacing: .12em; color: #b2e1bc; }
.mp-lobby-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-lobby-actions .mp-button { min-height: 38px; }
.mp-lobby-resume { flex-basis: 100%; text-align: left; }
.mp-lobby-join label, .mp-lobby-options label { display: grid; gap: 6px; font-size: 13px; }
.mp-lobby-join input, .mp-lobby-options select { width: 100%; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid #515659; background: #25282a; color: #fff; font: inherit; }
.mp-lobby-join input { margin: 6px 0 14px; text-transform: uppercase; }
.mp-lobby-roster h3 span { color: #b1b9bf; margin-left: 4px; }
.mp-lobby-settings { margin-top: 16px; }
.mp-lobby-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mp-lobby-dialog .mp-lobby-note, .mp-lobby-dialog .mp-lobby-status { font-size: 13px; margin: 10px 0; }
.mp-lobby-note:empty, .mp-lobby-status:empty { display: none; }
.mp-lobby-dialog .mp-lobby-status { color: #f4d698; }
.mp-lobby-dialog .mp-lobby-exit { background: transparent; }