.match-import-dialog {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #c39a61;
  border-radius: 6px;
  background-color: #281a19;
  background-image: linear-gradient(rgba(32, 18, 18, .82), rgba(24, 14, 16, .94)), var(--brocade);
  background-size: auto, 520px 520px;
  box-shadow: inset 0 0 0 1px rgba(245, 214, 156, .22), 0 24px 65px rgba(0, 0, 0, .65);
  color: var(--ink);
  scrollbar-width: thin;
}

.match-import-dialog.has-preview { width: min(860px, calc(100vw - 24px)); }
.match-import-dialog [hidden] { display: none !important; }

.match-import-dialog::backdrop {
  background: rgba(6, 3, 4, .82);
  backdrop-filter: blur(4px);
}

.match-import-panel { position: relative; padding: 28px; }

.match-import-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #a77e4e;
  border-radius: 3px;
  background: rgba(22, 13, 15, .75);
  color: #f2dbb2;
  font: 400 1.5rem/1 var(--font-ui);
  transition: border-color .18s ease, background-color .18s ease;
}

.match-import-close:is(:hover, :focus-visible) {
  border-color: #f0ca88;
  background: rgba(93, 53, 34, .7);
}

.match-import-eyebrow {
  display: block;
  margin-right: 48px;
  color: var(--gold-hi);
  font: 800 .72rem/1.2 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.match-import-panel h2 {
  margin: 8px 48px 12px 0;
  color: #fff1d0;
  font: 800 clamp(1.9rem, 6vw, 2.4rem)/1 var(--font-display);
}

#match-import-description {
  margin: 0;
  color: #e3d3bc;
  font: 400 .96rem/1.5 var(--font-ui);
}

#match-import-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 24px;
}

#match-import-form label {
  margin-bottom: 8px;
  color: #f3dbad;
  font: 800 .87rem/1.2 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

#match-import-id {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #a98457;
  border-radius: 4px;
  background-color: #efddba;
  background-image: repeating-linear-gradient(97deg, rgba(78, 53, 28, .028) 0 1px, transparent 1px 5px), repeating-linear-gradient(3deg, rgba(78, 53, 28, .018) 0 1px, transparent 1px 7px);
  color: #37241c;
  font: 600 1rem/1.3 var(--font-ui);
  letter-spacing: .025em;
  box-shadow: inset 0 0 0 1px rgba(255, 239, 202, .08);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#match-import-id:hover { background-color: #f8e9c8; border-color: #bd9257; }
#match-import-id:focus-visible { outline: 2px solid #f5d894; outline-offset: 2px; background-color: #f3dfba; }
#match-import-id[aria-invalid="true"] { border-color: #b84742; box-shadow: 0 0 0 2px rgba(184, 71, 66, .22); }
#match-import-id:disabled { opacity: .7; cursor: wait; }

.match-import-error,
.match-import-status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid;
  font-size: .88rem;
  line-height: 1.35;
}

.match-import-error,
.match-import-status[data-state="error"] {
  border-color: #d37364;
  background: rgba(111, 37, 36, .29);
  color: #ffd4c9;
}

.match-import-status[data-state="pending"] {
  border-color: #d4ad70;
  background: rgba(132, 84, 36, .22);
  color: #f5ddb5;
}

.match-import-status[data-state="loading"] {
  border-color: #b9905c;
  background: rgba(111, 67, 36, .18);
  color: #ead3ac;
}

.match-import-status[data-state="success"] {
  border-color: #a4c090;
  background: rgba(69, 102, 56, .24);
  color: #e0efcf;
}

.match-import-submit {
  align-self: flex-end;
  min-width: 190px;
  min-height: 48px;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid #e2bc78;
  border-radius: 3px;
  background-image: linear-gradient(rgba(124, 73, 32, .28), rgba(69, 33, 20, .53)), var(--gold-brocade);
  background-size: auto, 270px 270px;
  box-shadow: inset 0 0 0 1px rgba(255, 228, 174, .35), 0 4px 12px rgba(0, 0, 0, .22);
  color: #fff3d5;
  font: 800 .9rem/1.1 var(--font-display);
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.match-import-submit:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  border-color: #ffe0a1;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 186, .65), 0 0 16px rgba(245, 202, 117, .36), 0 7px 16px rgba(0, 0, 0, .3);
}

.match-import-submit:active { transform: translateY(0); }
.match-import-submit:disabled { opacity: .68; cursor: wait; transform: none; }

.match-import-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.match-import-actions .match-import-submit { margin-top: 0; }

