/* BASIC STYLES */

html {
	min-height: 100vh;
	font-size: 14px;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	box-sizing: border-box;
}

input[type="submit"]:not(.ignore-button-size),
input[type="button"]:not(.ignore-button-size),
input[type="reset"]:not(.ignore-button-size),
button:not(.ignore-button-size) {
	min-height: var(--button_size);
	height: auto;
}

.match-button-size {
	height: var(--button_size);
	line-height: var(--button_size);
	/* Ensures the text is vertically centered */
	box-sizing: border-box;
	text-align: center;
}

body {
	min-height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: var(--bgcolor);
	color: var(--color);
	text-decoration: none;
	margin: 0;
}

a,
.link,
b.gormball_player {
	color: var(--link_color);
	text-decoration: none;
	font-weight: bold;
	background-color: transparent;
	cursor: pointer;
}

a:hover,
.link:hover,
b.gormball_player:hover {
	color: var(--hover_color);
}

img {
	vertical-align: middle;
}

hr {
	height: 1px;
	background-color: var(--color);
	border: none;
	overflow: visible;
}

main>h1,
section>h1,
main>h2,
section>h2 {
	font-size: 1rem;
	margin-top: 1em;
	margin-bottom: 1em;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

b,
strong {
	font-weight: bolder;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

textarea {
	background-color: var(--bgcolor);
	color: var(--color);
	/* Font color */
	border: 1px solid var(--color);
	/* Border */
	padding: 10px;
    min-height: 4rem;
    height: auto;
}

summary:hover {
	cursor: pointer;
}

/* BASE LAYOUT STYLES */

#container {
	min-width: 735px;
	width: 955px;
	display: grid;
	grid-template-rows: min-content 44px 72px min-content min-content minmax(0, 1fr);
	grid-template-columns: 140px minmax(0, 1fr) 190px;
	grid-template-areas: "atop atop aio"
		"top top aio"
		"side banner aio"
		"side event aio"
		"side content aio"
		"side footer aio";
}

#aio_sidebar {
	display: grid;
}

#aio_sidebar_placeholder {
	grid-area: aio;
	width: 170px;
	margin: 10px;
}

#advert-header {
	grid-area: atop;
	width: 728px;
	height: 93px;
	font-weight: bold;
	text-align: right;
}

#advert-header img {
	width: 728px;
	height: 93px;
}

/* SB TOP */
#sb_top,
.sb_top {
	grid-area: top;
	width: 728px;
	height: 44px;
	background-repeat: no-repeat;
	text-align: right;
}

#sb_bottom {
	display: none;
}

/* Items Container */
.bottom-bar-items {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 20px;
	transform: translateY(-35px);
	/* Move up by 10px */
}

.lower-moon {
	display: flex;
	justify-content: left;
	/* Center-align icon */
	align-items: center;
	/* Vertically center icon */
	flex: 0;
	font-size: 50px;
	/* Adjust font size */
	cursor: pointer;
	/* Pointer cursor */
	text-align: center;
}

.lower-info {
	width: 80%;
	display: flex;
	justify-content: flex-start; /* align items to the left */
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 0.25em;
	font-size: 1.35rem;
	padding: 0 .5em;
	margin: 0 auto;
	text-align: left; /* not necessary for flex, but avoids centering inline text */
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.lower-info.no-overflow {
    justify-content: center;
    text-align: center; /* center inline text if needed */
}

.mobile-toggle {
	display: flex;
	justify-content: right;
	/* Center-align icon */
	align-items: center;
	/* Vertically center icon */
	flex: 0;
	/* Fixed at 25% width */
	font-size: 50px;
	/* Adjust font size */
	text-align: center;
	cursor: pointer;
	/* Pointer cursor */
}

/* Mobile Top Bar */
/* Hamburger Top Menu Styles */
.mobile-top-bar-item {
	padding: .5%;
	display: none;
}

.side-menu-label {
	display: none;
}

#side-menu-wrapper {
	display: none;
	align-items: center;
}

.side-menu-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 50px;
	height: 50px;
	cursor: pointer;
	position: relative;
	margin: -30px auto 0 auto;
	margin: 6px;
}

.side-menu-icon div {
	position: relative;
	top: 0;
	height: 12px;
	background: var(--color);
	margin-bottom: 12px;
	transition: 0.3s ease transform, 0.3s ease top, 0.3s ease width,
		0.3s ease right;
	border-radius: 4px;
}

#side-menu-toggle {
	display: none;
	/* Hide the checkbox */
}

/* Toggle menu visibility */

.side-menu-icon div:first-child {
	transform-origin: 0;
}

.side-menu-icon div:last-child {
	margin-bottom: 0;
	transform-origin: 50px;
}

.side-menu-icon div:nth-child(2) {
	right: 0;
	width: 50px;
}

#side-menu-toggle:checked+div:before {
	background-color: #4caf50;
}

#side-menu-toggle:checked+div div:first-child {
	top: -4px;
	transform: rotateZ(45deg);
}

#side-menu-toggle:checked+div div:last-child {
	top: 5px;
	transform: rotateZ(45deg);
}

#side-menu-toggle:checked+div div:nth-child(2) {
	width: 75px;
	top: 0;
	right: 13px;
	transform: rotateZ(-45deg);
}

/* Container for the toggle button */
#aio-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	top: 0px;
	right: 0px;
	height: 80%;
	margin: 6px;
}

/* Text inside the button */
.aio-menu-icon {
	height: 100%;
	border-radius: 50%;
	border: 2px solid var(--color);
}

#mobile-alerts {
	cursor: pointer;
	aspect-ratio: 1/1;
}

#site-back-button {
	display: none;
	cursor: pointer;
}

#site-back-button-icon {
	height: calc(var(--top-height)* .65);
	width: calc(var(--top-height)* .65);
}

#show-mobile-toggle {
	display: none;
	position: absolute;
	left: 138px;
	font-size: 22px;

}

/* Search Bar Container */

#top-bar-search {
	align-items: center;
	position: relative;
	width: 75px;
	padding-right: .45em;
	z-index: 1000;
	/* Ensure it's above other content when expanded */
}

/* Search Button */
#top-bar-search-btn {
	border: none;
	background: none;
	/* Remove background */
	cursor: pointer;
	align-items: center;
	justify-content: center;
	color: #000;
	/* Adjust to match your site's text color */
	transition: color 0.3s ease;
}

/* Search Input Field */
#top-bar-search-input {
	font-size: 1.5em;
	width: 100%;
	border: none;
	padding: 0 .25em;
	outline: none;
	border-radius: 10px;
	background-color: #fff;
	color: #000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	border: 1px solid #ccc;
	z-index: 999;
	height: 100%
}

.search-input-holder {
	display: none;
	position: relative;
}

/* Placeholder Styling */
#top-bar-search-input::placeholder {
	color: rgba(0, 0, 0, 0.5);
	font-size: 1em !important;
	letter-spacing: 1px;
	font-weight: 300;
}

.nst.mobile {
	display: none;
}

/* SB SIDE */

#sb_side {
	grid-area: side;
	width: 128px;
	height: fit-content;
	display: flex;
    opacity: 1;
    transform: translateX(0);
	flex-direction: column;
	gap: 14px;
	background-color: #ffce00;
	border-right: 2px solid black;
	text-align: center;
	margin-right: 10px;
}

#page_event {
	grid-area: event;
	justify-content: center;
	width: 595px;
	min-height: 16.5px;
	height: fit-content;

}

#page_event:has(div) {
	margin: 1em auto;
}

#page_content {
	grid-area: content;
	width: 595px;
	height: fit-content;
}

#page_footer {
	grid-area: footer;
	width: 595px;
	height: fit-content;
}

#footer_content {
	width: 67%;
	margin: 50px auto;
	text-align: center;
	font-weight: normal;
	opacity: .85;
}

.greatgames-left img {
	width: 40px;
}

#homepage_link {
	float: left;
}

#homepage_link_inner {
	display: inline-block;
	height: 34px;
	width: 128px;
}

#userinfo {
	margin-right: 15px;
	font-size: 10px;
	font-weight: bold;
	line-height: 36px;
	vertical-align: middle;
}

.user-info-icon {
	display: none;
}

.user-info-np-icon {
	display: none;
}

.show_all {
	font-size: 10px;
}

.search-dropdown-list {
	position: absolute;
	background: var(--bgcolor);
	border: 1px solid #ccc;
	border-radius: 10px;
	top: 100%;
	width: 98.4%;
	max-height: 50vh;
	overflow-y: auto;
	z-index: 1000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.search-dropdown-item {
	padding: 8px 12px;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
}

.search-dropdown-item:hover {
	background: var(--grid_even);
}

.search-dropdown-item.disabled {
	cursor: not-allowed;
}


.search-dropdown-title {
	background: var(--grid_head);
	padding: .25em;
}

.autocomplete-container {
	position: relative;
}

.search-dropdown-result-image {
	object-fit: contain;
	border-radius: 5px;
}

.search-dropdown-result-text {
	flex: 1;
	text-align: center;
	font-weight: normal;
	color: var(--color);
}

.battlepedia-admin-search-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.battlepedia-admin-search-dropdown {
	top: calc(100% - 1px);
	left: 0;
	right: 0;
	width: 100%;
	border-radius: 0 0 10px 10px;
	box-sizing: border-box;
}

.battlepedia-admin-search-result {
	width: 100%;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
}

.battlepedia-admin-search-meta {
	display: block;
	font-size: .85em;
	color: var(--medgrey);
}

.admin-item-search-input {
	width: 100%;
}

.battlepedia-admin-search-input.dropdown-open {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}


/* sidebar nav */

#sb_createpet {
	height: 53px;
	background-position: 0px 0px;
}

#sb_createpet:hover {
	background-position: 128px 0px;
}

#sb_petcentral {
	height: 53px;
	background-position: 0px -53px;
}

#sb_petcentral:hover {
	background-position: 128px -53px;
}

#sb_explore {
	height: 32px;
	background-position: 0px -106px;
}

#sb_explore:hover {
	background-position: 128px -106px;
}

#sb_games {
	height: 32px;
	background-position: 0px -138px;
}

#sb_games:hover {
	background-position: 128px -138px;
}

#sb_neomail {
	height: 32px;
	background-position: 0px -170px;
}

#sb_neomail:hover {
	background-position: 128px -170px;
}

#sb_shops {
	height: 32px;
	background-position: 0px -202px;
}

#sb_shops:hover {
	background-position: 128px -202px;
}

#sb_boards {
	height: 32px;
	background-position: 0px -234px;
}

#sb_boards:hover {
	background-position: 128px -234px;
}

#sb_news {
	height: 34px;
	background-position: 0px -266px;
}

#sb_news:hover {
	background-position: 128px -266px;
}

#sb_stuff {
	height: 34px;
	background-position: 0px -300px;
}

#sb_stuff:hover {
	background-position: 128px -300px;
}

#sb_help {
	height: 35px;
	background-position: 0px -334px;
}

#sb_help:hover {
	background-position: 128px -334px;
}

#sb_login {
	height: 30px;
	background-position: 0px -369px;
}

#sb_login:hover {
	background-position: 128px -369px;
}

#sb_logout {
	height: 28px;
	background-position: 0px -399px;
}

#sb_logout:hover {
	background-position: 128px -399px;
}

#sb_clock {
	font-size: 12px;
}

.nst {
	width: 110px;
	border: 1px solid #000000;
	background-color: #ffff63;
	color: #000000;
	padding: 2px;
	margin: 0;
}

#sb_search {
	font-size: 10px;
}

.sb_form {
	width: 110px;
}

#sb_banner img {
	width: 120px;
	height: 60px;
}

#sb_lang {
	font-size: 10px;
}

#sb_edge {
	border-right: 0;
	height: 20px;
}

#page_banner {
	grid-area: banner;
	display: flex;
	width: 595px;
	height: 62px;
	margin: 5px 0;
}

#page_notif {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 56px;
	line-height: 12px;
	margin-right: 31px;
}

#page_notif div,
.all_events_table div {
	height: 50px;
	width: 50px;
}

.banner {
	height: 62px;
	width: 480px;
	cursor: pointer;
}

.banner-rounded-edges {
	border-radius: 25px;
}

.banner-top-rounded-edges {
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}


#side-banner-img {
	width: 120px;
	height: 60px;
}

/* INDEX PAGE */

#indexpage {
	display: grid;
	grid-template-columns: 1fr 1fr 160px;
	grid-template-rows: auto auto 1fr;
	grid-template-areas: "top top right""newsflash refer right""newsflash games right";
}

#index_top {
	grid-area: top;
	padding-right: 10px;
}

#imgAnimate {
	margin: auto;
}

#rightbar {
	grid-area: right;
}

#newsflash,
#referafriend,
#greatgames {
	margin-right: 10px;
	margin-top: 10px;

}

#newsflash {
	padding: 5px;
}

#news-flash-img {
	width: 188px;
}

#great-games-image {
	width: 69px;
}

#referafriend {
	grid-area: refer;
}

.refer-friend-img {
	width: 185px;
}

.homepage_rollover {
	width: 377px;
	margin: auto;
}

.featuredgame {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 5px;
	align-items: center;
	margin: 10px auto;
}

.small-home-page-game-img {
	width: 40px;
}

.greatgames-right {
	text-align: left;
}

#index-right-banner {
	width: 100%;
	border: 2px solid black;
	/* Default border */
	border-bottom: none;
	/* Removes bottom border */
	border-top-right-radius: 30%;
}


#latest {
	border-left: 2px solid black;
	border-right: 2px solid black;
	padding: 2%;
	width: 96%;
	font-size: 0.714rem;
}

#latest h4 {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: 0.714rem;
}

#latest img {
	margin-top: 5px;
}

#neo-poll {
	width: 102.5%;
}

#neo-poll-img {
	width: 100%;
}

#neo-poll-inner {
	padding: 5px 10px;
}

#neo-poll-results {
	width: 100%;
	border-spacing: 0;
}

#neo-poll-results td {
	padding: 0;
}

.neo-poll-question {
	margin-top: 0em;
}

.neo-poll-option {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
}

.neo-poll-progress-bar {
	flex-grow: 1;
	height: 10px;
	background: #e0e0e0;
	border-radius: 2px;
	overflow: hidden;
	margin-top: 5px;
}

.neo-poll-progress {
	height: 100%;
	background: navy;
}

.neo-poll-vote-count {
	text-align: right;
}


/* PET LOOKUP */

.question-circle {
    vertical-align: middle;
    position: relative;
    transform: translateY(calc((1em - 15px) / 2));
    width: 15px;
}

.dice-circle {
    vertical-align: middle;
    position: relative;
    transform: translateY(calc((2em - 30px) / 2));
    width: 30px;
}

#petLookupContent {
	min-width: min-content;
	display: flex;
	flex-direction: column;
	gap: 16.5px;
	text-align: center;
}

#petLookupContent hr {
	width: 100%;
	margin: 0;
}

#petInfo {
	width: 90%;
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-areas: "image stats";
	gap: 10px;
	margin: auto;
}

#petStats {
	padding: 5px;
	background-color: #ffffcc;
}

.pet--height::after {
	content: "average";
}

.pet--weight::after {
	content: "average";
}

.pet--statsheader::before,
.pet--jobsheader::before,
.pet--recordheader::before,
.pet--cheatheader::before {
	content: "- ";
}

.pet--statsheader::after,
.pet--jobsheader::after,
.pet--recordheader::after,
.pet--cheatheader::after {
	content: " -";
}

.pet--statslabel::after,
.pet--jobslabel::after,
.pet--recordlabel::after,
.pet--cheatlabel::after {
	content: " : ";
}

.pet--jobsheader,
.pet--cheatheader {
	margin-top: 1em;
}

.pet--no-trade-icon {
	width: 20px;
	vertical-align: middle;
}

.pet--no-trade-alert {
	padding: 5px;
	background-color: #ffffcc;
	display: inline-block;
	width: 90%;
	margin: auto;
}

.pet--no-trade-text {
	font-style: italic;
}

#petTrophies {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

#petLinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

#petBattle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

/* USER LOOKUP */

#userLookupContent {
	min-width: min-content;
	display: flex;
	flex-direction: column;
	gap: 16.5px;
	margin-top: 16.5px;
}

#userLookupContent hr {
	width: 100%;
	margin: 0;
}

.ul--header {
	text-align: center;
	margin: 0;
}

.ul--neofriend-form {
	width: 50px;
	height: 50px;
}

.ul--teamicon {
	width: 28px;
	height: 21px;
	vertical-align: -10%;
}

.ul--snowball {
	width: 25px;
	vertical-align: -18%;
}

#userLookupDesc {
	text-align: center;
}

#userLookupInfo {
	display: grid;
	grid-template-columns: 1fr 100px 130px;
	grid-template-areas: "text shield collections";
    align-items: start;
	gap: 10px;
}

#userLookupText {
	grid-area: text;
	word-break: break-word;
}

.ul--headerlabel::after,
.ul--infolabel::after,
.ul--collectionslabel::after {
	content: " : ";
}

#userLookupShield {
	grid-area: shield;
	text-align: right;
}

#userLookupCollections {
	grid-area: collections;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16.5px;
}

#userLookupLinks {
	display: flex;
	justify-content: space-evenly;
}

.ul__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ul__neofriend form {
	width: 50px;
	height: 50px;
}

.ul--sectionheader {
	text-align: center;
	margin-bottom: 16.5px;
}

.ul--petsheader {
	text-transform: uppercase;
}

.ul--sectionheader::before {
	content: "- ";
}

.ul--sectionheader::after {
	content: " -";
}

#userPetList:not(.not-flexin) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

.userPetList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

.ul__pet {
    flex: 0 0 calc((100% - 5 * 5px) / 6);
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ul--petname {
  word-break: break-word;
  overflow-wrap: break-word;
}

.petlist__before,
.pet__after {
	display: none;
}

#siteTrophiesList,
#gameTrophiesList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

.ul__sitetrophy,
.ul__gametrophy {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100px;
}

.ul--sitetrophyname,
.ul--gametrophyname,
.ul--sitetrophycap,
.ul--sitetrophyname a,
.ul--gametrophyname a,
.ul--sitetrophycap a {
	font-size: 0.714rem;
}

#userReportBlock {
	text-align: center;
	margin-top: 50px;
}

.ul--button {
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--link_color);
	font-weight: bold;
	cursor: pointer;
}

.ul--button:hover {
	color: var(--hover_color);
}

/* INVENTORY */

.links-flex {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.25em;
	align-items: center;
}

.gift-event {
	display: flex;
	width: 86%;
	border: 2px solid blue;
	align-items: center;
	padding: 2%;
	margin: auto;
}


.gift-event .text {
	margin: auto;
	text-align: center;
}

.newbie-pack {
	display: flex;
	width: 86%;
	border: 2px solid blue;
	align-items: center;
	padding: 2%;
	margin: auto;
}

.newbie-pack img {
	padding: 1%;
}

.newbie-pack-text {
	text-align: center;
	margin: auto;
}

.inv-item .med-image {
	margin: auto;
}

.item-info {
	display: flex;
	flex-direction: column;
}

.item-trading {
	color: #8c0000;
}

.inv-trading-items-title {
	text-align: left;
}

.quantity-circle {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	/* Slightly offset to overlap the corner */
	background-color: #CC5500;
	color: white;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 12px;
	z-index: 1;
}

.large-quantity-circle {
	position: absolute;
	top: -5%;
	right: -2%;
	background-color: #CC5500;
	color: white;
	border-radius: 50%;
	width: 53px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 12px;
}

.inv-dropdown-menu {
	display: none;
	position: absolute;
	top: 0%;
	left: 100%;
	background-color: var(--bgcolor);
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 2;
	min-width: 250px;
	padding: 0;
	/* Remove padding from the container */
	border: 1px solid var(--color);
	border-radius: 5px;
	/* Rounded corners */
	overflow: hidden;
	/* Hide overflow to ensure rounded corners */
}

.inv-dropdown-menu.left {
	top: 0%;
	left: auto;
	right: 100%;
}

.inv-dropdown-menu p {
	margin: 0;
	padding: 12px 16px;
	background-color: var(--grid_head);
	border-bottom: 1px solid var(--color);
	font-weight: bold;
	color: var(--color);
}

.inv-dropdown-menu button {
	width: 100%;
	padding: 1rem 1rem;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font-size: 1rem;
	color: var(--color);
	display: flex;
	align-items: center;
	/* Align icon and text vertically */
	transition: background-color 0.3s ease;
}

.inv-dropdown-menu button img.dropdown-icon {
	margin-right: 10px;
	width: 40px;
}

.inv-dropdown-menu button img.pet-dropdown-icon {
	margin-right: 10px;
	width: 40px;
	border-radius: 5px;
}

.inv-dropdown-menu button:hover {
	background-color: var(--grid_even);
}

.inv-dropdown-menu button:focus {
	outline: none;
	background-color: var(--grid_select);
}

.inv-item-name {
	cursor: default;
}

.inv-item-name:hover {
	cursor: pointer;
}

.inv-options {
	cursor: default;
}

.inv-options:hover {
	cursor: pointer;
}

/* GENERIC SHOP & Inventory Lists*/

h1.greeting {
	font-size: 1rem;
	margin: 0;
}

#nojs {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: white;
	z-index: 9999;
}

.itemList,
#shopInventory,
.shopInventory,
.inventory {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 130px);
	overflow-wrap: break-word;
	justify-content: center;
	align-items: start;
	text-align: center;
	gap: 3px;
}

.itemList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(115px, auto));
	gap: 10px;
	margin: 0 auto;
	padding: 10px;
	max-width: 100%;
	box-sizing: border-box;
    align-items: start;
}

.centered-item {
	margin: auto;
	width: 134px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
    margin: 0 auto;
}

.relic-span {
	height: 4rem;
    display: flex;
    align-items: flex-start;
}

