:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { margin: 0; background: #0e0f13; color: #e9e9ee; }
.wrap { max-width: 920px; margin: 0 auto; padding: 28px 16px; }
.card { background: #141622; border: 1px solid #242744; border-radius: 14px; padding: 18px; }
.muted { color: #b7bbd6; }
.small { font-size: 0.9rem; }
hr { border: none; border-top: 1px solid #242744; margin: 18px 0; }
.btn { display: inline-block; padding: 10px 14px; border-radius: 12px; border: 1px solid #3a3f6b; background: #1c1f33; color: #fff; cursor: pointer; text-decoration: none; margin-right: 10px; margin-bottom: 10px; }
.btn.secondary { background: transparent; }
.label { display:block; margin: 10px 0 6px; }
.input { width: 100%; max-width: 420px; padding: 10px 12px; border-radius: 12px; border: 1px solid #3a3f6b; background: #0e0f13; color: #fff; }
.hidden { display: none; }
.mono { white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background: #0e0f13; border: 1px dashed #242744; padding: 10px; border-radius: 12px; }
.story { white-space: pre-wrap; line-height: 1.5; padding: 10px; background: #0e0f13; border-radius: 12px; border: 1px solid #242744; }

.row { margin-top: 12px; }
.duel { display: flex; align-items: center; gap: 14px; margin: 10px 0 18px; flex-wrap: wrap; }
.vs { font-weight: 700; opacity: 0.7; padding: 0 8px; }
.miniCard { display:flex; flex-direction: column; gap: 6px; }
.miniCard img { width: 180px; max-width: 100%; border-radius: 12px; border: 1px solid #242744; background:#0e0f13; }
.fragRow { display:flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 18px; }
.frag { width: 160px; border: 1px solid #242744; border-radius: 12px; padding: 10px; background:#0e0f13; }
.frag img { width: 100%; border-radius: 10px; border: 1px solid #242744; margin-top: 8px; }

.frag-debug {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
}

.frag-name {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 8px;
}

.hrow { display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.debugToggle { display:flex; align-items:center; gap: 8px; font-size: 13px; opacity: 0.85; user-select: none; }
.debugToggle input { transform: translateY(1px); }

.statusBox{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #242744;
  background: #0e0f13;
  font-size: 13px;
  opacity: 0.9;
}
.statusBox.ok{ border-color: #2a6; }
.statusBox.err{ border-color: #c44; }