@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Playfair+Display:wght@600;700;800&display=swap");

:root {
  --paper: #f7f1e5;
  --paper-2: #efe4cf;
  --card: #fffaf0;
  --crimson: #9b1520;
  --crimson-deep: #6e0e16;
  --gold: #b8863b;
  --gold-light: #d9b36a;
  --ink: #2b1d14;
  --ink-soft: #6b5543;
  --line: #e2cfa9;
  --good: #2f6b3a;
  --good-bg: #e7f0df;
  --bad: #9b1520;

  --f-display: "Playfair Display", Georgia, serif;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, #fffaf0 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, var(--paper-2) 0%, transparent 70%);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

.caps { font-family: var(--f-caps); letter-spacing: .18em; text-transform: uppercase; }
.display { font-family: var(--f-display); }

/* the little dhaka diamond divider from the posters */
.divider {
  display: flex; align-items: center; gap: .6em; color: var(--crimson);
  margin: .4em auto; width: min(420px, 70%);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1.5px;
  background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
}
.divider i {
  width: .7em; height: .7em; transform: rotate(45deg);
  border: 2px solid var(--gold); background: var(--crimson); flex: none;
}

.btn {
  font-family: var(--f-caps); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 2px solid var(--gold); background: var(--crimson); color: #fff8ea;
  padding: .85em 1.4em; border-radius: 10px; cursor: pointer; font-size: 1rem;
  box-shadow: 0 2px 0 var(--crimson-deep), 0 6px 16px rgba(110, 14, 22, .25);
  transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--crimson-deep); }
.btn:disabled { filter: grayscale(.6) opacity(.55); cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--crimson); box-shadow: none; }
.btn.gold { background: var(--gold); border-color: var(--crimson-deep); }

.card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 0 #fff inset, 0 8px 24px rgba(80, 40, 10, .08);
}

.logo { border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.18); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--crimson-deep); color: #fff8ea; padding: .7em 1.1em; border-radius: 10px;
  font-family: var(--f-body); font-size: 1.05rem; z-index: 99; max-width: calc(100% - 32px);
  border: 1.5px solid var(--gold); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

.conn {
  position: fixed; top: 10px; right: 10px; z-index: 50; font: 600 12px/1 system-ui, sans-serif;
  padding: 6px 10px; border-radius: 99px; background: var(--crimson); color: #fff; display: none;
}
.conn.show { display: block; }

/* ---- table number badge (tableBadge() in common.js) */
.tblno { display: inline-flex; align-items: center; gap: .28em; padding: .1em .55em .1em .45em; border-radius: 99px;
  border: 1.5px solid #9fb6c4; background: #eef4f7; color: #3f6377; font: 700 .8em/1.25 var(--f-body);
  letter-spacing: 0; text-transform: none; vertical-align: middle; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; }  /* full-height digits: the body font's old-style ones read small */
.tblno svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-linecap: round; }

/* ---- sponsors (filled by loadSponsors() in common.js). Sized in em: set font-size on the container. */
.sponsors { text-align: center; }
.sponsors:empty { display: none; }
.sp-title { color: var(--crimson); font-weight: 700; font-size: 1em; letter-spacing: .22em; }
.sp-tier { margin-top: .7em; }
.sp-label { display: flex; align-items: center; gap: .8em; justify-content: center; font-size: .72em; font-weight: 700;
  letter-spacing: .24em; margin: 0 auto .55em; width: min(32em, 100%); }
.sp-label::before, .sp-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.sp-label::after { transform: scaleX(-1); }
.sp-label span { padding: .3em 1em; border-radius: 99px; }
.sp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; }
.sp-card { display: grid; place-items: center; border-radius: .7em; background: rgba(255, 250, 240, .9); }
/* loadSponsors() sizes each logo by area so wide and square logos look equally strong */
.sp-card img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

.sp-gold .sp-label { color: var(--gold); }
.sp-gold .sp-label span { color: #fff8ea; background: linear-gradient(180deg, #d1a557, #a5752d); box-shadow: 0 2px 8px rgba(165, 117, 45, .35); }
.sp-gold .sp-card { width: 18em; height: 8.6em; padding: .7em 1em;
  /* polished metal frame: a gradient border (border-box) under a light inner panel (padding-box) */
  border: .28em solid transparent;
  background: linear-gradient(180deg, #fffdf7, #fcf3e0) padding-box,
    linear-gradient(135deg, #f7e08a 0%, #c79531 22%, #fff3b8 45%, #b07a26 68%, #e9c96a 100%) border-box;
  box-shadow: 0 6px 18px rgba(150, 105, 35, .2); }

.sp-silver .sp-label { color: #8d949b; }
.sp-silver .sp-label span { color: #fff; background: linear-gradient(180deg, #b4bac0, #858c93); }
.sp-silver .sp-card { width: 12.5em; height: 5.8em; padding: .5em .8em;
  border: .24em solid transparent;
  background: linear-gradient(180deg, #ffffff, #f1f3f5) padding-box,
    linear-gradient(135deg, #f2f4f6 0%, #9ea5ac 22%, #ffffff 45%, #7f878e 68%, #d3d8dc 100%) border-box;
  box-shadow: 0 6px 16px rgba(60, 66, 74, .14); }