.garden-item-name {
    display: flex;
    align-items: flex-start;
}

.inventory {
    grid-template-columns: repeat(auto-fill, minmax(115px, max-content));
}

.shop-item,
.inv-item,
.selectable-item {
	height: 100%;
	/* Make all shop items take the same height */
	display: flex;
	flex-direction: column;
	overflow-wrap: break-word;
	justify-content: start;
	align-items: center;
	width: 100%;
	padding: 4px;
	gap: 0.25em;
	margin: auto;
}

.selectable-item {
	align-self: center;
}

.selectable-item label{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
  width:100%;
}

.inv-item {
	position: relative;
	box-sizing: border-box;
	/* Include padding and border in size calculation */
	overflow: visible;
	/* Prevent clipping within the item */
}


.inv-item-image {
	position: relative;
}

.shop-item>form>input {
	vertical-align: middle;
	aspect-ratio: 1;
	font-size: 0;
}

.item-info {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.no-items {
	grid-column: span 4;
}

.item-table {
	border-collapse: collapse;
}

.neopets_hint {
	display: flex;
	flex-wrap: wrap;
	width: 55%;
	border: 1px solid #444;
	align-items: stretch;
}

.neopets_hint>div {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #444;
	padding: 4px;
}

.hint_header {
	flex-basis: 100%;
}

.hint_txt {
	width: min-content;
	flex-grow: 1;
}

.haggle {
	width: 5em;
}

/* USER SHOP/GALLERY */

#gallery_items {
	width: min-content;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 130px);
	overflow-wrap: break-word;
	align-items: start;
	text-align: center;
	gap: 3px;
	margin: auto;
}

.gallery_item {
	display: flex;
	flex-direction: column;
	padding: 4px;
	gap: 0.25em;
	align-items: center;
	float: left;
}

.shop-item-info,
.gallery-item-info {
	display: flex;
	flex-direction: column;
}

.gallery-select-category,
.gallery-remove-item,
.gallery-rank-input {
	padding: 1px;
	margin: 1px auto;
}

.gallery-select-category_parent {
	width: 80%;
}

.gallery-select-category {
	width: 100%;
}

.gallery-remove-item {
	width: 100%;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
}

.gallery-rank-input {
	width: 75%;
}

#shopContent hr,
#galleryContent hr {
	margin: 1em auto;
	width: 529px;
}

.quick_categorize {
	gap: 0.5em;
	width: 50%;
}

/* Manage Gallery Grid */

.manage_gallery_grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Adjust column count and sizes as needed */
	overflow-wrap: break-word;
	align-items: stretch;
	margin: 1em 0;
	/* Adjusted from your class margin-1 */
}

.manage_gallery_grid>div {
	display: flex;
	padding: 4px;
}

.manage_gallery_grid>.header {
	background-color: darkblue;
	/* Define this variable in your CSS or replace with a color */
	color: white;
	text-align: center;
	justify-content: center;
	padding: 1em;
}

.manage_gallery_grid>.header:first-of-type {
	border-top-left-radius: 6px;
}

.manage_gallery_grid>.last-header {
	border-top-right-radius: 6px;
}

.manage_gallery_grid>.data {
	background-color: #dddddd;
}

.manage_gallery_grid>.data.bg-alt {
	background-color: #ffffff;
}

.manage_gallery_grid>.data:not(.flex-column) {
	align-items: center;
}

.manage_gallery_grid>.data.flex-column {
	flex-direction: column;
	justify-content: center;
}

/* Gallery Grid Edit */

.manage_gallery_grid>.data>.rm {
	width: 2em;
	justify-content: center;
	/* Center the checkbox */
}

/* Adjust textarea style */
.manage_gallery_grid>.data>textarea {
	width: 100%;
	/* Full width */
	height: auto;
	/* Adjust height as needed */
	resize: vertical;
	/* Allow vertical resize */
}

/* POUND */

.poundContent {
	width: 595px;
}

.poundPets {
	width: 185px;
	display: inline-block;
}

.poundPets a {
	font-weight: normal;
}

#sidePets img {
	opacity: 0.5;
	filter: alpha(opacity=50);
	/* For IE8 and earlier */
}

.poundWrapper {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#adoptbutton {
	width: 275px;
}

#refreshbutton {
	width: 225px;
}

#underpets {
	margin-top: 5px;
}

.poundImages {
	position: relative;
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
}

.poundImage {
	width: 50%;
}

.poundImage img {
	width: 100%;
	display: block;
}


/* TRADING POST */

.trading_post {
	width: 75%;
	overflow-wrap: break-word;
	border: 4px solid #aaccaa;
	padding: 4px;
}

.bg-tp-selected {
	background-color: #aebfe8;
}

.trading_post>div {
	padding: 4px;
}

.trading_post hr {
	width: 100%;
	background-color: #aaccaa;
}

.tp-wishlist-input {
	height: 30px;
}

hr.browse {
	height: 1.25em;
	padding: 4px 0;
}

.trading_post>.header {
	background-color: #aaccaa;
}

.trade-item {
	display: flex;
	gap: 0.5em;
	align-items: center;
}

.trade-item .item-info {
	text-align: left;
}


button[name="newest"] {
	border: none;
	font-size: 1rem;
}

.tp-item-button {
	border: 1px solid var(--color);
	;
	height: 35px;
	width: 35px;
	border-radius: 35px;
	cursor: pointer;
}

.tp-item-button-off {
	border: 1px solid var(--color);
	;
	height: 35px;
	width: 35px;
	border-radius: 35px;
	cursor: pointer;
	filter: brightness(.67) opacity(.8) grayscale(1) !important;
}


.tp-item-wrapper {
	display: inline-block;
	text-align: center;
	margin: 3px;
}

.tp-hidden-count {
	margin-top: 3px;
}

/* FRUIT MACHINE */

.fruitmachineimages {
	padding-top: 15px;
	padding-bottom: 10px;
	text-align: center;
}

#fruitprize {
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

#fmgz {
	font-size: 16px;
	font-weight: bold;
}

.fruitmachinepics {
	text-align: center;
}

/* Pet Lists */

.starredPet {
	text-align: center;
	display: inline-block;
	overflow-wrap: break-word;
    width: 100%;
    overflow-x: hidden;
}


.starredPets {
	width: 80%;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 1em;
	justify-items: start;
	align-items: start;
}

/* ADD PET */

.addpetContent {
	width: 100%;
}

.addpetChoices {
	text-align: center;
	display: inline-block;
}


.addpetPets {
	width: 80%;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 1em;
	justify-items: start;
	justify-content: center;
}

.addpetPets.all {
	grid-template-columns: repeat(4, 1fr);
	justify-items: center;

}

.addpetButtons {
	width: 400px;
	margin: auto;
	text-align: center;
	margin-top: 10px;
}

#addpetBtn {
	margin: 5px;
}

.teachers {
	justify-items: start;
	align-items: start;
}

.myNewPet {
	padding-top: 25px;
	margin: auto;
	text-align: center;
	width: 150px;
}

/* EDIT GALLERY */

.loggedIn {
	text-align: center;
}

#edit_gallery thead,
#edit_gallery tfoot {
	background-color: #dddd77;
	text-align: center;
}

#edit_gallery tbody {
	background-color: #ffffcc;
	text-align: left;
	vertical-align: top;
}

#edit_gallery .sf {
	font-weight: normal;
}

.nowrap {
	overflow-wrap: initial;
}

/* NEOMAIL */

.view_message {
	display: grid;
	width: 100%;
	grid-template-columns: 28% 72%;
	grid-template-rows: repeat(4, min-content);
	overflow-wrap: break-word;
	text-align: left;
	margin: auto;
}

.send_message {
	display: grid;
	width: 100%;
	grid-template-columns: 28% 72%;
	grid-template-rows: repeat(5, min-content);
	grid-auto-flow: column;
	overflow-wrap: break-word;
	text-align: left;
	margin: auto;
}

.reply_message {
	display: grid;
	width: 100%;
	grid-template-columns: 28% 72%;
	grid-template-rows: repeat(5, min-content);
	grid-auto-flow: column;
	overflow-wrap: break-word;
	text-align: left;
	margin: auto;
}

.view_message>div,
.send_message>div,
.reply_message>div {
	padding: 4px;
}

.message_left {
	background-color: #c8e3ff;
	display: flex;
	justify-content: right;
	align-items: center;
	border-right: 1px solid var(--color);
	font-size: 0.857rem;
}

.message_report {
	background-color: #c8e3ff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: right;
	border-right: 1px solid var(--color);
	font-size: 0.857rem;
}

.message_right {
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}

.message_right_inputs {
	display: flex;
	gap: 0.25em;
	align-items: center;
}

.message_right_inputs>select {
	width: 50%;
}

.message_right_inputs>input {
	flex-grow: 1;
}

.message_old {
	background-color: #dedede;
	border-top: 1px solid var(--color);
}

.message_write {
	border-top: 1px solid var(--color);
}

.message_write>span>input {
	width: 4em;
}

.message_textarea {
	height: 120px;
}

.sender_info {
	display: flex;
	align-items: center;
	gap: 0.25em;
}

.message_actions {
	display: flex;
	justify-content: center;
	gap: 0.67em;
}


.neomail_table {
	width: 100%;
	display: grid;
	grid-template-columns: max-content repeat(3, minmax(0, 1fr)) max-content;
	align-items: stretch;
}

.neomail_table>div {
	display: flex;
	align-items: center;
	padding: 4px;
}

.nm_col_header,
.nm_data {
	border-bottom: 1px solid var(--color);
	text-align: left;
}

.nm_col_header {
	background-color: #ffcc00;
}

.nm_userinfo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 0.25em;
}

.nm_firstname {
	flex-basis: 100%;
}

.nm_footer {
	background-color: #efefef;
	grid-column: span 5;
}

.nm_data:nth-child(10n + 1),
.nm_data:nth-child(10n + 2),
.nm_data:nth-child(10n + 3),
.nm_data:nth-child(10n + 4),
.nm_data:nth-child(10n + 5) {
	background-color: #efefef;
}

/* KADS */

#kad_alert {
	margin-bottom: 5px;
	padding: 5px;
	background-color: pink;
	text-align: center;
}

#kad_grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(4, minmax(0, 1fr));
	gap: 2px;
}

.kad_box {
	text-align: center;
	word-break: break-word;
	border: 1px solid #808080;
	font-size: 0.928rem;
	padding: 3px;
	gap: 0.25em;
}

.kad-img {
	height: 100px;
	width: 100px;
}

/* MISC PAGES */

.pet-with-petpet {
	vertical-align: bottom;
}

.errorpage p {
	font-family: "Verdana", "Arial", "Helvetica";
	font-size: 12px;
}

#error-image {
	border-radius: 21px;
}

#soupKitchen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}

#soupKitchen>div {
	width: 135px;
}

#soupKitchen img {
	width: 125px;
}

#help {
	display: grid;
	grid-template-columns: 1fr min-content;
	align-items: center;
	gap: 1em;
}

.faded {
	opacity: 0.4;
}

.market-div{
  background-color: var(--grid_odd);
  padding: .25em;
}

.mfa_svg svg{
    width: 50%;
    height: auto;
    background-color: white;
}

.recovery-codes-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  margin: 1.5rem auto;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--color);
  box-sizing: border-box;
}

.recovery-codes-grid .recovery-code {
  border: 1px solid var(--color);
  background-color: var(--grid_even);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.1s ease;

}

.recovery-codes-grid .recovery-code:hover {
  transform: scale(1.03);
  cursor: default;
}


/* PET SORT ADJUST POSITION PAGE */

.pet-sort-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin-top: 20px;
}

.pet-sort-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 65%;
}

.pet-sort-question {
	flex: 1;
	text-align: left;
}

.pet-sort-options {
	display: flex;
	align-items: center;
	gap: 5px;
}

.pet-sort-options span {
	margin: 0 5px;
}


#quickref_petlist {
	width: 625px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 8.33px;
	row-gap: 1em;
	align-items: start;
}

.quickref_pet {
	width: 150px;
}

.selected-color {
	border: 2px solid gray;
	border-radius: 10px;
	padding: 4px;
}

.text-center {
	content-align: center;
	text-align: center;
}

.scratchcard td a {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.dice_roll {
	display: inline-flex;
	gap: 50px;
}

.training-school-status-top {
	position: sticky;
	z-index: 1000;
	/* Ensure it stays above other content */
	top: 0;
	height: auto;
	background-color: var(--bgcolor);
	padding: 12px;
}

/* Haunted House */

.clue_container {
  position: relative;
}

.left_page_clue {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-family: bradley hand, cursive;
}

.right_page_clue {
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  font-family: bradley hand, cursive;
}


.hh-info-box {
	position: relative;
	width: 480px;
	display: flex;
	align-items: center;
	padding: 10px;
	margin: auto;
	background-color: #FFB09C;
	border-radius: 25px;
}

.hh-host {
	margin-right: 10px;
	width: 75px;
}

.hh-info-box .orange {
	color: #542700;
}

.hh-info-box.found {
    background-color: #b0fab0;
}


.guest_card {
    width: 95%;
    margin: 30px auto 0;
    padding: 20px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 20px;
    box-shadow: 2px 5px rgba(128, 128, 128, 0.3);
    display: flex;
    gap: 20px;
    align-items: center;
}

.guest_card.reverse {
    flex-direction: row-reverse;
}

.guest_image {
    width: 30%;
    text-align: center;
}

.guest_image img {
    max-width: 100%;
}

.guest_info {
    width: 70%;
}

.guest_info .guest_name {
    font-weight: bold;
    font-size: large;
    margin-bottom: 10px;
}

.guest_info .guest_blurb {
    margin: 0;
}


/* RARITY TEXT */

.rarity_common {
	color: black;
	font-weight: bold;
	font-size: 0.857rem;
}

.rarity_uncommon {
	color: green;
	font-weight: bold;
	font-size: 0.857rem;
}

.rarity_rare {
	color: green;
	font-weight: bold;
	font-size: 0.857rem;
}

.rarity_megarare {
	color: orange;
	font-weight: bold;
	font-size: 0.857rem;
}

.rarity_special {
	color: #aa4455;
	font-weight: bold;
	font-size: 0.857rem;
}

.rarity_artifact {
	color: red;
	font-weight: bold;
	font-size: 0.857rem;
}

.rarity_retired {
	color: grey;
	font-weight: bold;
	font-size: 0.857rem;
}

.rarity_relic {
	color: purple;
	font-weight: bold;
	font-size: 0.857rem;
}

.not_tradable {
	color: #808080;
	font-weight: bold;
	font-size: 0.857rem;
}

/* ADMIN TOOLS */

.island_music {
	grid-template-columns: 1fr;
	/* Single column layout */
	gap: 10px;
	/* Space between items */
	text-align: center;
}

.island_music .header {
	font-size: 1.2em;
}

.island_music .data {
	position: relative;
	padding: 15px;
	border: 1px solid var(--grid_border);
}

.island_music .caption-text {
	padding: 5px;
}

.island_music .edit-form {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 10px;
}

.ul-report-card-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid black;

}

.ul-report-card-item {
	background: lightyellow;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	padding: 5px;
	align-content: center;
	text-align: center;
}

.ul-report-card-container>.ul-report-card-item:nth-child(2n) {
	border-right: none;
}

.ul-report-card-container>.ul-report-card-item:nth-last-child(-n+2) {
	border-bottom: none;
}

.longTextList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: min-content;
	overflow-wrap: break-word;
	column-gap: 1.3em;
	row-gap: 0.25em;
}

.longProfanitiesList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: min-content;
	overflow-wrap: break-word;
	column-gap: 1.3em;
	row-gap: 0.25em;
	list-style: none;
}

#adminTools {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 32%);
	gap: 2%;
}

#adminTools > * {
	min-width: 0;
}

#adminTools .frozen {
	grid-column: span 3;
}

#adminTools .ul-official-neomail-section {
	min-width: 0;
	padding: 10px 12px;
	background: linear-gradient(180deg, #fffaf0 0%, #fff4d8 100%);
	border: 1px solid #e2d0a0;
	border-radius: 12px;
}

#adminTools .ul-official-neomail-summary {
	cursor: pointer;
	color: #5b4100;
	font-weight: bold;
	overflow-wrap: anywhere;
}

#adminTools .ul-official-neomail-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
	min-width: 0;
}

#adminTools .ul-official-neomail-card {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	background-color: rgba(255, 255, 255, 0.78);
	border: 1px solid #eadfc0;
	border-radius: 10px;
}

#adminTools .ul-official-neomail-card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
}

#adminTools .ul-official-neomail-card-header::-webkit-details-marker {
	display: none;
}

#adminTools .ul-official-neomail-card-content {
	margin-top: 10px;
}

#adminTools .ul-official-neomail-subject {
	color: #4b2d00;
	flex: 1 1 220px;
	min-width: 0;
	overflow-wrap: anywhere;
}

#adminTools .ul-official-neomail-date {
	color: #786644;
	font-size: 0.9em;
	flex: 0 1 auto;
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

#adminTools .ul-official-neomail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

#adminTools .ul-official-neomail-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: bold;
}

#adminTools .ul-official-neomail-chip.is-read {
	background-color: #dff7dd;
	color: #1b6b28;
}

#adminTools .ul-official-neomail-chip.is-unread {
	background-color: #fff2b8;
	color: #8a5a00;
}

#adminTools .ul-official-neomail-chip.is-deleted {
	background-color: #ffd7d7;
	color: #8b1f1f;
}

#adminTools .ul-official-neomail-body {
	min-width: 0;
	margin-top: 8px;
	padding: 10px 12px;
	background-color: rgba(255, 252, 243, 0.95);
	border-radius: 8px;
	line-height: 1.45;
	overflow-wrap: anywhere;
	word-break: break-word;
}

#adminTools .ul-official-neomail-empty {
	margin: 0;
	color: #6d5a2f;
}

#petRelease {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 2fr 1fr;
	align-items: center;
}

#petRelease>div {
	display: flex;
	padding: 4px;
	justify-content: center;
}

#petRelease>div:nth-child(8n+1),
#petRelease>div:nth-child(8n+2),
#petRelease>div:nth-child(8n+3),
#petRelease>div:nth-child(8n+4) {
	background-color: var(--grid_odd);
}

#idvalidator {
	font-weight: bold;
	color: darkred;
}

.at_itemview b {
	font-size: large;
}

.at_itemview img {
	min-height: 80px;
}

.at_menu a {
	white-space: nowrap;
}

.at_header {
	color: darkred;
	text-align: center;
	font-weight: bold;
}

.at_section {
	display: flex;
	flex-direction: column;
}

.admin-menu {
	width: 300px;
	gap: 0.25em;
}

.at_section b {
	margin-bottom: 10px;
}

.at_section.center input[type="button"] {
	margin: 5px auto;
}

/*.at_section input, .at_section select {
    width: 300px;
    margin-bottom: 10px;
}

.at_section input[type=date] {
    width: 105px;
}*/

.at_section_head {
	color: purple;
	font-size: large;
	font-weight: bold;
	margin-bottom: 10px;
}

.at_danger {
	color: darkred;
}

.at_randomevents {
	display: flex;
	gap: 7.5px;
}

.at_randomevents input {
	width: 95px;
}

/*.at_section ul, .at_section ol {
    margin-top: 0;
}*/

.at_newpet {
	width: 150px;
}

.at_newpet img {
	width: 150px;
	height: 150px;
}

/* CAVE PAINTINGS */

.cp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-gap: 5px;
}

.cp-grid img {
	width: 100px;
	margin: 10px;
	border: 1px solid var(--color);
}

/* Tyrannia Town Hall */

.townhall-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 1em;
	justify-items: center;
	margin: 1em auto;
	max-width: 100%;
}

.townhall-item {
	text-align: center;
}

.townhall-item img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	object-fit: contain;
	max-width: 150px;
	max-height: 150px;
}

.townhall-item p {
	margin: 0;
}

/* TYRANU EVAVU */

.te-cards>img {
	width: 70px;
	height: 90px;
	border-radius: 5px;
}

.te-buttons>form>input[type="image"] {
	margin: auto;
}

.te-prizes {
	width: 350px;
	margin: auto;
	border: 1px solid #444;
}

.te-prizes>div {
	width: 50%;
}

.te-prizes>div>div {
	padding: 3px;
	border: 1px solid #444;
}

.te-peach-bg {
	background-color: #ffcc88;
}

/* GAMES */

/*Feature Game Stuff */

/* Featured Game Grid */
#featured-game-grid {
	display: grid;
	grid-template-areas:
		"fg-top fg-top fg-top"
		"fg-left featured-game fg-right"
		"fg-bottom fg-bottom fg-bottom";
	/* Columns are set based on the original widths:
     left: 33px, center: 100px, right: 67px → total 200px */
	grid-template-columns: 16.5% 50% 33.5%;
	grid-template-rows: 8.5% 50% 41.5%;
	width: 200px;
	height: 200px;
	max-width: 100%;
	max-height: 100%;
}

/* Assign grid areas */
#fg-top {
	grid-area: fg-top;
	height: 100%
}

#fg-left {
	grid-area: fg-left;
	height: 100%
}

#featured-game-img {
	grid-area: featured-game;
	height: 100%
}

#fg-right {
	grid-area: fg-right;
	height: 100%
}

#fg-bottom {
	grid-area: fg-bottom;
	height: 100%
}

/* Ensure all images fill their grid cells proportionally */
#featured-game-grid img {
	width: 100%;
	height: 100%;
}


#fullscreen-button {
	border-radius: 5px;
	width: 33%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	padding: .5em;
}

#game-container {
	text-align: center;
	justify-items: center;
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: 1em;
	position: relative;
}


.games-info>div {
	padding: 4px;
}


