:root {
  color-scheme: light;
  --ink: #1d2428;
  --muted: #65717a;
  --line: #d9ded8;
  --paper: #f6f1e8;
  --panel: #fffdf8;
  --panel-2: #eef6f2;
  --accent: #1b6f63;
  --accent-strong: #104e47;
  --ruby: #bd3d4f;
  --gold: #bd8628;
  --violet: #5c527c;
  --danger: #9f3d34;
  --shadow: 0 16px 40px rgba(31, 38, 40, 0.13);
  font-family: Inter, "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 199, 221, 0.16), transparent 24%),
    linear-gradient(135deg, rgba(189, 61, 79, 0.08), transparent 32%),
    linear-gradient(90deg, rgba(27, 111, 99, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(92, 82, 124, 0.07) 1px, transparent 1px),
    var(--paper);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input,
select,
textarea {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
}

textarea {
  min-height: 86px;
  padding: 9px 10px;
  resize: vertical;
}

.app {
  width: min(1500px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 18px 0 30px;
}

.setup {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.setupPanel {
  width: min(720px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--shadow);
}

.setupPanel h1 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0;
}

.setupPanel p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.7;
}

.setupActions,
.fieldLine,
.copyLine,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.fieldLine input,
.copyLine input {
  min-width: min(360px, 100%);
  flex: 1;
  padding: 0 11px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.titleBlock {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
}

.titleBlock h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0;
}

.roomCode {
  color: var(--muted);
  font-weight: 800;
}

.statusPills,
.turnFlags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pill,
.turnFlags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.pill.strong,
.turnFlags .done {
  border-color: rgba(27, 111, 99, 0.35);
  color: var(--accent);
}

.specialPill {
  border-color: rgba(189, 134, 40, 0.35);
  color: #805916;
}

.turnFlags .bonusPick {
  border-color: rgba(189, 61, 79, 0.35);
  color: var(--ruby);
}

.primary,
.subtle,
.danger,
.cardAction,
.itemButton {
  padding: 8px 12px;
  font-weight: 850;
}

.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.primary:hover:not(:disabled) {
  background: var(--accent-strong);
}

.subtle {
  background: #f8faf7;
}

.danger {
  border-color: rgba(159, 61, 52, 0.36);
  background: #fff3f1;
  color: var(--danger);
}

.seatSwitcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--gold);
  border-radius: 8px;
  background: rgba(189, 134, 40, 0.1);
}

.seatSwitcherLabel {
  font-size: 13px;
  font-weight: 900;
  color: #8d641d;
}

.seatSwitcherButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seat {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 850;
}

.seat.active {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}

.layout {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) minmax(300px, 380px);
  gap: 14px;
  align-items: start;
}

.leftStack,
.mainStack,
.rightStack {
  display: grid;
  gap: 14px;
}

.panel,
.actionPanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: var(--shadow);
}

.actionPanel {
  background: linear-gradient(135deg, rgba(27, 111, 99, 0.1), rgba(255, 253, 248, 0.98) 48%, rgba(189, 134, 40, 0.12));
}

.panelHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px 14px 0;
}

.panel h2,
.actionTitle,
.panel h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}

.panelBody {
  padding: 12px 14px 14px;
}

.compactPanel .panelBody {
  padding-top: 8px;
}

.actionTitle {
  font-size: 18px;
  font-weight: 950;
}

.actionText {
  margin: 8px 0 10px;
  color: var(--muted);
  line-height: 1.6;
}

.error {
  width: 100%;
  min-height: 20px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
}

.players {
  display: grid;
  gap: 10px;
}

