/* ============================================================
   Cornholio — "På Snusen i Hagen" design system
   Vintage 1920–1955 tropical travel poster · tiki · letterpress
   Parchment, navy/petroleum, coral/brick, palm, citrus.
   ============================================================ */

:root {
  /* Paper */
  --paper: #f2e7cf;
  --paper-deep: #e9d9b4;
  --card: #f7efdd;
  /* Primary */
  --navy: #21384e;
  --petrol: #1d5c5e;
  --turkos: #2e837f;
  /* Accent */
  --brick: #b3542e;
  --coral: #d4694a;
  --rust: #8f3f22;
  /* Nature */
  --olive: #6d7a4a;
  --palm: #3e5d40;
  /* Citrus */
  --citron: #d9a83c;
  --lime: #9aa646;
  /* Ink */
  --ink: #2c2a22;
  --mute: #70685a;
  --line: rgba(44, 42, 34, 0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  /* Petroleum sea + sun-bleached vignette behind the poster */
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(217, 168, 60, 0.20), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(14, 43, 44, 0.55), transparent 65%),
    linear-gradient(175deg, #1d4a4c 0%, #1d5c5e 45%, #21384e 100%) #21384e;
}
body {
  min-height: 100vh;
  padding: 28px 14px 48px;
  color: var(--ink);
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
}

/* The poster sheet */
.container {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 44px 40px 36px;
  background:
    /* print grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.05'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"),
    /* sun-fade toward edges */
    radial-gradient(ellipse 90% 80% at 50% 30%, var(--card) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  border: 2px solid var(--navy);
  box-shadow:
    inset 0 0 0 5px var(--paper),
    inset 0 0 0 6px var(--line),
    0 24px 60px rgba(10, 25, 30, 0.55);
}
/* Sekelskifteshörn */
.container::before,
.container::after {
  content: "❧";
  position: absolute;
  font-size: 22px;
  color: var(--brick);
  opacity: 0.85;
}
.container::before { top: 12px; left: 16px; }
.container::after { bottom: 10px; right: 16px; transform: scaleX(-1) rotate(180deg); }

/* ---------- Typography ---------- */
header { text-align: center; margin-bottom: 30px; }

.eyebrow {
  font-family: "Alfa Slab One", "Rockwell", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  font-size: 11px;
  color: var(--petrol);
  margin-bottom: 12px;
}

h1 {
  margin: 0;
  font-family: "Rye", "Alfa Slab One", "Rockwell", serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 68px);
  line-height: 1.05;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 2px 2px 0 var(--paper-deep), 3px 3px 0 rgba(44, 42, 34, 0.35);
}
/* Ornament divider under title */
header h1 + .tag::before {
  content: "· ✦ ·";
  display: block;
  color: var(--brick);
  letter-spacing: 0.6em;
  font-size: 14px;
  margin: 10px 0 6px;
  font-style: normal;
}
.tag {
  font-family: "Yellowtail", cursive;
  font-size: 21px;
  color: var(--rust);
  margin: 6px 0 0;
}

h2 {
  font-family: "Alfa Slab One", "Rockwell", serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 38px 0 14px;
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -1px var(--paper), 0 4px 0 -1px var(--line); /* double rule */
}
.count {
  font-family: "Lora", serif;
  font-size: 13px;
  font-style: italic;
  color: var(--brick);
  letter-spacing: 0.05em;
  text-transform: none;
}

/* ---------- Forms & painted wood-sign buttons ---------- */
input, select, button {
  font-family: "Lora", serif;
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  outline: none;
  border-radius: 3px;
  min-height: 44px; /* constitution: mobile-first tap targets ≥44px */
}
input:focus, select:focus {
  border-color: var(--petrol);
  box-shadow: 0 0 0 1px var(--petrol);
}
input::placeholder { color: var(--mute); font-style: italic; }

button {
  cursor: pointer;
  font-family: "Alfa Slab One", "Rockwell", serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(180deg, var(--coral) 0%, var(--brick) 55%, var(--rust) 100%);
  border: 1px solid var(--rust);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.35),
    inset 0 0 0 3px rgba(242, 231, 207, 0.18),
    0 3px 0 var(--rust),
    0 5px 8px rgba(44, 42, 34, 0.3);
  text-shadow: 0 1px 0 rgba(60, 20, 5, 0.5);
  transition: filter 0.12s ease;
}
/* Inga hopp — bara ljus/skugga ändras vid hover/klick */
button:hover { filter: brightness(0.94); }
button:active { filter: brightness(0.86); }
button.ghost {
  background: var(--card);
  color: var(--petrol);
  border: 1px solid var(--petrol);
  box-shadow: 0 2px 0 var(--petrol);
  text-shadow: none;
}