#tys-container {
	width: 90%;
	/* Takes up 90% of the parent's width */
	max-width: 400px;
	/* Maximum width of the container */
	margin: 0 auto;
	/* Centers the container horizontally */
	position: relative;
}

#tys-container::before {
	content: "";
	display: block;
	padding-top: 100%;
	/* Maintains a 1:1 aspect ratio */
}

#tys-container>canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

#daily-container {
	width: 90%;
	/* Takes up 90% of the parent's width */
	max-width: 500px;
	/* Maximum width of the container */
	margin: 0 auto;
	/* Centers the container horizontally */
	position: relative;
}

#daily-container::before {
	content: "";
	display: block;
	padding-top: 100%;
	/* Maintains a 1:1 aspect ratio */
}

#daily-container.neopia-map::before {
	padding-top: 80%;
}

#daily-container>canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}


/* DICE-A-ROO */

#dice-a-roo {
	width: 420px;
	margin: 1em auto;
	border: 1px solid #444;
}

#dice-a-roo>div {
	padding: 4px;
	border: 1px solid #444;
}

.dar_buttons {
	gap: 1em;
	margin: auto;
	align-items: center;
}

.dar_buttons>form {
	width: 100%;
}

.dar_buttons>form>input {
	min-width: 33%;
}

.dar_buttons>input {
	min-width: 33%;
}

#passingblum {
	width: 420px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.blum-right {
	text-align: left;
}

/* Cheat */
#cheat-cast {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-flow: row nowrap;
}

.cheat-player {
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    align-items: center;
}

#cheat-cards {
    display: flex;
    flex-flow: row wrap;
    gap: 10px 0;
    justify-content: center;
}

.cheat-card {
    display: inline-flex;
    flex-flow: column nowrap;
    width: 80px;
    align-items: center;
}

.cheat-card img {
    border-radius: 4px;
}

.hide {
    visibility: hidden;
}
#caught {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 20px;
}

/* SAKHMET SOLITAIRE */
:root {
	/* Card Dimensions */
	--card-width: 70px;
	--card-height: 90px;

	/* Spacing Between Cards */
	--stack-gap: 32px;

	/* Board Dimensions */
	--board-max-width: 600px;
	/* Adjust as needed */
	--board-width: 100%;
	--board-height: auto;

	/* Counts Section */
	--counts-border-color: var(--color, #000);
}

.btn-link {
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
	color: var(--link_color);
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: bold;
}

/* Counts Section */
.ss_counts {
	max-width: var(--board-max-width);
	width: var(--board-width);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--counts-border-color);
	margin: 0 auto;
	/* Center the counts section */
}

.ss_counts>b,
.ss_counts>span {
	padding: 2px 0;
	border-right: 1px solid var(--counts-border-color);
	text-align: center;
}

.ss_counts>b {
	border-bottom: 1px solid var(--counts-border-color);
}

#ss-counts-lower{
    display: none; /* if you show this also adjust #ss_board to have border-bottom: 0 */
}

.no-right-border {
	border-right: 0 !important;
}

/* Game Board Section */
#ss_board {
	padding-top: var(--stack-gap);
	max-width: var(--board-max-width);
	width: var(--board-width);
	height: auto;
	/* Allow height to adjust based on content */
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	/* Flexible columns */
	gap: var(--grid-gap);
	justify-content: center;
	align-content: start;
	border: 1px solid var(--counts-border-color);
	border-top: 0;
	background: url('https://grundoscafe.b-cdn.net/games/php_games/sakhmetsolitaire/sakhmet_solitaire_bg.png') no-repeat center center;
	background-size: cover;
	margin: 0 auto;
	/* Center the game board */
}


#ss_board img {
	width: 100%;
	height: auto;
	max-width: var(--card-width);
	max-height: var(--card-height);
	border-radius: 3px;
	margin: auto;
	display: block;
	aspect-ratio: 70/90;
	cursor: pointer;
}

#ss_board img.selectedCard {
  -webkit-filter: url(#yellowWhite); /* For Safari */
  filter: url(#yellowWhite);
}


/* Cards Positioning */
div.cards {
	position: relative;
	width: var(--card-width);
	height: calc(var(--card-height) * 8);
	margin: 20px auto;
	/* Center the stack within the grid cell */
}

div.cards img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: auto;
	max-width: var(--card-width);
	max-height: var(--card-height);
}

/* Stack the cards upwards using nth-child */
div.cards img:nth-child(1) {
	top: 0px;
	z-index: 1;
}

div.cards img:nth-child(2) {
	top: calc(var(--stack-gap) * 1);
	z-index: 2;
}

div.cards img:nth-child(3) {
	top: calc(var(--stack-gap) * 2);
	z-index: 3;
}

div.cards img:nth-child(4) {
	top: calc(var(--stack-gap) * 3);
	z-index: 4;
}

div.cards img:nth-child(5) {
	top: calc(var(--stack-gap) * 4);
	z-index: 5;
}

div.cards img:nth-child(6) {
	top: calc(var(--stack-gap) * 5);
	z-index: 6;
}

div.cards img:nth-child(7) {
	top: calc(var(--stack-gap) * 6);
	z-index: 7;
}

div.cards img:nth-child(8) {
	top: calc(var(--stack-gap) * 7);
	z-index: 8;
}

div.cards img:nth-child(9) {
	top: calc(var(--stack-gap) * 8);
	z-index: 9;
}

div.cards img:nth-child(10) {
	top: calc(var(--stack-gap) * 9);
	z-index: 10;
}

div.cards img:nth-child(11) {
	top: calc(var(--stack-gap) * 10);
	z-index: 11;
}

div.cards img:nth-child(12) {
	top: calc(var(--stack-gap) * 11);
	z-index: 12;
}

div.cards img:nth-child(13) {
	top: calc(var(--stack-gap) * 12);
	z-index: 13;
}

div.cards img:nth-child(14) {
	top: calc(var(--stack-gap) * 13);
	z-index: 14;
}

div.cards img:nth-child(15) {
	top: calc(var(--stack-gap) * 14);
	z-index: 15;
}

div.cards img:nth-child(16) {
	top: calc(var(--stack-gap) * 15);
	z-index: 16;
}

div.cards img:nth-child(17) {
	top: calc(var(--stack-gap) * 16);
	z-index: 17;
}

div.cards img:nth-child(18) {
	top: calc(var(--stack-gap) * 17);
	z-index: 18;
}

div.cards img:nth-child(19) {
	top: calc(var(--stack-gap) * 18);
	z-index: 19;
}

div.cards img:nth-child(20) {
	top: calc(var(--stack-gap) * 19);
	z-index: 20;
}

/* Scaling .ss_lastround */
.ss_lastround {
	background-color: var(--ss_lastround-bg-color) !important;
	font-weight: var(--ss_lastround-font-weight) !important;
	color: #fff;
	/* Ensure text is readable */
	border-radius: 4px;
	/* Optional: Rounded corners */
	padding: 2px 4px;
	/* Optional: Padding for better appearance */
	display: inline-block;
	/* Optional: Fit content */
}

/* Deck and Dead Cards Styling */
.deckcards {
	border: 1px solid #ffffff;
	padding: 2px;
	border-radius: 4px;
	/* Optional: Rounded corners */
}

.deadcards {
	border: 1px solid #de9c2b;
	padding: 2px;
	border-radius: 4px;
	/* Optional: Rounded corners */
}

#oops {
	background-color: var(--grid_select);
	padding: 4px 4px 8px;
	display: none;
}

#message {
	visibility: inherit;
}

#endgame {
	background-color: var(--grid_select);
	padding: 4px 4px 8px;
}

/* PYRAMIDS */

.pyramids_counts {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 25%);
	border: 1px solid var(--color)
}

.pyramids_counts>b,
.pyramids_counts>span {
	padding: 2px 0;
	border-right: 1px solid var(--color)
}

#pyramids_counts_upper>b {
	border-bottom: 1px solid var(--color)
}

#pyramids_counts_lower>b {
	border-top: 1px solid var(--color)
}

#pyramids_counts_lower {
	display: none;
}

#pyramids-lower-collect-form {
	display: none;
}

#pyramids_board {
	padding-top: 18px;
	height: 598px;
	width: 100%;
	border: 1px solid var(--color);
	border-top: 0;
	background: darkgreen;
	background-size: cover
}

#pyramids_board .row_deck {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}

#pyramids_board .rows>div {
	display: flex;
	justify-content: center;
	gap: 2px;
}

#pyramids_board img {
	width: 50px;
	height: 64px;
	margin: 1px;
	border: 1px solid;
}

#pyramids_board img.face_up {
	border-radius: 5px;
}

.clickable {
	cursor: pointer;
}

/* Negg Sweeper */

#neggsweeper_grid {
	display: grid;
	grid-template-columns: repeat(var(--negg-cols), 40px);
	grid-template-rows: repeat(var(--negg-rows), 40px);
	background-color: white;
	align-items: center;
	justify-items: center;
	margin: auto;
	width: calc(40px * var(--negg-cols));
}

/* Only applies when the game is active */
#neggsweeper_grid.game-alive img:hover {
	cursor: pointer;
	filter: sepia(1);
}

/* Only applies when flag mode is enabled */
#neggsweeper_grid.flag_mode img:hover {
	content: url("https://grundoscafe.b-cdn.net/games/php_games/neggsweeper/flagnegg.gif");
}

#neggsweeper_grid.flag_mode .negg {
	border: 2px dotted red;
}

#neggsweeper_status {
	display: grid;
	grid-template-columns: 40% 20% 40%;
	grid-template-rows: 1.5em 2em;
	align-items: center;
	text-align: center;
	margin: auto;
	width: calc(40px * var(--negg-cols));
	font-weight: bold;
}

#neggsweeper_status .bg-gold {
	height: 1.5em;
	line-height: 1.5em;
	font-size:
}

.revealed {
	height: 30px;
	width: 30px;
	line-height: 30px;
	font-size: 24px;
	text-align: center;
}

.revealed.num_0 {
	color: white;
}

.revealed.num_1 {
	color: green;
}

.revealed.num_2 {
	color: blue;
}

.revealed.num_3 {
	color: dodgerblue;
}

.revealed.num_4 {
	color: orangered;
}

.revealed.num_5 {
	color: red;
}

.revealed.num_6 {
	color: deeppink;
}

.revealed.num_7 {
	color: purple;
}

.revealed.num_9 {
	color: firebrick;
}

.neggsweeper-checkbox {
	-ms-transform: scale(1.5);
	/* IE */
	-moz-transform: scale(1.5);
	/* FF */
	-webkit-transform: scale(1.5);
	/* Safari and Chrome */
	-o-transform: scale(1.5);
	/* Opera */
	transform: scale(1.5);
	padding: 5px;
}

.bonus_negg {
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: center;
}


/* CLIFFHANGER */

.ch_puzzle {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: 0.25em;
	justify-content: center;
	align-items: center;
}

.ch_word {
	flex-wrap: wrap;
	display: flex;
	gap: 0.25em;
	justify-content: center;
}

#cliffhanger_table {
	width: 550px;
	display: grid;
	grid-template-columns: 70% 1fr;
	grid-auto-rows: min-content minmax(100px, 1fr);
	overflow-wrap: break-word;
	align-items: stretch;
	margin: 1em auto;
	border: 1px solid black;
}

#cliffhanger_table>div {
	justify-content: center;
	border: 1px solid black;
	display: flex;
	padding: 4px;
}

.ch_span {
	grid-column: span 2;
}

.ch_header {
	color: white;
	background-color: steelblue;
}

.ch-bg-blue {
	background-color: #bee5f4;
}

.ch-bg-cream {
	background-color: #fff5e6;
}

/* KACHEEK SEEK */

#kacheek_seek {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	text-align: center;
	justify-content: center;
	margin: 2em auto 0;
}

#kacheek_seek div {
	width: 120px;
}

/* MISC STYLES */

/* Item Search Page */

.item-search-container {
	display: flex;
	flex-wrap: wrap;
}

.item-search-column {
	flex: 1;
	/* Each column takes up an equal amount of space */
	min-width: calc(33.33% - 20px);
	/* Subtracting some gap */
	box-sizing: border-box;
	padding: 10px;
	/* Give each column some space */
	margin: auto;
}

.item-search-column div {
	margin: auto;
}

#searchItem {
	font-size: 10px;
}

#searchTable {
	text-align: center;
}

.content {
	max-width: 595px;
}

#map {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#world-map {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.shopbar {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 550px;
	height: 85px;
}

#shopToolBar {
	width: 550px;
	height: 85px;
}

.neopia-map {
	margin-top: 20px;
}

.nbtable tr:nth-child(odd) td {
	background-color: #f1f3f0;
}

.nbtable tr:nth-child(even) td {
	background-color: #ffffff;
}

/* FEA job stuff */

.fea_job_image {
	height: auto;
	border: 2px solid var(--color);
	padding: 3px;
	text-align: center;
}

.fea-item-image {
	background-color: white;
	border-radius: 3px;
}

.job_tier_0 {
	background-color: #000000;
}

.job_tier_1 {
	background-color: #a2fea0;
	color: #518050;
}

.job_tier_2 {
	background-color: #a5cffa;
	color: #435566;
}

.job_tier_3 {
	background-color: #cc0000;
	color: #ffaeae;
}

.job_tier_4 {
	background-color: #d7d7d7;
	color: #666666;
}

.job_tier_5 {
	background-color: #fbe449;
	color: #645b1d;
}

.job_tier_6 {
	background-color: #ad8cff;
	color: #ffaeae;
}

.job_tier_7 {
	background-color: #ffceff;
	color: #801d80;
}

.job_tier_8 {
	background-color: #1c9945;
	color: #1c9945;
}

.job_tier_9 {
	background-color: #b37f17;
	color: #b37f17;
}

.job_tier_10 {
	background-color: #999999;
	color: #999999;
}

.job_tier_11 {
	background-color: #998b2c;
	color: #998b2c;
}

.job_tier_8_text {
	background-color: #ebe2c2;
	color: #1c9945;
}

.job_tier_9_text {
	background-color: #ebe2c2;
	color: #b37f17;
}

.job_tier_10_text {
	background-color: #ebe2c2;
	color: #999999;
}

.job_tier_11_text {
	background-color: #ebe2c2;
	color: #998b2c;
}

.fea_collect {
	width: 40%;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	vertical-align: center;
}

.fea_apply {
	width: 40%;
	border: 2px solid black;
	text-align: center;
}

.fea_thejob {
	border-bottom: 2px solid black;
	border-right: 2px solid black;
}

.fea_collect .searchhelp {
	float: right;
	margin-right: 10px;
}

.fea_collect .searchhelp a {
	margin: 0 3px;
}

.searchhelp {
	width: 110px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2%;
}

.searchhelp img {
	width: 20px;
}

/* QUESTS */

#quest_grid {
	width: 80%;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: stretch;
	margin: auto;
	border: 1px solid #444;
}

#quest_grid>div {
	display: flex;
	align-items: center;
	padding: 5px;
	border: 1px solid #444;
}

.quest-item {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	align-items: center;
	margin: auto;
}

.quest-text {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: auto;
}

#taelia_grid {
	display: grid;
	align-items: stretch;
	justify-content: center;
	grid-template-columns: 28% 1fr;
	grid-template-areas: "deadline countdown""needed ingredients""input input";
	margin: auto;
	border: 1px solid #444;
}

#taelia_grid>div {
	padding: 5px;
	border: 1px solid #444;
}

.taelia_deadline {
	grid-area: deadline;
	background-color: #ddddff;
}

.taelia_countdown {
	grid-area: countdown;
	background-color: #eeeeff;
}

.taelia_label {
	grid-area: needed;
	background-color: #ddddff;
	display: flex;
	align-items: center;
}

.taelia_ingredients {
	grid-area: ingredients;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.taelia_input {
	grid-area: input;
	background-color: #ccccff;
}


/* KAD QUEST */

#kadquest_grid {
	display: grid;
	align-items: stretch;
	justify-content: center;
	grid-template-columns: 28% 1fr;
	grid-template-areas: "deadline countdown""needed ingredients""input input";
	margin: auto;
	border: 1px solid #444;
}

#kadquest_grid>div {
	padding: 5px;
	border: 1px solid #444;
}

.kadquest_deadline {
	grid-area: deadline;
	background-color: #fadadd;
}

.kadquest_countdown {
	grid-area: countdown;
	background-color: #fff4f2;
}

.kadquest_label {
	grid-area: needed;
	background-color: #fadadd;
	display: flex;
	align-items: center;
}

.kadquest_ingredients {
	grid-area: ingredients;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.kadquest_input {
	grid-area: input;
	background-color: #ccccff;
}

/* NEOLODGE */

.lodge_select {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 5px;
	margin: auto;
	width: min-content;
	text-align: left;
}

.lodge_extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75em;
  padding: .5em;
  margin: auto;
  width: 100%;
  text-align: left;
}

.lodge_extras label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

/* RANDOM EVENTS & FAERIE QUESTS */

.faerie_quest {
	background-color: white;
	width: 404px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 auto;
	padding: 7px;
}

.faerie_quest>div {
	padding: 1px;
}

.bd_challenger {
	background-color: white;
	width: 400px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 auto;
	padding: 7px;
}

.bd_challenger>div {
	padding: 1px;
}

.bd-hp-bar {
	height: 20px;
}

.bd-platform {
	height: 30px;
}

bg-challenger-image {
	width: 100px;
}

.re {
	background-color: white;
	width: 406px;
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-areas: "shh shh""re-image re-text";
	align-items: center;
	gap: 5px;
	margin: 0 auto;
	padding: 7px;
}


.re>div {
	padding: 1px;
}

.shh {
	grid-area: shh;
}

.re_winter {
	background-color: #ccccff;
}

.re_aisha {
	background-color: #048b8b;
	color: white;
	text-shadow:
		-1px -1px 0 black,
		1px -1px 0 black,
		-1px 1px 0 black,
		1px 1px 0 black;
}

.re_prehistoric {
	background-color: #be793f;
}

.re_spooky {
	background-color: #334f8f;
	color: white;
}

.re_space {
	background-color: #c0c0c0;
}

.re_lunar {
	background-color: #982000;
	color: #ffe8d0;
}

.re_vday {
	background-color: #ec9ec0;
	color: white;
}

.re_site_theme_unlock {
	background-color: #ffc0cb;
}

.re_pirate {
	background-color: #000;
	color: #e6e1dd;
}

.re_darigan{
    background-color: #4A2563;
    color: red;
}

.re_shh {
	background-color: #ffffcc;
}

.re_pride {
	color: white;
	text-shadow: 2px 2px 6px rgba(0, 0, 0);
	background-image: linear-gradient(to right,
			rgba(0, 0, 0, 0.7),
			rgba(54, 35, 18, 0.7),
			rgba(120, 79, 23, 0.7),
			rgba(181, 63, 27, 0.7),
			rgba(237, 34, 36, 0.7),
			rgba(243, 91, 34, 0.7),
			rgba(249, 150, 33, 0.7),
			rgba(245, 193, 30, 0.7),
			rgba(241, 235, 27, 0.7) 48%,
			rgba(241, 235, 27, 0.7) 52%,
			rgba(99, 199, 32, 0.7),
			rgba(12, 155, 73, 0.7),
			rgba(33, 135, 141, 0.7),
			rgba(57, 84, 165, 0.7),
			rgba(97, 55, 155, 0.7),
			rgba(147, 40, 142, 0.7));
}

.re_image {
	grid-area: re-image;
	height: 82px;
}

.re_text {
	grid-area: re-text;
	text-align: left;
}

.random_event_image {
	border: 1px solid var(--color);
	width: 80px;
	background-color: #fff;
}

.ninja_phrase_header {
	background-color: rgb(168, 205, 242);
	padding: .25em !important;
	font-size: 1.25em;
}

.av {
	background-color: white;
	width: 406px;
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-areas: "av-shh av-shh""av-image av-text";
	align-items: center;
	gap: 2px;
	margin: 0 auto;
	padding: 7px;
}

.av>div {
	padding: 1px;
}

.av_shh {
	grid-area: av-shh;
	background-color: #ffffcc;
}

.av_image {
	grid-area: av-image;
	height: 50px;
}

.av_text {
	grid-area: av-text;
	text-align: left;
}

/* NEGGERY */

.negg_table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, 1fr);
	grid-auto-flow: column;
	justify-content: stretch;
	width: fit-content;
	margin: auto;
	border: 1px solid black;
}

.negg_table>div {
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	/* Ensure items stretch to fill the cell vertically */
	padding: 4px;
}

.negg_left,
.negg_right {
	border-top: 1px solid black;
}

.negg_left {
	border-right: 1px solid black;
}

.negg_top {
	grid-column: span 2;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
}

/* Avatar Stats */

.avatar_container {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    width: 100%; /* Ensures it scales properly */
}

.avatar_container div:not(.gray-box) {
    width: 95%;
    margin: auto;
    display: grid;
    place-items: center;
    align-content: center;
    grid-template-columns: 9% 9% 32% 14% 16% 16%;
    text-align: center;
}

.gray-box {
  height: 50px;
  width: 50px;
  background-color: gray; /* Set the background color to gray */
  text-align: center; /* Center text horizontally */
  line-height: 50px; /* Center text vertically */
  border-radius: 5px;
  position: relative;
}

.center-question {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
}
/* NEOBOARDS */

.nb_warning {
	width: 67%;
	border: 1px solid;
	padding: 0.5em;
}

.nb_pen_selection {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;

    padding: 0.5rem;           /* smaller padding inside the border */
    margin: 0.5rem auto;       /* optional: vertical spacing from other elements, centered horizontally */

    border: 1px solid var(--color);
    background-color: #fff;    /* adjust for dark mode if needed */
}

.nb_pen_instruction {
    flex: 1 1 100%;           /* full width */
    text-align: center;
    margin-bottom: 0.5rem;    /* spacing between instruction and items */
}

.nb_pen_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 80px;
    cursor: pointer;
}

