/* The one top bar of dungeonvn.com (home page, wiki, news) — markup from wiki/site_bar.py. Owner 26/09: one menu for
   every page, Minecraft style (dark bar, pixel capitals, the current page underlined), torch-orange "Vào chơi".
   Loaded after site.css / wiki.css so it wins over their old bar rules. */
.bar { position: sticky; top: 0; z-index: 40; background: #262423; box-shadow: 0 2px 0 #000; }
.bar__row { display: flex; align-items: center; gap: 12px 24px; min-height: 64px; padding: 0 24px; }
.bar__brand { display: flex; flex: none; }
.bar__brand img { width: auto; height: 40px; }
/* news and wiki pages: the home page's HUD instead of the wordmark — the page's own coordinates + the live server line (js/bar.js) */
.bar .hud--page { flex: none; }
/* the HUD box itself, for every page's bar — the wiki does not load site.css, where the home page's HUD was styled (26/09: on the
   wiki the coordinates and the server line ran together, unboxed) */
.bar .hud { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 8px; background: rgba(0, 0, 0, .45);
  font: 16px/1 var(--font-pixel, "MC", monospace); color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
.bar .hud__coords { white-space: nowrap; }
.bar .hud__status { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: var(--muted, #ada190); white-space: nowrap; }
.bar .hud__status.is-online { color: var(--paper, #eee3cf); }
.bar .hud__status .status__dot { width: 10px; height: 10px; box-sizing: border-box; flex: none; background: var(--muted, #ada190); }
.bar .hud__status.is-online .status__dot { background: var(--emerald, #3ddc84); animation: bar-live 1.6s ease-out infinite; }
.bar .hud__status.is-offline .status__dot { background: #ff5555; }
@keyframes bar-live { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .75); opacity: 1; } 50% { opacity: .35; } 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); opacity: 1; } }
@media (max-width: 639px) { .bar .hud { flex-direction: column; align-items: flex-start; gap: 6px; } }
@media (max-width: 439px) { .bar .hud__status [data-short] { font-size: 0; } .bar .hud__status [data-short]::after { content: attr(data-short); font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .bar .hud__status.is-online .status__dot { animation: none; } }
.bar__slot { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }   /* the wiki's search + drawer button; empty elsewhere */
.bar__end { display: flex; align-items: center; gap: 16px; flex: none; }
.bar__nav { display: flex; gap: 4px; }
.bar__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: #fff; text-decoration: none; white-space: nowrap;
  font: 16px/1 "MC", ui-monospace, monospace; text-transform: uppercase; }
.bar__link:hover { color: #ffb238; }
.bar__link[aria-current="page"] { color: #ffb238; box-shadow: inset 0 -3px 0 #ffb238; }
.bar__ext { width: 8px; height: 8px; margin-left: 6px; margin-bottom: 6px; flex: none; }   /* ↗ = leaves the site */
.bar__play { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; background: #ffb238; color: #1f1405; text-decoration: none; white-space: nowrap;
  font: 16px/1 "MC", ui-monospace, monospace; text-transform: uppercase; box-shadow: inset 0 -4px 0 #b8650f, inset 0 2px 0 #ffd488; }
.bar__play:hover { filter: brightness(1.08); }
.bar__play:active { box-shadow: inset 0 4px 0 #b8650f; }
.bar a:focus-visible, .bar button:focus-visible, .bar input:focus-visible { outline: 2px solid #ffb238; outline-offset: 2px; }

/* ☰ menu (owner 26/09: "thay vì rớt dòng thì nút 3 gạch bấm vô mở ra menu, x để đóng"): where the links do not fit beside the
   HUD, they fold into a panel under the bar; the button turns into ✕. js/bar.js opens and closes it.
   Home and news fold below 1200px (HUD ~510px + links ~570px, measured); the wiki, which also carries the search box, below 1440px. */
.bar__burger { display: none; }
.bar__burger-icon { position: relative; display: block; width: 20px; height: 4px; background: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
.bar.is-menu .bar__burger-icon { background: transparent; box-shadow: none; }
.bar.is-menu .bar__burger-icon::before, .bar.is-menu .bar__burger-icon::after { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 4px; background: currentColor; transform: rotate(45deg); }
.bar.is-menu .bar__burger-icon::after { transform: rotate(-45deg); }
@media (max-width: 1199px) {
  .bar__row { flex-wrap: nowrap; gap: 8px 12px; min-height: 56px; padding: 6px 12px; }
  .bar__burger { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0;
    color: #fff; background: rgba(0, 0, 0, .45); border: 0; cursor: pointer; }
  .bar.is-menu .bar__burger { color: #ffb238; }
  .bar__end { display: none; position: absolute; top: 100%; right: 0; width: min(360px, 100%); box-sizing: border-box; flex-direction: column; align-items: stretch; gap: 12px;
    padding: 8px 16px 16px; background: #262423; box-shadow: 0 2px 0 #000, -2px 0 0 #000; }
  .bar.is-menu .bar__end { display: flex; }
  .bar__nav { flex-direction: column; gap: 0; }
  .bar__link { min-height: 48px; padding: 0 12px; border-bottom: 2px solid #1c1a19; }
  .bar__link[aria-current="page"] { box-shadow: inset 4px 0 0 #ffb238; }
  .bar__play { justify-content: center; min-height: 48px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {   /* the wiki's bar keeps the ☰ a little longer: its search box needs the room */
  .wiki-bar .bar__row { flex-wrap: nowrap; }
  .wiki-bar .bar__burger { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #fff; background: rgba(0, 0, 0, .45); border: 0; cursor: pointer; }
  .wiki-bar.is-menu .bar__burger { color: #ffb238; }
  .wiki-bar .bar__end { display: none; position: absolute; top: 100%; right: 0; width: 360px; box-sizing: border-box; flex-direction: column; align-items: stretch; gap: 12px;
    padding: 8px 16px 16px; background: #262423; box-shadow: 0 2px 0 #000, -2px 0 0 #000; }
  .wiki-bar.is-menu .bar__end { display: flex; }
  .wiki-bar .bar__nav { flex-direction: column; gap: 0; }
  .wiki-bar .bar__link { min-height: 48px; padding: 0 12px; border-bottom: 2px solid #1c1a19; }
  .wiki-bar .bar__link[aria-current="page"] { box-shadow: inset 4px 0 0 #ffb238; }
  .wiki-bar .bar__play { justify-content: center; min-height: 48px; }
}
/* narrow phones: the numbers alone (the longest, "-2999, 120, -2999", plus ☰ ran off a 320px screen with the word "Tọa độ:") */
@media (max-width: 374px) { .hud--page .hud__label { display: none; } .bar__row { padding-inline: 8px; } }
/* wiki on phones (owner 26/09): [Mục lục] where the wordmark was, the search, then ☰ — the coordinates step aside for the room */
@media (max-width: 899px) {
  .wiki-bar .hud { display: none; }
  .wiki-bar .wiki-bar__menu { order: -1; }
}

/* home page: over the hero the bar is transparent (the hero shows the big wordmark and the coordinate HUD); it turns
   solid once the hero scrolls away (site.js toggles .is-solid on .topbar) */
.bar.topbar { position: fixed; inset: 0 0 auto 0; display: block; padding: 0; pointer-events: auto; background: transparent; box-shadow: none; transition: background .2s, box-shadow .2s; }
.bar.topbar.is-solid, .bar.topbar.is-menu { background: #262423; box-shadow: 0 2px 0 #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar--home .bar__row { padding-top: 12px; padding-bottom: 12px; }
@media (min-width: 1200px) { .bar--home.is-solid .bar__row { padding-top: 0; padding-bottom: 0; } }   /* no wordmark here either (owner 26/09: "không cần logo") */

/* moving between the home page, the news and the wiki: the pages cross-fade and the bar stays put, instead of a hard cut
   (owner 26/09: "hiệu ứng chuyển trang không mượt lắm"). Browsers without cross-document view transitions keep the plain load. */
/* the opt-in itself is inline at the top of every <head> (wiki/site_bar.py VIEW_TRANSITION): here it came too late on the home page */
.bar { view-transition-name: site-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: ease-out; }
::view-transition-group(site-bar) { animation-duration: .25s; }