/* Main CSS Import File */
@import url('root.css?v=1753558903');
@import url('root-dark.css?v=1753558903');
@import url('admin.css?v=1753558903');
@import url('modbox.css?v=1753558903');
@import url('characters.css?v=1753558903');
@import url('climate-news.css?v=1753558903');
@import url('components.css?v=1753558903');
@import url('forms.css?v=1753558903');
@import url('forums.css?v=1753558903');
@import url('layout.css?v=1753558903');
@import url('litter.css?v=1753558903');
@import url('packs.css?v=1753558903');
@import url('profile.css?v=1753558903');
@import url('notifications.css?v=1753558903');
@import url('wiki.css?v=1753558903');
@import url('nature.css?v=1753558903');
@import url('boards.css?v=1753558903');
@import url('inbox.css?v=1753558903');

<style>

	* { 
		box-sizing: border-box;
	}

	/* ===== Header ===== */
	.noct-header {
	  font-family: "Kiwi Maru", serif;
	  position: fixed;
	  top: 0;
	  width: 100%;
	  height: 80px;
	  background: var(--header-footer-bg);
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 20px 40px;
	  z-index: 1000;
	  border-bottom: 1px solid var(--black-30);
	  backdrop-filter: blur(5px);
	  -webkit-backdrop-filter: blur(5px);
	}

	.noct-header .logo {
	  font-size: 1.6em;
	  text-transform: uppercase;
	  letter-spacing: 3px;
	  margin-left: 20px;
	  text-shadow: 0 0 15px #000;
	}

	.noct-header .logo a {
		text-decoration: none;
		color: var(--secondary-text);
	}

	.noct-header .logo a:hover {
		color: var(--nav-hover);
	}
	
	
	.noct-header .desktop-nav {
	  display: flex;
	  gap: 20px;
	}

	.noct-header .nav a {
	  color: var(--nav-link);
	  text-decoration: none;
	  transition: color 0.3s ease;
	  text-shadow: 0 0 25px var(--black-50),0 0 15px var(--black-60),0 0 10px var(--black-70),0 0 3px var(--black-80);
	}

	.noct-header .nav a:hover {
	  color: var(--nav-hover);
	}

	.noct-header .nav a.active {
	  color: var(--black-50);
	}
	
	.sidebar-toggle-trigger {
	  display: none;
	}

	.rating-edit {
		display: flex; flex: 1; justify-content: space-between; margin-left: 20px; margin-right: 20px; align-items: center; background:var(--accent-2); padding: 10px; }
	
	.noct-wrapper {
		margin-top: 80px !important;
		padding: 0;
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: row;
		gap: 40px;
		justify-content: space-between;
	}

	.noct-side {
		padding-top: 40px;
		padding-left: 40px;
		padding-right: 40px;
		width: 350px;
		min-height: 100vh;
		background: var(--content-bg);
		display: flex;
		flex-direction: column;
	}
	
	.noct-side-head {
		display: flex;
		background: var(--accent-1);
		padding: 8px 15px;
		margin: 0;
		color: var(--secondary-text);
		font-weight: bold;
	}
	
	.noct-side-inner {
		background: var(--white-80);
		padding: 15px;
	}
	
	.noct-content {
		padding-top: 40px;
		padding-left: 70px;
		padding-right: 70px;
		margin-right: 40px;
		top: 0px;
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
		background: var(--content-bg);
	}
	
	.main {
		display: flex;
		min-height: 100vh !important;
		flex-direction: column;
		gap: 0;
		margin-bottom: 50px;
	}
	
	.sidebar-inner {
		max-width: 100% !important;
		min-width: 100% !important;
	}
	
	@media (max-width: 1460px) {
		.wiki-row-title, .wiki-row-subtitle {
			width: 50%;
		}

		  .wiki-row {
			flex-direction: column;
			width: 50%;
		  }

		  .wiki-thumb {
			width: 100%;
			min-width: unset;
			border-right: none;
			border-bottom: 1px solid var(--black-40);
		  }

		  .wiki-row-text {
			width: 100%;
		  }
	}
	
	@media (max-width: 1100px) {
		.noct-wrapper {
			flex-direction: column !important;
			padding-left: 20px;
			padding-right: 20px;
			gap: 20px;
		}

		.noct-side {
			width: 100%;
			padding-top: 120px;
			padding-left: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
		}

		.noct-content {
			margin: 0;
			padding-top: 40px;
			padding-left: 30px;
			padding-right: 30px;
		}
	}

	
	.forum-wrapper {
		margin: 40px;
		margin-top: 20px;
	}
	
	@media (max-width: 945px) {
	
		* {
			font-size: 0.98em !important;
		}
		
		.nav-tree {
			flex-direction: column;
			justify-content: flex-start;
		}
		
		.nav-tree-text {
			display: flex;
			width: 100%;
			justify-content: flex-start;
		}
		
		.nav-tree-map {
			display: flex;
			width: 100%;
			justify-content: flex-end;
		}
	
	.pact-sidebar {
		flex-direction: row !important;
	}
	
	.search-table {
		width: 99% !important;
		margin: 0 !important;
	}
	
	.pack-edit-wrapper {
		margin: 0 !important;
		width: 98% !important;
	}
	
	div.az-filter, div.pagination {
		display: inline-block;
		flex-direction: row !important;
		margin-bottom: 5px !important;
	}
	
	.char-wrap {
		flex-direction: column !important;
		gap: 15px !important;
	}
	
	.char-side {
		width: 98% !important;
	}
	
	.pack-create-table, .char-create-table, .char-table, .section-header, .char-left, .character-body, .character-main, .character-main div {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.character-profile-wrapper, .character-top, .char-side-img, .char-gallery, div.character-body, div.char-left, div.char-right {
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.char-side-img img {
		width: fit-content;
		height: fit-content;
		width: 100% !important;
		margin-left: auto;
		margin-right: auto;
	}
	
	.char-right > div.char-side-img-right {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
	.char-right > div.char-side-img-right > img {
		width: 65% !important;
		margin-left: auto;
		margin-right: auto;
	}
	
	div.char-left > .char-table td, div.char-left > .char-table th, div.char-left > div.char-description, div.char-left > div.section-header {
		padding: 10px !important;
	}
	
	.character-main {
		display: flex;
		gap: 20px !important;
		flex-direction: column;
	}
	
	.character-main div {
		margin: 0 !important;
		padding: 0 !important;
		flex-direction: column !important;
	}
	
	div.stat-column {
		padding-bottom: 20px  !important;
	}
	
	.appearance-grid, .general-grid {
		align-items: stretch;
	}
	
	div.general-grid {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 10px;
		align-items: stretch;
	}
	
	div.general-grid div {
		padding: 10px !important;
	}
	
	.appearance-grid h3, .general-grid strong {
		padding: 10px !important;
	}
	
	.rating-edit div {
		padding: 10px !important;
		margin-bottom: 10px !important;
		gap: 3px !important;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
	.rating-edit button {
		margin: 0 !important;
	}
	
	div.nature-wrapper, div.nature-body {
		display: flex;
		flex-direction: column;
	}
	
	.noct-wrapper {
		margin: 0;
		flex-direction: column !important;
		padding-left: 5px;
		padding-right: 5px;
		gap: 10px;
	}
	
	div.character-header {
		margin-top: 30px !important;
		padding: 8px 0px !important;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	
	div.nature-summary {
		padding: 10px;
	}
	
	.noct-content {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.main-content, .wiki-container {
		margin: 0 !important;
		padding: 5px !important;
	}
	
	blockquote {
		width: 98% !important;
	}

	.noct-content {
		margin: 0;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 30px;
	}

	.forum-wrapper {
		margin: 20px;
	}
	
  .noct-wrapper {
    flex-direction: column;
    min-height: auto;
    gap: 0;
  }

  .noct-side {
    margin: 0;
    width: 100%;
	padding: 5px;
    min-height: auto !important; /* ← This is the crucial fix */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .noct-side.sidebar-collapsed {
    max-height: 50px !important;
    margin-bottom: 30px;
  }

  .sidebar-toggle-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
  }

  .sidebar-toggle-arrow {
    font-size: 1rem;
    user-select: none;
    display: inline-block;
	padding-left: 5px;
  }

  .sidebar-toggle-content {
    visibility: visible;
    opacity: 1;
    height: auto;
    transition:
      visibility 0s linear 0s,
      opacity 0.2s ease-in-out;
  }

  .sidebar-collapsed .sidebar-toggle-content {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition:
      visibility 0s linear 0.3s,
      opacity 0.2s ease-in-out;
  }
  
  .statistics {
	max-width: 90% !important;
	margin-left: 30px;
	margin-right: 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
  }
  
  .stats-left, .stats-middle {
	border-bottom: 1px solid var(--black-40);
		padding-bottom: 10px;
  }
  
  .weather-now-box, .weather-glossary {
	width: 98% !important;
  }
  
  .weather-now-box {
	  margin-top: 10px !important;
	  margin-bottom: 5px !important;
  }
  
  
  .weather-glossary {
	margin-top: 0px !important;
  }
  
  .weather-grid {
	margin-top: 10px;
  }
  
  div.weather-entry {
	align-items: center;
  }
  
  div.weather-entry img {
	width: 50px;
	height: 50px;
  }
  
  #char-list {
	gap: 10px !important;
  }
  
  .char-flex-row, .character-row {
	padding: 10px !important;
	align-items: center;
	justify-content: center;
  }
  
  .character-row div {
	  display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
  }
  
  .char-avatar img {
	margin: 10px !important;
  }
  
   div.char-meta {
	margin: 10px !important;
  }
  
  .char-actions-div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	width: 100% !important;
	padding-bottom: 10px;
  }
  
  .charhub-av img {
	margin-top: 10px !important;
  }
  
  div.hub-flex-head {
	  display: grid;
	  gap: 2px;
	  padding-bottom: 15px !important;
	  font-size: 1.2em !important;
  }
  
  .char-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
    justify-items: center !important;
    align-items: center !important;
    margin-top: 15px !important;
	margin-left: auto !important;
	margin-right: auto !important;
    height: auto !important;
    max-height: none !important;
	max-width: 80% !important;
    flex: 0 0 auto !important;
  }
  
  .char-actions a:link {
	width: 90% !important;
    margin-bottom: 5px !important;
  }  

		
		.wiki-row-title, .wiki-row-subtitle {
			width: 60%;
		}

		  .wiki-row {
			flex-direction: column;
			width: 60%;
		  }

  .wiki-thumb {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--black-40);
  }

  .wiki-row-text {
    width: 100%;
  }
}

@media (max-width: 750px) {
			
		.wiki-row-title, .wiki-row-subtitle {
			width: 95%;
		}

		  .wiki-row {
			flex-direction: column;
			width: 95%;
		  }

  .wiki-thumb {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--black-40);
	text-align: center;
  }
  
  .wiki-thumb img {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
  }

  .wiki-row-text {
    width: 100%;
  }
  
  
		
		.nav-tree {
			flex-direction: column;
			justify-content: flex-start;
		}
		
		.nav-tree-text {
			display: flex;
			width: 100%;
			justify-content: flex-start;
		}
		
		.nav-tree-map {
			display: flex;
			width: 100%;
			justify-content: space-between;
		}
}
</style>