.nb_pen_item img {
    max-width: 100%;
    height: auto;
}

.nb_pen_label {
    margin-top: 0.25rem;
    text-align: center;
    font-size: 0.9rem;
}

.nb_pen_item.selected-pen {
    outline: 2px solid black;
    border-radius: 4px;
}

.nb-edit-textarea {
	height: 100px;
	width: 100%;
	box-sizing: border-box;
}

.boardlist_table {
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 1fr min-content 1fr min-content;
	align-items: stretch;
	font-size: 0.857rem;
}

.boardlist_table a {
	font-weight: normal;
}

.boardlist_table > div:not(.bl_post.align-left) {
	display: flex;
	align-items: center;
	padding: 4px;
}

.bl_post.align-left{
    display: grid;
    align-items: center;
	padding: 4px;
}

.bl_nav {
	display: flex;
	justify-content: space-between;
	padding: 4px;
}

.bl_pages {
	width: 80%;
	display: inline-flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.25em;
}

.bl_col_header {
	background-color: #ffcc00;
	justify-content: center;
	border: solid var(--color);
	border-width: 1px 0 1px 1px;
}

.bl_post {
	border: solid var(--color);
	border-width: 0 0 1px 1px;
}

.bl_header_mod,
.bl_mod {
	padding: 0 !important;
	border-left: 1px solid var(--color);
	;
}

.bl_post:nth-child(10n + 1),
.bl_post:nth-child(10n + 2),
.bl_post:nth-child(10n + 3),
.bl_post:nth-child(10n + 4) {
	background-color: #f1f3f0;
}

.locked-topic {
    background-color: #e0f0ff !important;
}

.neoboards_forum {
	width: 100%;
	display: grid;
	grid-template-columns: min-content 1fr;
	align-items: stretch;
	border: 1px solid var(--color);
}

.neoboards_forum>div {
	padding: 4px;
}

.emoticon {
	vertical-align: middle;
	width: 15px;
}

.emoticon-button {
	vertical-align: middle;
	width: 21px;
}

.darkyellow-header {
	background-color: #ffcc00;
}

.forum_header {
	background-color: #ffcc00;
	grid-column: span 2;
	text-align: center;
}

.forum_icon,
.forum_desc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 1px solid var(--color);
	padding: .5em;
}

.forum_icon,
.forum_desc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 1px solid var(--color);
}

#discord-box {
	width: 45%;
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 1em auto;
	padding: 0.5em;
	border: 1px solid var(--color);
}

.discord_icon {
	height: 50px;
	object-fit: cover;
	object-position: 75% 0;
}

.topic_pages {
	width: 80%;
	display: inline-flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.topic_nav {
	display: flex;
	justify-content: space-between;
	font-size: 0.857rem;
	padding: 4px;
	width: 100%;
}

.topic_nav>div {
	display: flex;
	gap: 0.25em;
}

.topic_table {
	width: 100%;
	display: grid;
	grid-template-columns: 23.5% 76.5%;
	grid-auto-rows: min-content 1.9em min-content;
	align-items: stretch;
	overflow-wrap: break-word;
	font-size: 0.857rem;
	border: solid var(--color);
	;
	border-width: 1px 1px 0 1px;
}

.topic_table>div {
	padding: 4px;
}

.topic_col_header {
	background-color: #ffcc00;
	text-align: center;
	border-bottom: 1px solid var(--color);
}

.poster_icon {
	vertical-align: -4%;
}

.poster_name {
	word-break: break-all;
}

.poster_info {
	background-color: #f6f6f6;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	grid-row: span 2;
	border-right: 1px solid var(--color);
	gap: 0.25em;
}

.post_timestamp {
	background-color: #f6f6f6;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--color);
	font-size: 0.714rem;
	align-items: center;
}

.post_after {
	background-color: #ffcc00;
	grid-column: span 2;
	height: 1em;
	border: solid var(--color);
	border-width: 1px 0;
}

.post_content img {
	vertical-align: text-top;
}

.staff_post {
	background-color: #f2e4fd;
}

.mention {
	background-color: lightgray;
	font-weight: bold;
	border-radius: 3px;
	padding: 2px 4px;
}

.contenteditable-div {
	border: 1px solid var(--color);
	padding: 10px;
	min-height: 200px;
	overflow-y: auto;
}

.topic-reply-link {
	float: right;
}

.topic_reply {
	width: 100%;
	display: grid;
	grid-template-columns: min-content 1fr;
	font-size: 0.857rem;
	border: 1px solid var(--color);
	;
}

.topic_reply>div {
	padding: 4px;
}

.reply_header {
	background-color: #ffcc00;
	grid-column: span 2;
	text-align: center;
	border-bottom: 1px solid var(--color);
}

.reply_right>textarea {
	height: 100%;
}

.reply_submit {
	grid-column: span 2;
	text-align: center;
}

.reply_submit>input {
	width: 33%;
}

.nb-smileys {
	width: 72px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.nb-smileys a {
	width: 30%;
	padding: 1px;
	text-align: center;
	vertical-align: center;
}

.nb-smileys img {
	vertical-align: middle;
}

.chat_prefs {
	width: 100%;
	font-size: 0.857rem;
	border: 1px solid var(--color);
}

.chat_prefs>div {
	padding: 4px;
}

.chat_prefs_header {
	background-color: #ffcc00;
	text-align: center;
	border-bottom: 1px solid var(--color);
}

.chat_prefs_content.flex {
	justify-content: space-evenly;
}

.chat_prefs_content.flex>div {
	min-width: 140px;
	align-items: center;
}

.neohtml-input {
	width: 98.6%;
}

.create_topic {
	width: 100%;
	display: grid;
	grid-template-columns: max-content 1fr;
}

.create_topic>div {
	padding: 5px;
}

.create_topic_left {
	text-align: right;
}

.create_topic_right {
	display: flex;
	flex-direction: column;
}

.create_message {
	display: flex;
	gap: 8px;
}

.create_message_text {
	flex-grow: 1;
}

.create_message_text>textarea {
	height: 100%;
}

.create_submit {
	grid-column: span 2;
	text-align: center;
}

.create_submit>input {
	width: 54%;
}

/* SHOP WIZARD */

#shop_wizard_search {
	width: 75%;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	grid-template-rows: repeat(6, min-content);
	grid-auto-flow: column;
	justify-content: stretch;
	margin: auto;
}

#shop_wizard_search.genie {
	grid-template-rows: repeat(3, min-content);
}

#shop_wizard_search.wish {
	grid-template-rows: repeat(4, min-content);
}

#shop_wizard_search>div {
	display: flex;
	flex-direction: column;
	padding: 4px;
	justify-content: center;
}

.sw_search_left {
	text-align: right;
}

.sw_search_right {
	text-align: right;
}

.sw-price-input {
	width: 5rem;
}

.sw_search_right>[type="checkbox"] {
	margin-right: auto;
}

.sw_search_submit {
	grid-column: span 2;
	align-items: center;
}

.sw_search_submit>input {
	width: 50%;
}

@media screen and (max-device-width: 992px) {
	#shop_wizard_search {
		grid-template-columns: 1fr;
	}

	.sw_search_left,
	.sw_search_right {
		text-align: left;
	}

	.sw_search_submit {
		grid-column: span 2;
	}

	.sw-price-input {
        width: 5rem;
	}
}

/* MONEY TREE + SHOP TILL + BANK? */

.np_form {
	width: max-content;
	display: grid;
	grid-template-columns: max-content 1fr;
	margin: auto;
}

.np_form>div {
	display: flex;
	padding: 4px;
	align-items: center;
}

.np_form [type="text"]:not(.well),
.np_form [type="number"]:not(.well) {
	width: 7em;
}

.well [type="text"],
.well [type="number"] {
	width: 15em;
}

.np_form>.bg-footer {
	grid-column: span 2;
}

/* SIGNUP FORM */

#rcorners {
	margin: auto;
	width: 500px;
	border-radius: 25px;
	border: 2px solid #000000;
	background: #faf373;
	padding: 20px;
}

#signup_form {
	width: 500px;
	display: grid;
	grid-template-columns: 1fr 300px;
	align-items: stretch;
}

#signup_form>div {
	display: flex;
	padding: 4px;
}

.signup_right {
	flex-direction: column;
	gap: 8px;
}

.signup_left {
	text-align: right;
	justify-content: right;
}

.errorlist,
.errorlist>li {
	margin: 0;
}

.signup_submit>button {
	width: 33%;
	margin: auto;
}

/* ABOUT US */

#about-us-admin-header {
	color: #a84420;
	font-weight: bold;
	font-size: 1.286rem;
}

#about-us-mod-header {
	color: #4b8583;
    font-weight: bold;
	font-size: 1.286rem;
}

#about-us-art-team-header {
	color: #6cc417;
    font-weight: bold;
	font-size: 1.286rem;
}

#about-us-dev-team-header {
	color: #a867ff;
    font-weight: bold;
	font-size: 1.286rem;
}

#about-us-trial-mod-team-header {
	color: #4b8583;
    font-weight: bold;
	font-size: 1.286rem;
}

#about-us-creative-team-header {
	color: #742C14;
    font-weight: bold;
	font-size: 1.286rem;
}

#about-us-puzzle-team-header {
	color: #4c4691;
    font-weight: bold;
	font-size: 1.286rem;
}

#team h2 {
	margin: 14px auto;
	padding: 0;
}

.team-border {
	border: solid var(--color);
	border-width: 1px 0;
	padding: 1em 0;
}

.teamCenter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(113px, 1fr));
	overflow-wrap: break-word;
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: start;
	gap: 3px;
	margin: auto;
	grid-auto-flow: dense;
}

.team-item {
	display: flex;
	flex-direction: column;
	width: 105px;
	padding: 4px;
	gap: 0.25em;
}

.team-item .med-image {
	margin: auto;
}

.teamBio {
	gap: 1em;
	align-items: center;
}

.teamBio_text {
	flex-grow: 1;
}

.credit-border {
	border-top: 1px solid var(--color);
	;
	border-bottom: none;
	padding: 1em 0;
}

.credit-border-last {
	border-top: 1px solid var(--color);
	;
	border-bottom: 1px solid var(--color);
	;
	padding: 1em 0;
}


.pc-container {
	display: flex;
	align-items: center;
}

.pc_left {}

.pc-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
}

.pc-image-block {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;
	padding: 4px;
	margin: 1em;
	flex-grow: 1;
}

.pc-image {
	display: flex;
	flex-direction: column;
	width: calc(50% - 10px);
	/* Adjust width to ensure two items per row, minus the gap */
	box-sizing: border-box;
	align-items: center;
}

.pc-right>strong {
	margin-bottom: 10px;
	text-align: center;
}

.pc-image-text {
	text-align: center;
	margin-top: 10px;
}

.pc-right>strong {
	margin-bottom: 10px;
	text-align: center;
}

/* Gallery of Evil */
.evil-grid-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}


/* EDIT PET DESC + HOMEPAGE */

.edit_desc {
	width: 100%;
	justify-content: center;
	align-items: stretch;
	text-align: center;
}

.edit_desc>div {
	justify-content: center;
	display: flex;
	padding: 4px;
}

textarea[name="contentCSS"],
textarea[name="content"] {
	height: 300px;
	width: 100%;
}

/* HTML5 SELECT BOX */

.html5_select {
	width: 38%;
	border: 1px solid #ccc;
	align-items: stretch;
}

.html5_select>div {
	display: flex;
	padding: 0.5em;
	border: 1px solid #ccc;
	align-items: center;
	justify-content: center;
	gap: 1em;
}

/* POUND */

#poundView {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

#poundSearch {
	width: 100%;
	display: grid;
	grid-template-columns: max-content repeat(3, 1fr);
	align-items: stretch;
}

#poundSearch>div {
	display: flex;
	padding: 4px;
	align-items: center;
	justify-content: center;
}

#abandonPet {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
}

#abandonPet>div {
	width: 145px;
	justify-content: center;
}

#outgoingTransfers,
#incomingTransfers {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
}

#outgoingTransfers>div,
#incomingTransfers>div {
	display: flex;
	padding: 4px;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.pet-columns{
  position: relative;
  display: grid;
  gap: 1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
  justify-content: center;
}

#transferPet {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
	align-items: start;
}

#transferPet>div {
	width: 145px;
	justify-content: center;
	text-align: center;
}

/* Freebies */
#freebiesPet {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	align-items: start;
}

#freebiesPet>div {
	width: 145px;
	justify-content: center;
	text-align: center;
}

/* ========= Rainbow-Pool nav ========= */
.rainbow-nav{
  --gap:1.5rem;
  --card-bg:var(--grid_even);
  --card-brd:var(--grid_head);
  font-family:system-ui,sans-serif;
  width: 100%;
}

/* centred 3-column grid */
.rainbow-nav .nav-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));   /* CHANGED */
  gap:var(--gap);
  width:100%;
  margin:0 auto;
  align-items:start;
}

/* card-style column */
.rainbow-nav details.group{
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius:.75rem;
  box-shadow:0 2px 4px rgb(0 0 0 /.05);
  padding:1rem 1.25rem;
  box-sizing:border-box;
}

/* summary as toggle header */
.rainbow-nav summary{
  cursor:pointer;
  font-weight:700;
  font-size:1rem;
  margin:0 0 .5rem;
  letter-spacing:.02em;
  list-style:none;
  gap: .5em;
}
.rainbow-nav summary::-webkit-details-marker{display:none;}

/* list + links */
.rainbow-nav ul{margin:0;padding:0;list-style:none;}
.rainbow-nav li{margin-top:.5rem; rem 0;}
.rainbow-nav a{text-decoration:none;}
.rainbow-nav a:hover{text-decoration:underline;}

/* Rainbow Pool Brushes */

.pool-brushes {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
    justify-content: center;
	align-items: start;
}

#pool-brushes {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
    justify-content: center;
	align-items: start;
}

#pool-brushes>div {
	width: 145px;
    align-self: start; /* aligns this item to the top of its cell */
    overflow-wrap: break-word;
}

/* ADMIN TOOLS TABLES */

.adminTable {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(5, 1fr) min-content;
	overflow-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
}

.adminTable.profanities {
	grid-template-columns: repeat(6, 1fr);
}

.adminTable.resolved {
	grid-template-columns: repeat(5, 1fr);
}

.adminTable.pending {
    grid-template-columns: 1.25fr 1.5fr 1.5fr 1.5fr .4fr .4fr;

}

.adminTable.approved {
    grid-template-columns: 1fr 1fr 1.25fr 1fr .5fr .75fr .4fr;
}

.adminTable.archivedPending {
    grid-template-columns: 1.25fr 1.5fr 1.5fr 1.5fr .4fr;
}

.admin_col_header {
	color: white;
	line-height: 1.6em;
}

.admin_col_header.reports {
	background-color: darkblue;
}

.admin_col_header.profanities {
	background-color: darkred;
}

.admin_col_header.apps {
	background-color: purple;
}

.admin_col_header.first {
	border-top-left-radius: 6px;
}

.admin_col_header.last {
	border-top-right-radius: 6px;
}

.adminTable>div {
	padding: 0.5em;
	 box-sizing: border-box;
     min-width: 0;
     	overflow-wrap: break-word;

}

.sign-up-code {
	word-break: break-all;
}

.admin_data {
	display: flex;
	align-items: center;
	background-color: #ddd;
}

.admin_fullspan {
	background-color: #f6f6f6;
	grid-column: span 6;
}

.admin_data.profanities.bg-alt {
	background-color: #f6f6f6;
}

.admin_fullspan.profanities {
	grid-column: span 5;
}

.admin_fullspan.resolved {
	grid-column: span 5;
}

.admin_fullspan.approved {
	grid-column: span 7;
}

.admin_fullspan.archivedPending {
	grid-column: span 5;
}

.admin_fullspan>p {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

.adminTable_paymentlog {
	border-collapse: collapse;
	border-spacing: 0px;
	font-size: 0.857rem;
	overflow-wrap: break-word;
}

.adminTable_paymentlog ul {
	list-style-type: none;
	padding: 0;
}

.adminTable_paymentlog td {
	padding: 2px 8px;
}

.adminTable_paymentlog tr:first-child {
	background: #dddd77;
}

.adminTable_paymentlog tr:nth-child(2n+3) {
	background: #f2f2f2;
}

/* REPORT CARDS (mod tools – viewreports) */

.rpt-card {
	border: 1px solid rgba(128,128,128,0.35);
	border-radius: 6px;
	overflow: hidden;
	background: var(--bgcolor);
}
.rpt-card--resolved {
	opacity: 0.75;
}
.rpt-card--app .rpt-card__header {
	background-color: purple;
}
.rpt-card--app.rpt-card--resolved .rpt-card__header {
	background-color: #6a006a;
}
.rpt-card__header {
	background-color: darkblue;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.45em 0.75em;
	flex-wrap: wrap;
	gap: 0.25em;
}
.rpt-card__header-left {
	display: flex;
	align-items: stretch;
	gap: 0.5em;
}
.rpt-badge,
.rpt-relabel-pill,
.rpt-spoiler-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 1;
	padding: 0 0.55em;
	min-height: 1.8em;
	border-radius: 3px;
	border: 1px solid rgba(255,255,255,0.4);
}
.rpt-badge {
	background: rgba(255,255,255,0.18);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}
.rpt-badge--resolved {
	background: rgba(255,255,255,0.08);
}
.rpt-spoiler-tag {
	background: rgba(255,220,80,0.18);
	color: #ffd;
	border-color: rgba(255,220,80,0.5);
	gap: 0.3em;
}
.rpt-timestamp {
	white-space: nowrap;
}
.rpt-card__meta {
	padding: 0.6em 0.75em 0.4em;
	border-bottom: 1px solid rgba(128,128,128,0.2);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.5em;
	align-items: baseline;
}
.rpt-parties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.6em;
	align-items: center;
}
.rpt-separator {
	opacity: 0.5;
}
.rpt-place-tag {
	font-size: 0.75em;
	padding: 0.15em 0.55em;
	border-radius: 3px;
	border: 1px solid rgba(128,128,128,0.35);
	opacity: 0.8;
	white-space: nowrap;
	margin-left: auto;
}
.rpt-mail-link {
	margin-left: 4px;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}
.rpt-mail-link img {
	display: block;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	object-fit: contain;
}
.rpt-card__body {
	padding: 0.6em 0.75em;
}
.rpt-message {
	line-height: 1.5;
	font-size: 0.9em;
	max-height: 200px;
	overflow-y: auto;
}
.rpt-card__attachments {
	padding: 0.4em 0.75em 0.6em;
	border-top: 1px solid rgba(128,128,128,0.2);
}
.rpt-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.4em;
}
.rpt-thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.15s, transform 0.15s;
	padding: 0 !important;
}
.rpt-thumb:hover {
	border-color: #7aadff;
	transform: scale(1.08);
}
.rpt-card__actions {
	padding: 0.5em 0.75em;
	border-top: 1px solid rgba(128,128,128,0.2);
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;
}
.rpt-edit-inline {
	border: none;
	background: none;
	color: #666;
	cursor: pointer;
	padding: 0 0.2em;
	font-size: 0.85em;
	vertical-align: middle;
}
.rpt-edit-inline:hover { color: purple; }
.rpt-relabel-pill {
	border-color: rgba(255,255,255,0.6);
	background: rgba(255,255,255,0.15);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	appearance: none;
	padding-block: 0;
}
.rpt-relabel-pill:hover { background: rgba(255,255,255,0.28); }
.rpt-btn-small {
	padding: 0.25em 0.6em;
	font-size: 0.8em;
}
.rpt-action-btns {
	display: flex;
	gap: 0.5em;
	align-items: center;
	flex-wrap: wrap;
	margin-left: auto;
}
.rpt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	box-sizing: border-box;
	padding: 0.3em 0.8em;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.4;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	appearance: none;
	font-family: inherit;
}
.rpt-btn--ghost {
	background: transparent;
	border-color: rgba(128,128,128,0.4);
	color: inherit;
}
.rpt-btn--ghost:hover {
	background: rgba(128,128,128,0.12);
	color: inherit;
}
.rpt-btn--resolve {
	background: #1a7a3a;
	color: #fff;
	border-color: #1a7a3a;
}
.rpt-btn--resolve:hover {
	background: #228b47;
	color: #fff;
	filter: none;
}

/* Report cards – resolve modal */
.rpt-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid rgba(128,128,128,0.3);
}
.rpt-modal-context {
	background: rgba(128,128,128,0.08);
	border: 1px solid rgba(128,128,128,0.2);
	border-radius: 4px;
	padding: 0.6em 0.75em;
	margin-bottom: 1em;
	font-size: 0.9em;
}
.rpt-modal-choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6em;
	margin-bottom: 1em;
}
.rpt-modal-choices button {
	padding: 0.6em;
	border-radius: 4px;
	font-size: 0.9em;
	cursor: pointer;
	border: 1px solid rgba(128,128,128,0.3);
	background: rgba(128,128,128,0.06);
	color: inherit;
	font-family: inherit;
	transition: background 0.15s;
}
.rpt-modal-choices button:hover { background: rgba(128,128,128,0.15); }
.rpt-modal-choices button.rpt-choice--resolve {
	background: darkblue;
	color: #fff;
	border-color: darkblue;
}
.rpt-modal-choices button.rpt-choice--resolve:hover { filter: brightness(1.2); }
.rpt-msg-form { display: none; }
.rpt-msg-form.visible { display: block; }
.rpt-field { margin-bottom: 0.75em; }
.rpt-field label { display: block; font-weight: bold; margin-bottom: 0.25em; font-size: 0.9em; }
.rpt-field input,
.rpt-field textarea,
.rpt-field select {
	width: 100%;
	box-sizing: border-box;
	background: var(--bgcolor);
	color: var(--color);
	border: 1px solid rgba(128,128,128,0.5);
	border-radius: 3px;
	padding: 0.4em 0.5em;
	font-family: inherit;
	font-size: 0.9em;
}
.rpt-field textarea { resize: vertical; }
.rpt-canned-select { margin-bottom: 0.5em; }
.rpt-send-btn {
	width: 100%;
	padding: 0.6em;
	background: darkblue;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.95em;
	font-family: inherit;
	margin-top: 0.25em;
}
.rpt-send-btn:hover { filter: brightness(1.2); }

