/* The keepers' timed events (js/events.js): the banner at the top of the town, its list, the event bounties on Hesk's
   board, the descent the Warden marks, the town's goal at the statue, a pouch in the mail, an event's title */

/* ---------- the banner: what is on, small, at the top of the town (below the arena queue or the rest after a defeat) */
#ev-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: max-content; min-width: 260px; max-width: min(580px, calc(100vw - 680px));
  background: linear-gradient(180deg, rgba(42, 30, 18, 0.94), rgba(16, 11, 8, 0.94)); border: 1px solid var(--edge-hi); border-radius: 3px;
  box-shadow: 0 4px 16px #000, inset 0 0 0 1px #0a0806; font-size: 14px; color: var(--ink); }
/* (out of the way of the town's title card while it shows: the first seconds back in town) */
#ev-banner { transition: opacity 0.6s; }
#ev-banner.evwait { opacity: 0; pointer-events: none; }
body[data-theme="halloween"] #ev-banner { border-color: #b8641e; box-shadow: 0 4px 16px #000, 0 0 14px rgba(255, 120, 30, 0.28), inset 0 0 0 1px #0a0806; }
#ev-banner .evhead { position: relative; display: flex; flex-direction: column; padding: 4px 32px 4px 10px; }
#ev-banner .evrow { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer; padding: 2px 0; }
#ev-banner .evrow + .evrow { border-top: 1px solid rgba(122, 97, 59, 0.35); }
#ev-banner .evarrow { position: absolute; right: 5px; top: 6px; background: none; border: 1px solid var(--edge); color: var(--gold); font-size: 11px; line-height: 1; padding: 3px 5px; cursor: pointer; border-radius: 2px; }
#ev-banner .evarrow:hover { border-color: var(--gold); color: #ffe3a6; }
#ev-banner .evt { flex: none; max-width: 58%; font-family: var(--caps); font-size: 13.5px; letter-spacing: 0.04em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ev-banner .evcs { flex: 1 1 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 80px; }
/* (the countdown in a slot of its own width: a digit fewer at :09 or :59 must not move the centred banner every second) */
#ev-banner .evl { margin-left: auto; padding-left: 6px; width: 6.75em; min-width: min-content; text-align: right; font-family: var(--caps); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
html[lang="zh-CN"] #ev-banner .evl { width: 8em; }
#ev-banner .evl::before { content: '⏳ '; font-size: 11px; }
#ev-banner .evmore { font-style: italic; color: var(--ink-dim); font-size: 13px; }
#ev-banner .evsoon { font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--edge); padding: 0 5px; border-radius: 2px; }
#ev-banner.evsoonly { opacity: 0.86; }
.evc { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 12.5px; border: 1px solid rgba(214, 176, 102, 0.35); border-radius: 9px; background: rgba(90, 60, 25, 0.35); color: #f0d8a0; white-space: nowrap; }
.evc.evgc b { color: #ffd27a; font-weight: 600; }
.evmini { display: inline-block; width: 38px; height: 5px; background: #0b0907; border: 1px solid #000; border-radius: 2px; overflow: hidden; vertical-align: middle; }
.evmini > i { display: block; height: 100%; background: linear-gradient(90deg, #b8641e, #ffb04a); }
.evpk { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 0 4px rgba(255, 140, 40, 0.7)); }
.evglyph { flex: none; width: 18px; text-align: center; color: var(--gold); text-shadow: 0 0 6px rgba(255, 190, 90, 0.6); }

/* its list: everything on, in full, and what comes; open, it rises over the chat and the emotes (later on the page, they
   would hide part of it on a small screen) and the corner buttons of a touch screen, never over a window or a box asking */
#ev-banner:has(.evd) { z-index: 20; }
body:has(#panels .panel) #ev-banner { z-index: auto; }
#ev-banner .evd { border-top: 1px solid var(--edge); max-height: min(62vh, 520px); overflow-y: auto; padding: 4px 10px 8px; min-width: min(440px, calc(100vw - 28px)); }
.evd-sec { font-family: var(--caps); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin: 8px 0 4px; }
.evd-ev { padding: 6px 8px; margin-bottom: 6px; border: 1px solid rgba(77, 61, 40, 0.8); background: rgba(0, 0, 0, 0.28); border-radius: 3px; }
.evd-ev.soon { opacity: 0.85; }
.evd-h { display: flex; align-items: center; gap: 7px; }
.evd-h .evt { font-family: var(--caps); font-size: 13.5px; color: var(--gold); }
.evd-left { margin-left: auto; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; }
.evd-left b { font-family: var(--caps); font-weight: 600; color: var(--ink); }
.evd-x { font-size: 14px; font-style: italic; color: var(--ink-dim); margin: 3px 0 4px; line-height: 1.25; }
.evfx { font-size: 14px; color: #e8dcc0; margin-top: 2px; }
.evfx.evok { color: var(--good); }
.evfx.evneed { color: var(--ink-dim); font-size: 13px; }
.evd-ev .qr, .evgoal .qr { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.evrl { font-family: var(--caps); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); margin-right: 2px; }
.evbar { height: 9px; margin: 6px 0 3px; background: #0b0907; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.evbar > i { display: block; height: 100%; background: linear-gradient(180deg, #ffb04a, #b8641e); box-shadow: 0 0 8px rgba(255, 150, 50, 0.5); }
.evgn { font-size: 13.5px; color: var(--ink-dim); }
.evgn b { color: #ffd27a; font-weight: 600; }
.evsep { margin: 0 6px; color: var(--ink-faint); }
.evbq { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding-left: 6px; }
.evbq b { color: var(--ink); font-weight: 600; }
.evbn { color: var(--ink-dim); }
.rw.evttl i { color: #ffe0a0; }
.evtag { color: #ffc890; border-color: #8a5420; background: rgba(140, 70, 20, 0.3); }
.evmail { font-size: 13.5px; font-style: italic; color: var(--ink-dim); margin-top: 3px; }

/* Hesk's board: an event's bounties above his own */
.qsec.evq { --acc: #b8641e; --acc-hi: #ffb060; margin-bottom: 14px; }
.qsec.evq .qst { color: #ffc890; }
.evwhere { color: var(--ink-faint); font-style: italic; }

/* the Warden's list: a featured descent */
.dgl:has(.dgfeat) { box-shadow: inset 3px 0 0 #e0a040; background: rgba(120, 80, 20, 0.22); }
.dgfeat { grid-column: 1 / -1; font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.06em; color: #ffd27a; text-shadow: 0 0 6px rgba(255, 170, 60, 0.5); }

/* the Hall of Heroes: the town's goal */
.evgoal { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid #8a5420; border-radius: 3px; background: rgba(60, 30, 10, 0.35); box-shadow: inset 0 0 18px rgba(200, 110, 30, 0.12); }

/* the Help: what comes */
.evhelp { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.evhl { display: flex; gap: 10px; }
.evhl .evt { font-family: var(--caps); font-size: 13px; color: var(--gold); }

/* the mail: a pouch from an event */
.mlpouch .mlpk { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #ffd27a;
  border: 1px solid #8a5420; border-radius: 3px; background: rgba(120, 70, 20, 0.3); }
.mlpouch .mlpw { flex: 1; min-width: 0; }
.mlpouch .mlpw .qr { display: flex; flex-wrap: wrap; gap: 4px; }

/* where the banner goes when the top of the screen is full: under the hero's frame (as the rest after a defeat). Wherever
   it goes it keeps clear of the arena queue, the rest and the emotes, whose height changes as their words wrap: js/events.js
   (clear) moves it below the one it would cover, or above it at the foot of the screen */
@media (max-width: 1099px) { #ev-banner { top: 214px; max-width: calc(100vw - 28px); } }
@media (max-width: 699px) { #ev-banner { top: 120px; } }
@media (max-height: 499px) { #ev-banner { top: 14px; } }
/* a phone or a tablet: at the top between the hero's frame and the wallet, names only; a phone held upright, over the menu */
html.touch #ev-banner { font-size: 12.5px; min-width: 0; max-width: min(420px, calc(100vw - 420px)); top: calc(6px + var(--sat, 0px)); }
html.touch #ev-banner .evcs { display: none; }
/* (on a narrow touch screen the title gives way, cut short, so the countdown stays left of the arrow, inside the frame;
   and the banner, its list open, is as wide as the list) */
html.touch #ev-banner .evt { max-width: none; flex: 0 1 auto; min-width: 0; }
#ev-banner:has(.evd), html.touch #ev-banner:has(.evd) { min-width: min(442px, calc(100vw - 26px)); }
@media (orientation: portrait) and (max-width: 899px) { html.touch #ev-banner { max-width: calc(100vw - 20px); top: auto; bottom: calc(150px + var(--sab, 0px)); --evfoot: 1; } }
/* a phone held sideways: the middle of the top is where the town's camera puts the keeper the hero walks up to and the
   sign over them (lobby.js signs). The banner sits at the foot of the left side instead, where the chat is while it is
   folded and as wide as it (a long title cut short), and its list, open, as wide as it needs; with the chat open it goes
   back to the top, below the emotes */
@media (max-height: 499px) {
  html.touch:not(.chat-open) #ev-banner { top: auto; bottom: calc(6px + var(--sab, 0px)); left: calc(6px + var(--sal, 0px)); transform: none; --evfoot: 1;
    max-width: calc(100vw - min(470px, 56vw) - 26px - var(--sal, 0px) - var(--sar, 0px)); }
  html.touch:not(.chat-open) #ev-banner:has(.evd) { max-width: min(460px, calc(100vw - 12px - var(--sal, 0px) - var(--sar, 0px))); }
  html.touch:not(.chat-open) #ev-banner .evt { flex: 0 1 auto; min-width: 0; }
}