/* Base form elements */
.label-base {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.input-base {
  width: 100%;
  border: 1.5px solid #ddd9d0;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.input-base:focus {
  border-color: #1a4a78;
  box-shadow: 0 0 0 3px rgba(26, 74, 120, 0.1);
}

.input-base::placeholder {
  color: #b0aca4;
}

.input-sm {
  border: 1.5px solid #ddd9d0;
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
  transition: border-color 0.15s;
  outline: none;
}

.input-sm:focus {
  border-color: #1a4a78;
  box-shadow: 0 0 0 2px rgba(26, 74, 120, 0.08);
}

/* Hero "チームに入る" input placeholder */
.hero-input::placeholder { color: #4a6070; }

/* Hide Alpine cloak */
[x-cloak] { display: none !important; }

/* Page fade — opacity only, no movement */
body {
  animation: fadeIn 0.18s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Result badge helpers */
.result-win  { background: rgba(42,84,56,0.08);  color: #2a5438; }
.result-lose { background: rgba(139,44,44,0.08); color: #8b2c2c; }
.result-draw { background: rgba(122,120,112,0.1); color: #5a5750; }

/* Thumbnail aspect ratio */
.thumb-box {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 0.375rem;
}

.thumb-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}