/* Report cards – image modal */
.rpt-img-modal-inner {
	position: relative;
	text-align: center;
}
.rpt-img-modal-close {
	position: absolute;
	top: -10px;
	right: -10px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 18px;
	line-height: 30px;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rpt-img-modal-close:hover { background: rgba(0,0,0,0.85); }
.rpt-img-full {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 4px;
	display: block;
	margin: auto;
	padding: 0 !important;
}

/* food club */

.fc_banner {
	width: 80%;
	height: auto;
}

#fc_table {
	display: grid;
	width: 80%;
	border: 1px solid var(--color);
	;
}

#fc_table>div {
	border: 1px solid var(--color);
	padding: .5em;
	border-bottom: 0;
	border-left: 0;
}

#fc_table div.bg-alt {
	background-color: whitesmoke;
}

.fc_header {
	border: none !important;
	grid-column: 1 / var(--fc_span);
}

#fc_table .span {
	border-right: 0;
	grid-column: 1 / var(--fc_span);
}

#fc_table .no-right-border {
	border-right: 0;
}

.fc_place_bet {
	grid-template-columns: 0px auto auto;
}

.fc_positive,
.fc_negative {
	border-left: 1px solid var(--color);
	;
}

.fc_positive select,
.fc_negative select {
	min-height: 20px;
}

.fc_positive {
	background-color: rgba(0, 255, 0, 0.25);
}

.fc_negative {
	background-color: rgba(255, 0, 0, 0.25);
}

#fc_table.fc_pirate {
	grid-template-columns: 150px auto;
}

#fc_table.fc_pirate>div {
	padding: 10px;
}

#fc_table.fc_pirate>div:first-of-type {
	padding: 2px;
}

.fc_nextcourse {
	grid-template-columns: 50% 50%;
}

.fc_links_textarea {
	width: 80%;
	height: 210px;
	box-sizing: border-box;
}

.fea_status {
	width: 60%;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: repeat(4, 25px max-content);
	border: 1px solid var(--color);
}

.fea_status .bg-silver {
	color: black;
}

.fea_status b {
	border-top: 1px solid var(--color);
}

.fea_status b:first-of-type {
	border-top: 0;
}


/* Wishlist Grid */

.wl_grid {
	width: 100%;
    grid-template-columns: 2.25fr 2fr .8fr 2.25fr 2fr;
	display: grid;
	overflow-wrap: break-word;
	box-sizing: border-box;
}

.wl-edit{
    grid-template-columns: 3fr 1fr 3fr 3fr 1fr;
}

.wl_grid>div {
	display: flex;
	padding: .25rem;
    box-sizing: border-box;
    min-width: 0;
}

.wl_grid>.header,
.wl_grid>.footer {
	background-color: var(--grid_head);
	color: white;
	text-align: center;
	justify-content: center;
	padding: 1em;
}

.wl_grid>.header:first-of-type {
	border-top-left-radius: 6px;
}

.wl_grid>.last-header {
	border-top-right-radius: 6px;
}

.wl_grid>.action {
	background-color: var(--grid_select);
	align-items: center;
}

.wl_grid>.data {
	background-color: #dddddd;
}

.wl_grid>.data.bg-alt {
	background-color: #ffffff;
}

.wl_grid>.data:not(.flex-column) {
	align-items: center;
}

.wl_grid>.data.flex-column {
	justify-content: center;
}

.wl_grid>.footer{
	grid-column: span 5;
	justify-content: right;
}

/* Wishlist Edit */

.wl>.flex-column {
	align-items: left;
}

.wl>.data {
	text-align: left;
}

.wl>.action,
.wl>.footer {
	grid-column: span 5;
}

.wl>.data>.rm {
	width: 2em;
}

/* Wishlist View */

.vwl>.flex-column {
	align-items: left;
}

.vwl>.data {
	text-align: left;
}

.vwl>.action,
.vwl>.footer {
	grid-column: span 5;
}

.vwl>.data>.rm {
	width: 2em;
}

/* MARKET GRIDS */

.market_grid {
	width: 100%;
	display: grid;
	overflow-wrap: break-word;
	align-items: stretch;
}

.market_grid>div {
  display: flex;
  padding: 5px;
  box-sizing: border-box;
  min-width: 0;
}

.market_grid>.header,
.market_grid>.footer {
	background-color: var(--grid_head);
	text-align: center;
	justify-content: center;
}

.market_grid>.action {
	background-color: var(--grid_select);
	align-items: center;
}

.market_grid>.data {
	background-color: var(--grid_odd);
}

.market_grid>.data.bg-alt {
	background-color: var(--grid_even);
}

.market_grid>.data:not(.flex-column) {
	align-items: center;
}

.market_grid>.data.flex-column {
	justify-content: center;
}

.success {
	font-weight: bold;
	color: green;
}

.error {
	font-weight: bold;
	color: red;
}

.break {
	overflow-wrap: anywhere;
}

#wheel-container {
	width: 80%;
}

/* STOCKS */

.stock-table-header {
	background-color: #eeeeff;
}

.stock-table-submit {
	background-color: #aaaaff;
}

.stock-table-container {
	width: 100%;
	overflow-x: auto;
}

.stock-table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border: 1px solid gray;
	border-collapse: collapse;
	box-sizing: border-box;
}

.stock-table th,
.stock-table td {
	padding: 8px;
	text-align: center;
	word-wrap: break-word;
	border: 1px solid gray;
}

.stock-table th {
	background-color: #8888ff;
	color: white;
}

.stock-table td {
	background-color: #eeeeff;
}

.stock-table img {
	width: 50px;
	/* Adjust as needed */
	height: auto;
}

.stock-cell {
	background-color: #eeeeff;
}

.stock-table th:nth-child(1),
.stock-table td:nth-child(1) {
	width: 60px;
	/* Logo column */
}

.stock-table th:nth-child(2),
.stock-table td:nth-child(2) {
	width: 9%;
	/* Ticker column */
}

.stock-table th:nth-child(3),
.stock-table td:nth-child(3) {
	width: 22%;
	/* Company column */
}

.stock-table th:nth-child(4),
.stock-table td:nth-child(3) {
	width: 13%;
	/* Volume column */
}

.stock-table th:nth-child(7),
.stock-table td:nth-child(3) {
	width: 12%;
	/* Change column */
}

.stock-header-cell {
	background-color: #8888ff;
}

@media screen and (max-width: 992px) {
	.stock-table {
		font-size: .6rem;
	}
}

/* PORTFOLIO TABLE STYLES */

.portfolio-table-container {
	width: 100%;
	overflow-x: auto;
}

.portfolio-table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	text-indent: initial;
	border: 1px solid gray;
	border-collapse: collapse;
	box-sizing: border-box;
}

.portfolio-table th,
.portfolio-table td {
	padding: 8px;
	text-align: center;
	border: 1px solid gray;
	border-collapse: collapse;
}

.portfolio-table th {
	background-color: #8888ff;
	color: white;
	font-weight: bold;
}

.portfolio-table td {
	background-color: #eeeeff;
}


.portfolio-cell {
	background-color: #eeeeff;
}

.portfolio-header-cell {
	background-color: #8888ff;
	color: white;
	font-weight: bold;
}

/* Adjust column widths */
.portfolio-table th:nth-child(1),
.portfolio-table td:nth-child(1) {
	width: 25%;
	/* Icon column */
}

.portfolio-table th:nth-child(2),
.portfolio-table td:nth-child(2) {
	width: 28%;
	/* Today column */
}


.portfolio-table td {
	word-break: break-word;
}

@media screen and (max-width: 992px) {
	.portfolio-table {
		font-size: 0.6rem;
	}

	.portfolio-cell a {
		font-size: 0.55rem;
	}

	.portfolio-cell a span {
		font-size: 0.5rem;
	}
}


/* SUBTABLE STYLES */

.portfolio-subtable {
	width: 100%;
	border-collapse: collapse;
}

.portfolio-subtable th,
.portfolio-subtable td {
	padding: 8px;
	text-align: center;
}

.portfolio-subtable th {
	background-color: #8888ff;
	color: white;
}

.portfolio-subtable td {
	background-color: #eeeeff;
	word-break: break-word;
}

.portfolio-subtable th:nth-child(1),
.portfolio-subtable td:nth-child(1) {
	width: 13%;
	/* shares column */
}

.portfolio-subtable th:nth-child(2),
.portfolio-subtable td:nth-child(2) {
	width: 9%;
	/* paid np column */
}

.portfolio-subtable th:nth-child(7),
.portfolio-subtable td:nth-child(7) {
	width: 16%;
	/* Sell column */
}

@media screen and (max-width: 992px) {
	.portfolio-header-cell {
		font-size: 0.5rem;
	}
}


/* QUICK STOCK */

.market_grid.qs {
	grid-template-columns: 4fr repeat(4, 1fr) repeat(var(--qsColNum), 1fr);
}

.qs>.header {
	align-items: flex-end;
}

.qs > .qs_info {
	grid-column: 1 / -1;
	background-color: var(--grid_odd);
}

.qs>.header,
.qs>.footer {
	font-size: 0.857rem;
}

.qs>div:not(.justify-right) {
	text-align: center;
	justify-content: center;
}

.qs>.data>.reset {
	cursor: pointer;
}


.qs-item-wrapper {
	display: inline-block;
	text-align: center;
	margin: 3px;
}

.qs-hidden-count {
	margin-top: 3px;
}

.gallery-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 800;
    max-width: 50vw;
}

/* SDB */

.market_grid.sdb {
	grid-template-columns: min-content 1.5fr auto min-content 1fr 1.5fr min-content;
}

.sdb>.flex-column {
	align-items: left;
}

.sdb>.data {
	text-align: left;
}

.sdb>.header.star {
	grid-column: span 2;
}

.sdb>.action,
.sdb>.footer {
	grid-column: span 7;
}



#removeAll {
	margin-left: 0.25em;
}

/* SHOP STOCK */

.market_grid.stock {
	grid-template-columns: 1.5fr auto min-content 1fr min-content 1.5fr min-content;
}

.stock>.flex-column {
	align-items: left;
}

.stock>.data {
	text-align: left;
}

.stock>.action,
.stock>.footer {
	grid-column: span 7;
}

.stock>.data>.price {
	width: 4.25em;
}


 .mobile-hidden-block{
     display: block;
 }

 .mobile-show-block{
      display: none;
 }

/* WISH WITCH */
.wish_results {
	min-width: 80%;
	width: max-content;
	max-width: 100%;
	grid-template-columns: 2fr 1fr 4fr;
}

.wish_results>.data {
	text-align: center;
	justify-content: center;
}

.wish_mine {
	background-color: #cbc3e3 !important;
}

/* AUCTIONS */

.market_grid.auctions {
	grid-template-columns: 2fr repeat(5, 1fr);
}

.auctions>div {
	justify-content: center;
}

.auctions>.header {
	align-items: center;
}

.auction_bids {
	padding-bottom: 0.5em;
}

/* SALES HISTORY */

.market_grid.sales {
	grid-template-columns: 2fr 2fr 1fr 1fr;
}

.sales>.data {
	justify-content: center;
}

.sales>.action,
.sales>.footer,
.sales>.no_sales {
	grid-column: span 4;
}

/* GALLERY QUICK REMOVE */

.market_grid.qrm {
	grid-template-columns: min-content 1fr repeat(var(--qrmCol1fr), min-content);
}

.qrm>.data,
.qrm>.checkbox {
	justify-content: center;
}

.qrm select {
	width: 12em;
}

.qrm>.label {
	grid-column: span var(--qrmCols-1);
	padding-left: 0;
}

.qrm>.footer,
.qrm>.empty {
	grid-column: span var(--qrmCols);
}

/* GALLERY CATEGORIES */

.market_grid.gcats {
	grid-template-columns: repeat(2, min-content) repeat(2, 1fr) min-content;
}

.gcats>.data,
.gcats>.radio {
	justify-content: center;
}

.gcats>.footer {
	grid-column: span 5;
}

.gcats>.label {
	grid-column: span 4;
	justify-content: right;
}

.gcats [type="number"] {
	width: 3.5em;
}

.gcats [type="text"],
.gcats textarea {
	width: 100%;
}

/* SHOP WIZARD RESULTS */

.sw_results {
	min-width: 80%;
	width: max-content;
	max-width: 100%;
	grid-template-columns: 2fr 2fr 1fr 2fr;
}

.sw_results>.data {
	text-align: center;
	justify-content: center;
}

.sw_mine {
	background-color: lightblue !important;
}

/* LOTTERY */

.lotto_winners {
	grid-template-columns: repeat(6, 1fr);
	width: 98%
}

.lotto_winners>.header {
	align-items: center;
}

.lotto_winners>.data {
	justify-content: center;
}

#lotto_balls {
	display: grid;
	grid-template-columns: repeat(6, 50px);
	justify-content: center;
}

#lotto_balls>div {
	height: 50px;
	line-height: 50px;
}

/* EDIT SHOP/GALLERY */

.edit_shop {
	grid-template-columns: 35% 1fr;
}

.edit_shop>.left {
	text-align: right;
	align-items: right;
	justify-content: right;
}

.edit_shop>.right {
	gap: 0.25em;
}

.edit_shop>.right textarea {
	height: 10em;
}

.edit_shop>.right [readonly=""] {
	width: 5rem;
}

.edit_shop>.header,
.edit_shop>.footer {
	grid-column: span 2;
}

.edit_shop>.action {
	justify-content: center;
}

/* EDIT PROFILE */

.profile.prefs {
	grid-template-columns: 67% 33%;
}

.profile.edit {
	grid-template-columns: 50% 50%;
}

.profile>.left {
	text-align: right;
	justify-content: right;
}

.profile>.message {
	padding-top: 0px;
}

.profile [type="checkbox"] {
	width: min-content;
}

.profile [readonly=""] {
	width: 5rem;
}

.ep-birthday-day {
	width: 33%;
}

.ep-birthday-month {
	width: 67%;
}

.profile>.action {
	justify-content: center;
}

.profile>.header,
.profile>.footer,
.profile>.span,
.profile>.action {
	grid-column: span 2;
}

#id_userlookup_css,
#id_userlookup_html,
#id_modmin_about_me {
	height: 10rem;
	width: 95%;
	margin: auto;
}

/* NEOFRIEND REQUESTS */

.nfr {
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid var(--grid_head);
}

.nfr>.data {
	text-align: center;
	justify-content: center;
	border: 1px solid var(--grid_head);
}

/* NEOFRIENDS LIST */

.neofriends {
	grid-template-columns: 1fr 1fr max-content 1fr repeat(2, max-content);
}

.neofriends>.data {
	text-align: center;
	justify-content: center;
}

.neofriends>.footer {
	grid-column: span 6;
}

/* BLOCK LIST */

.block_list {
	grid-template-columns: repeat(2, 1fr);
}

.block_list>.data {
	text-align: center;
	justify-content: center;
}

.block_list>.footer {
	grid-column: span 2;
}

/* GAMES */

.game {
	display: grid;
	grid-template-rows: 50px 50px auto 34px;
	grid-template-columns: 102px 50px;
	border: 2px solid darkgray;
}

.game-name {
	word-wrap: break-word;
	font-size: 0.928rem;
	grid-column: 1 / 3;
	grid-row: 3 / 4;
	margin: .5em;
}

.game img {
	border: none;
}

.game>img {
	height: 50px;
}

.game>span:nth-of-type(2) {
	border-bottom: 2px solid darkgray;
}

.game .game_img {
	overflow: hidden;
	border-right: 2px solid darkgray;
	border-bottom: 2px solid darkgray;
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}

.game .game_img img {
	height: 100px;
}

.game div {
	grid-column: 1 / 3;
	grid-row: 4 / 5;
	border-top: 2px solid darkgray;
	padding: 2px;
}

.game div a {
	width: 70px;
}

.game div a img {
	width: 100%;
}

.game>* {
	align-self: center;
}

#coin{
 width: 80px;
 height: 80px;
}
/* POEMS */

.poem {
	width: 75%;
	padding: 0.25em;
}

.trophy-icon {
	height: 1.25em;
	vertical-align: -20%;
}

/* other stuff */

.aio-arrow {
	display: inline-block;
	padding: 3px;
	transition: transform 0.3s ease;
	/* Smooth rotation animation */
}

.aio-arrow.up {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}

.aio-arrow.down {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.aio-arrow.no-transition {
	transition: none;
	/* Disable animation temporarily */
}

.aio-section {
	transition: opacity 0.5s ease;
}

.aio-section.hidden {
	opacity: 0;
}

.aio-inv-item {
	position: relative;
}

.aio-inv-dropdown-menu {
	font: 1.1rem Verdana;
	text-transform: none;
	text-shadow: none;
	color: var(--color);
	display: none;
	position: absolute;
	top: 0%;
	right: 100%;
	background-color: var(--bgcolor);
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 2;
	min-width: 250px;
	padding: 0;
	/* Remove padding from the container */
	border: 1px solid var(--color);
	border-radius: 5px;
	/* Rounded corners */
	overflow: hidden;
	/* Hide overflow to ensure rounded corners */
}

.aio-inv-dropdown-menu.left {
	display: none;
	position: absolute;
	top: 0%;
	left: -260%;
	background-color: var(--bgcolor);
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 2;
	min-width: 250px;
	padding: 0;
	/* Remove padding from the container */
	border: 1px solid var(--color);
	border-radius: 5px;
	/* Rounded corners */
	overflow: hidden;
	/* Hide overflow to ensure rounded corners */
}

.aio-inv-dropdown-menu p {
	font-size: 1.14em;
	margin: 0;
	padding: 12px 16px;
	background-color: var(--grid_head);
	border-bottom: 1px solid var(--color);
	font-weight: bold;
	color: var(--color);
}

.aio-inv-dropdown-menu button {
	width: 100%;
	padding: 12px 16px;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font-size: 1rem;
	color: var(--color);
	display: flex;
	align-items: center;
	/* Align icon and text vertically */
	transition: background-color 0.3s ease;
}

.aio-inv-dropdown-menu button img.dropdown-icon {
	margin-right: 10px;
	width: 40px;
}

.aio-inv-dropdown-menu button img.pet-dropdown-icon {
	margin-right: 10px;
	width: 40px;
	border-radius: 5px;
}

.aio-inv-dropdown-menu button:hover {
	background-color: var(--grid_even);
}

.aio-inv-dropdown-menu button:focus {
	outline: none;
	background-color: var(--grid_select);
}

.aio-quantity-circle {
	text-transform: none;
	text-shadow: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: #CC5500;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 10px;
}

.aio-large-quantity-circle {
	text-transform: none;
	text-shadow: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: #CC5500;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 10px;
}

.pet-aio-dropdown-icon {
	background: transparent !important;
	border: none !important;
	border-radius: none !important;
	margin-right: 10px !important;
	width: 40px !important;
	border-radius: 5px !important;
}

.aio-dropdown-icon {
	background: transparent !important;
	border: none !important;
	border-radius: 0px !important;
	margin-right: 10px !important;
	width: 40px !important;
}

.aio-placeholder-collapsed {
	height: 75px;
	padding-bottom: 0px !important;
}

.body-loading #aio_sidebar_placeholder {
	opacity: 0;
}


.aio-kad-fed {
	filter: grayscale(1)
}

.kad_fed {
	background-color: #ededed;
}

#rightbar .bg-gold {
	background-color: #dddd77 !important;
}

/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1000;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: var(--bgcolor);
	margin: 15% auto;
	/* 15% from the top and centered */
	border: 1px solid var(--color);
	width: fit-content;
}

#modal-body {
	padding: 20px;
	width: 100%;
	margin: auto;
	position: relative;
	box-sizing: border-box;
}


.close-modal {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	background: none;
	border: none;
	padding: 0;
	line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
	color: white;
	text-decoration: none;
	cursor: pointer;
}

#random_event_log {
	display: grid;
	grid-template-columns: 100px auto 150px;
	gap: 10px;
}

#random_event_log:nth-child(n + 3) {
	overflow-wrap: break-word;
}

/* NeoDeck */
.nav-container {
	text-align: center;
	display: inline-block;
	padding: 5px;
	margin: 0;
}

.nav-button {
	display: inline-block;
	padding-right: 10px;
	padding-left: 10px;
	vertical-align: top;
}

.nav-button p {
	text-align: center;
}

.neodeck-bg {
	background-color: #FFFFEE;
}

/* BATTLEDOME */

#bd-news {
	display: grid;
	grid-template-columns: 35% 45% 20%;
	gap: 2px;
	margin: auto;
	width: 100%
}

#bd-news>div:not(.bd-links) {
	padding: 4px;
	display: flex;
	flex-direction: column;
}

#bd-news>.bd-links {
	grid-row: span 5;
}

.bd-links {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2px;
}

.bd-links>div {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}


.bd-table-image {
	width: auto;
	height: 125px;
	display: block;
	margin: .5em;
}

.battlepedia-item {
	display: grid;
	width: 100%;
	border-bottom: 1px solid;
	border-right: 1px solid;
	grid-template-columns: 11% 11% repeat(6, 10.55555%) 7.33333% 7.33333%;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		"a a b b b b b b c c"
		"a a d d d d d d e e"
		"a a f f f f f f g g"
		"h h h h h h h h h h";
}

.battlepedia-item>div {
	border-top: 1px solid;
	border-left: 1px solid;
	padding: 5px;
	text-align: center;
	display: flex;
}