.new-form form { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 140px; }

/* ---------- Match form ---------- */
.match-form {
  display: grid;
  grid-template-columns: 1fr 80px auto 80px 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 14px 0;
  padding: 18px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line);
  border-radius: 4px;
}
.match-form .vs {
  font-family: "Yellowtail", cursive;
  font-size: 20px;
  color: var(--brick);
  text-align: center;
}
.match-form .score {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  width: 70px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .match-form { grid-template-columns: 1fr 1fr; }
  .match-form .vs { display: none; }
}

/* ---------- Home tournament list ---------- */
.tournament-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tournament-list li {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line), 0 3px 8px rgba(44, 42, 34, 0.12);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.12s ease;
}
.tournament-list li:hover {
  cursor: pointer;
  background: #fbf4e2;
}
.tournament-list li.empty { justify-content: center; box-shadow: none; border-style: dashed; }
.tournament-list .t-name { font-weight: 700; font-size: 17px; color: var(--navy); }
.tournament-list .t-stats { font-size: 13px; color: var(--mute); font-style: italic; }

/* ---------- Teams ---------- */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.team-chip {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.team-chip:nth-child(odd) { transform: rotate(-0.35deg); }
.team-chip:nth-child(even) { transform: rotate(0.3deg); }
.team-chip .row { justify-content: space-between; flex-wrap: nowrap; }
.team-chip .name-in {
  border: none; padding: 0; background: transparent;
  font-weight: 700; color: var(--navy); box-shadow: none;
  flex: 1; min-width: 0;
}
.team-chip .name-in:focus { border-bottom: 1px solid var(--petrol); }
.team-chip .members-in {
  border: none; padding: 0; background: transparent;
  font-size: 13px; font-style: italic; color: var(--mute); margin-top: 4px; box-shadow: none;
}
.team-chip .del {
  background: none; border: none; box-shadow: none;
  font-size: 18px; color: var(--brick); cursor: pointer; text-shadow: none;
  min-width: 44px; min-height: 44px; padding: 0;
}
.team-chip .del:hover { transform: none; filter: none; color: var(--rust); }

/* ---------- Matches list ---------- */
.matches { list-style: none; padding: 0; margin: 12px 0 0; }
.matches li {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 7px;
  font-size: 15px;
}
.matches .team-a, .matches .team-b { display: flex; align-items: baseline; gap: 8px; font-weight: 700; color: var(--navy); }
.matches .team-b { justify-content: flex-end; text-align: right; }
.matches .n {
  font-family: "Alfa Slab One", "Rockwell", serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--brick);
  font-variant-numeric: tabular-nums;
}
.matches .winner { color: var(--palm); }
.matches .winner .n { color: var(--palm); }
.matches .sep { color: var(--mute); }
.matches .del {
  background: none; border: none; box-shadow: none;
  color: var(--mute); font-size: 14px; cursor: pointer; text-shadow: none;
  min-width: 44px; min-height: 44px; padding: 0;
}
.matches .del:hover { transform: none; filter: none; color: var(--brick); }

/* ---------- Standings ---------- */
.standings {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--navy);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line);
}
.standings th, .standings td {
  padding: 11px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(44, 42, 34, 0.14);
  font-variant-numeric: tabular-nums;
}
.standings th {
  background: var(--navy);
  color: var(--paper);
  font-family: "Alfa Slab One", "Rockwell", serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.standings td.team { text-align: left; font-weight: 700; color: var(--navy); }
.standings tr:first-child td { background: rgba(217, 168, 60, 0.18); }
.standings tr:first-child td.rank { color: var(--citron); font-family: "Alfa Slab One", serif; font-size: 18px; }
.standings tr:nth-child(2) td.rank { color: var(--turkos); font-weight: 700; }
.standings tr:nth-child(3) td.rank { color: var(--coral); font-weight: 700; }
.standings td.diff.pos { color: var(--palm); font-weight: 700; }
.standings td.diff.neg { color: var(--brick); font-weight: 700; }

/* ---------- Suggest ---------- */
.suggest {
  margin-top: 18px;
  padding: 22px 20px;
  text-align: center;
  background:
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(217, 168, 60, 0.25), transparent 70%),
    var(--card);
  border: 1px solid var(--navy);
  box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--line);
  border-radius: 4px;
}
.suggest .label {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 11px;
  color: var(--petrol);
}
.suggest .pair {
  font-family: "Rye", "Alfa Slab One", serif;
  font-size: 26px;
  color: var(--navy);
  margin: 10px 0 6px;
}
.suggest .pair .vs { font-family: "Yellowtail", cursive; font-size: 22px; color: var(--brick); margin: 0 12px; }
.suggest .why { font-size: 13px; font-style: italic; color: var(--mute); }

