:root {
  --tavern-nav-width: 80px;
  --tavern-nav-height: 82px;
  --tavern-primary: #2ecc71;
  --tavern-secondary: #161a17;
  --tavern-accent: #2ecc71;
}

body {
  padding-left: 0 !important;
  padding-top: calc(var(--tavern-nav-height) + 16px) !important;
  box-sizing: border-box;
}

body.tavern-has-wallpaper {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background-color: transparent !important;
  background-image: none !important;
}

body.tavern-has-wallpaper::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--tavern-wallpaper-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tavern-server-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10000;
  width: 100%;
  height: var(--tavern-nav-height);
  padding: 10px 18px;
  box-sizing: border-box;
  overflow: visible;
  background: rgba(15, 17, 16, .97);
  border-bottom: 1px solid rgba(46, 204, 113, .28);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.tavern-web .tavern-server-bar{padding-right:180px}

.tavern-nav-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}
.tavern-nav-brand img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.tavern-nav-icon{width:100%;height:100%;padding:3px;box-sizing:border-box;border-radius:50%;background:#eef1f2;object-fit:contain}
.tavern-mobile-menu{display:none}
.tavern-nav-menu{display:flex;align-items:center;gap:10px;min-width:0}
.tavern-nav-group{position:relative}

.tavern-nav-link {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: #252a26;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: border-radius .2s ease, background-color .2s ease, transform .2s ease;
}

.tavern-nav-name{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:6px;background:#090b09;color:#fff;font:700 13px/1 Arial;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.tavern-nav-group:hover .tavern-nav-name,.tavern-nav-link:focus-visible .tavern-nav-name{opacity:1}
.tavern-nav-group:hover>.tavern-nav-link,.tavern-nav-group.open>.tavern-nav-link{background:#86efac!important;color:#071029!important;border-radius:18px}
.tavern-nav-group:hover .tavern-nav-name{background:#86efac;color:#071029}
.tavern-nav-dropdown{position:absolute;top:calc(100% + 13px);left:50%;display:none;width:220px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#151915;box-shadow:0 16px 38px rgba(0,0,0,.5);transform:translateX(-50%)}
.tavern-nav-group:hover .tavern-nav-dropdown,.tavern-nav-group.open .tavern-nav-dropdown{display:block}
.tavern-nav-dropdown a{display:block;padding:11px 12px;border-radius:8px;color:#d8ded9;text-decoration:none;font:600 14px/1.25 Arial}
.tavern-nav-dropdown a:hover,.tavern-nav-dropdown a:focus-visible,.tavern-nav-dropdown a[aria-current="page"]{background:var(--tavern-primary);color:#071029;outline:none}
.tavern-nav-link.active{background:var(--tavern-primary);border-radius:18px}
.tavern-light body{background-color:#edf5ef!important;color:#122016!important}
.tavern-light .card,.tavern-light .section,.tavern-light .panel,.tavern-light .section-card,.tavern-light .rules-box{background:#fff!important;color:#122016!important}
.tavern-no-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}

button.tavern-nav-link {
  appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.tavern-app-action:first-of-type {
  margin-left: auto;
}

.tavern-download-button {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 15000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 9px 15px;
  border: 1px solid rgba(46, 204, 113, .55);
  border-radius: 9px;
  background: #252a26;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .34);
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.tavern-download-button:hover,
.tavern-download-button:focus-visible,
.tavern-download-button.ready {
  border-color: #2ecc71;
  background: #2ecc71;
  color: #071029;
  transform: translateY(-1px);
  outline: none;
}

.tavern-download-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 24px rgba(0, 0, 0, .34);
}

.tavern-download-button.installed {
  border-color: rgba(46, 204, 113, .55);
  background: #1c3424;
  color: #b9f6cf;
}
.tavern-admin-updater .tavern-download-button{right:82px}
.tavern-admin-updater #tavernAppUpdateBtn{position:fixed;top:14px;right:16px;z-index:15001;margin:0}

.tavern-app-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20000;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: min(430px, calc(100vw - var(--tavern-nav-width) - 36px));
  padding: 12px 14px;
  border: 1px solid rgba(46, 204, 113, .45);
  border-radius: 10px;
  background: #161a17;
  color: #f4f7f5;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .42);
  font: 600 14px/1.4 Arial, Helvetica, sans-serif;
}

.tavern-app-toast.visible {
  display: flex;
}

.tavern-app-toast-text {
  flex: 1;
}

.tavern-app-toast button {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: #2ecc71;
  color: #071029;
  font: inherit;
  cursor: pointer;
}

.tavern-app-toast .tavern-app-toast-close {
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
  color: #fff;
  font-size: 20px;
}

.tavern-nav-link:hover,
.tavern-nav-link:focus-visible,
.tavern-nav-link[aria-current="page"] {
  border-radius: 18px;
  background: #2ecc71;
  color: #fff;
  transform: scale(1.06);
  outline: none;
}

.tavern-nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}

.tavern-nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -13px;
  width: 4px;
  height: 34px;
  border-radius: 0 4px 4px 0;
  background: #fff;
}

.tavern-nav-link.active::before{content:"";position:absolute;bottom:-10px;width:34px;height:4px;border-radius:4px 4px 0 0;background:#fff}

.tavern-nav-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  padding: 7px 10px;
  border-radius: 5px;
  background: #090b09;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity .15s ease, transform .15s ease;
}

.tavern-nav-link:hover::after,
.tavern-nav-link:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (max-width: 600px) {
  :root {
    --tavern-nav-width: 64px;
  }

  .tavern-server-bar {height:68px;padding:8px 10px;gap:10px;overflow:visible}
  .tavern-web .tavern-server-bar{padding-right:10px}
  body{padding-top:84px!important}
  .tavern-mobile-menu{display:grid;place-items:center;width:46px;height:46px;margin-left:auto;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:#252a26;color:#fff;font-size:25px}
  .tavern-nav-menu{position:fixed;top:68px;right:8px;left:8px;display:none;max-height:calc(100vh - 78px);padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:0 0 14px 14px;background:#111612;overflow-y:auto;box-shadow:0 16px 35px rgba(0,0,0,.55)}
  .tavern-server-bar.mobile-open .tavern-nav-menu{display:grid;gap:6px}
  .tavern-nav-group{width:100%}
  .tavern-nav-group>.tavern-nav-link{width:100%;height:48px;border-radius:10px;justify-content:flex-start;padding:0 10px;gap:10px}
  .tavern-nav-group>.tavern-nav-link .tavern-nav-icon{width:34px;height:34px}
  .tavern-nav-name{position:static;display:block;transform:none;padding:0;background:transparent;color:#fff;opacity:1}
  .tavern-nav-dropdown{position:static;width:auto;margin:4px 0 7px;padding:5px;transform:none;box-shadow:none}

  .tavern-nav-brand span{display:inline}

  .tavern-nav-link {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 20px;
  }

  .tavern-nav-link[aria-current="page"]::before {
    left: -9px;
  }

  body {
    padding-top: 88px !important;
  }

  .tavern-download-button {
    display:none;
  }
  .tavern-app-action{display:flex;width:42px;height:42px;flex-basis:42px;margin-left:0;order:3}
  .tavern-admin-updater #tavernAppUpdateBtn{top:13px;right:64px}
}
