/* ── Fonts ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Adobe Garamond Pro';
  src: url('/fonts/adobe-garamond-pro.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Agmena Pro';
  src: url('/fonts/Agmena Pro Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Agmena Pro';
  src: url('/fonts/Agmena Pro Book.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  position: relative;
}

/* ── Colour tokens ─────────────────────────────────────────────────────────── */

:root {
  --gold:        #c8a76b;
  --gold-dim:    #8a6f3c;
  --gold-muted:  #9d8b6e;
  --cream:       #f0e4c8;
  --dark-panel:  rgba(6, 4, 2, 0.88);
  --death-bg:    rgba(28, 0, 0, 0.82);
}

/* ── Layer base ────────────────────────────────────────────────────────────── */

.layer {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.layer[hidden] { display: none !important; }

/* ── Keyframes ─────────────────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(30px); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes graceGlow {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes bossGhostDrain {
  from { opacity: 0.55; }
  to   { opacity: 0; }
}

/* ── Area Name ─────────────────────────────────────────────────────────────── */

#area-name {
  top: 50%;
  left: 50%;
  translate: -50% -50%;   /* CSS individual transform — unaffected by animation's `transform` */
  text-align: center;
  width: 800px;
  margin-top: -30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.an-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent 100%);
}

.an-line--top  { margin-bottom: 16px; }
.an-line--bottom { margin-top: 16px; margin-bottom: 14px; }

.an-main {
  font-family: 'Adobe Garamond Pro', 'Times New Roman', serif;
  font-size: 56px;
  font-weight: normal;
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(200, 167, 107, 0.35);
  line-height: 1;
  margin-right: -0.22em; /* cancel trailing letter-spacing so text optical-centres correctly */
}

.an-sub {
  font-family: 'Agmena Pro', 'Adobe Garamond Pro', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--gold-muted);
  letter-spacing: 0.08em;
  line-height: 1;
}

/* Dark Souls style — single line below text only, white */
#area-name.style-darksouls {
  margin-top: 0;   /* override the Elden Ring offset so it's truly centred */
}
#area-name.style-darksouls .an-line--top { display: none; }
#area-name.style-darksouls .an-line--bottom {
  height: 3px;
  margin-top: 5px;
  margin-bottom: 0;
  /* solid centre, tapers to nothing at edges */
  background: radial-gradient(ellipse 65% 100% at center, rgba(230,225,215,0.85) 0%, rgba(200,195,185,0.5) 45%, transparent 100%);
}
#area-name.style-darksouls .an-main {
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9);
  letter-spacing: 0.18em;
  font-size: 48px;
}
#area-name.style-darksouls .an-sub {
  color: #c0b8a8;
  margin-top: 8px;
}

/* Bloodborne style */
#area-name.style-bloodborne .an-main {
  font-size: 44px;
  color: #d4b89a;
  letter-spacing: 0.12em;
}
#area-name.style-bloodborne .an-sub { color: #9a8070; }

/* Sekiro style */
#area-name.style-sekiro .an-main {
  color: #e8dcc0;
  font-size: 48px;
  letter-spacing: 0.15em;
}

/* ── Full-screen Overlay (YOU DIED, boss kills) ────────────────────────────── */

.layer--fullscreen {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* Horizontal dark band — transparent top & bottom like the actual game */
  background: linear-gradient(
    to bottom,
    transparent         0%,
    rgba(18,14,14,0.0)  22%,
    rgba(18,14,14,0.88) 34%,
    rgba(18,14,14,0.92) 50%,
    rgba(18,14,14,0.88) 66%,
    rgba(18,14,14,0.0)  78%,
    transparent         100%
  );
}

.fs-main {
  font-family: 'Adobe Garamond Pro', serif;
  font-size: 96px;
  font-weight: normal;
  color: #8b1515; /* default — overridden per-event via JS */
  letter-spacing: 0.18em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
  padding-right: 0.18em;
  text-transform: uppercase;
}

.fs-sub {
  font-family: 'Agmena Pro', serif;
  font-size: 26px;
  color: var(--gold-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Boss killed variant — same band, gold text (set by JS, this is the fallback) */
.layer--fullscreen.variant-boss-killed .fs-main {
  color: var(--gold);
  text-shadow: 0 0 50px rgba(200, 167, 107, 0.4), 0 2px 8px rgba(0,0,0,0.9);
}

/* ── Grace Discovered ──────────────────────────────────────────────────────── */

#grace {
  top: 50%;
  left: 50%;
  translate: -50% -50%;   /* CSS individual transform — unaffected by animation's `transform` */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: -40px;
}

.grace-label {
  font-family: 'Agmena Pro', serif;
  font-size: 16px;
  color: var(--gold-muted);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.grace-name {
  font-family: 'Adobe Garamond Pro', serif;
  font-size: 40px;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-shadow: 0 0 30px rgba(200, 167, 107, 0.5);
  padding-right: 0.15em;
}

.grace-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 167, 107, 0.3) 0%, transparent 70%);
  animation: graceGlow 2s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}