.playerRow {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.playerRow.active {
  border-color: rgba(27, 111, 99, 0.55);
  box-shadow: inset 4px 0 0 var(--accent);
}

.playerHead,
.playerMeta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.playerHead strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.playerHead span,
.playerMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.playerMeta {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.miniAccessories,
.miniSpecials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.empty,
.emptyInline {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.priceTable,
.configTable,
.settlementTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.priceTable th,
.priceTable td,
.configTable th,
.configTable td,
.settlementTable th,
.settlementTable td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.priceTable th,
.configTable th,
.settlementTable th {
  color: var(--muted);
  font-size: 12px;
}

.configTable input {
  width: 92px;
  padding: 0 8px;
}

.specialMarket,
.ownedSpecials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.boardPanel .panelBody {
  padding-top: 10px;
}

.boardGrid {
  display: grid;
  gap: 12px;
}

.boardPlayer {
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.85);
}

.boardPlayer.active {
  border-color: rgba(27, 111, 99, 0.4);
  box-shadow: inset 4px 0 0 var(--accent);
}

.boardPlayer.self {
  background: rgba(189, 134, 40, 0.07);
  border-color: rgba(189, 134, 40, 0.32);
}

.boardPlayer.vacant {
  background: rgba(0, 0, 0, 0.03);
  color: var(--muted);
}

.boardPlayerHeader {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 10px;
}

.boardPlayerName {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.boardPlayerName strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.boardPlayerMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.selfBadge,
.activeBadge {
  display: inline-block;
  min-height: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.selfBadge {
  background: rgba(189, 134, 40, 0.18);
  color: #8d641d;
}

.activeBadge {
  background: var(--accent);
  color: #ffffff;
}

.boardAccessories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}

.specialCard,
.ownedSpecial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.specialCard strong,
.ownedSpecial strong {
  display: block;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}

.specialCard p,
.ownedSpecial p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.specialUseLine {
  display: grid;
  gap: 7px;
  min-width: 118px;
}

.specialUseLine select {
  width: 100%;
}

.specialSetBanner {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(189, 134, 40, 0.32);
  border-radius: 8px;
  background: rgba(189, 134, 40, 0.1);
  color: #6e4c17;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.accessoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.accessoryTile {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.accessoryTile.large {
  min-height: 132px;
  padding: 12px;
}

.accessoryTile.mini {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  width: 104px;
  min-height: 38px;
  padding: 5px 7px;
}

.accessoryTile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid var(--gem-color, #94a3b8);
  pointer-events: none;
}

.gem-diamond { --gem-color: #67bfd9; }
.gem-emerald { --gem-color: #2e9f68; }
.gem-ruby { --gem-color: #c74457; }
.gem-pearl { --gem-color: #c8b993; }

.gemMark {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 94% 36%, 76% 100%, 24% 100%, 6% 36%);
  background: var(--gem-color, #94a3b8);
  color: #ffffff;
  font-weight: 950;
}

.mini .gemMark {
  width: 22px;
  font-size: 11px;
}

.accessoryName {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.accessoryName strong,
.accessoryName span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accessoryName strong {
  font-size: 15px;
}

.accessoryName span,
.baseValue {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tileBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}

.curseBadge,
.unknownBadge,
.copyBadge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.curseBadge {
  background: #3b263f;
  color: #fff;
}

.unknownBadge {
  background: #edf0f2;
  color: var(--muted);
}

.copyBadge {
  background: rgba(189, 134, 40, 0.14);
  color: #8d641d;
}

.accessoryTile.cursed {
  border-color: rgba(92, 82, 124, 0.46);
  box-shadow: inset 0 0 0 2px rgba(92, 82, 124, 0.1);
}

.carTile {
  --gem-color: #bd8628;
  background: linear-gradient(135deg, #2f3c45, #1f252a);
  color: #ffffff;
}

.carTile .accessoryName strong,
.carTile .accessoryName span {
  color: #ffffff;
}

.carTile .accessoryName span {
  color: rgba(255, 255, 255, 0.78);
}

.carTile .baseValue {
  color: rgba(255, 255, 255, 0.66);
}

.carIcon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 32px;
  border-radius: 6px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.mini .carIcon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 11px;
}

.specialChip {
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(92, 82, 124, 0.22);
  border-radius: 999px;
  background: rgba(92, 82, 124, 0.08);
  color: var(--violet);
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tradePanel {
  border-color: rgba(189, 134, 40, 0.38);
}

.tradeBoard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.offerSummary {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.offerSummary.locked {
  border-color: rgba(189, 134, 40, 0.55);
  background: rgba(189, 134, 40, 0.08);
}

.offerSummary.accepted {
  border-color: rgba(27, 111, 99, 0.45);
  background: rgba(27, 111, 99, 0.06);
}

.locked .acceptState {
  background: var(--gold);
  color: #ffffff;
}

.offerSummary h3 {
  margin: 0 0 3px;
}

.offerSummary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.acceptState {
  justify-self: start;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f0f2f0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.accepted .acceptState {
  background: var(--accent);
  color: #ffffff;
}

.tradeEditor {
  display: grid;
  gap: 12px;
}

.tradeEditColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.checkRow {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  margin: 5px 0;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.checkRow input {
  min-height: 0;
  flex: none;
}

.moneyInput {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
}

.moneyInput input {
  width: 96px;
  padding: 0 8px;
}

.tradeLockHint {
  margin: -2px 0 4px;
  padding: 8px 10px;
  border: 1px dashed rgba(189, 134, 40, 0.4);
  border-radius: 8px;
  background: rgba(189, 134, 40, 0.08);
  color: #6e4c17;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

.tradeActions,
.modalActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

fieldset[disabled] {
  background: rgba(0, 0, 0, 0.03);
  color: var(--muted);
}

fieldset[disabled] .checkRow,
fieldset[disabled] .moneyInput,
fieldset[disabled] textarea {
  cursor: not-allowed;
  opacity: 0.85;
}

.intelList,
.logList {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
}

.intelItem,
.logItem {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.chatPanel .panelBody {
  display: grid;
  gap: 9px;
}

.chatTarget {
  width: 100%;
  padding: 0 10px;
}

.chatMessages {
  display: grid;
  gap: 7px;
  min-height: 160px;
  max-height: 260px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf7;
  overflow: auto;
}

.chatMsg {
  display: flex;
}

.chatMsg span {
  max-width: 88%;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chatMsg.mine {
  justify-content: flex-end;
}

.chatMsg.mine span {
  background: var(--accent);
  color: #ffffff;
}

.chatForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.chatForm input {
  min-width: 0;
  padding: 0 10px;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 27, 31, 0.54);
}

.modalCard {
  width: min(900px, 100%);
  max-height: min(86vh, 900px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.modalCard.small {
  width: min(460px, 100%);
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.modalHeader h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.iconButton {
  min-width: 38px;
  width: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.modalBody {
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.targetButtons {
  display: grid;
  gap: 10px;
}

.rulesSlideModal {
  width: min(960px, 100%);
}

.rulesSlidesBody {
  display: grid;
  gap: 12px;
  padding: 12px 14px 16px;
}

.rulesSlideViewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.rulesSlideTrack {
  display: flex;
  width: 100%;
  transition: transform 0.34s cubic-bezier(0.4, 0.04, 0.2, 1);
}

.rulesSlide {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 18px 20px 22px;
  box-sizing: border-box;
}

.rulesSlideTitle {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
}

.rulesSlideBody p {
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.7;
}

.rulesSlideBody p:last-child {
  margin-bottom: 0;
}

.rulesSlideBody ul {
  margin: 0 0 12px;
  padding-left: 1.4em;
  line-height: 1.7;
}

.ruleHilites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}

.ruleHilites > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(189, 134, 40, 0.08);
}

.ruleHilites strong {
  font-size: 18px;
  color: var(--accent-strong);
}

.ruleHilites span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ruleSamples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}

.ruleSampleSpecials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}

.sampleSpecial {
  min-height: 0;
  padding: 10px 12px;
  grid-template-columns: 1fr;
}

.ruleBonusTable {
  width: 100%;
  margin: 8px 0 14px;
  border-collapse: collapse;
  font-size: 13px;
}

.ruleBonusTable th,
.ruleBonusTable td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.ruleBonusTable th {
  color: var(--muted);
  font-size: 12px;
}

.ruleSpecialBanner {
  display: grid;
  gap: 5px;
  margin: 8px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(189, 134, 40, 0.35);
  border-radius: 8px;
  background: rgba(189, 134, 40, 0.12);
  color: #6e4c17;
}

.ruleSpecialBanner strong {
  font-size: 16px;
}

.ruleSpecialBanner span {
  font-size: 13px;
  line-height: 1.6;
}

.ruleTurnSteps,
.ruleTradeFlow {
  display: grid;
  gap: 8px;
  margin: 8px 0 14px;
}

.ruleTurnSteps > div,
.ruleTradeFlow > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf7;
}

.ruleTurnSteps strong,
.ruleTradeFlow strong {
  color: var(--accent-strong);
  font-size: 14px;
}

.ruleTurnSteps span,
.ruleTradeFlow span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ruleTradeContents {
  margin: 6px 0 12px;
  padding-left: 1.4em;
  line-height: 1.7;
}

.rulesSlideNav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.rulesSlideDots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.rulesDot {
  min-width: 30px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.rulesDot.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.configForm {
  display: grid;
  gap: 12px;
}

.settlementLead {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}

.settlementTable .zeroed td {
  color: var(--danger);
  text-decoration: line-through;
}

.burst {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: burstFade 1.7s ease both;
}

.burstInner {
  min-width: min(420px, calc(100vw - 42px));
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(31, 37, 42, 0.9);
  color: #ffffff;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.burstInner span,
.burstInner strong {
  display: block;
  overflow-wrap: anywhere;
}

.burstInner span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 850;
}

.burstInner strong {
  margin-top: 4px;
  font-size: 24px;
  line-height: 1.2;
}

@keyframes burstFade {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }

  .rightStack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app {
    width: min(100vw - 18px, 720px);
    padding-top: 10px;
  }

  .topbar,
  .layout,
  .rightStack,
  .tradeBoard,
  .tradeEditColumns {
    grid-template-columns: 1fr;
  }

  .copyLine {
    width: 100%;
  }

  .copyLine input {
    min-width: 0;
  }

  .specialMarket,
  .ownedSpecials {
    grid-template-columns: 1fr;
  }

  .specialCard,
  .ownedSpecial {
    grid-template-columns: 1fr;
  }

  .accessoryGrid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }

  .chatMessages {
    max-height: 220px;
  }
}

@media (max-width: 520px) {
  .setupPanel {
    padding: 20px;
  }

  .titleBlock h1 {
    font-size: 24px;
  }

  .panelHeader,
  .panelBody {
    padding-left: 10px;
    padding-right: 10px;
  }

  .accessoryTile.large {
    min-height: 124px;
  }

  .chatForm {
    grid-template-columns: 1fr;
  }

  .modalOverlay {
    padding: 10px;
  }
}