@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700;800&display=swap');
/* The announcements terminal, art direction "Terminal Core" (web/features/announcements/index.js): bone on black glass,
   mono type, crop-mark corners, a still scan-line texture; colour only for tiers. No blur, no shadow; motion is the
   reveal bar (transform) and the dim and fade (opacity). Everything here is scoped to #announceTerminal and
   body.announcing, so with the terminal off nothing changes. */
#announceTerminal{--term-void:rgba(11,11,12,.9);--term-bone:#e9e6df;--term-dim-bone:#b9b6af;--term-ink:#8a8d91;--term-line:rgba(233,230,223,.18);
  --term-orange:#ff6a3d;--term-red:#e8322a;position:fixed;top:94px;right:26px;width:355px;max-width:calc(100vw - 32px);z-index:4;
  background:var(--term-void);border:1px solid var(--term-line);color:var(--term-bone);font:500 10.5px/1.55 'JetBrains Mono',monospace;contain:layout paint}
#announceTerminal[hidden]{display:none}
#announceTerminal::after{content:'';position:absolute;inset:-1px;pointer-events:none;background:
  linear-gradient(var(--term-bone),var(--term-bone)) top left/12px 1.5px no-repeat,linear-gradient(var(--term-bone),var(--term-bone)) top left/1.5px 12px no-repeat,
  linear-gradient(var(--term-bone),var(--term-bone)) top right/12px 1.5px no-repeat,linear-gradient(var(--term-bone),var(--term-bone)) top right/1.5px 12px no-repeat,
  linear-gradient(var(--term-bone),var(--term-bone)) bottom left/12px 1.5px no-repeat,linear-gradient(var(--term-bone),var(--term-bone)) bottom left/1.5px 12px no-repeat,
  linear-gradient(var(--term-bone),var(--term-bone)) bottom right/12px 1.5px no-repeat,linear-gradient(var(--term-bone),var(--term-bone)) bottom right/1.5px 12px no-repeat}
#announceTerminal .term-bar{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:7px 12px;background:none;border:0;border-bottom:1px dashed var(--term-line);
  border-radius:0;color:var(--term-ink);font:500 10px 'JetBrains Mono',monospace;letter-spacing:.18em;cursor:pointer}
#announceTerminal .term-bar:hover:not(:disabled){background:none;border-color:var(--term-line)}
#announceTerminal .term-bar b{color:var(--term-bone);font-weight:800}
#announceTerminal.collapsed .term-bar{border-bottom:0}
#announceTerminal.collapsed .term-body{display:none}
#announceTerminal .term-body{padding:7px 12px 9px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
#announceTerminal .term-line{position:relative;transition:opacity var(--term-fade) linear}
#announceTerminal .term-line::after{content:'';position:absolute;inset:0;background:var(--term-void);transform-origin:right;animation:term-reveal var(--term-reveal) steps(6,end) forwards;pointer-events:none}
@keyframes term-reveal{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#announceTerminal .term-line.term-dim{opacity:var(--term-dim)}
#announceTerminal .term-line.term-gone{opacity:0}
#announceTerminal .term-row{display:grid;grid-template-columns:auto 24px minmax(0,1fr) auto;gap:6px;white-space:nowrap}
#announceTerminal .term-time{color:var(--term-ink)}
#announceTerminal .term-tag{font-weight:700}
#announceTerminal .term-key{overflow:hidden;font-weight:700}
#announceTerminal .term-status{text-align:right;padding-left:4px;font-weight:700}
#announceTerminal .term-sentence{display:block;padding-left:calc(7ch + 36px);color:var(--term-dim-bone);font-size:10px;white-space:normal}
#announceTerminal .tier-usr{color:var(--term-ink)}
#announceTerminal .tier-usr .term-row{grid-template-columns:auto 24px 1fr}
#announceTerminal .tier-usr .term-text{white-space:normal;text-transform:lowercase}
#announceTerminal .tier-loc .term-tag{color:var(--accent)}
#announceTerminal .tier-sys .term-row{color:var(--term-orange)}
#announceTerminal .tier-sys .term-time{color:var(--term-orange);opacity:.75}
#announceTerminal .tier-krn .term-row{background:var(--term-red);color:var(--term-bone);margin:2px -12px;padding:0 12px}
#announceTerminal .tier-krn .term-time{color:var(--term-bone)}
#announceTerminal .term-rule{display:block;color:rgba(233,230,223,.35);white-space:nowrap;overflow:hidden;letter-spacing:.08em}
#announceTerminal .term-block .term-rule{color:var(--term-orange);font-weight:700}
#announceTerminal .term-cursor{display:inline-block;width:.6em;height:1em;margin-left:4px;background:var(--term-ink);vertical-align:-.15em}
/* The civilizations panel moves down beneath the terminal, keeping its own rules for where the radar ends. */
body.radar-open #announceTerminal{top:calc(94px + var(--radar-size,196px) + 70px)}
body.announcing #battlePanel{top:calc(94px + var(--announce-height,0px) + 8px)}
body.announcing.radar-open #battlePanel{top:calc(94px + var(--radar-size,196px) + 70px + var(--announce-height,0px) + 8px);max-height:calc(100vh - 198px - var(--radar-size,196px) - 70px - var(--announce-height,0px))}
@media(max-width:700px){#announceTerminal{top:78px;right:8px;width:280px}body.radar-open #announceTerminal{top:calc(78px + var(--radar-size,132px) + 50px)}
  body.announcing #battlePanel{top:calc(78px + var(--announce-height,0px) + 8px)}body.announcing.radar-open #battlePanel{top:calc(78px + var(--radar-size,132px) + 50px + var(--announce-height,0px) + 8px)}}
@media(prefers-reduced-motion:reduce){#announceTerminal .term-line::after{animation:none;transform:scaleX(0)}#announceTerminal .term-line{transition:none}}