@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background-color: #1c1510;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px);
  font-family: 'Crimson Pro', Georgia, serif;
  color: #2c1810;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
}

/* ---- Banner background (login / register) ---- */
body.has-banner {
  position: relative;
}

body.login-banner::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/img/login-banner.png') center center / cover no-repeat;
  filter: grayscale(0.4) brightness(.75);
  z-index: 0;
}

body.schedule-banner::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/img/user-banner.png') center center / cover no-repeat;
  filter: grayscale(0.4) brightness(.75);
  z-index: 0;
}

body.has-banner > * {
  position: relative;
  z-index: 1;
}

/* ---- Parchment card ---- */
.card {
  background: #f2e0b0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  border: 3px solid #7a5c2e;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px #c9a227,
    0 0 0 5px #7a5c2e,
    0 8px 32px rgba(0,0,0,.6);
  padding: 2.5rem 3rem;
  width: 100%;
  max-width: 720px;
  margin-bottom: 2rem;
  position: relative;
}

.card::before, .card::after {
  content: '✦';
  position: absolute;
  font-size: 1.2rem;
  color: #c9a227;
}
.card::before { top: .6rem; left: .8rem; }
.card::after  { bottom: .6rem; right: .8rem; }

/* ---- Headings ---- */
h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  color: #5a1e00;
  text-align: center;
  letter-spacing: .12em;
  text-shadow: 1px 1px 0 #c9a227;
  margin-bottom: .3rem;
}

h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: #7a3b00;
  letter-spacing: .08em;
  border-bottom: 2px solid #c9a227;
  padding-bottom: .4rem;
  margin: 1.6rem 0 1rem;
}

h3 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #7a3b00;
  margin: 1.2rem 0 .6rem;
}

/* ---- Subtitle / nav ---- */
.subtitle {
  text-align: center;
  font-style: italic;
  color: #7a5c2e;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  margin-bottom: .5rem;
  color: #5a3a1a;
}

/* ---- Forms ---- */
form { display: flex; flex-direction: column; gap: .8rem; }

label {
  font-weight: 600;
  font-size: .95rem;
  color: #4a2800;
}

input[type="text"],
input[type="password"],
input[type="datetime-local"],
input[type="number"],
select {
  width: 100%;
  padding: .55rem .8rem;
  background: #fdf5e0;
  border: 2px solid #b08040;
  border-radius: 2px;
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: #2c1810;
  outline: none;
  transition: border-color .2s;
}

input:focus, select:focus { border-color: #c9a227; }

/* ---- Buttons ---- */
button, .btn {
  display: inline-block;
  padding: .55rem 1.4rem;
  background: linear-gradient(180deg, #8b4513 0%, #5a1e00 100%);
  color: #f2e0b0;
  border: 2px solid #c9a227;
  border-radius: 2px;
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  letter-spacing: .06em;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
  align-self: flex-start;
}

button:hover, .btn:hover {
  background: linear-gradient(180deg, #a0522d 0%, #7a1e00 100%);
  box-shadow: 0 0 8px rgba(201,162,39,.5);
}

button.danger {
  background: linear-gradient(180deg, #5a1e1e 0%, #3a0a0a 100%);
  padding: .3rem .8rem;
  font-size: .8rem;
}

/* ---- Links ---- */
a {
  color: #8b1a00;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted #c9a227;
  transition: color .2s;
}
a:hover { color: #c9a227; }

/* ---- Error / notice ---- */
.error {
  background: #f8d7d7;
  border: 1px solid #a00;
  color: #700;
  padding: .5rem .8rem;
  border-radius: 2px;
  font-size: .95rem;
}

/* ---- Table ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

th {
  font-family: 'Cinzel', serif;
  font-size: .85rem;
  letter-spacing: .06em;
  color: #5a1e00;
  background: #e8c87a44;
  padding: .5rem .8rem;
  border-bottom: 2px solid #c9a227;
  text-align: left;
}

td {
  padding: .5rem .8rem;
  border-bottom: 1px solid #d4b870;
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #fdf0cc55; }

/* ---- Match card ---- */
.match-item {
  padding: .7rem .9rem;
  border: 1px solid #c9a22766;
  border-radius: 2px;
  margin-bottom: .7rem;
  background: #fdf5e055;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.match-item .versus {
  font-family: 'Cinzel', serif;
  font-size: .85rem;
  color: #7a3b00;
  letter-spacing: .05em;
  flex: 1;
}

.match-item .winner-badge {
  background: #c9a227;
  color: #2c1810;
  font-family: 'Cinzel', serif;
  font-size: .8rem;
  padding: .2rem .6rem;
  border-radius: 2px;
}

/* ---- Slot list ---- */
ul.slot-list { list-style: none; padding: 0; }

ul.slot-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .6rem;
  border-bottom: 1px solid #d4b870;
  font-size: 1rem;
}

ul.slot-list li:last-child { border-bottom: none; }

/* ---- Inline form (delete button) ---- */
form.inline { display: inline; flex-direction: unset; }

/* ---- Divider ---- */
hr {
  border: none;
  border-top: 1px solid #c9a22766;
  margin: 1.2rem 0;
}

/* ---- Empty state ---- */
.empty {
  font-style: italic;
  color: #9a7a50;
  text-align: center;
  padding: 1rem 0;
}