/* ── Item Pickup (DS3 style) ───────────────────────────────────────────────── */

#item-pickup {
  /* calc centres a fixed-width element without breaking slideInRight transform */
  bottom: 210px;
  left: calc(50% - 360px);
  width: 720px;
  display: flex;
  flex-direction: column;
}

/* Hide icon column when no icon provided */
#item-pickup.no-icon .ip-icon-col { display: none; }

/* ── SVG decorative border rules ────────────────────────────────────────── */

.ip-rule {
  width: 100%;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* ── Box body ───────────────────────────────────────────────────────────── */

.ip-body {
  display: flex;
  align-items: center;
  min-height: 84px;
  padding: 10px 26px 10px 0;
  /* subtle vertical stripe texture over dark gradient */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px,
      transparent              1px, transparent              5px
    ),
    linear-gradient(to bottom, #221b0e 0%, #0d0a04 50%, #221b0e 100%);
}

/* ── Icon column ────────────────────────────────────────────────────────── */

.ip-icon-col {
  width: 112px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  position: relative;
  padding-bottom: 10px;
}

.ip-icon {
  max-width: 60px;
  max-height: 60px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.85));
}

/* Circular dish/pedestal beneath icon */
.ip-dish {
  width: 68px;
  height: 18px;
  background: radial-gradient(ellipse at center, #60451e 0%, #2a1c08 55%, transparent 100%);
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Text ───────────────────────────────────────────────────────────────── */

.ip-name {
  flex: 1;
  font-family: 'Adobe Garamond Pro', serif;
  font-size: 26px;
  color: #ece0cc;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ip-qty {
  font-family: 'Adobe Garamond Pro', serif;
  font-size: 26px;
  color: #ece0cc;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* ── Boss Health Bar ───────────────────────────────────────────────────────── */

#boss-bar {
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bb-name {
  font-family: 'Adobe Garamond Pro', serif;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.bb-track {
  width: 100%;
  height: 5px;
  background: rgba(30, 20, 10, 0.95);
  border: 1px solid #3a2a14;
  position: relative;
  overflow: visible;
}

.bb-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(to right, #7a1010, #b52020);
  transition: width 0.35s ease;
  width: 100%;
}

/* Ghost bar shows damage dealt — drains after brief delay */
.bb-ghost {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(220, 140, 60, 0.55);
  width: 100%;
  transition: width 0.08s ease;
}
.bb-ghost.draining {
  transition: width 0.5s ease 0.4s;
}

.bb-phases {
  display: flex;
  gap: 6px;
}

.bb-phase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: transparent;
}

.bb-phase-dot.active {
  background: var(--gold);
}

/* ── Status Buildups ───────────────────────────────────────────────────────── */

#status-bars {
  position: absolute;
  right: 46px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
}

.status-bar.visible { opacity: 1; transition: opacity 0.3s; }
.status-bar.fading  { opacity: 0; transition: opacity 0.6s; }

.status-label {
  font-family: 'Agmena Pro', serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 68px;
  text-align: right;
}

.status-track {
  width: 120px;
  height: 4px;
  background: rgba(20, 15, 8, 0.9);
  border: 1px solid #2a2218;
  position: relative;
}

.status-fill {
  height: 100%;
  width: 0;
  transition: width 0.4s ease;
  position: absolute;
  left: 0; top: 0;
}

/* Colours per status effect */
.status-bar[data-effect="poison"]   .status-label { color: #7ab870; }
.status-bar[data-effect="poison"]   .status-fill  { background: #4a9040; }
.status-bar[data-effect="bleed"]    .status-label { color: #c05060; }
.status-bar[data-effect="bleed"]    .status-fill  { background: #8a1a1a; }
.status-bar[data-effect="frostbite"].status-label { color: #70a8c8; }
.status-bar[data-effect="frostbite"].status-fill  { background: #3a6888; }
.status-bar[data-effect="rot"]      .status-label { color: #c09040; }
.status-bar[data-effect="rot"]      .status-fill  { background: #7a5010; }
.status-bar[data-effect="madness"]  .status-label { color: #a870c8; }
.status-bar[data-effect="madness"]  .status-fill  { background: #6030a0; }
.status-bar[data-effect="death"]    .status-label { color: #888; }
.status-bar[data-effect="death"]    .status-fill  { background: #444; }
.status-bar[data-effect="sleep"]    .status-label { color: #7090b8; }
.status-bar[data-effect="sleep"]    .status-fill  { background: #405878; }