/* Divine Wind — shared theme (poster style: lacquer, parchment, crimson seal, gold filigree) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Knewave&display=swap');

:root {
  --lacca: #15100e;
  --lacca-2: #221915;
  --carminio: #8e1b1b;
  --carminio-scuro: #5e1010;
  --brace: #e0474a;
  --pergamena: #e9dfc9;
  --pergamena-2: #d6c7a6;
  --inchiostro: #231a15;
  --oro: #b89556;
  --oro-chiaro: #dcc28a;
  --nebbia: #eee8de;

  --f-caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-body: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --f-brush: 'Knewave', 'Brush Script MT', 'Segoe Script', cursive;

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: var(--f-body); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 2px; }

/* ---------- type ---------- */
.caps { font-family: var(--f-caps); letter-spacing: .28em; text-transform: uppercase; font-weight: 600; }
.brush {
  font-family: var(--f-brush);
  font-weight: 400;
  line-height: .9;
  transform: skewX(-7deg);
  filter: url(#dw-rough);
  display: inline-block;
}
.brush-smear { position: relative; isolation: isolate; }
.brush-smear::before {
  content: '';
  position: absolute; z-index: -1;
  left: -6%; right: -4%; top: 38%; height: 34%;
  background: linear-gradient(95deg, transparent 0, var(--carminio) 6%, rgba(142,27,27,.9) 70%, transparent 100%);
  transform: rotate(-3deg) skewX(-20deg);
  filter: url(#dw-rough);
  opacity: .85;
}

/* ---------- surfaces ---------- */
.lacquer {
  position: relative;
  color: var(--pergamena);
  background: linear-gradient(180deg, rgba(34, 25, 21, .86), rgba(16, 11, 9, .92));
  border: 1px solid rgba(184, 149, 86, .5);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .9);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.lacquer::before, .parchment::before {
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid rgba(184, 149, 86, .28);
  pointer-events: none;
}
.parchment {
  position: relative;
  color: var(--inchiostro);
  background:
    var(--noise),
    radial-gradient(ellipse at 50% 35%, #f1e8d4 0%, #e3d6b9 55%, #c9b590 100%);
  border: 1px solid #8a7045;
  box-shadow: inset 0 0 26px rgba(110, 80, 35, .45), 0 18px 36px -22px rgba(0, 0, 0, .85);
}
.parchment::before { border-color: rgba(120, 90, 45, .45); }

/* translucent parchment for overlays on top of gameplay */
.parchment.glass {
  background:
    var(--noise),
    radial-gradient(ellipse at 50% 35%, rgba(241, 232, 212, .9) 0%, rgba(227, 214, 185, .86) 55%, rgba(201, 181, 144, .82) 100%);
  backdrop-filter: blur(6px);
}

.seal {
  display: inline-grid; place-items: center;
  background: var(--carminio);
  border: 2px solid rgba(233, 223, 201, .75);
  box-shadow: inset 0 0 0 3px var(--carminio), inset 0 0 0 4px rgba(233, 223, 201, .5);
}

.divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--oro);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .6; }

/* avatar in a crimson ring */
.avatar {
  --s: 48px;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: var(--carminio-scuro);
  border: 2px solid var(--oro);
  box-shadow: 0 0 0 2px var(--carminio);
  display: inline-grid; place-items: center;
  font-family: var(--f-caps); font-weight: 700; color: var(--pergamena);
  font-size: calc(var(--s) * .38);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- guild badge ---------- */
.gbadge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-caps); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--carminio); vertical-align: middle; max-width: 100%; }
.gbadge img { width: 1.6em; height: 1.6em; object-fit: contain; flex: none; }
.gbadge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbadge b { font-weight: 700; }
.lacquer .gbadge { color: var(--oro-chiaro); }

/* ---------- banner as card background (guild or personal) ---------- */
.bannered {
  --shade: linear-gradient(90deg, rgba(15, 10, 8, .9) 0%, rgba(15, 10, 8, .72) 45%, rgba(15, 10, 8, .38) 100%);
  background: var(--shade), var(--banner) center / cover no-repeat, var(--lacca) !important;
  color: var(--pergamena) !important;
  border-color: rgba(220, 194, 138, .7) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.bannered::before { border-color: rgba(220, 194, 138, .35) !important; }
.bannered .gbadge { color: var(--oro-chiaro); }