.battlepedia-item .item-picture {
	grid-area: a;
	display: flex;
	width: fit-content;
}

.battlepedia-item>.item-picture>span>.searchhelp {
	width: auto;
}

.battlepedia-item>div>span {
	margin: auto;
}

.battlepedia-item .item-name {
	grid-area: b;
}

.battlepedia-item .item-price {
	grid-area: c;
}

.battlepedia-item .item-effects {
	grid-area: d;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

.battlepedia-item .item-type {
	grid-area: e;
}

.battlepedia-item .item-usage {
	grid-area: f;
}

.battlepedia-item .item-rarity {
	grid-area: g;
}

.battlepedia-item .item-description {
	grid-area: h;
	display: inline;
}

.battlepedia-item-new {
	display: grid;
	width: 100%;
	border-bottom: 1px solid;
	border-right: 1px solid;
	grid-template-columns: 11% 11% repeat(6, 9.75%);
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		"b b b b b b c c f f"
		"a a d d d d d d d d"
		"a a d d d d d d d d"
		"h h h h h h h h h h";
}

.battlepedia-item-new>div {
	border-top: 1px solid;
	border-left: 1px solid;
	padding: 5px;
	text-align: center;
	display: flex;
}

.battlepedia-item-new .item-picture {
	grid-area: a;
	display: flex;
	width: fit-content;
}

.battlepedia-item-new>.item-picture>span>.searchhelp {
	width: auto;
}

.battlepedia-item-new>div>span {
	margin: auto;
}

.battlepedia-item-new .item-name {
	grid-area: b;
}

.battlepedia-item-new .item-name>span {
	margin: auto 0 auto 0;
}

.battlepedia-item-new .item-price {
	border-left: 0px;
	grid-area: c;
}

.battlepedia-item-new .item-price>span {
	margin: auto 0 auto auto;
}

.battlepedia-item-new .ability-cost {
	border-left: 0px;
	grid-area: 1 / 6 / 1/ 9;
}

.battlepedia-item-new .ability-cost>span {
	margin: auto 0 auto auto;
}

.battlepedia-item-new .item-effects {
	grid-area: d;
	flex-direction: column;
	align-content: center;
	justify-content: space-evenly;
}

.battlepedia-item-new .item-effects>span {
	margin: 0 auto 0 auto;
}

.battlepedia-item-new .item-usage {
	border-left: 0px;
	grid-area: f;
}

.battlepedia-item-new .item-usage>span {
	margin: auto 0 auto auto;
}

.battlepedia-item-new .item-description {
	grid-area: h;
	display: inline;
}

img.gormball_player {
	border: 1px solid var(--color);
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.5s ease-in;
	filter: grayscale(1);
}

img.gormball_player:hover {
	transform: rotate(360deg);
	filter: grayscale(0);
}

.about_gormball_players {
	display: grid;
	grid-template-columns: 50% 50%;
	border: 1px solid var(--color);
}

.about_gormball_player {
	padding: 10px;
	border: 1px solid var(--color);
	font-size: 0.95em;
}

.about_gormball_player img {
	float: right;
	margin: 0 5px 5px;
	border: 1px solid var(--color);
	;
}

/* Psychic Pet */
.psychic-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	justify-items: center;
	align-items: center;
	border-collapse: collapse;
	max-width: 240px;
	margin: auto;
}

.psychic-grid-item {
	display: block;
	width: 75px;
	height: auto;
	border: 1px solid #000;
	box-sizing: border-box;
}

.psychic-grid-item img {
	height: 100px;
	width: 75px;
}

/* GUILDS */

/* Responsive image map — scales down on narrow viewports */
.guild-nav-container { display: inline-block; max-width: 100%; }
#guild-nav { max-width: 100%; height: auto; display: block; }

.guild-search {
	background-color: #F1F1F1;
	width: 90%;
	border: 1px solid var(--color);
	margin: auto;
	padding: 1%;
}

.dm-black {
	color: black;
}

.bg-color {
	background-color: var(--bg-color);
}

.border-color {
	background-color: var(--border-color);
}

.sborder-color {
	background-color: var(--sborder-color);
}

.htext-color {
	color: var(--htext-color);
}

.text-color {
	color: var(--text-color);
}

.link-color,
#guild-grid a {
	color: var(--link-color);
}

#guild-grid {
	width: 635px;
	display: grid;
	grid-template-columns: 180px 1fr;
	overflow-wrap: anywhere;
	background-color: var(--sborder-color);
	border: 2px solid var(--sborder-color);
	color: var(--text-color);
	font-size: 0.928rem;
	align-items: start;
}

.guild-header,
.guild-spacer,
.guild-sidebar-header {
	background-color: var(--border-color);
	color: var(--htext-color);
}

.guild-header,
.guild-desc,
.guild-spacer {
	padding: 2px;
}

.guild-sidebar-menu {
	border: 2px solid var(--border-color);
	padding: 0;
}

.guild-sidebar-menu>div,
.guild-logo,
.guild-main {
	padding: 6px;
}

.guild-sidebar-info,
.guild-desc {
	font-size: 0.857rem;
}

.member-grid {
	display: grid;
	grid-template-columns: repeat(2, 2fr) repeat(2, 1fr) 2fr;
	overflow-wrap: normal;
	align-items: stretch;
	border: 2px solid var(--border-color);
}

.member-grid>div {
	display: flex;
	align-items: center;
	justify-content: center;
}

.guild-messages {
	width: 99%;
	display: grid;
	grid-template-columns: 23.5% 76.5%;
	grid-auto-rows: min-content 1.9em min-content min-content;
	align-items: stretch;
	overflow-wrap: anywhere;
	background-color: var(--bg-color);
	border: solid var(--bg-color);
	border-width: 2px 2px 0 2px;
	font-size: 0.857rem;
}

.guild-messages>div {
	padding: 4px;
}

.guild-post-header {
	background-color: var(--border-color);
	color: var(--htext-color);
	text-align: center;
}

.guild-post-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	grid-row: span 2;
	gap: 0.5em;
}

.guild-post-subject {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.guild-post-reply {
	background-color: var(--border-color);
	color: var(--htext-color);
	grid-column: span 2;
	border-bottom: 2px solid var(--bg-color);
	font-size: 0.714rem;
}

.guild-post-reply a {
	color: var(--htext-color) !important;
}

.shopkeeper_picker {
	width: 113px;
	height: 113px;
}

.create-guild-table {
	margin: auto;
	border: 2px solid black;
	border-radius: 10px;
	padding: 5px;
}

.g_item {
	display: inline-block;
	width: 106px;
	text-align: center;
	vertical-align: top;
	padding-bottom: 10px;
}

  .create-guild-container {
    display: flex;
    justify-content: center;
    margin: 1rem auto;
  }

  .create-guild-table {
    display: flex;
    background-color: #ffff99;
    padding: 1rem;
  }

  .create-guild-table-content {
    padding: 0;
  }

  .create-guild-inner {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
  }

  .cg-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }

  .cg-row-full {
    display: flex;
    justify-content: center;
  }

  .cg-row-spacer {
    height: 1rem;
  }

  .cg-cell-label {
    flex: 0 0 50%;
    vertical-align: top;
  }

  .cg-cell-input {
    flex: 0 0 50%;
    vertical-align: top;
  }

  .cg-hr-wrapper {
    width: 100%;
    text-align: center;
  }

  .cg-hr {
    width: 70%;
    height: 1px;
    border: 0;
    margin: 0.5rem auto;
    background-color: #ccc;
  }

  .create-guild-header {
    text-align: center;
  }

  .create-guild-section-text {
    text-align: center;
  }

  .create-guild-submit-wrapper {
    text-align: center;
    margin-top: 0.75rem;
  }

/* Faerie Colours */

.water_faerie {
	color: blue;
}

.darkness_faerie {
	color: purple;
}

.earth_faerie {
	color: green;
}

.fire_faerie {
	color: #cc3300;
}

.light_faerie {
	color: #de970b;
}

.air_faerie {
	color: lightblue;
}

/* Help Page */

#webpush-message:not(:empty){
    margin-bottom: 1em;
}
.rules li {
	margin: 1em 0;
}

.menu-box {
	width: 31%;
	padding: 4px;
}

.menu-box h2 {
	font-family: "Heffaklump";
	color: black;
	font-size: 1.4em;
	font-weight: normal;
	border: 2px solid black;
	border-radius: 5px;
	padding: 4px;
}

.menu-box-button {
	font-family: "Heffaklump";
	color: black;
	font-size: 1.4em;
	font-weight: normal;
	border: .25em solid black;
	border-radius: .5em;
	padding: .5em;
}

.menu-box.yellow-btn h2 {
	background-color: #fff7cc;
}

.menu-box.yellow-btn h2:hover {
	background-color: gold;
	transition: 5ms;
}

.menu-box.yellow-btn h2:active {
	background-color: #ccad00;
}

.menu-box.green-btn h2 {
	background-color: #d6f5d6;
}

.menu-box.green-btn h2:hover {
	background-color: #33cc33;
}

.menu-box.green-btn h2:active {
	background-color: #28a428;
}

.menu-box.blue-btn h2 {
	background-color: #ccf5ff;
}

.menu-box.blue-btn h2:hover {
	background-color: #00ccff;
}

.menu-box.blue-btn h2:active {
	background-color: #00a3cc;
}

.menu-box.pink-btn h2 {
	background-color: #ffcce6;
}

.menu-box.pink-btn h2:hover {
	background-color: #ff66b3;
}

.menu-box.pink-btn h2:active {
	background-color: #cc528f;
}

.gen-blue-btn{
	background-color: #ccf5ff;
}

.gen-blue-btn:hover {
	background-color: #00ccff;
}

.gen-blue-btn:active {
	background-color: #00a3cc;
}

.gen-pink-btn {
	background-color: #ffcce6;
}

.gen-pink-btn:hover {
	background-color: #ff66b3;
}

.gen-pink-btn:active {
	background-color: #cc528f;
}

.mod-dashboard {
	background: linear-gradient(180deg, #fffdf1 0%, #fff7db 100%);
	border: 2px solid #dcbf6a;
	border-radius: 16px;
	padding: 18px;
	box-sizing: border-box;
	box-shadow: 0 10px 24px rgba(100, 74, 15, 0.08);
}

.mod-dashboard-intro {
	margin-bottom: 18px;
}

.mod-dashboard-eyebrow,
.mod-dashboard-panel-kicker {
	margin: 0 0 4px 0;
	color: #8e5f00;
	font-weight: bold;
	letter-spacing: 0.04em;
    font-size: 1.35em;
}

.mod-dashboard-title {
	margin: 0 0 8px 0;
	line-height: 1.1;
	color: #4b2d00;
}

.mod-dashboard-copy {
	margin: 0;
	color: #5f4b21;
}

.mod-dashboard-top {
	display: block;
	margin-bottom: 18px;
	grid-template-columns: 1fr;
}

.mod-dashboard-panel {
	background-color: rgba(255, 255, 255, 0.9);
	border: 2px solid #e4cd8b;
	border-radius: 14px;
	padding: 16px;
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	margin: 1em;
}

.mod-dashboard-panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.mod-dashboard-panel-header h2 {
	margin: 0;
	font-size: 1.1em;
	color: #402800;
}

.mod-dashboard-count-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background-color: #fff0b8;
	border: 2px solid #3d2a00;
	border-radius: 999px;
	font-weight: bold;
	color: #513100;
	white-space: nowrap;
}

.mod-dashboard-table-wrap {
	margin-top: 14px;
	overflow-x: auto;
}

.mod-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	background-color: #fffdf5;
	border-radius: 12px;
	overflow: hidden;
}

.mod-dashboard-table th,
.mod-dashboard-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #eadfc0;
	text-align: left;
}

.mod-dashboard-table th {
	background-color: #f8ebbd;
	color: #5d4300;
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mod-dashboard-table tbody tr:last-child td {
	border-bottom: none;
}

.mod-dashboard-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid #bda35b;
	border-radius: 999px;
	font-size: 0.95em;
	font-weight: bold;
}

.mod-status-available {
	background-color: #dff7dd;
	color: #1b6b28;
}

.mod-status-very-low {
	background-color: #ffe3b8;
	color: #8a3f00;
	border-color: #d77a00;
}

.mod-dashboard-status-text {
    margin: auto;
    text-align: center;
}

.mod-status-low {
	background-color: #fff2b8;
	color: #8a5a00;
}

.mod-status-unavailable {
	background-color: #f1f1f1;
	color: #5a5a5a;
}

.mod-status-down {
	background-color: #fce4e4;
	color: #7a1010;
	border-color: #d04040;
}

.mod-dashboard-metric-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.mod-dashboard-metric-card {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	min-width: 0;
	min-height: 120px;
	padding: 16px;
	background: linear-gradient(160deg, #fffef8 0%, #fff0c7 100%);
	border: 2px solid #dfc57c;
	border-radius: 14px;
	color: #3b2800;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 6px 16px rgba(109, 78, 13, 0.08);
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.mod-dashboard-metric-card:hover {
	transform: translateY(-2px);
	border-color: #b78918;
	box-shadow: 0 10px 18px rgba(109, 78, 13, 0.16);
}

.mod-dashboard-metric-label {
	display: block;
	max-width: 100%;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.mod-dashboard-metric-count {
	display: block;
	width: 100%;
	text-align: center;
	font-family: "Heffaklump";
	font-size: 2.4em;
	line-height: 1;
}

.mod-dashboard-tool-card {
	width: 48%;
	margin-bottom: 1.5em;
}

.mod-dashboard-tool-card p {
	margin: 8px 4px 0 4px;
	color: #493300;
}

.mod-dashboard-legacy-details {
	margin-top: 18px;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid #e4cd8b;
	border-radius: 12px;
	padding: 12px 14px;
}

.mod-dashboard-legacy-summary {
	cursor: pointer;
	font-family: "Heffaklump";
	font-size: 1.5em;
	color: #4b2d00;
}

.mod-dashboard-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.mod-dashboard-toggle-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.mod-dashboard-toggle-actions {
	flex: 0 0 290px;
	max-width: 100%;
}

.mod-dashboard-live-control {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	padding: 16px 18px;
	margin-top: 4px;
	background: linear-gradient(180deg, rgba(255, 250, 234, 0.95) 0%, rgba(255, 243, 204, 0.95) 100%);
	border: 1px solid #e4cd8b;
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mod-dashboard-live-section {
	max-width: 700px;
}

.mod-dashboard-live-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mod-dashboard-live-eyebrow {
	color: #8f6913;
	font-size: 0.83em;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mod-dashboard-live-copy {
	margin: 0;
	max-width: 560px;
	text-align: center;
	align-self: center;
}

.mod-dashboard-live-switch-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	padding: 14px 16px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.42);
	border: 1px solid #dcc88a;
	border-radius: 12px;
}

.mod-dashboard-live-switch-caption {
	color: #5f4603;
	font-size: 0.95em;
	font-weight: bold;
}

.mod-dashboard-switch-form {
	margin: 0;
	display: flex;
	justify-content: center;
	width: 100%;
}

.mod-dashboard-switch-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 12px;
	background-color: rgba(255, 247, 219, 0.92);
	border: 1px solid #dcc88a;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(122, 91, 20, 0.08);
}

.mod-dashboard-switch-label {
	font-size: 0.95em;
	font-weight: bold;
	color: #5a4308;
}

.mod-dashboard-switch {
	position: relative;
	display: inline-block;
	width: 64px;
	height: 34px;
}

.mod-dashboard-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.mod-dashboard-switch-slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background: linear-gradient(180deg, #d3cab0 0%, #b8ab87 100%);
	border: 2px solid #4a3300;
	border-radius: 999px;
	box-shadow: inset 0 2px 4px rgba(72, 52, 0, 0.12);
	transition: background 160ms ease, border-color 160ms ease;
}

.mod-dashboard-switch-slider::before {
	content: "";
	position: absolute;
	height: 24px;
	width: 24px;
	left: 4px;
	top: 3px;
	background: linear-gradient(180deg, #fffdf6 0%, #f5e8bc 100%);
	border: 1px solid #7a5b14;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(61, 44, 0, 0.24);
	transition: transform 160ms ease;
}

.mod-dashboard-switch input:checked + .mod-dashboard-switch-slider {
	background: linear-gradient(180deg, #95e39b 0%, #56c96c 100%);
	border-color: #1f6b2b;
}

.mod-dashboard-switch input:checked + .mod-dashboard-switch-slider::before {
	transform: translateX(28px);
}

.mod-dashboard-switch input:focus-visible + .mod-dashboard-switch-slider {
	outline: 2px solid #6b4ec6;
	outline-offset: 2px;
}

.mod-dashboard input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="image"]),
.mod-dashboard select.form-control,
.mod-dashboard .select-wrapper,
.mod-dashboard .dev-btn {
	min-height: var(--min-button-height, var(--button_size));
	box-sizing: border-box;
}

.mod-dashboard input.form-control[type="color"] {
	min-height: var(--min-button-height, var(--button_size));
	padding: 4px 6px;
	border: 2px solid #dcc88a;
	border-radius: 10px;
	background: linear-gradient(180deg, #fffef8 0%, #fff4cf 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.mod-dashboard .select-wrapper {
	width: 100%;
	background: linear-gradient(180deg, #fffef8 0%, #fff4cf 100%);
	border: 2px solid #dcc88a;
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.mod-dashboard .select-wrapper > select.form-control,
.mod-dashboard .select-wrapper > select {
	min-height: calc(var(--min-button-height, var(--button_size)) - 4px);
	padding: 0 2.5rem 0 12px;
	background: transparent;
	color: #4b2d00;
	font-weight: bold;
}

.mod-status-page {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mod-status-update-card {
	background: linear-gradient(180deg, rgba(255, 250, 234, 0.96) 0%, rgba(255, 242, 201, 0.96) 100%);
}

.mod-status-update-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.mod-status-update-header h2 {
	margin: 0;
	font-size: 1.1em;
	color: #402800;
}

.mod-status-update-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 12px;
}

.mod-status-select-wrap {
	max-width: none;
}

.mod-status-submit {
	max-width: none;
}

.re-dashboard {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.re-dashboard-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
}

.re-dashboard-fieldset {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.re-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
}

.re-dashboard-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.re-dashboard-grid-span-full {
	grid-column: 1 / -1;
}

.re-dashboard-wide-panel {
	width: 100%;
	box-sizing: border-box;
}

.re-dashboard-card {
	padding: 14px 16px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.52);
	border: 1px solid #e4cd8b;
	border-radius: 12px;
}

.re-dashboard-help {
	margin: 0;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.48);
	border: 1px solid #e4cd8b;
	border-radius: 10px;
}

.re-dashboard-help summary {
	cursor: pointer;
	font-weight: bold;
	color: #5d4300;
}

.re-dashboard-help p {
	margin: 8px 0 0 0;
	color: #5f4b21;
}

.re-dashboard-help strong {
	cursor: pointer;
}

.re-dashboard-preview-shell {
	padding: 14px;
	background: rgba(255, 255, 255, 0.42);
	border: 1px dashed #c9a030;
	border-radius: 12px;
}

.re-dashboard-preview {
	margin: 0 auto;
}

.re-dashboard-warning {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(255, 233, 205, 0.9);
	border: 1px solid #d79d46;
	color: #7a3800;
	font-size: 0.92em;
}

.re-dashboard .re-dashboard-grid > .flex-column {
	height: 100%;
	min-width: 0;
}

.re-dashboard .re-dashboard-grid--balanced > .flex-column {
	display: grid;
	align-content: start;
	grid-auto-rows: auto;
}

.re-dashboard .re-dashboard-grid--balanced > .flex-column > .dev-field-label {
	min-height: 3.7rem;
}

.re-dashboard .re-dashboard-grid--tall-labels > .flex-column > .dev-field-label {
	min-height: 6.1rem;
}

.re-dashboard .re-dashboard-grid > .flex-column > .form-control,
.re-dashboard .re-dashboard-grid > .flex-column > .select-wrapper,
.re-dashboard .re-dashboard-grid > .flex-column > .battlepedia-admin-search-wrap {
	width: 100%;
}

.re-dashboard .dev-btn-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 10px;
	align-items: stretch;
}

.re-dashboard .dev-btn-row.re-dashboard-actions-row--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.re-dashboard .dev-btn-row.re-dashboard-actions-row--single {
	grid-template-columns: minmax(0, 1fr);
}

.re-dashboard .dev-btn-row .dev-btn {
	width: 100%;
	height: 100%;
	min-width: 0;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
}

.re-dashboard .battlepedia-admin-search-wrap {
	position: relative;
	width: 100%;
}

.re-dashboard .battlepedia-admin-search-dropdown {
	width: 100%;
}

.re-dashboard .battlepedia-admin-search-result {
	gap: 10px;
}

.re-dashboard .battlepedia-admin-search-result .search-dropdown-result-text {
	text-align: left;
	line-height: 1.25;
}

.re-dashboard .battlepedia-admin-search-result .battlepedia-admin-search-meta {
	margin-top: 2px;
}

.re-dashboard-rank-list,
.re-dashboard-banned-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.re-dashboard-rank-list li,
.re-dashboard-banned-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid #e4cd8b;
	border-radius: 8px;
}

.re-dashboard-rank-list li strong,
.re-dashboard-banned-list li code {
	flex-shrink: 0;
}

.re-dashboard-rank-list a,
.re-dashboard-banned-list a {
	overflow-wrap: anywhere;
}

.re-dashboard-admin-panel .dev-btn-row {
	margin-bottom: 12px;
}

@media (max-width: 950px) {
	.mod-dashboard-tool-card {
		width: 48%;
	}
}

@media (max-width: 700px) {
	.mod-dashboard {
		padding: 14px;
		border-radius: 12px;
	}

	.mod-dashboard-title {
		font-size: 1.7em;
	}

	.mod-dashboard-panel,
	.mod-dashboard-metric-card {
		padding: 14px;
	}

	.mod-dashboard-panel-header,
	.mod-dashboard-toggle-row,
	.mod-dashboard-live-header,
	.mod-status-update-header {
		flex-direction: column;
		align-items: stretch;
	}

	.mod-dashboard-toggle-actions {
		flex-basis: auto;
		width: 100%;
	}

	.mod-dashboard-metric-grid {
		grid-template-columns: 1fr;
	}

	.mod-dashboard-tool-card,
	.menu-box.mod-dashboard-tool-card {
		width: 100%;
	}

	.mod-dashboard-table th,
	.mod-dashboard-table td {
		padding: 10px;
	}

	.re-dashboard-grid,
	.re-dashboard-grid--3 {
		grid-template-columns: 1fr;
	}

	.re-dashboard .dev-btn-row,
	.re-dashboard .dev-btn-row.re-dashboard-actions-row--3 {
		grid-template-columns: 1fr;
	}

	.re-dashboard-rank-list li,
	.re-dashboard-banned-list li {
		flex-direction: column;
		align-items: flex-start;
	}

	.mod-dashboard-live-control {
		padding: 14px;
	}

	.mod-dashboard-live-switch-shell {
		max-width: 100%;
	}

	.mod-status-update-form,
	.mod-status-select-wrap,
	.mod-status-submit {
		max-width: 100%;
	}
}

/* MOD DASHBOARD — COLLAPSIBLE UTILITY PANELS */

.mod-utils-collapsible {
	border: 2px solid #e4cd8b;
	border-radius: 14px;
	overflow: hidden;
}

.mod-site-message-panel {
	padding: 0;
}

.mod-utils-collapsible > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.05em;
	color: #4b2d00;
	background-color: rgba(255, 248, 225, 0.85);
	user-select: none;
}