/* ---------- Header extras ---------- */
.back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--petrol);
  text-decoration: none;
  font-weight: 700;
  font-style: italic;
}
.back:hover { color: var(--brick); }
.share {
  margin-top: 16px;
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  font-size: 13px;
  font-style: italic;
  color: var(--mute);
}
.share input { width: 280px; max-width: 100%; font-size: 13px; }
.live-dot { color: var(--palm); font-weight: 700; font-style: normal; }

footer {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--mute);
}
footer::before {
  content: "· ✦ ·";
  display: block;
  color: var(--brick);
  letter-spacing: 0.6em;
  font-size: 12px;
  margin-bottom: 10px;
  font-style: normal;
}
footer a { color: var(--petrol); text-decoration: none; }
footer a:hover { color: var(--brick); }

.empty { padding: 18px; text-align: center; color: var(--mute); font-style: italic; }

/* ---------- QR box (AC-3) ---------- */
.qr-box { margin-top: 16px; text-align: center; }
.qr-box img {
  padding: 8px;
  background: #fbf6ea;
  border: 1px solid var(--navy);
  box-shadow: 0 0 0 4px #fbf6ea, 0 0 0 5px var(--line), 0 6px 14px rgba(44, 42, 34, 0.2);
  border-radius: 3px;
}
.qr-box .tag { font-size: 18px; }

/* ---------- Spectator mode (AC-10) ---------- */
body.spectator #new-team,
body.spectator #new-match,
body.spectator #suggest-btn,
body.spectator .del { display: none; }
body.spectator .members-ro { font-size: 13px; font-style: italic; color: var(--mute); margin-top: 4px; }

@media (max-width: 640px) {
  .container { padding: 30px 18px 26px; }
}

/* ---------- Hero banner (horisontell grafik, göms om bilden saknas) ---------- */
.hero { margin: -20px -16px 18px; }
.hero img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--navy);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line);
}

/* ---------- "Fortsätt där du var" ---------- */
.resume-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 18px;
  text-decoration: none;
  background:
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(46, 131, 127, 0.12), transparent 70%),
    var(--card);
  border: 1px solid var(--petrol);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--petrol);
  border-radius: 4px;
  transition: background 0.12s ease;
}
.resume-card:hover { background: #f0ede0; }
.resume-label {
  font-family: "Alfa Slab One", serif;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--petrol);
}
.resume-name {
  font-family: "Rye", "Alfa Slab One", serif;
  font-size: 22px; color: var(--navy);
}
.resume-mode { font-size: 13px; font-style: italic; color: var(--mute); }

/* ---------- Länk-knapp (WhatsApp m.fl.) — samma träskylt ---------- */
.btn-link {
  display: inline-block;
  cursor: pointer;
  font-family: "Alfa Slab One", "Rockwell", serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 14px;
  color: var(--paper);
  background: linear-gradient(180deg, #4d8a55 0%, var(--palm) 60%, #2c4530 100%);
  border: 1px solid #2c4530;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.3),
    inset 0 0 0 3px rgba(242, 231, 207, 0.15),
    0 3px 0 #2c4530,
    0 5px 8px rgba(44, 42, 34, 0.3);
  text-shadow: 0 1px 0 rgba(20, 40, 20, 0.5);
  transition: filter 0.12s ease;
}
.btn-link:hover { filter: brightness(0.94); }
.btn-link:active { filter: brightness(0.86); }

/* Spectator: göm även arkivering */
body.spectator #danger-zone { display: none; }