.hero-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 30px 40px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    border-bottom: 3px solid #1b5e20;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 50px;
    font-weight: 900;
    margin: 0;
    letter-spacing: 2px;
}

.hero-auth {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.navbar { display: none; }

.auth-btn {
    padding: 8px 14px;
    border: none;
    background: white;
    color: #2e7d32;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s, transform 0.15s;
}

.auth-btn:hover {
    background: #e8f5e9;
    transform: scale(1.05);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    margin: 0;
    padding: 20px;
}

/* Search + Filter Bar */
.controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

input[type="text"], select {
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #aaa;
}

/* Grid Layout */
.grid {
    display: flex;
    flex-direction: column; 
    gap: 0px; 
    width: 100%;
}

.card:hover {
  transform: scale(1.03);
}

.card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  margin: 2px;
  color: white;
}

/* badge tag for keywords */
.badge.tag {
  background: #ddd;
  color: #333;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 16px;
  margin: 2px;
  display: inline-block;
}

/* Add Button */
button {
  padding: 8px 12px;
  border: none;
  background: #333;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
 background: #555;
}
	
/* Table-like row layout */
.model-row {
    display: grid;
    grid-template-columns: 1fr 0.4fr 1fr 1fr 100px 100px;
    gap: 4px;
    align-items: center;
    background: white;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}


/* Column spacing */
.model-row .col {
    padding: 4px 6px;
}

.header-row {
    display: flex;
	padding: 8px 12px;
	background: #333;
	color: #fff;
	font-weight: bold;
	border-bottom: 2px solid #444;
}
	
	.name-col { flex: 2.5; }
    .faction-col { flex: 1.0; }
    .tags-col { flex: 2.5; }
    .link-col { flex: 0.5; }
    .action-col { flex: 0.4; }

/* Highlight active sort column */
    .header-row .col.active-sort {
     background: #444;
    color: #fff;
    }

    /* Arrow styling */
    .sort-arrow {
    display: inline-block;
    margin-left: 6px;
    opacity: 0.6;
    font-size: 0.8em;
    }

    /* Hover effect for sortable columns */
    .sortable {
     cursor: pointer;
     transition: background 0.15s, color 0.15s;
    }

    .sortable:hover {
     background: #3a3a3a;
     color: #fff;
    }


	.header-row .col {
	padding: 4px 6px;
	}

	.col {
	padding: 4px 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.name-col { 
		font-size: 1.4rem; 
		font-weight: 700;
		}
	.faction-col { flex: 1.0; }
	.tags-col { flex: 3; }
	.link-col { flex: 0.3; }
	.action-col { flex: 0.4; text-align: right; }


/* Faction icons */
.faction-col img.faction-icon {
    width: 40px;
    height: 40px;
    margin-right: 4px;
    }

	/* View button */
	.view-btn {
	padding: 6px 10px;
	background: #2e7d32;
	color: white;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	}

	.view-btn:hover {
	background: #1b5e20;
	}

	.add-btn {
	background: #333;
	color: white;
	}

	.remove-btn {
	background: #b71c1c;
	color: white;
	}
	
	.boxes-col {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    }

    .box-badge {
     background-color: #e8f0ff;
     color: #1a3a8c;
     padding: 2px 6px;
     border-radius: 6px;
	 font-size: 16px;
     font-weight: 500;
     white-space: nowrap;
    }


    .results-count {
     font-weight: 600;
      margin: 10px 0;
      padding: 6px 12px;
      background: #eee;
      border-radius: 6px;
      display: block;
      margin-left: auto;
      text-align: right;
    }

 /* Force a 3×3 grid */
.terrain-9grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
    gap: 12px !important;
    max-width: 900px;
    margin: 20px auto;
    border: 2px solid #333;
    padding: 12px;
 }

 /* 9 grid styling stays the same */
.9grid {
    border: 2px solid #333;
    background: #f2f2f2;
    padding: 10px;
    min-height: 200px;
}

.9grid h2 {
    margin-top: 0;
    text-align: center;
}

#campaign-list {
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#upgrade-list {
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


	
/* Row layout */
.campaign-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.campaign-row:last-child {
    border-bottom: none;
}

.campaign-name {
    font-size: 16px;
    font-weight: bold;
}

.campaign-factions img {
    width: 28px;
    height: 28px;
    margin-right: 6px;
}

#troupeNav {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 20px auto;
    width: 100%;
    text-align: center;
}

.troupe-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 20px auto;
    padding: 10px 12px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    width: 100%;
}

.troupe-row input,
.troupe-row select {
    padding: 8px;
    font-size: 16px;
}

.sizeOptionsRow {
    display: flex;
    gap: 10px;
    align-items: center;
}

.create-btn {
    padding: 10px 16px;
    background: #4a8df6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

.create-btn:hover {
    background: #3a7be0;
}

.status {
    text-align: center;
    margin-top: 10px;
    color: red;
}

.troupe-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 20px auto;
    padding: 10px 12px;
    background: #333;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    width: 100%;
}
    .name-col { flex: 2.5; }
    .faction-col { flex: 1.0; }
    .size-col { flex: 1.0; }
    .create-col { flex: 0.8; text-align: right; }