.mod-utils-collapsible > summary::-webkit-details-marker { display: none; }
.mod-utils-collapsible > summary::marker { content: none; }

.mod-utils-collapsible[open] > summary {
	border-bottom: 1px solid #e4cd8b;
}

.details-chevron {
	transition: transform 200ms ease;
	font-size: 1em;
	flex-shrink: 0;
	color: #8e5f00;
}

.mod-utils-collapsible[open] > summary .details-chevron {
	transform: rotate(90deg);
}

.mod-utils-collapsible-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mod-utils-collapsible-body .mod-dashboard-live-switch-shell {
	margin-top: 8px;
}

/* Emergency panel variant */
.mod-emergency-panel {
	border-color: #c04030;
}

.mod-emergency-panel > summary,
.mod-emergency-summary {
	background-color: rgba(255, 236, 232, 0.9);
	color: #7a1010;
}

.mod-emergency-panel[open] > summary {
	border-bottom-color: #c04030;
}

.mod-emergency-panel > summary .details-chevron {
	color: #c04030;
}

/* Subsection header inside collapsible body */
.mod-util-subheader {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: bold;
	font-size: 0.97em;
	color: #4b2d00;
	padding-bottom: 8px;
	border-bottom: 1px solid #e4cd8b;
}

.mod-util-subheader i {
	font-size: 1.1em;
	color: #8e5f00;
	flex-shrink: 0;
}

/* Thin rule between subsections */
.mod-util-divider {
	border: none;
	border-top: 1px solid #e4cd8b;
	margin: 0;
}

.mod-log-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
	gap: 16px;
}

.mod-log-tool {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid #e4cd8b;
	border-radius: 12px;
	min-width: 0;
}

.mod-log-tool--wide {
	grid-column: 1 / -1;
}

.mod-log-tool-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mod-log-helper {
	margin: 0;
	color: #6a5425;
	line-height: 1.45;
}

.mod-log-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mod-log-result-shell {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mod-log-result-header,
.mod-log-results-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.mod-log-result-header h3,
.mod-log-results-header h4 {
	margin: 0;
	color: #432800;
}

.mod-log-kicker {
	margin: 0 0 4px 0;
	color: #8e5f00;
	font-size: 0.78em;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mod-log-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}

.mod-log-summary-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	background: linear-gradient(180deg, #fffef8 0%, #fff4d2 100%);
	border: 1px solid #e0cf9d;
	border-radius: 10px;
	min-width: 0;
}

.mod-log-summary-card--success {
	background: linear-gradient(180deg, #f4fff2 0%, #dff6da 100%);
	border-color: #9fcf9d;
}

.mod-log-summary-card--warning {
	background: linear-gradient(180deg, #fffbed 0%, #ffe5a5 100%);
	border-color: #dfb95f;
}

.mod-log-summary-card--danger {
	background: linear-gradient(180deg, #fff6f4 0%, #ffd9d1 100%);
	border-color: #dea294;
}

.mod-log-summary-label {
	font-size: 0.82em;
	font-weight: bold;
	color: #6a5425;
}

.mod-log-summary-value {
	color: #3b2800;
	font-size: 1.35em;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.mod-log-alert-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mod-log-alert {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: #fff8dd;
	border: 1px solid #dcc88a;
	border-radius: 10px;
	color: #5a4308;
}

.mod-log-alert--info {
	background: #f3fbff;
	border-color: #93bfd4;
	color: #21495a;
}

.mod-log-alert--warning {
	background: #fff4dd;
	border-color: #d9ac57;
	color: #744200;
}

.mod-log-table-wrap {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

.mod-log-table {
	width: 100%;
	table-layout: auto;
}

.mod-log-table--dense {
	min-width: 760px;
}

.mod-log-table th,
.mod-log-table td {
	vertical-align: top;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mod-log-table th {
	white-space: nowrap;
}

.mod-log-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr));
	gap: 14px;
}

.mod-log-results-grid--trades {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 620px), 1fr));
}

.mod-log-results-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.mod-log-results-count {
	font-size: 0.85em;
	font-weight: bold;
	color: #7a5c2a;
	white-space: nowrap;
}

.mod-log-record-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mod-log-trade-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid #dbc992;
	border-radius: 14px;
	min-width: 0;
}

.mod-log-trade-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.mod-log-trade-card-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mod-log-trade-card-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.mod-log-trade-card-date {
	color: #7f5b16;
	font-size: 0.82em;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mod-log-trade-card-user {
	font-size: 1.45em;
	font-weight: bold;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.mod-log-trade-card-role {
	color: #5e4510;
	font-size: 0.92em;
	line-height: 1.3;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mod-log-trade-card-role a {
	font-weight: bold;
}

.mod-log-trade-card-flag {
	padding: 8px 10px;
	background: #fff0cf;
	border: 1px solid #d3a854;
	border-radius: 10px;
	color: #7a4500;
	font-size: 0.84em;
	line-height: 1.3;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mod-log-trade-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
}

.mod-log-trade-metric {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: rgba(255, 251, 235, 0.78);
	border: 1px solid #e1cf9a;
	border-radius: 12px;
	min-width: 0;
}

.mod-log-trade-metric--accent {
	background: linear-gradient(180deg, #fff7de 0%, #f7e4b0 100%);
	border-color: #d3b165;
}

.mod-log-trade-metric-label {
	color: #7b5a1e;
	font-size: 0.76em;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mod-log-trade-metric-value {
	color: #402500;
	font-size: 1.25em;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.mod-log-trade-metric-note {
	color: #6a5425;
	font-size: 0.82em;
}

.mod-log-detail-btn,
button.mod-log-detail-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 9px 14px;
	background: linear-gradient(180deg, #fff6db 0%, #f0cb67 100%);
	border: 1px solid #c4931a;
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
	color: #4d2c00;
	cursor: pointer;
	font-size: 0.84em;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.mod-log-detail-btn:hover,
.mod-log-detail-btn:focus {
	filter: brightness(1.04);
}

.mod-log-status-pill,
.mod-log-inline-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 0.82em;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
}

.mod-log-status-pill--success {
	background: #dff7dd;
	border: 1px solid #6fb36d;
	color: #1b6b28;
}

.mod-log-status-pill--warning {
	background: #fff2b8;
	border: 1px solid #d8b550;
	color: #8a5a00;
}

.mod-log-status-pill--danger {
	background: #fce4e4;
	border: 1px solid #d88484;
	color: #7a1010;
}

.mod-log-inline-pill--neutral {
	background: #f3ead1;
	border: 1px solid #d5bf88;
	color: #5a4308;
}

.mod-log-inline-pill--success {
	background: #dff7dd;
	border: 1px solid #6fb36d;
	color: #1b6b28;
}

.mod-log-inline-pill--warning {
	background: #fff0cf;
	border: 1px solid #d3a854;
	color: #7a4500;
}

.mod-log-inline-pill--danger {
	background: #fce4e4;
	border: 1px solid #d88484;
	color: #7a1010;
}

.mod-log-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mod-log-item-cell {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.mod-log-item-cell strong,
.mod-log-item-cell a {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mod-log-thumb,
.mod-log-chip-thumb {
	flex-shrink: 0;
	background: white;
	object-fit: contain;
}

.mod-log-thumb {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	padding: 2px;
}

.mod-log-chip {
	display: inline-flex;
	align-items: flex-start;
	max-width: 100%;
	padding: 4px 8px;
	background: #fff4cf;
	border: 1px solid #e2cc86;
	border-radius: 999px;
	color: #4b2d00;
	font-size: 0.84em;
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: anywhere;
}

.mod-log-chip span {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mod-log-chip-thumb {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	margin-right: 6px;
	padding: 1px;
}

.mod-log-empty {
	margin: 0;
	padding: 12px;
	background: rgba(255, 255, 255, 0.62);
	border: 1px dashed #e4cd8b;
	border-radius: 10px;
	color: #6a5425;
}

.mod-log-modal-content {
	width: min(960px, calc(100% - 32px));
	margin: 6vh auto;
	border-radius: 14px;
	overflow: hidden;
}

.mod-log-modal-shell {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.mod-log-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.mod-log-modal-header h3 {
	margin: 0;
	color: #432800;
}

.mod-log-modal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mod-log-modal-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.mod-log-modal-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 12px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid #e4cd8b;
	border-radius: 12px;
}

.mod-log-modal-panel h4 {
	margin: 0;
	color: #432800;
}

@media (max-width: 900px) {
	.mod-log-table--dense {
		min-width: 680px;
	}
}

@media (max-width: 700px) {
	.mod-log-tool {
		padding: 14px;
	}

	.mod-log-result-header,
	.mod-log-results-header {
		flex-direction: column;
		align-items: stretch;
	}

	.mod-log-results-count {
		white-space: normal;
	}

	.mod-log-trade-card-top {
		flex-direction: column;
		align-items: stretch;
	}

	.mod-log-detail-btn,
	button.mod-log-detail-btn {
		align-self: stretch;
	}

	.mod-log-modal-grid {
		grid-template-columns: 1fr;
	}
}

/* Sign-up code list */
.mod-signup-codes-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mod-signup-code-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid #e4cd8b;
	border-radius: 8px;
}

.mod-signup-code-num {
	color: #8e5f00;
	font-weight: bold;
	font-size: 0.85em;
	min-width: 1.5em;
	flex-shrink: 0;
}

.mod-signup-code-val {
	font-family: monospace;
	font-size: 0.93em;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #3b2800;
}

.mod-signup-code-copy {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: #8e5f00;
	font-size: 1em;
	padding: 4px 6px;
	border-radius: 4px;
	line-height: 1;
	transition: background 120ms ease;
}

.mod-signup-code-copy:hover {
	background: rgba(142, 95, 0, 0.12);
}

/* DEV DASHBOARD */

.dev-panels-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 4px;
}

/* Panel heading icon — slightly larger than text, vertically centred */
.dev-panel-icon {
	font-size: 1.15em;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

/* Icon + text gap inside buttons */
.dev-btn i {
	font-size: 1.1em;
	margin-right: 5px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	flex-shrink: 0;
}

.dev-panel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.dev-panel-grid > * {
	min-width: 0;
}

.dev-field-label {
	display: block;
	font-weight: bold;
	color: #4b2d00;
	font-size: 0.95em;
}

.dev-field-hint {
	display: block;
	font-weight: normal;
	font-size: 0.85em;
	color: #7a5c2a;
	margin-top: 2px;
}

.dev-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

/* Base dev button — used for CSV links and action buttons */
.dev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: linear-gradient(180deg, #fffdf0 0%, #f5e9be 100%);
	border: 2px solid #c9a030;
	border-radius: 8px;
	color: #4b2d00;
	font-weight: bold;
	font-family: inherit;
	font-size: 0.92em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
	box-shadow: 0 2px 5px rgba(100, 74, 15, 0.10);
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.dev-btn:hover {
	background: linear-gradient(180deg, #fff8d8 0%, #f0dc98 100%);
	border-color: #a07010;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(100, 74, 15, 0.16);
	color: #4b2d00;
	text-decoration: none;
}

.dev-btn:active {
	transform: translateY(0);
}

.dev-btn--full {
	width: 100%;
	justify-content: center;
}

.dev-btn--danger {
	background: linear-gradient(180deg, #fff4f2 0%, #ffd4cc 100%);
	border-color: #c03020;
	color: #6b1000;
}

.dev-btn--danger:hover {
	background: linear-gradient(180deg, #ffe8e4 0%, #ffb8a8 100%);
	border-color: #901800;
	color: #6b1000;
}

.dev-btn--success {
	background: linear-gradient(180deg, #edfde8 0%, #bff0be 100%);
	border-color: #1f7a30;
	color: #0a4010;
}

.dev-btn--success:hover {
	background: linear-gradient(180deg, #d8f8d0 0%, #a0e09e 100%);
	border-color: #0f5820;
	color: #0a4010;
}

.dev-btn--warning {
	background: linear-gradient(180deg, #fffbe8 0%, #f8d878 100%);
	border-color: #b08010;
	color: #4b2d00;
}

.dev-btn--warning:hover {
	background: linear-gradient(180deg, #fff5d0 0%, #f0c840 100%);
	border-color: #806000;
	color: #4b2d00;
}

.dev-btn--ghost {
	background: rgba(255, 255, 255, 0.5);
	border-color: #b0a070;
	color: #5f4820;
}

.dev-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.8);
	border-color: #7a6040;
	color: #4b2d00;
}

/* CSV export grid */
.dev-csv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

/* Path management layout */
.dev-path-layout {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dev-path-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dev-path-input-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.dev-path-input-row .form-control {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}

.dev-path-input-row .dev-btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.dev-path-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dev-path-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid #e4cd8b;
	border-radius: 8px;
}

.dev-path-code {
	font-family: monospace;
	font-size: 0.93em;
	color: #3b2800;
	word-break: break-all;
}

.dev-path-restore {
	flex-shrink: 0;
	font-size: 0.85em;
	font-weight: bold;
	color: #c03020;
	text-decoration: none;
}

.dev-path-restore:hover {
	text-decoration: underline;
}

/* ── Dev Asset Uploader ─────────────────────────────────── */
.dev-uploads-error {
	color: #b03030;
}

.dev-uploads-tight {
	margin-bottom: 10px;
}

.dev-uploads-listing {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dev-uploads-search-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.dev-uploads-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.dev-uploads-search-icon {
	position: absolute;
	left: 10px;
	font-size: 1.1rem;
	color: var(--color);
	opacity: 0.55;
	pointer-events: none;
}

.dev-uploads-search input.form-control {
	width: 100%;
	padding-left: 32px;
	padding-right: 32px;
}

.dev-uploads-search-clear {
	position: absolute;
	right: 6px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color);
	opacity: 0.6;
	padding: 4px;
	border-radius: 4px;
	font-size: 1rem;
	line-height: 0;
}

.dev-uploads-search-clear:hover {
	opacity: 1;
	background-color: var(--grid_select);
}

.dev-uploads-search-status {
	font-size: 0.85rem;
	opacity: 0.7;
	color: var(--color);
}

.dev-uploads-row.is-filtered-out {
	display: none;
}

.dev-uploads-section {
	border: 1px solid #e4cd8b;
	border-radius: 10px;
	background-color: var(--grid_even);
	overflow: hidden;
}

.dev-uploads-section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background-color: var(--grid_head);
	border-bottom: 1px solid #e4cd8b;
	font-weight: 600;
	color: var(--color);
}

.dev-uploads-section-count {
	margin-left: auto;
	background-color: var(--grid_even);
	color: var(--color);
	border: 1px solid #e4cd8b;
	border-radius: 999px;
	padding: 1px 10px;
	font-size: 0.8rem;
	font-weight: 600;
}

.dev-uploads-folder-grid {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px;
}

.dev-uploads-folder-tile {
	background-color: var(--grid_odd);
	border: 1px solid #e4cd8b;
	border-radius: 6px;
	transition: background-color 120ms ease, transform 120ms ease;
}

.dev-uploads-folder-tile:hover {
	background-color: var(--grid_select);
	transform: translateY(-1px);
}

.dev-uploads-folder-tile .dev-uploads-folder-link {
	padding: 8px 10px;
	width: 100%;
	min-width: 0;
}

.dev-uploads-folder-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 auto;
	min-width: 0;
}

.dev-uploads-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 0.95rem;
}

.dev-uploads-crumb {
	color: var(--link_color);
	text-decoration: none;
}

.dev-uploads-crumb:hover {
	text-decoration: underline;
}

.dev-uploads-crumb--current {
	font-weight: 600;
	color: var(--color);
}

.dev-uploads-crumb-sep {
	opacity: 0.45;
	color: var(--color);
}

.dev-uploads-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--grid_even);
}

.dev-uploads-section > .dev-uploads-list {
	border: none;
}

.dev-uploads-row {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid #e4cd8b;
	color: var(--color);
}

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

.dev-uploads-row--folder {
	grid-template-columns: 1fr;
}

.dev-uploads-row-preview {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dev-uploads-ext {
	text-transform: uppercase;
	font-size: 0.7rem;
	color: var(--color);
	opacity: 0.65;
	display: flex;
	align-items: center;
	gap: 4px;
}

.dev-uploads-row-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dev-uploads-row-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--link_color);
	text-decoration: none;
}

.dev-uploads-row-name:hover {
	text-decoration: underline;
}

.dev-uploads-row-size {
	font-size: 0.8rem;
	opacity: 0.7;
	color: var(--color);
}

.dev-uploads-row-actions {
	display: flex;
	gap: 6px;
}

.dev-uploads-folder-link {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--link_color);
	text-decoration: none;
	padding: 4px 0;
	font-weight: 500;
}

.dev-uploads-folder-link:hover {
	text-decoration: underline;
}

.dev-uploads-tabs {
	display: inline-flex;
	margin: 4px 0 14px;
	padding: 3px;
	background-color: var(--grid_odd);
	border: 1px solid #e4cd8b;
	border-radius: 8px;
	gap: 0;
}

.dev-uploads-tab {
	border: none;
	background: transparent;
	color: var(--color);
	padding: 6px 14px;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background-color 120ms ease, color 120ms ease;
	opacity: 0.75;
}

.dev-uploads-tab:hover {
	opacity: 1;
}

.dev-uploads-tab.is-active {
	background-color: var(--link_color);
	color: var(--bgcolor);
	font-weight: 600;
	opacity: 1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.dev-uploads-tab-pane {
	display: none;
	padding-top: 4px;
}

.dev-uploads-tab-pane.is-active {
	display: block;
}

.dev-uploads-file-picker {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.dev-uploads-file-picker > input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dev-uploads-file-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 18px 14px;
	border: 2px dashed #e4cd8b;
	border-radius: 10px;
	background-color: var(--grid_odd);
	color: var(--color);
	cursor: pointer;
	text-align: center;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.dev-uploads-file-drop:hover,
.dev-uploads-file-picker > input[type="file"]:focus + .dev-uploads-file-drop {
	background-color: var(--grid_select);
	border-color: var(--link_color);
}

.dev-uploads-file-drop-icon {
	font-size: 1.8rem;
	color: var(--link_color);
	line-height: 1;
}

.dev-uploads-file-drop-primary {
	font-weight: 600;
}

.dev-uploads-file-drop-secondary {
	font-size: 0.85rem;
	opacity: 0.75;
}

.dev-uploads-file-drop-status {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--link_color);
}

.dev-uploads-status {
	margin-top: 14px;
	padding: 10px 12px;
	background-color: var(--grid_odd);
	border-radius: 6px;
	color: var(--color);
}

.dev-uploads-status-bar {
	height: 6px;
	background-color: var(--grid_even);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 6px;
}

.dev-uploads-status-fill {
	height: 100%;
	background-color: var(--link_color);
	width: 0%;
	transition: width 200ms ease;
}

.dev-uploads-status-fill.is-indeterminate {
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--link_color) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: dev-uploads-shimmer 1.2s linear infinite;
}

@keyframes dev-uploads-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

.dev-uploads-status-text {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.85;
	color: var(--color);
}

.dev-uploads-modal {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}

.dev-uploads-modal[hidden] {
	display: none;
}

.dev-uploads-modal-card {
	background-color: var(--bgcolor);
	color: var(--color);
	border: 1px solid #e4cd8b;
	border-radius: 8px;
	padding: 20px 24px;
	max-width: 600px;
	width: 100%;
	max-height: 80vh;
	overflow: auto;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

.dev-uploads-modal-title {
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color);
}

.dev-uploads-modal-list {
	max-height: 220px;
	overflow: auto;
	background-color: var(--grid_odd);
	color: var(--color);
	padding: 8px 12px 8px 24px;
	border-radius: 6px;
	margin: 8px 0 16px;
	font-size: 0.85rem;
}

.dev-uploads-result-block {
	margin-bottom: 14px;
}

.dev-uploads-result-block h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 4px;
	color: var(--color);
}

.dev-uploads-result-count {
	font-size: 0.85rem;
	opacity: 0.7;
	color: var(--color);
}

.dev-uploads-result-block ul {
	margin: 0;
	padding-left: 20px;
	font-size: 0.85rem;
	max-height: 200px;
	overflow: auto;
	color: var(--color);
}

#dev-uploads-files,
#dev-uploads-folder,
#dev-uploads-zip {
	color: var(--color);
}

@media (max-width: 700px) {
	.dev-panel-grid {
		grid-template-columns: 1fr;
	}

	.dev-csv-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}

	.dev-path-input-row {
		flex-direction: column;
	}

	.dev-btn-row {
		flex-direction: column;
		align-items: stretch;
	}

	.dev-btn-row .dev-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Grundo Warehouse */

.wh-inflation {
	margin-bottom: 1em;
}

/* Art Dashboard & other Art Team pages */
.resources-list {
	display: flex;
	flex-flow: row wrap;
	gap: 2%;
}

.resources-list ul {
	box-sizing: border-box;
	flex-basis: 48%;
	display: inline-block;
}

.list-no-marker,
.list-no-marker ul {
	list-style-type: none;
}

.expand-title:hover,
.arrow:hover {
	cursor: pointer;
}

.expand-title:after,
.arrow:after {
	content: " ↓";
}

.expand-title-expanded:after {
	content: " ↑";
}

.capitalize {
	text-transform: capitalize;
}

.header-2-column {
	width: 48%;
	text-align: left;
}

.header-full-width {
	width: 100%;
	text-align: left;
}

.confirmation {
	min-width: 400px;
	max-width: 510px;
	background: #f3f3f3;
	margin: 20px auto;
	border: 2px solid #000;
	line-height: 1.2rem;
	font-size: 0.8rem;
	border-collapse: collapse;
}

.confirmation td {
	padding: 5px 8px;
	width: 50%;
}

.confirmation tr:nth-of-type(2n) {
	background: #ddd;
}

.confirmation ul {
	padding-inline-start: 17px;
	margin-block-start: 0.3em;
	margin-block-end: 0.3em;
}

.summary {
	text-align: center;
	border-bottom: 1px solid #000;
	font-weight: bold;
	font-size: 0.9rem;
}

/* Petpet Matcher */

.pp-matcher-container {
	display: grid;
	gap: 10px;
}

.pp-matcher-full {
	grid-template-areas:
		"neopet preview"
		"petpet preview";
}

.pp-matcher-one-neopet {
	grid-template-areas:
		"petpet preview";
}

.pp-matcher-scrollbox {
	width: 365px;
	max-height: 210px;
	overflow: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	padding: 5px;
	align-items: flex-start;
	gap: 5px;
}

.petpet-scrollboxes {
	grid-area: petpet;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.neopet-container {
	grid-area: neopet;
}

.preview-container {
	grid-area: preview;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.pp-matcher-scrollbox img {
	max-width: 100px;
	cursor: pointer;
}

.qs-item-button {
	border: 1px solid var(--color);
	;
	height: 50px;
	width: 50px;
	border-radius: 50px;
	cursor: pointer;
}

.qs-item-button-off {
	border: 1px solid var(--color);
	;
	height: 50px;
	width: 50px;
	border-radius: 50px;
	cursor: pointer;
	filter: brightness(.67) opacity(.8) grayscale(1) !important;
}


.boon-info {
	display: flex;
	width: 100%;
	border: 2px solid darkgreen;
	align-items: center;
	padding: 5px 5px 5px 5px;
	margin: auto;
	box-sizing: border-box;
}

/* Item Search */


.item-search-form {
	flex: 1;
	/* This makes the form take up the remaining space */
	/* Add any additional styling for your form here */
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 1em auto;
}

.item-search-form label {
	display: block;
	text-align: left;
	flex: 1;
	margin-right: auto;
}


.item-search-form-row {
	display: block;
}

.rarity-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.25em;
}

.sdb-rarity-row {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.25em;
}


.sticky-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	font-weight: bold;
	font-size: 14px;
	z-index: 1000;
	background-color: var(--sticky-color);
	;
	color: #FFFFFF;
	padding: 1px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sticky-header a {
	color: #cbd9f2;
}

.sticky-header a:visited {
	color: #d9cbf2;
}

.sticky-header a:hover {
	text-decoration: underline;
}

.sticky-header p {
	width: 94%;
}


#dismiss-header-button {
	cursor: pointer;
	position: absolute;
	top: 7px;
	right: 4px;
	width: 40px;
	height: 40px;
	min-height: 40px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.55);
	font-size: 2.7em;
	transform: translateY(-3px);
	border: none;
	color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 998;
	transition: color 0.3s ease;
}

#dismiss-x {
	display: block;
	opacity: 1.0;
	margin-top: -2px;
	/* Moves the "✖" upwards. Adjust this value as needed */
	color: #000000;
	/* Ensures the "✖" is not affected by the transparency */
}

#dismiss-x:hover {
	color: #141414;
	/* Darken the color on hover */
}

/* Jelly World Stuff For Item View */

.jellyworld {
	background: none;
	border: 0;
	padding: 0;
	color: green;
	font-weight: bold;
	cursor: pointer;
}

.jellyworld:hover {
	color: orange;
}

.help-menu-button {
	font-family: "Heffaklump";
	color: black;
	font-size: 1.4em;
	font-weight: normal;
	border: 2px solid black;
	border-radius: 5px;
	padding: 4px;
	background-color: #E6E6FA;
}

.help-menu-button:hover {
	background-color: #CF9FFF;
}

/* Sliding Menu */

.sliding-menu {
	height: 100%;
	width: 225px;
	position: fixed;
	top: 0;
	left: -250px;
	background: rgba(0, 0, 0, 0.4);
	/* Semi-transparent background */
	backdrop-filter: blur(10px);
	/* Apply the blur effect */
	-webkit-backdrop-filter: blur(10px);
	/* For iOS/Safari */
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 5px;
	color: white;
	z-index: 10000;
}

.sliding-menu h2 a {
	font-family: "Heffaklump";
	text-align: center;
	font-size: 1.714rem;
	color: white;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.sliding-menu h2 a:hover {
	color: #ffcf38;
	;
}

.sliding-menu h2 {
	font-family: "Heffaklump";
	text-align: center;
	font-size: 1.714rem;
	color: white;
}

.menu-alert-link {
	font-weight: normal;
	color: white;
}

.menu-alert-link:hover {
	color: #CBC3E3;
}

.notification-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 15px;
	margin: 5px 10px;
	background: rgba(68, 68, 68, 0.5);
	/* Semi-transparent background */
	backdrop-filter: blur(10px);
	/* Apply the blur effect */
	border-radius: 5px;
	transition: background 0.3s;
	word-wrap: break-word;
	overflow: hidden;
	box-sizing: border-box;
}

.notification-card:hover {
	background: rgba(85, 85, 85, 0.5);
	/* Semi-transparent background */
	backdrop-filter: blur(10px);
	/* Apply the blur effect */
	cursor: pointer;
}

.hide-icon {
	height: auto !important;
	width: auto !important;
	font-size: 50px;
}

.all-alerts-card {
	padding: 0px;
}

.notification-icon {
	width: 24px;
	height: 24px;
	margin-right: 10px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
}

.notification-description {
	font-size: 1rem;
	/*14px*/
	flex-grow: 1;
	/* Allow the description to take up available space */
}

.notification-delete-button {
	position: absolute;
	top: 0%;
	right: .25em;
	background: none;
	border: none;
	color: white;
	font-size: 1.42rem;
	cursor: pointer;
	height: fit-content;
	width: fit-content;
	display: inline-block;
	padding: 0;
}


.notification-delete-button:hover {
	color: #CBC3E3;
}

/* Alerts */
.alert {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.alert_news {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/news.png');
}

.alert_patch {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/patch.png');
}

.alert_warning {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/warning.png');
}

.alert_neomail {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/neomail.png');
}

.alert_item {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/item.png');
}

.alert_trade_accept {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/trade_accept.png');
}

.alert_trade_reject {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/trade_reject.png');
}

.alert_trade_withdraw {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/trade_withdraw.png');
}

.alert_trade_offer {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/trade_offer.png');
}

.alert_trade_withdraw {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/trade_withdraw.png');
}

.alert_trade_expire {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/trade_expire.png');
}

.alert_friend_request {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/friend_request.png');
}

.alert_friend_accept {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/friend_accept.png');
}

.alert_transfer {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/transfer.png');
}

.alert_mpic {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/mpic.png');
}

.alert_lc {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/lc.png');
}

.alert_school {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/neoschool.png');
}

.alert_bty {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/bty.png');
}

.alert_training {
	background-image: url('https://grundoscafe.b-cdn.net/misc/bpicon.png');
}

.alert_battle_accept {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/battle_accept.png');
}

.alert_battle_reject {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/battle_reject.png');
}

.alert_battle_challenge {
	background-image: url('https://grundoscafe.b-cdn.net/alerts/basic/battle_challenge.png');
}

.alert_monotony {
	background-image: url('https://grundoscafe.b-cdn.net/misc/themes/default/monotony.png');
}

.alert_boards {
	background-image: url('https://grundoscafe.b-cdn.net/misc/themes/default/board_mention.png');
}

.alert_guilds {
	background-image: url('https://grundoscafe.b-cdn.net/misc/themes/default/guild_mention.png');
}

/* End Alerts */

.med-image.border-1 {
	background-color: white;
}

.error-image {
	border-radius: 21px;
}

.error-back {
	border-radius: 10px;
}


/* Give Aways */

.giveaway-grid-container {
	width: 100%;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Creates a 4 by R grid */
	grid-auto-rows: 1fr;
	align-items: stretch;
	overflow-wrap: break-word;
	justify-content: center;
	align-items: start;
	gap: 10px;
	margin: auto;
}

.giveaway-item {
	flex-direction: column;
	position: relative;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 20px;
	box-shadow: 2px 5px rgba(128, 128, 128, 0.3);
	padding: 10px;
	text-align: center;
	transition: background-color 0.3s ease;
	box-sizing: border-box;
	height: 100%;
	cursor: pointer;
	overflow-wrap: break-word;
	max-width: 100%;
	font-size: 14px;
}

.giveaway-item .searchhelp {
	width: 80%;
	margin-bottom: 1em;
}

.giveaway-item h3 {
	margin: 0px;
	font-size: 1.2em;
	overflow-wrap: break-word;
}

.giveaway-title {
	font-family: "Heffaklump";
	margin: 2px 0;
	font-size: 1.8em;
	min-height: 0em;
}

.giveaway-image {
	border-radius: 5px;
}

.giveaway-item.special {
	background-color: #faea96;
	border: 2px solid #fcd303;
	box-shadow: 0 0 10px #fcd303;
	transition: box-shadow 0.3s ease-in-out;
}

.giveaway-item.special .giveaway-title {
	color: #000;
}

.giveaway-item.self {
	background-color: #8dd4fc;
	border: 2px solid #1008ff;
	box-shadow: 0 0 10px #1008ff;
	transition: box-shadow 0.3s ease-in-out;
}

.giveaway-item.self .giveaway-title {
	color: #1008ff;
}

.giveaway-item.nf {
	background-color: #e493fa;
	border: 2px solid #c900ff;
	box-shadow: 0 0 10px #c900ff;
	transition: box-shadow 0.3s ease-in-out;
}

.giveaway-item.nf .giveaway-title {
	color: #c900ff;
}

.giveaway-item.entered {
	background-color: #e6ffe6;
	border: 2px solid #5cb85c;
	box-shadow: 0 0 10px #5cb85c;
	transition: box-shadow 0.3s ease-in-out;
}

.giveaway-item.entered .giveaway-title {
	color: #5cb85c;
}

.giveaway-item.closed {
	background-color: #faad61;
	border: 2px solid #fc7f03;
	box-shadow: 0 0 10px #fc7f03;
	transition: box-shadow 0.3s ease-in-out;
}

.giveaway-item.closed .giveaway-title {
	color: #bd5a04;
}

.giveaway-item.error {
	background-color: #CD5C5C;
	border: 2px solid #AA0000;
	box-shadow: 0 0 10px #AA0000;
	transition: box-shadow 0.3s ease-in-out;
}

.giveaway-item.error .giveaway-title {
	color: #AA0000;
}


/* Gourmets */

.gourmet-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}

.gourmet-item {
display: inline-block;
cursor: move;
}

.view-toggle {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/** Music HST **/

.instruments-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	justify-content: center;
	padding: 20px;
	max-width: 100%;
}

.instrument-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 8px;
	min-width: fit-content;
}

.instrument-item img {
	object-fit: contain;
	margin-bottom: 10px;
}

.instrument-name {
	height: 55px;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}

.instrument-skill-level {
	font-size: 12px;
}

.skill-level {
	width: 100%;
	background-color: #e0e0e0;
	border-radius: 5px;
	overflow: hidden;
	height: 15px;
	margin-top: 5px;
}

.skill-bar {
	height: 100%;
	background-color: #4caf50;
	border-radius: 5px 0 0 5px;
}

/* Spa */

.ugga-spa-info-box {
	position: relative;
	width: 480px;
	display: flex;
	align-items: center;
	padding: 10px;
	margin: auto;
	background-color: #be793f;
}

.spa-host {
	margin-right: 10px;
	width: 75px;
}

.ugga-spa-info-box .orange {
	color: #542700;
}

.ugga-spa-close-btn {
	position: absolute;
	top: 1%;
	right: 1%;
	background-color: transparent;
	border: none;
	font-size: 1.5em;
	font-weight: bold;
	cursor: pointer;
	color: #000;
	padding: 0;
	line-height: 1;
	height: auto !important;
}

.ugga-spa-close-btn:hover {
	color: red;
}
/* Virtupets */

.virtupets-box {
	width: 540px;
	display: flex;
	align-items: center;
	background-color: #d3d3ff;
	margin: auto;
	padding: 5px;
}

.vp-loudspeaker {
	margin-right: 10px;
}

/* Battledome */

.bd-challenge-form-container {
	width: 100%;
	margin: 0 auto;
	padding: 20px;
}

.bd-challenge-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color);
}