.match-import-count {
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid #c6d2aa;
  border-radius: 3px;
  background: linear-gradient(#385333, #243b25);
  box-shadow: inset 0 0 0 1px rgba(221, 241, 185, .15), 0 4px 12px rgba(0, 0, 0, .25);
  color: #f4f6dc;
  font: 800 .9rem/1.1 var(--font-display);
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
}

.match-import-count:is(:hover, :focus-visible) {
  background: linear-gradient(#4d6b40, #304c2d);
  outline: 2px solid #d9e6b4;
  outline-offset: 2px;
}

.match-import-count:disabled { opacity: .65; cursor: wait; }

.match-preview {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(218, 173, 110, .48);
  color: #e7d8c2;
  font: 400 .85rem/1.45 var(--font-ui);
}

.match-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.match-preview-eyebrow {
  color: #e1bc82;
  font: 800 .7rem/1.2 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.match-preview-heading h3 {
  margin: 5px 0 0;
  color: #fff1d0;
  font: 800 1.55rem/1.1 var(--font-display);
  overflow-wrap: anywhere;
}

.match-preview-heading h3:focus {
  outline: 2px solid #f5d894;
  outline-offset: 4px;
}

.match-preview-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #f5d894;
  font: 700 .83rem/1.3 var(--font-ui);
  text-underline-offset: 3px;
}
.match-preview-detail-link[hidden] { display: none; }
.match-preview-detail-link:hover { color: #fff1d0; }
.match-preview-detail-link:focus-visible { outline: 2px solid #f5d894; outline-offset: 3px; }

.match-preview-verdict {
  padding: 7px 10px;
  border: 1px solid #b68860;
  border-radius: 2px;
  color: #f1d4ac;
  font: 800 .72rem/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.match-preview-verdict[data-eligible="true"] { border-color: #a4c090; color: #e0efcf; }

.match-preview-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
}

.match-preview-facts > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(205, 158, 96, .35);
  background: rgba(12, 8, 9, .38);
}

.match-preview-facts dt {
  color: #d5ad78;
  font: 800 .68rem/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.match-preview-facts dd { margin: 5px 0 0; color: #fff1d0; font-weight: 700; }

.match-preview-decision {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #d1a06b;
  background: rgba(113, 65, 38, .2);
  color: #f3d9b7;
}

.match-preview-decision[data-eligible="true"] {
  border-color: #a4c090;
  background: rgba(69, 102, 56, .22);
  color: #e0efcf;
}

.match-preview-explainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-top: 15px;
}

.match-preview-explainer p { margin: 0; }
.match-preview-explainer strong { color: #f6ddae; }
.match-preview-explainer p:last-child { grid-column: 1 / -1; }

.match-preview-roster { margin-top: 20px; overflow-x: auto; }
.match-preview-roster table { width: 100%; border-collapse: collapse; }
.match-preview-roster caption {
  margin-bottom: 9px;
  color: #fff1d0;
  font: 800 1rem/1.2 var(--font-display);
  text-align: left;
}
.match-preview-roster th,
.match-preview-roster td {
  padding: 8px 7px;
  border-bottom: 1px solid rgba(205, 158, 96, .2);
  text-align: left;
  vertical-align: middle;
}
.match-preview-roster thead th {
  color: #d5ad78;
  font: 800 .62rem/1.2 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.match-preview-team th {
  padding: 8px;
  border: 1px solid rgba(205, 158, 96, .4);
  background: rgba(12, 8, 9, .48);
  color: #f4d29a;
  font: 800 .75rem/1.2 var(--font-display);
  text-transform: uppercase;
}
.match-preview-player strong,
.match-preview-player small { display: block; }
.match-preview-player strong { color: #fff1d0; }
.match-preview-player small { color: #cdb99e; font-size: .71rem; overflow-wrap: anywhere; }
.match-preview-fields { margin-top: 15px; color: #cdb99e; }
.match-preview-fields summary { color: #efc88a; cursor: pointer; }
.match-preview-fields p { overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .match-import-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .match-import-panel { padding: 24px 18px; }
  .match-import-close { top: 10px; right: 10px; }
  .match-import-actions button { width: 100%; }
}

@media (max-width: 700px) {
  .match-preview-facts,
  .match-preview-explainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-preview-explainer p { grid-column: 1 / -1; }
  .match-preview-roster table,
  .match-preview-roster tbody { display: block; }
  .match-preview-roster thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .match-preview-team { display: block; margin-top: 12px; }
  .match-preview-team th { display: block; }
  .match-preview-roster tr:not(.match-preview-team) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 7px;
    border: 1px solid rgba(205, 158, 96, .25);
    background: rgba(12, 8, 9, .3);
  }
  .match-preview-roster td { display: block; min-width: 0; border: 0; overflow-wrap: anywhere; }
  .match-preview-roster td::before {
    display: block;
    margin-bottom: 2px;
    color: #d5ad78;
    content: attr(data-label);
    font: 800 .62rem/1.2 var(--font-display);
    text-transform: uppercase;
  }
  .match-preview-roster td:first-child { grid-column: 1 / -1; border-bottom: 1px solid rgba(205, 158, 96, .2); }
}

@media (prefers-reduced-motion: reduce) {
  .match-import-close,
  #match-import-id,
  .match-import-submit,
  .match-import-count { transition: none; }
}