.bd-label-cell {
	background-color: #FFCB87;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--color);
	padding: 5px;
}

.bd-input-cell {
	background-color: #FFFFFF;
	border: 1px solid var(--color);
	padding: 5px;
	text-align: left;
}

.bd-description {
	font-size: 0.85em;
	color: #666;
}

.bd-submit-cell {
	background-color: #FCAC77;
	text-align: center;
	padding: 15px;
}

.bd-status-cell {
	background-color: #DD3938;
}

.light-yellow-bg {
	background-color: #FFFDDC;
}

/* Newbie Stuff */

.tooltip {
	position: absolute;
	background-color: var(--bgcolor);
	opacity: 80%;
	border: 1px solid var(--color);
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	max-width: 400px;
	z-index: 1001;
	transition: opacity 0.3s ease;
}

.tooltip ul {
	padding-left: 20px;
	margin-top: 10px;
}

.tooltip ul li {
	margin-top: 5px;
}

.newbie_tool_mobile {
	display: none
}

.newbie_tool_1 {
	left: 280px;
	top: 250px;
}

.newbie_tool_2 {
	left: 300px;
	top: 45px;
}

.newbie_tool_3 {
	width: 200px;
	left: 550px;
	top: 220px;
}

.newbie_tool_4 {
	width: 200px;
	left: 140px;
	top: 150px;
}

.newbie_tool_5 {
	width: 400px;
	left: 228px;
	top: 48px;
}

.newbie_tool_6 {
	left: 280px;
	top: 180px;
}

.newbie_tool_7 {
	left: 280px;
	top: 250px;
}

.tooltip-alert-icon {
	position: absolute;
	left: -86px;
	top: 0px;
	z-index: 1001;
}

/* Lab */
.zap-image {
	height: 80px;
	width: auto;
}


/* Fade-in effect */
.tooltip.hidden {
	opacity: 0;
	pointer-events: none;
}

.tooltip.visible {
	opacity: 1;
}

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

.fullscreen-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

/* Hospital */

.hospital-info-table td {
	padding: 15px;
	vertical-align: middle;
}

.hospital-info-text {
	text-align: left;
}

/* Table Styling */
#hospital {
	width: 100%;
	margin: 20px 0;
	border: 1px solid #000;
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	/* Removes spacing between cells */
}

#hospital th,
#hospital td {
	border: 1px solid #000;
	padding: 12px 15px;
	text-align: center;
}

#hospital th {
	background-color: #4CAF50;
	color: white;
	cursor: pointer;
	position: relative;
	user-select: none;
	font-size: 1rem;
}

#hospital th:hover {
	background-color: #367d39;
}

/* Pick Your Own */
#pick-your-own-wrapper {
	display: flex;
	align-items: center;
}

#pick-your-own-map {
	display: grid;
	grid-template-rows: 60px 350px 55px;
	grid-template-columns: 55px 350px 55px;
	grid-template-areas:
		"p1 arrow-up p2"
		"arrow-left map arrow-right"
		"p3 arrow-down p4";
	margin: 0 auto;
}

#pick-your-own-map div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	height: auto;
}

#pick-your-own_arrow-up {
	grid-area: arrow-up;
}


#pyo-up-arrow {
	transform: rotate(270deg);
}

#pick-your-own_arrow-left {
	grid-area: arrow-left;
}

#pyo-left-arrow {
	transform: rotate(180deg);
}

#pick-your-own_arrow-right {
	grid-area: arrow-right;
}

#pick-your-own_arrow-down {
	grid-area: arrow-down;
}

#pyo-down-arrow {
	transform: rotate(90deg);
}


#pick-your-own_map {
	grid-area: map;
}

#punnet-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto 0;
	background-image: url("https://grundoscafe.b-cdn.net/misc/punnet.png");
	width: 478px;
	height: 270px;
}

#punnet {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	height: 200px;
	max-width: 300px;
}

#punnet-wrapper img {
	height: 80px;
}

.scratchcard {
	display: grid;
	grid-template-rows: repeat(3, 50px);
	grid-template-columns: 150px repeat(3, 50px);
	justify-content: center;
	margin: auto;
}

#desert-scratchie {
	grid-template-rows: repeat(3, 50px);
	grid-template-columns: 133px repeat(3, 50px);
	gap: 11px;
	height: 184px;
	width: 340px;
	padding-top: 14px;
	background-size: contain;
	background-repeat: no-repeat;
}

.ldsc_blank {
	height: 50px;
	width: 50px;
	background-color: black;
	padding: 3px;
	box-sizing: border-box;
	cursor: pointer;
}

.ldsc_blank img {
	height: 100%;
	width: 100%;
}

.scratchcard .small-image {
	cursor: pointer;
}

/* Common container for each input to ensure alignment and consistent width */
.input-container {
  width: 100%;
  margin-bottom: 1em;
}

/* Ensure all inputs inside login-input are full width */
.login-input input:not([type="checkbox"]){
  width: 100%;
  box-sizing: border-box;
}

/* Container for the password field with relative positioning */
.password-container {
  position: relative;
  width: 100%;
}

/* Add extra padding to the password input to accommodate the eye icon */
.password-container input {
  width: 100%;
  padding-right: 2.5em; /* extra space for the icon */
  box-sizing: border-box;
  position: relative;
}

/* Overlayed eye icon */
.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
  color: #888;
}

@media screen and (max-device-width: 992px) {
	html {
		font-size: var(--mobile_font_size);
	}

	.searchhelp img {
		width: var(--search_helper_width);
	}
}

/* Battlepedia tooltips */

.bd-tooltip {
  position: relative;
  display: inline-block;
}

.bd-tooltip .tooltip-box {
	visibility: hidden;
	width: max-content;
	max-width: 180px;
	font-weight: normal;
	background-color: whitesmoke;
	color: #1f1f1f;
	text-align: center;
	border-radius: 0px;
	border: 1px solid #1f1f1f;
	padding: 5px 5px;
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translate(0, -50%);
}

.bd-tooltip .right {
	left: calc(100% + 10px);
}

.bd-tooltip .right::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: calc(50% - 4px);
  right: calc(100% - 4px); 
  background-color: whitesmoke;
  margin-top: -5px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent transparent #1f1f1f #1f1f1f;
  transform: translate(0, 50%) rotate(45deg);
}

.bd-tooltip .left {
	right: calc(100% + 10px);
}

.bd-tooltip .left::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: calc(50% - 4px);
  left: calc(100% - 4px); 
  background-color: whitesmoke;
  margin-top: -5px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent transparent #1f1f1f #1f1f1f;
  transform: translate(0, 50%) rotate(225deg);
}

.bd-tooltip:hover .tooltip-box {
  visibility: visible;
}

.bd-tooltip p:first-child {
	margin-top: 0;
}

.bd-tooltip p:last-child {
	margin-bottom: 0;
}

.bd-tooltip div:first-child {
	margin-top: 0;
}

.bd-tooltip div:last-child {
	margin-bottom: 0;
}

/* BD weapon select */
.weapon-span {
	height: 4rem;
    display: flex;
    align-items: center;
	flex-direction: column;
}

/* Guild mail history */
.guild-mail-entry {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px 14px;
    overflow-wrap: break-word;
    word-break: break-word;
}


/* Daily Dare */
.dd-table {
    width: 100%;
    border-collapse: collapse;
}

.dd-table th,
.dd-table td {
    border: 1px solid #000;
    padding: 6px;
    text-align: center;
}

.dd-table thead th {
    background: #ddd;
}

.dd-row.dd-locked {
    background: #e0e0e0;
}

.dd-row.dd-available {
    background: #ffffff;
}

.dd-row.dd-pending {
    background: #fff2cc;
}

.dd-row.dd-complete {
    background: #d9ead3;
}

.dd-hidden {
    display: none;
    background: #eee;
}

.dd-challenge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
	justify-content: center;
}

.dd-challenger {
    flex: 1 1 0;
    min-width: 150px;
    padding: 8px;
    text-align: center;
}

.dd-img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto 5px auto;
}