/* BASIC STYLES */

:root {
	--input-border-radius: 2px;
	/* vertical padding is 0 so the control height is driven by --button_size /
	   line-height (not propped up by padding) — lets Small/Medium take effect.
	   horizontal padding stays for readable side gutters. */
	--input-padding: 0 0.5em;
	/* Shared line-height for all sized form controls (buttons, inputs, selects,
	   wrapped selects). This sets the natural floor — lower it to let smaller
	   button_size values take effect; raise it for more breathing room. */
	--control-line-height: 1.1;
}

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;
}

/* ============================================================================
   GLOBAL FORM CONTROLS  —  buttons · inputs · selects · checkboxes · sizing
   ----------------------------------------------------------------------------
   Base layer (ALWAYS active). Layered, conditional overrides live in:
     • style_darkmode.css  → dark-mode colors/theming for these same controls
     • mobile.css          → mobile sizing/padding for these same controls
     • utility_style.css   → width helpers (.small-input … .full-width) & .form-control

   HEIGHT TOKENS
     --button_size        base control height; set per user in
                          core/templates/core/_global_headers.html (default 40px)
     --min-button-height  derived in mobile.css = max(--button_size, 25px);
                          read everywhere as var(--min-button-height, var(--button_size))

   HEIGHT MODIFIERS (opt-in classes that change height)
     .match-button-size          force an element to exactly button height
     .follow-mobile-size         adopt the button min-height (match adjacent inputs)
     .button-matched-input-size  half-height variant (mobile; currently disabled)
     .no-bs-ignore-mobile        mobile-only min-height + larger font

   HEIGHT OPT-OUTS (classes that skip the automatic sizing above)
     .ignore-button-size   skip button min-height sizing
     .ignore-input-size    skip input/select/checkbox min-height sizing
   ============================================================================ */

/* -- Inherit page typography on every form element -- */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

/* -- Button-like elements: cursor, radius, padding -- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	cursor: pointer;
	padding: var(--input-padding);
}

button:not(.dev-btn),
input[type="button"]:not(.dev-btn),
input[type="submit"]:not(.dev-btn),
input[type="reset"]:not(.dev-btn) {
	border-radius: var(--input-border-radius);
}

/* -- Button-like elements: height (opt out with .ignore-button-size) -- */
/* line-height + zero vertical padding keep the natural floor low (~font-size),
   so Small/Medium button_size values actually take effect instead of being
   swallowed by intrinsic content height. height:auto lets multi-line buttons
   still grow past the token. */
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(--min-button-height, var(--button_size));
	height: auto;
	line-height: var(--control-line-height);
	/* NOTE: vertical padding intentionally NOT set here — it comes from
	   --input-padding (0 on desktop). Setting padding-top/bottom here would win
	   on specificity over mobile.css's touch padding and flatten mobile inputs
	   while leaving <button> padded (button/input height mismatch on mobile). */
}

/* -- Text-like inputs & textarea: shared radius/padding/box-sizing (matches .select-wrapper height) -- */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="range"]),
textarea.form-control {
	box-sizing: border-box;
	border-radius: var(--input-border-radius);
	padding: var(--input-padding);
}

/* -- Input / select height (opt out with .ignore-input-size) -- */
.select-wrapper:not(.ignore-input-size) {
	min-height: var(--min-button-height, var(--button_size));
}

body :not(.select-wrapper) > select:not(.ignore-input-size),
input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.ignore-input-size):not(.ignore-button-size):not(.select-wrapper.ignore-input-size *),
textarea.form-control,
.follow-mobile-size {
	min-height: var(--min-button-height, var(--button_size));
	/* tight line-height lowers the natural floor so the token controls height
	   down to ~font-size. Vertical padding comes from --input-padding (0 on
	   desktop) — NOT set here, so mobile.css's touch padding still wins. */
	line-height: var(--control-line-height);
}

/* textarea is multi-line: keep its own padding/height, don't flatten it */
textarea.form-control {
	line-height: 1.5;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* .follow-mobile-size's min-height AND line-height tie with .form-control (1.5em)
   and lose by load order; this compound selector (0,2,0) wins so a
   .form-control.ignore-button-size.follow-mobile-size submit (e.g. the games
   "Go!" button) matches adjacent text inputs. Without the line-height it keeps
   .form-control's 1.5em and renders taller than inputs once the mobile font
   scales up past the min-height floor (wide mobile widths). */
.form-control.follow-mobile-size {
	min-height: var(--min-button-height, var(--button_size));
	line-height: var(--control-line-height);
}

/* -- Checkboxes & radios: sizing (opt out with .ignore-input-size) -- */
input[type="checkbox"]:not(.ignore-input-size),
input[type="radio"]:not(.ignore-input-size) {
	width: 1.35rem;
	height: 1.35rem;
	margin: 0.1em 0.25em;
	vertical-align: middle;
	flex-shrink: 0;
}

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

/* -- Height helper: force an element to exactly button height -- */
.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;
}

/* NOTE: global form-element typography & textarea base moved up into
   "GLOBAL FORM CONTROLS" near the top of this file. */

summary:hover {
	cursor: pointer;
}

/* Hide native disclosure triangle site-wide */
details > summary {
	list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: none; }

/* FA chevron on all summaries via ::before */
details > summary::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f04b";
	margin-right: 5px;
	font-size: 0.8em;
	display: inline-block;
	transition: transform 200ms ease;
}
details[open] > summary::before {
	transform: rotate(90deg);
}
/* Suppress ::before on summaries that already have an explicit icon.
   Covers any summary using a named chevron class OR any boxicons chevron
   (class contains "bx-chevron"), so adding a new icon class never causes
   double-chevrons without a separate rule change here. */
details > summary:has(.summary-chevron)::before,
details > summary:has(.details-chevron)::before,
details > summary:has([class*="bx-chevron"])::before {
	display: none;
}

.summary-chevron {
	transition: transform 200ms ease;
	font-size: 0.8em;
	margin-right: 4px;
	display: inline-block;
}
details[open] > summary .summary-chevron {
	transform: rotate(90deg);
}

/* 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_theme_select {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#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;
}

/* Admin-only "Modify poll question" button, sits under the vote/results */

/* 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 {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	background: none;
	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 */
}

/* Staff Adjust Mode (Item Search) */
.staff-adjust-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	margin: 8px 0;
}

.staff-adjust-toggle.on {
	background: linear-gradient(180deg, #eaf3ff 0%, #b9d6ff 100%);
	border-color: #2a5db0;
	color: #103060;
}

.staff-adjust-panel {
	display: none;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	width: 100%;
}

.staff-adjust-controls {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

.staff-adjust-help {
	max-width: 460px;
	font-size: 0.9em;
	border: 1px solid #c9a030;
	border-radius: 0.5em;
	background: linear-gradient(180deg, #fffdf0 0%, #f7eecb 100%);
	color: #4b2d00;
	padding: 4px 10px;
}

.staff-adjust-help summary {
	cursor: pointer;
	font-weight: bold;
}

.staff-adjust-help-body p {
	margin: 6px 0;
}

.adjust-checkbox-wrap {
	display: none;
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 1;
	background: linear-gradient(180deg, #fffdf0 0%, #f5e9be 100%);
	border: 1px solid #c9a030;
	border-radius: 5px;
	padding: 3px;
	line-height: 0;
	box-shadow: 0 1px 3px rgba(100, 74, 15, 0.15);
}

.adjust-active .adjust-checkbox-wrap {
	display: block;
}

.adjust-active .inv-item {
	cursor: pointer;
}

.adjust-active .inv-item > a {
	pointer-events: none;
}

.adjust-checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
	margin: 0;
	accent-color: #c9a030;
}

.adjust-active .inv-item.selected {
	outline: 3px solid #c9a030;
	outline-offset: 2px;
	border-radius: 4px;
}

.staff-adjust-bar {
	display: none;
	position: sticky;
	bottom: 0;
	z-index: 20;
	gap: 12px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 10px;
	margin-top: 10px;
	background: linear-gradient(180deg, #fffdf0 0%, #f0e4b8 100%);
	border-top: 2px solid #c9a030;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 -3px 8px rgba(100, 74, 15, 0.15);
}

.staff-adjust-submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}


.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: 5em;
}

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;
	position: relative;
}

.reaction-corner-badge {
	position: absolute;
	top: -12px;
	right: -10px;
	padding: 2px 6px;
	line-height: 0;
	background-color: var(--bgcolor);
	border: 1px solid var(--color);
	border-radius: 12px;
	z-index: 2;
}

.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 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_data {
	background-color: #ffffff;
}

.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 6;
}

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

.nm_reaction {
	justify-content: center;
}

/* 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 / SITETOOLS — Legacy at_section components
   ============================================================ */

.island-music-card {
	border-bottom: 2px solid #eadfc0;
	padding: 1.25em 1em;
	text-align: center;
}

.island-music-card:first-child {
	border-top: 2px solid #eadfc0;
}

.island-music-card:nth-child(even) {
	background-color: #fffdf5;
}

.island-music-card .caption-text {
	font-size: 1.05em;
	padding: 0.25em 0.5em 0.75em;
}

.island-music-card .award-container {
	align-items: center;
}

.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 {
	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;
}

/* Space map — same aspect-ratio-box pattern as #daily-container so the canvas
   has a deterministic size at Phaser boot (keeps click hitboxes aligned). */
#map-container {
	width: 90%;
	max-width: 550px;
	/* native game width */
	margin: 0 auto;
	/* Centers the container horizontally */
	position: relative;
}

#map-container::before {
	content: "";
	display: block;
	padding-top: 72.727%;
	/* 400 / 550 — maintains the 550:400 aspect ratio */
}

#map-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 !important;
	outline: none !important;
	background: none !important;
	cursor: pointer !important;
	color: var(--link_color) !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: inherit;
	font-weight: bold !important;
}

/* Challenger-name buttons sit on fixed per-arena cell colors (see 1p_select.html).
   The theme link color clashes with several of those backgrounds, so force black
   text in both light and dark mode — it clears AA contrast on every arena color. */
.bd_challenger_button.btn-link {
	color: #000 !important;
}

/* 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;
}

.reaction-option {
	display: inline-block;
	padding: 3px;
	line-height: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.1s ease, transform 0.1s ease;
}

.neomail-reactions.is-collapsed {
	display: none;
}

.reaction-option:hover {
	opacity: 1;
	transform: scale(1.15);
}

.reaction-option.reaction-selected {
	opacity: 1;
	border-color: var(--color);
	background-color: var(--bgcolor);
}

.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;
}

.hot_topics_details {
	width: 100%;
	border: solid var(--color);
	border-width: 1px 1px 0 1px;
	margin-bottom: 1em;
}

.hot_topics_details:not([open]) {
	border-bottom: 1px solid var(--color);
}

.hot_topics_summary {
	background-color: #ffcc00;
	padding: 4px;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
}

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

.hot_topics_table a {
	font-weight: normal;
}

.ht_col_header {
	background-color: #ffcc00;
	justify-content: center;
	border: solid var(--color);
	border-width: 1px 1px 1px 0;
	display: flex;
	align-items: center;
	padding: 4px;
}

.ht_cell {
	border: solid var(--color);
	border-width: 0 1px 1px 0;
	padding: 4px;
	display: flex;
	align-items: center;
}

.ht_col_header:nth-child(4n),
.ht_cell:nth-child(4n) {
	border-right: none;
}

.ht_topic {
	padding-left: 6px;
}

.ht_center {
	justify-content: center;
}

.ht_cell:nth-child(8n + 5),
.ht_cell:nth-child(8n + 6),
.ht_cell:nth-child(8n + 7),
.ht_cell:nth-child(8n + 8) {
	background-color: #f1f3f0;
}

.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);
	border-top: 1px solid var(--color);
	gap: 0.25em;
}

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

.post_after {
	background-color: #ffcc00;
	grid-column: span 2;
	min-height: 1.8em;
	border: solid var(--color);
	border-width: 1px 0;
	/* Gap below the reaction bar separates this post from the next, so the
	   reaction bar reads as this post's footer rather than the next's header. */
	margin-bottom: 0.85em;
}

.topic_table > .post_after:last-child {
	margin-bottom: 0;
}

.board-reaction-bar {
	/* Reaction emoticons are forced to a fixed width with auto height, so the
	   tallest in the set (angel, 16x22 -> 1.375x its width) sets the row height.
	   Chips and the add button are pinned to this so the whole row stays uniform
	   regardless of which emoticons are present. Scaling the single
	   --reaction-emoticon-width token (e.g. on mobile) scales the row uniformly. */
	--reaction-emoticon-width: 16px;
	--reaction-emoticon-max-height: calc(var(--reaction-emoticon-width) * 1.375);
	/* tallest emoticon + chip vertical padding (1px x2) + border (1px x2) */
	--reaction-control-height: calc(var(--reaction-emoticon-max-height) + 4px);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3em;
	width: 100%;
}

.board-reaction-counts {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3em;
}

/* Pill that shows a reaction emoticon and how many people picked it. */
.board-reaction-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-height: var(--reaction-control-height);
	padding: 1px 8px 1px 5px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	background-color: #ffffff;
	color: #444;
	font-size: 0.714rem;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.08s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.board-reaction-chip:hover {
	background-color: #fffbe6;
	border-color: rgba(0, 0, 0, 0.3);
}

.board-reaction-chip.reaction-selected {
	background-color: #fff2bf;
	border-color: #e0a200;
	color: #6b4d00;
}

.board-reaction-emoticon {
	width: var(--reaction-emoticon-width);
	height: auto;
	display: block;
}

/* "Add a reaction" trigger: an icon button, anchors the floating picker. */
.board-reaction-add {
	position: relative;
	display: inline-flex;
}

.board-reaction-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--reaction-control-height);
	height: var(--reaction-control-height);
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	background-color: #ffffff;
	color: #6b6b6b;
	cursor: pointer;
	transition: transform 0.08s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.board-reaction-toggle:hover,
.board-reaction-toggle.is-open {
	background-color: #fffbe6;
	border-color: #e0a200;
	color: #b07d00;
	transform: translateY(-1px);
}

.board-reaction-toggle-icon {
	width: 16px;
	height: 16px;
	display: block;
}

/* Floating emoji popover anchored above the trigger, iMessage/Slack style. */
.board-reaction-picker {
	position: absolute;
	left: 0;
	bottom: calc(100% + 7px);
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.board-reaction-picker.is-collapsed {
	display: none;
}

.board-reaction-picker .reaction-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border-radius: 50%;
	line-height: 0;
	transition: transform 0.1s ease, background-color 0.1s ease;
}

.board-reaction-picker .reaction-option:hover {
	background-color: #fff2bf;
	transform: scale(1.3);
}

.board-reaction-picker .reaction-option.reaction-selected {
	background-color: #ffe48a;
}

.board-reaction-picker .board-reaction-emoticon {
	width: calc(var(--reaction-emoticon-width) + 3px);
	height: auto;
}

.board-reaction-bar .topic-reply-link {
	float: none;
	margin-left: auto;
}

.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;
}

.np_form [type="text"].full-width,
.np_form [type="number"].full-width {
	width: 100%;
}

/* 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: flex-end;
	align-items: center;
}

.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 / SITETOOLS — Legacy admin 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: var(--grid_head);
}

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

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

.rpt-card {
	border: 1px solid rgba(128,128,128,0.35);
	border-radius: 0.375em;
	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: 0.1875em;
	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-dev-flag-tag {
	display: inline-flex;
	align-items: center;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 1;
	padding: 0 0.55em;
	min-height: 1.8em;
	border-radius: 0.1875em;
	background: rgba(100,180,255,0.22);
	color: #adf;
	border: 1px solid rgba(100,180,255,0.5);
}
.rpt-btn--flagged {
	background: rgba(100,180,255,0.18);
	color: #adf;
	border-color: rgba(100,180,255,0.45);
}
.rpt-btn--flagged:hover { background: rgba(100,180,255,0.28); }
.rpt-card__notes {
	padding: 0.45em 0.75em 0.5em;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}
.rpt-note {
	display: flex;
	gap: 0.5em;
	align-items: baseline;
	font-size: 0.85em;
}
.rpt-note__meta {
	white-space: nowrap;
	opacity: 0.55;
	flex-shrink: 0;
}
.rpt-note__body { opacity: 0.9; }
.rpt-note-drawer {
	padding: 0.5em 0.75em 0.6em;
	border-top: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.03);
}
.rpt-note-form {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.rpt-note-input {
	width: 100%;
	box-sizing: border-box;
	resize: none;
	overflow-y: hidden;
	font-size: 0.85em;
	padding: 0.4em 0.5em;
}
.rpt-note-actions {
	display: flex;
	align-items: center;
	gap: 0.4em;
}
.rpt-note-hint {
	flex: 1;
	font-size: 0.78em;
	opacity: 0.45;
	font-style: italic;
}
.rpt-note-actions .rpt-btn {
	flex: 1;
	justify-content: center;
	max-width: 25%;
}
.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: 0.1875em;
	border: 1px solid rgba(128,128,128,0.35);
	opacity: 0.8;
	white-space: nowrap;
	margin-left: auto;
}
.rpt-mail-link {
	margin-left: 0.25em;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}
.rpt-mail-link img {
	display: block;
	width: 1.125em !important;
	height: 1.125em !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: 12.5em;
	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: 4em;
	height: 4em;
	object-fit: cover;
	border-radius: 0.25em;
	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: center;
	flex-wrap: wrap;
	gap: 0.4em 0.5em;
}
.rpt-card__actions-left {
	display: flex;
	align-items: center;
	gap: 0.35em;
	flex-wrap: wrap;
}
.rpt-card__actions-right {
	display: flex;
	align-items: center;
	gap: 0.35em;
	flex-shrink: 0;
	margin-left: auto;
}
.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: 0.25em;
	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.3);
	color: inherit;
	font-weight: normal;
	padding-inline: 0.6em;
}
.rpt-btn--ghost:hover {
	background: rgba(128,128,128,0.1);
	border-color: rgba(128,128,128,0.5);
	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: 0.25em;
	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: 0.25em;
	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: 0.1875em;
	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: 0.25em;
	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: -0.625em;
	right: -0.625em;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 1.125em;
	line-height: 1.875em;
	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: 0.25em;
	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: 0em 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: 0.625em;
}

#fc_table.fc_pirate>div:first-of-type {
	padding: 0.125em;
}

.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: 0.375em;
}

.wl_grid>.last-header {
	border-top-right-radius: 0.375em;
}

.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;
}

.ww-wisher{
    justify-content: left !important;
    padding: .5em !important;
}

.wishlist-status-icon {
  vertical-align: middle;
  margin-right: .5em;
}

.wishlist-status-online {
  color: green;
  font-size: 0.55em;
}

.wishlist-status-muted {
  opacity: .8;
  font-size: 0.8em;
}

.wishlist-status-icon-tight {
  margin-right: .5em;
}

/* MARKET GRIDS */

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

.market_grid>div {
  display: flex;
  padding: 0.3125em;
  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;
}

.market_grid.gardens-grid {
	grid-template-columns: 1.8fr 1.2fr 0.7fr 0.7fr;
}

.market_grid.gardens-results-grid {
	grid-template-columns: 2fr 3fr;
}

.gardens-grid .align-left {
	justify-content: flex-start;
	text-align: left;
}

.gardens-grid>.data:not(.justify-right):not(.align-left),
.gardens-grid>.action:not(.justify-right):not(.align-left) {
	justify-content: center;
}

.gardens-grid .yellow,
.gardens-grid .green {
	font-weight: bold;
	white-space: nowrap;
}

.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: 0.5em;
	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: 0.5em;
	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: 0.5em;
	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: 0.1875em;
}

.qs-hidden-count {
	margin-top: 0.1875em;
}

.gallery-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.125em 0.3125em;
    border-radius: 0.1875em;
    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 {
	width: max-content;
	grid-template-columns: 2fr 2fr 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: 0em;
}

.profile [type="checkbox"] {
	width: 1.35rem;
}

.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: 0.1875em;
	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-search {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: .33em;
	padding: 2px 5px;
	min-height: auto;
	font-size: 1rem;
	border-radius: .25em;
	border-color: var(--color) !important;
}

.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: 0.3125em;
	/* 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: 0.3125em;
	/* Rounded corners */
	overflow: hidden;
	/* Hide overflow to ensure rounded corners */
}

.aio-inv-dropdown-menu p {
	font-size: 1.14em;
	margin: 0;
	padding: 0.75em 1em;
	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: 0.75em 1em;
	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: 0.625em;
	width: 40px;
}

.aio-inv-dropdown-menu button img.pet-dropdown-icon {
	margin-right: 0.625em;
	width: 40px;
	border-radius: 0.3125em;
}

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

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

.inv-dropdown-menu button.neomail-gift-action,
.aio-inv-dropdown-menu button.neomail-gift-action {
	background-color: var(--grid_select);
	box-shadow: inset 4px 0 0 var(--link_color);
	font-weight: bold;
}

.inv-dropdown-menu button.neomail-gift-action:hover,
.inv-dropdown-menu button.neomail-gift-action:focus,
.aio-inv-dropdown-menu button.neomail-gift-action:hover,
.aio-inv-dropdown-menu button.neomail-gift-action:focus {
	background-color: var(--grid_select);
	box-shadow: inset 4px 0 0 var(--hover_color);
}

.aio-quantity-circle {
	text-transform: none;
	text-shadow: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: absolute;
	top: -0.3125em;
	right: -0.3125em;
	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: 0.625em;
}

.aio-large-quantity-circle {
	text-transform: none;
	text-shadow: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: absolute;
	top: 0em;
	right: 0em;
	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: 0.625em;
}

.pet-aio-dropdown-icon {
	background: transparent !important;
	border: none !important;
	border-radius: none !important;
	margin-right: 0.625em !important;
	width: 40px !important;
	border-radius: 0.3125em !important;
}

.aio-dropdown-icon {
	background: transparent !important;
	border: none !important;
	border-radius: 0em !important;
	margin-right: 0.625em !important;
	width: 40px !important;
}

.aio-placeholder-collapsed {
	height: 75px;
	padding-bottom: 0em !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: 1.25em;
	width: 100%;
	margin: auto;
	position: relative;
	box-sizing: border-box;
}


.close-modal {
	color: #aaa;
	float: right;
	font-size: 1.75em;
	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: 6.25em 3.5em auto 9.375em;
	gap: 0.625em;
	align-items: center;
}

#random_event_log:nth-child(n + 3) {
	overflow-wrap: break-word;
}

/* NeoDeck */
.nav-container {
	text-align: center;
	display: inline-block;
	padding: 0.3125em;
	margin: 0;
}

.nav-button {
	display: inline-block;
	padding-right: 0.625em;
	padding-left: 0.625em;
	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: 0.125em;
	margin: auto;
	width: 100%
}

#bd-news>div:not(.bd-links) {
	padding: 0.25em;
	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: 0.125em;
}

.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: 0.3125em;
	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: 0.3125em;
	text-align: center;
	display: flex;
}

.battlepedia-item-new .item-picture {
	grid-area: a;
	display: flex;
	width: auto;
}

.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;
}

.bd-inactive-ability {
	opacity: 0.4;
	filter: alpha(opacity=40);
	border: 4px solid transparent;
}

.bd-active-ability {
	border: 4px solid green;
}

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: 0.625em;
	border: 1px solid var(--color);
	font-size: 0.95em;
}

.about_gormball_player img {
	float: right;
	margin: 0 0.3125em 0.3125em;
	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: 0.125em;
}

.guild-sidebar-menu {
	border: 2px solid var(--border-color);
	padding: 0;
}

.guild-sidebar-menu>div,
.guild-logo,
.guild-main {
	padding: 0.375em;
}

.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: 0.25em;
}

.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;
}

.create-guild-table {
	margin: auto;
	border: 2px solid black;
	border-radius: 0.625em;
	padding: 0.3125em;
}

.g_item {
	display: inline-block;
	width: 6.625em;
	text-align: center;
	vertical-align: top;
	padding-bottom: 0.625em;
}

  .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: 0.1875em;
    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: 0.0625em;
    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: 0.25em;
}

.menu-box h2 {
	font-family: "Heffaklump";
	color: black;
	font-size: 1.4em;
	font-weight: normal;
	border: 2px solid black;
	border-radius: 0.3125em;
	padding: 0.25em;
}

.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;
}

/* ============================================================
   ADMIN / SITETOOLS — Dashboard shell & metric cards
   ============================================================ */

.mod-dashboard {
	background: linear-gradient(180deg, #fffdf1 0%, #fff7db 100%);
	border: 2px solid #dcbf6a;
	border-radius: 1em;
	padding: 1.125em;
	box-sizing: border-box;
	box-shadow: 0 10px 24px rgba(100, 74, 15, 0.08);
}

.mod-dashboard-intro {
	margin-bottom: 1.125em;
}

.mod-dashboard-eyebrow,
.mod-dashboard-panel-kicker {
	margin: 0 0 0.25em 0;
	color: #8e5f00;
	font-weight: bold;
	letter-spacing: 0.04em;
    font-size: 1.35em;
}

.mod-dashboard-title {
	margin: 0 0 0.5em 0;
	line-height: var(--control-line-height);
	color: #4b2d00;
}

.mod-dashboard-copy {
	margin: 0;
	color: #5f4b21;
}

.mod-dashboard-top {
	display: block;
	margin-bottom: 1.125em;
	grid-template-columns: 1fr;
}

.mod-dashboard-panel {
	background-color: rgba(255, 255, 255, 0.9);
	border: 2px solid #e4cd8b;
	border-radius: 0.875em;
	padding: 1em;
	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: 0.75em;
	margin-bottom: 0.625em;
}

.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: 0.375em 0.75em;
	background-color: #fff0b8;
	border: 2px solid #3d2a00;
	border-radius: 62.4375em;
	font-weight: bold;
	color: #513100;
	white-space: nowrap;
}

.mod-dashboard-table-wrap {
	margin-top: 0.875em;
	overflow-x: auto;
}

.mod-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	background-color: #fffdf5;
	border-radius: 0.75em;
	overflow: hidden;
}

.mod-dashboard-table th,
.mod-dashboard-table td {
	padding: 0.75em 0.875em;
	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: 0.375em;
	padding: 0.375em 0.625em;
	border: 1px solid #bda35b;
	border-radius: 62.4375em;
	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: 0.875em;
	margin-bottom: 1.125em;
}

.mod-dashboard-metric-card {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	min-width: 0;
	min-height: 7.5em;
	padding: 1em;
	background: linear-gradient(160deg, #fffef8 0%, #fff0c7 100%);
	border: 2px solid #dfc57c;
	border-radius: 0.875em;
	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(-0.125em);
	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;
}

/* Left-aligned labelled text box for read-only detail sections inside a dev
   panel (e.g. Item Details). Matches the metric-card palette. */
.item-detail-box {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0.875em 1em;
	background: linear-gradient(160deg, #fffef8 0%, #fff6dd 100%);
	border: 2px solid #dfc57c;
	border-radius: 0.875em;
	color: #3b2800;
}

.item-detail-box__label {
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #8e5f00;
}

.item-detail-box p {
	margin: 0;
}

.item-detail-box p + p {
	margin-top: 0.35em;
}

/* Compact label/value grid for Item Details quick facts */
.item-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
	gap: 0.5em 1.25em;
}

.item-facts-grid > div {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	min-width: 0;
}

.item-fact-label {
	font-size: 0.72em;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #8e5f00;
}

.item-fact-value {
	font-weight: bold;
	overflow-wrap: anywhere;
}

/* Status / flag pill row */
.item-detail-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em;
}

.playerstats-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.75em, 1fr));
	gap: 0.875em;
	margin-bottom: 0.875em;
}

.playerstats-search-grid label {
	margin: 0;
}

.playerstats-search-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.25em;
	margin-top: 0.25em;
}

.playerstats-search-toggles label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	color: #5f4b21;
	font-weight: bold;
	cursor: pointer;
}

.mod-dashboard-tool-card {
	width: 48%;
	margin-bottom: 1.5em;
}

.mod-dashboard-tool-card p {
	margin: 0.5em 0.25em 0 0.25em;
	color: #493300;
}

/* ── Staff Wiki: audience and visibility selectors ── */
.sw-audience-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
	gap: 0.75em;
	margin-bottom: 0.5em;
}

.sw-audience-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75em;
	min-height: 4.625em;
	padding: 0.875em 2.5em 0.875em 0.875em;
	background-color: #fffdf5;
	border: 2px solid #e4cd8b;
	border-radius: 0.5em;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.sw-audience-card:hover {
	border-color: #c9a73f;
	box-shadow: 0 4px 10px rgba(120, 90, 0, 0.12);
}

.sw-audience-card.is-selected {
	background-color: #fff0b8;
	border-color: #3d2a00;
}

.sw-audience-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sw-audience-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.25em;
	width: 2.25em;
	height: 2.25em;
	border-radius: 50%;
	background-color: #f7ebc1;
	color: #8f6913;
	font-size: 1.1em;
}

.sw-audience-card.is-selected .sw-audience-icon {
	background-color: #3d2a00;
	color: #fff0b8;
}

.sw-audience-copy {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.sw-audience-name {
	font-weight: bold;
	color: #402800;
}

.sw-audience-note {
	font-size: 0.8em;
	color: #7a5a14;
	line-height: 1.25;
}

.sw-audience-check {
	position: absolute;
	top: 50%;
	right: 0.75em;
	width: 1.4em;
	height: 1.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #3d2a00;
	color: #fff0b8;
	font-size: 1em;
	opacity: 0;
	transform: translateY(-50%) scale(0.6);
	transition: opacity 0.15s, transform 0.15s;
}

.sw-audience-card.is-selected .sw-audience-check {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.sw-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
	gap: 0.75em;
	margin-bottom: 0.875em;
}

.sw-team-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25em;
	padding: 1em 0.875em;
	background-color: #fffdf5;
	border: 2px solid #e4cd8b;
	border-radius: 0.875em;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.sw-team-card:hover {
	border-color: #c9a73f;
	box-shadow: 0 4px 10px rgba(120, 90, 0, 0.12);
}

.sw-team-card.is-selected {
	background-color: #fff0b8;
	border-color: #3d2a00;
}

.sw-team-card .sw-team-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sw-team-icon {
	font-size: 1.75em;
	line-height: 1;
	color: #8f6913;
}

.sw-team-card.is-selected .sw-team-icon {
	color: #5d4300;
}

.sw-team-name {
	font-weight: bold;
	font-size: 1.05em;
	color: #402800;
}

.sw-team-roles {
	font-size: 0.8em;
	color: #7a5a14;
}

.sw-team-check {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 1.4em;
	height: 1.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #3d2a00;
	color: #fff0b8;
	font-size: 1em;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s, transform 0.15s;
}

.sw-team-card.is-selected .sw-team-check {
	opacity: 1;
	transform: scale(1);
}

.sw-advanced {
	margin-bottom: 0.5em;
}

.sw-advanced > summary {
	cursor: pointer;
	font-weight: bold;
	color: #6b4d00;
	padding: 0.25em 0;
}

.sw-role-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.625em;
}

.sw-role-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.75em;
	background-color: #fffdf5;
	border: 1px solid #e4cd8b;
	border-radius: 62.4375em;
	font-size: 0.9em;
	color: #402800;
	cursor: pointer;
}

.sw-role-chip input {
	margin: 0;
}

.audience-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background-color: var(--color);
	color: var(--bgcolor);
	vertical-align: middle;
}

/* ── Staff Wiki: doc list ── */
.sw-doc-panel {
	padding-top: 0.75em;
}

.sw-doc-list {
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.sw-doc-list li:first-child .sw-doc-row {
	border-top: none;
}

.sw-doc-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	padding: 0.75em 0.6em;
	border-top: 1px solid #e4cd8b;
	border-radius: 0.5em;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.sw-doc-row:hover {
	background-color: #fbeebc;
	text-decoration: none;
}

.sw-doc-row:hover .sw-doc-row-link {
	color: #8e5f00;
}

.sw-doc-row-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.sw-doc-row-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35em;
}

.sw-doc-row-link {
	font-weight: bold;
	color: #4b2d00;
}

.sw-doc-row-link:hover {
	color: #8e5f00;
}

.sw-doc-row-desc {
	margin: 0;
	font-size: 0.88em;
	color: #7a5c2a;
}

.sw-doc-row-date {
	flex-shrink: 0;
	font-size: 0.8em;
	color: #a07828;
	white-space: nowrap;
	padding-top: 0.15em;
}

.sw-doc-pin {
	font-size: 0.85em;
}

.sw-pinned-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.2em 0.7em;
	background-color: #fff0b8;
	border: 1px solid #c9a030;
	border-radius: 62.4375em;
	font-size: 0.82em;
	font-weight: bold;
	color: #5d4300;
}

.sw-pinned-flag i {
	font-size: 1.05em;
}

.sw-pinned-flag--lock {
	background-color: #ffe1da;
	border-color: #c03020;
	color: #7a1c00;
}

/* The .flex-column display rule otherwise wins over the UA [hidden] rule by
   source order, leaving the art-only fields visible for non-art audiences. */
#art-filters[hidden] {
	display: none;
}

/* ── Article header meta ── */
.sw-article-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55em;
	text-align: center;
	margin-bottom: 0.5em;
}

.sw-article-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}

.sw-article-kicker {
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.7em;
	background-color: #f3e4b4;
	border: 1px solid #d3b257;
	border-radius: 62.4375em;
	font-size: 0.85em;
	font-weight: bold;
	color: #5a3d00;
}

.sw-article-desc {
	margin: 0;
	font-size: 1.18em;
	font-weight: 600;
	color: #4b2d00;
	max-width: 46em;
}

.sw-article-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 0;
	font-size: 0.9em;
	color: #7a5c2a;
}

.sw-meta-sep {
	opacity: 0.5;
}

.sw-article-visibility {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4em;
	margin-top: 1em;
}

.sw-meta-label {
	font-size: 0.9em;
	font-weight: bold;
	color: #a07828;
	margin-right: 0.15em;
}

.sw-vis-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.6em;
	background-color: #fffdf5;
	border: 1px solid #e4cd8b;
	border-radius: 62.4375em;
	font-size: 0.8em;
	color: #5d4300;
}

.sw-doc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.75em;
}

.sw-doc-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.2em 0.6em;
	background-color: #fff4cc;
	border: 1px solid #d4a820;
	border-radius: 62.4375em;
	font-size: 0.82em;
	color: #5a3a00;
}

.doc-content {
	overflow: auto;
}

.doc-content h1 { font-size: 1.6rem; text-align: left; }
.doc-content h2 { font-size: 1.45rem; text-align: left; }
.doc-content h3 { font-size: 1.25rem; text-align: left; }

.preview-area {
	border-bottom: 1px solid var(--color);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.mod-dashboard-legacy-details {
	margin-top: 1.125em;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid #e4cd8b;
	border-radius: 0.75em;
	padding: 0.75em 0.875em;
}

.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: 1em;
}

.mod-dashboard-toggle-copy {
	flex: 1 1 auto;
	min-width: 0;
}

/* Inline title icon before a toggle-row heading */
.mod-dashboard-toggle-copy strong > i.bx {
	font-size: 1.15em;
	vertical-align: middle;
	margin-right: 0.25em;
}

/* A per-toggle action form sits at its content width, not the centred 100% */
.mod-dashboard-toggle-row > .mod-dashboard-switch-form {
	width: auto;
}

.mod-dashboard-toggle-actions {
	flex: 0 0 18.125em;
	max-width: 100%;
}

.mod-dashboard-live-control {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.875em;
	padding: 1em 1.125em;
	margin-top: 0.25em;
	background: linear-gradient(180deg, rgba(255, 250, 234, 0.95) 0%, rgba(255, 243, 204, 0.95) 100%);
	border: 1px solid #e4cd8b;
	border-radius: 0.875em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mod-dashboard-live-section {
	max-width: 43.75em;
}

.mod-dashboard-live-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
}

.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: 35em;
	text-align: center;
	align-self: center;
}

.mod-dashboard-live-switch-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625em;
	width: 100%;
	max-width: 22.5em;
	margin: 0 auto;
	padding: 0.875em 1em;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.42);
	border: 1px solid #dcc88a;
	border-radius: 0.75em;
}

.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: 0.625em;
	padding: 0.5em 0.75em;
	background-color: rgba(255, 247, 219, 0.92);
	border: 1px solid #dcc88a;
	border-radius: 62.4375em;
	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: 4em;
	height: 2.125em;
}

.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: 62.4375em;
	box-shadow: inset 0 2px 4px rgba(72, 52, 0, 0.12);
	transition: background 160ms ease, border-color 160ms ease;
	box-sizing: border-box;
}

.mod-dashboard-switch-slider::before {
	content: "";
	position: absolute;
	height: 1.5em;
	width: 1.5em;
	left: 0.2em;
	top: 0.18em;
	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;
	box-sizing: border-box;
}

.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(1.875em);
}

.mod-dashboard-switch input:focus-visible + .mod-dashboard-switch-slider {
	outline: 2px solid #6b4ec6;
	outline-offset: 0.125em;
}

.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:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.mod-dashboard textarea.form-control {
	width: 100%;
}

.mod-dashboard input.form-control[type="color"] {
	min-height: var(--min-button-height, var(--button_size));
	padding: 0.25em 0.375em;
	border: 2px solid #dcc88a;
	border-radius: 0.625em;
	background: linear-gradient(180deg, #fffef8 0%, #fff4cf 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.mod-dashboard .select-wrapper:not(.ignore-input-size) {
	display: flex;
	align-items: stretch;
	min-height: var(--min-button-height, var(--button_size));
	width: 100%;
	background: linear-gradient(180deg, #fffef8 0%, #fff4cf 100%);
	border: 2px solid #dcc88a;
	border-radius: 0.625em;
	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)) - 0.25em);
	padding: 0 2.5rem 0 0.75em;
	background: transparent;
	color: #4b2d00;
	font-weight: bold;
}

/* Multi-select: remove arrow, restore padding, set a visible height */
.mod-dashboard .select-wrapper:has(select[multiple])::after {
	display: none;
}

.mod-dashboard .select-wrapper select[multiple] {
	min-height: 8em;
	padding: 0.375em 0.75em;
	overflow-y: auto;
	accent-color: #7a5c2a;
}

/* Multi-select option rows: match the dev form palette instead of the OS list.
   The box-shadow inset is required because WebKit/Blink ignore option
   background-color (same technique as the global option rules). */
.mod-dashboard .select-wrapper select[multiple] option {
	background-color: #fffef8;
	color: #4b2d00;
	box-shadow: 0 0 0 100px #fffef8 inset;
}

.mod-dashboard .select-wrapper select[multiple] option:checked {
	background-color: #f0dc98;
	color: #4b2d00;
	box-shadow: 0 0 0 100px #f0dc98 inset;
}

/* Image / file upload drop zone: match the dev-input palette (see .dev-input) */
.mod-dashboard .report-file-drop {
	background-color: #ffffff;
	border-color: #c9a030;
	color: #4b2d00;
}

.mod-dashboard .report-file-drop:hover,
.mod-dashboard .report-file-drop.is-dragover,
.mod-dashboard .report-file-picker > input[type="file"]:focus + .report-file-drop {
	background-color: #fff4cf;
	border-color: #a07010;
}

.mod-dashboard .report-file-drop-icon {
	color: #8e5f00;
}

.mod-dashboard .report-file-drop-secondary,
.mod-dashboard .report-file-drop-status {
	color: #7a5c2a;
}

.mod-dashboard .report-file-drop-status.has-files {
	color: #4b2d00;
}

/* Checkbox rows inside admin panels */
.mod-dashboard .center-checkbox {
	background: rgba(255, 248, 220, 0.55);
	border: 1px solid #dcc88a;
	border-radius: 0.5em;
	padding: 0.5em 0.75em;
}

.mod-dashboard .center-checkbox input[type="checkbox"] {
	accent-color: #7a5c2a;
	width: 1.1rem;
	height: 1.1rem;
}

.mod-status-page {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.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: 0.75em;
	margin-bottom: 0.625em;
}

.mod-status-update-header h2 {
	margin: 0;
	font-size: 1.1em;
	color: #402800;
}

.mod-status-update-form {
	display: flex;
	flex-direction: column;
	gap: 0.625em;
	width: 100%;
	margin-top: 0.75em;
}

.mod-status-select-wrap {
	max-width: none;
}

.mod-status-submit {
	max-width: none;
}

.re-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.re-dashboard-form {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	margin-top: 0.75em;
}

.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: 0.75em 0.875em;
}

.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;
}

/* Panels inside the re-dashboard flex column already get spacing from gap:1em —
   the inherited margin:1em from .mod-dashboard-panel adds unwanted extra space and
   causes wide panels (width:100% + margin) to overflow their container. */
.re-dashboard > .mod-dashboard-panel {
	margin: 0;
}

/* Inside the side-by-side reporting grid the gap handles horizontal spacing;
   the 1em panel margin was doubling up to ~3em of visual gutter. */
.dev-panel-grid > .mod-dashboard-panel {
	margin: 0;
}

/* Direct panel children of dev-panels-wrap use gap for spacing, not margin. */
.dev-panels-wrap > .mod-dashboard-panel {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

/* The .re random-event box has a fixed width of 25.375em which overflows phones.
   Scope the fix to the preview shell so live RE pages are unaffected. */
.re-dashboard-preview-shell {
	overflow-x: hidden;
}
.re-dashboard-preview-shell > .re {
	max-width: 100%;
}

.re-dashboard-card {
	padding: 0.875em 1em;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.52);
	border: 1px solid #e4cd8b;
	border-radius: 0.75em;
}

.re-dashboard-help {
	margin: 0;
	padding: 0.75em 0.875em;
	background: rgba(255, 255, 255, 0.48);
	border: 1px solid #e4cd8b;
	border-radius: 0.625em;
}

.re-dashboard-help summary {
	cursor: pointer;
	font-weight: bold;
	color: #5d4300;
}

.re-dashboard-help p {
	margin: 0.5em 0 0 0;
	color: #5f4b21;
}

.re-dashboard-help strong {
	cursor: pointer;
}

.re-dashboard-preview-shell {
	padding: 0.875em;
	background: rgba(255, 255, 255, 0.42);
	border: 1px dashed #c9a030;
	border-radius: 0.75em;
}

.re-dashboard-preview {
	margin: 0 auto;
}

.re-dashboard-warning {
	margin: 0;
	padding: 0.625em 0.75em;
	border-radius: 0.625em;
	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;
}

/* Grid cells already stretch to the tallest in their row (default grid
   align-items: stretch + height:100% above). Pushing each cell's contents to
   the bottom keeps the label sitting right above its input while still lining
   every input up on the same baseline — so a shorter label gains empty space
   above it, instead of an awkward gap between the label and its field. */
.re-dashboard .re-dashboard-grid--balanced > .flex-column,
.re-dashboard .re-dashboard-timing-grid > .flex-column {
	justify-content: flex-end;
}

.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: 0.625em;
	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: 0.625em;
}

.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: 0.125em;
}

.re-dashboard-rank-list,
.re-dashboard-banned-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.re-dashboard-rank-list li,
.re-dashboard-banned-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.5625em 0.75em;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid #e4cd8b;
	border-radius: 0.5em;
}

.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: 0.75em;
}

@media (max-width: 950px) {
	.mod-dashboard-tool-card {
		width: 48%;
	}
}

@media (max-width: 700px) {
	.mod-dashboard {
		padding: 0.875em;
		border-radius: 0.75em;
	}

	.mod-dashboard-title {
		font-size: 1.7em;
	}

	.mod-dashboard-panel,
	.mod-dashboard-metric-card {
		padding: 0.875em;
	}

	.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: 0.625em;
	}

	.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: 0.875em;
	}

	.mod-dashboard-live-switch-shell {
		max-width: 100%;
	}

	.mod-status-update-form,
	.mod-status-select-wrap,
	.mod-status-submit {
		max-width: 100%;
	}
}

/* ============================================================
   ADMIN / SITETOOLS — Collapsible utility panels (mod-utils-collapsible)
   ============================================================ */

.mod-utils-collapsible {
	border: 2px solid #e4cd8b;
	border-radius: 0.875em;
	overflow: hidden;
}

/* Panels holding an autocomplete dropdown must let it spill past the card edge.
   Re-round the summary corners since the clipping that normally does so is gone. */
.mod-utils-collapsible.mod-utils-collapsible--overflow {
	overflow: visible;
}

.mod-utils-collapsible--overflow > summary {
	border-radius: 0.75em 0.75em 0 0;
}

.mod-utils-collapsible--overflow:not([open]) > summary {
	border-radius: 0.75em;
}

.mod-site-message-panel {
	padding: 0;
}

.mod-utils-collapsible > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.625em;
	padding: 0.875em 1em;
	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: 1.25em;
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.mod-utils-collapsible-body .mod-dashboard-live-switch-shell {
	margin-top: 0.5em;
}

/* 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: 0.5em;
	margin: 0 0 0.5em 0;
	font-weight: bold;
	font-size: 0.97em;
	color: #4b2d00;
}

.mod-util-subheader + * + .mod-util-subheader {
	margin-top: 1em;
}

.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%, 26.875em), 1fr));
	gap: 1em;
}

.mod-log-tool {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: 1em;
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid #e4cd8b;
	border-radius: 0.75em;
	min-width: 0;
}

.mod-log-tool--wide {
	grid-column: 1 / -1;
}

.mod-log-tool-header {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
}

.mod-log-helper {
	margin: 0;
	color: #6a5425;
	line-height: 1.45;
}

.mod-log-form {
	display: flex;
	flex-direction: column;
	gap: 0.625em;
}

.mod-log-result-shell {
	display: flex;
	flex-direction: column;
	gap: 0.875em;
}

.mod-log-result-header,
.mod-log-results-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75em;
}

.mod-log-result-header h3,
.mod-log-results-header h4 {
	margin: 0;
	color: #432800;
}

.mod-log-kicker {
	margin: 0 0 0.25em 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(7.5em, 1fr));
	gap: 0.625em;
}

.mod-log-summary-card {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	padding: 0.75em;
	background: linear-gradient(180deg, #fffef8 0%, #fff4d2 100%);
	border: 1px solid #e0cf9d;
	border-radius: 0.625em;
	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: var(--control-line-height);
	overflow-wrap: anywhere;
}

.mod-log-alert-stack {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.mod-log-alert {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	padding: 0.625em 0.75em;
	background: #fff8dd;
	border: 1px solid #dcc88a;
	border-radius: 0.625em;
	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: 47.5em;
}

.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%, 33.75em), 1fr));
	gap: 0.875em;
}

.mod-log-results-grid--trades {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 38.75em), 1fr));
}

.mod-log-results-panel {
	display: flex;
	flex-direction: column;
	gap: 0.625em;
	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: 0.75em;
}

.mod-log-trade-card {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: 0.875em;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid #dbc992;
	border-radius: 0.875em;
	min-width: 0;
}

.mod-log-trade-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75em;
}

.mod-log-trade-card-meta {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	min-width: 0;
}

.mod-log-trade-card-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}

.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: 0.5em 0.625em;
	background: #fff0cf;
	border: 1px solid #d3a854;
	border-radius: 0.625em;
	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(8.125em, 1fr));
	gap: 0.625em;
}

.mod-log-trade-metric {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	padding: 0.625em 0.75em;
	background: rgba(255, 251, 235, 0.78);
	border: 1px solid #e1cf9a;
	border-radius: 0.75em;
	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: 0.5625em 0.875em;
	background: linear-gradient(180deg, #fff6db 0%, #f0cb67 100%);
	border: 1px solid #c4931a;
	border-radius: 62.4375em;
	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: 0.25em 0.5625em;
	border-radius: 62.4375em;
	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: 0.375em;
}

.mod-log-item-cell {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	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: 2.125em;
	height: 2.125em;
	border-radius: 0.5em;
	padding: 0.125em;
}

.mod-log-chip {
	display: inline-flex;
	align-items: flex-start;
	max-width: 100%;
	padding: 0.25em 0.5em;
	background: #fff4cf;
	border: 1px solid #e2cc86;
	border-radius: 62.4375em;
	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: 1.125em;
	height: 1.125em;
	border-radius: 62.4375em;
	margin-right: 0.375em;
	padding: 0.0625em;
}

.mod-log-empty {
	margin: 0;
	padding: 0.75em;
	background: rgba(255, 255, 255, 0.62);
	border: 1px dashed #e4cd8b;
	border-radius: 0.625em;
	color: #6a5425;
}

.mod-log-modal-content {
	width: min(60em, calc(100% - 2em));
	margin: 6vh auto;
	border-radius: 0.875em;
	overflow: hidden;
}

.mod-log-modal-shell {
	display: flex;
	flex-direction: column;
	gap: 0.875em;
	min-width: 0;
}

.mod-log-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75em;
}

.mod-log-modal-header h3 {
	margin: 0;
	color: #432800;
}

.mod-log-modal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.mod-log-modal-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875em;
}

.mod-log-modal-panel {
	display: flex;
	flex-direction: column;
	gap: 0.625em;
	min-width: 0;
	padding: 0.75em;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid #e4cd8b;
	border-radius: 0.75em;
}

.mod-log-modal-panel h4 {
	margin: 0;
	color: #432800;
}

@media (max-width: 900px) {
	.mod-log-table--dense {
		min-width: 42.5em;
	}
}

@media (max-width: 700px) {
	.mod-log-tool {
		padding: 0.875em;
	}

	.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: 0.375em;
}

.mod-signup-code-item {
	display: flex;
	align-items: center;
	gap: 0.625em;
	padding: 0.5em 0.75em;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid #e4cd8b;
	border-radius: 0.5em;
}

.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: 0.25em 0.375em;
	border-radius: 0.25em;
	line-height: 1;
	transition: background 120ms ease;
}

.mod-signup-code-copy:hover {
	background: rgba(142, 95, 0, 0.12);
}

/* ============================================================
   ADMIN / SITETOOLS — Dev dashboard panels, icons & buttons
   ============================================================ */

.dev-panels-wrap {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-top: 0.25em;
}

/* Panel heading icon — slightly larger than text, vertically centred */
.dev-panel-icon {
	font-size: 1.15em;
	vertical-align: middle;
	position: relative;
	top: -0.0625em;
}

/* Icon + text gap inside buttons */
.dev-btn i {
	font-size: 1.1em;
	margin-right: 0.3125em;
	vertical-align: middle;
	position: relative;
	top: -0.0625em;
	flex-shrink: 0;
}

.dev-panel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

.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: 0.125em;
}

.dev-input,
.dev-textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: var(--min-button-height, var(--button_size));
	padding: 0 0.75em;
	background-color: #ffffff;
	border: 2px solid #c9a030;
	border-radius: 0.875em;
	box-shadow: inset 0 1px 3px rgba(100, 74, 15, 0.07);
	color: #4b2d00;
	font-weight: bold;
	font-family: inherit;
	font-size: 0.92em;
	line-height: var(--control-line-height);
	transition: border-color 120ms ease, box-shadow 120ms ease;
	appearance: none;
	-webkit-appearance: none;
}

.dev-textarea {
	min-height: 6em;
	padding: 0.5em 0.75em;
	line-height: 1.5;
	resize: vertical;
}

.dev-input:focus,
.dev-textarea:focus {
	outline: 2px solid #6b4ec6;
	outline-offset: 0.125em;
	border-color: #a07010;
}

.dev-input::placeholder,
.dev-textarea::placeholder {
	color: #a07828;
	font-weight: normal;
}

.dev-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.25em;
}

/* Base dev button — used for CSV links and action buttons */
.dev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 1em;
	background: linear-gradient(180deg, #fffdf0 0%, #f5e9be 100%);
	border: 2px solid #c9a030;
	border-radius: 0.875em;
	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(-0.0625em);
	box-shadow: 0 4px 10px rgba(100, 74, 15, 0.16);
	color: #4b2d00;
	text-decoration: none;
}

.dev-btn:active {
	transform: translateY(0);
}

/* The .dev-btn display rule otherwise wins over the UA [hidden] rule by
   source order, leaving hidden buttons visible. Restore expected behaviour. */
.dev-btn[hidden] {
	display: none;
}

.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(9.375em, 1fr));
	gap: 0.625em;
}

/* Path management layout */
.dev-path-layout {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.dev-path-form {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.dev-path-input-row {
	display: flex;
	gap: 0.625em;
	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: 0.375em;
}

.dev-path-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.5em 0.75em;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid #e4cd8b;
	border-radius: 0.5em;
}

.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: 0.625em;
}

.dev-uploads-listing {
	display: flex;
	flex-direction: column;
	gap: 0.875em;
}

.dev-uploads-search-row {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	margin-bottom: 0.75em;
}

.dev-uploads-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.dev-uploads-search-icon {
	position: absolute;
	left: 0.625em;
	font-size: 1.1rem;
	color: var(--color);
	opacity: 0.55;
	pointer-events: none;
}

.dev-uploads-search input.form-control {
	width: 100%;
	padding-left: 2em;
	padding-right: 2em;
}

.dev-uploads-search-clear {
	position: absolute;
	right: 0.375em;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color);
	opacity: 0.6;
	padding: 0.25em;
	border-radius: 0.25em;
	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: 0.625em;
	background-color: var(--grid_even);
	overflow: hidden;
}

.dev-uploads-section-header {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.875em;
	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: 62.4375em;
	padding: 0.0625em 0.625em;
	font-size: 0.8rem;
	font-weight: 600;
}

.dev-uploads-folder-grid {
	list-style: none;
	margin: 0;
	padding: 0.625em;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10.625em, 1fr));
	gap: 0.5em;
}

.dev-uploads-folder-tile {
	background-color: var(--grid_odd);
	border: 1px solid #e4cd8b;
	border-radius: 0.375em;
	transition: background-color 120ms ease, transform 120ms ease;
}

.dev-uploads-folder-tile:hover {
	background-color: var(--grid_select);
	transform: translateY(-0.0625em);
}

.dev-uploads-folder-tile .dev-uploads-folder-link {
	padding: 0.5em 0.625em;
	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: 0.375em;
	margin-bottom: 0.75em;
	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: 3.5em 1fr auto;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 0.75em;
	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: 3.5em;
	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: 0.25em;
}

.dev-uploads-row-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 1em;
}

.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: 0.375em;
}

.dev-uploads-folder-link {
	display: flex;
	align-items: center;
	gap: 0.375em;
	color: var(--link_color);
	text-decoration: none;
	padding: 0.25em 0;
	font-weight: 500;
}

.dev-uploads-folder-link:hover {
	text-decoration: underline;
}

.dev-uploads-tabs {
	display: inline-flex;
	margin: 0.25em 0 0.875em;
	padding: 0.1875em;
	background-color: var(--grid_odd);
	border: 1px solid #e4cd8b;
	border-radius: 0.5em;
	gap: 0;
}

.dev-uploads-tab {
	border: none;
	background: transparent;
	color: var(--color);
	padding: 0.375em 0.875em;
	border-radius: 0.375em;
	cursor: pointer;
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	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: 0.25em;
}

.dev-uploads-tab-pane.is-active {
	display: block;
}

.dev-uploads-file-picker {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	margin-bottom: 0.75em;
}

.dev-uploads-file-picker > input[type="file"] {
	position: absolute;
	width: 0.0625em;
	height: 0.0625em;
	padding: 0;
	margin: -0.0625em;
	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: 0.375em;
	padding: 1.125em 0.875em;
	border: 2px dashed #e4cd8b;
	border-radius: 0.625em;
	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,
.dev-uploads-file-drop--dragging {
	background-color: var(--grid_select);
	border-color: var(--link_color);
	border-style: solid;
}

.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-rename-row {
	margin-top: 0.5em;
}

.dev-uploads-rename-wrap {
	display: flex;
	align-items: center;
	border: 1px solid #444;
	border-radius: .2em;
	background-color: white;
	padding: 0 .25em;
	box-sizing: border-box;
	width: 100%;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.dev-uploads-rename-wrap:focus-within {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	border-color: rgba(81, 203, 238, 1);
}

.dev-uploads-rename-wrap input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.5em;
	min-height: 1.5em;
	padding: 0;
	color: inherit;
}

.dev-uploads-rename-ext {
	white-space: nowrap;
	opacity: 0.45;
	pointer-events: none;
	user-select: none;
	font-family: inherit;
	font-size: inherit;
}

.dev-uploads-status {
	margin-top: 0.875em;
	padding: 0.625em 0.75em;
	background-color: var(--grid_odd);
	border-radius: 0.375em;
	color: var(--color);
}

.dev-uploads-status-bar {
	height: 0.375em;
	background-color: var(--grid_even);
	border-radius: 0.25em;
	overflow: hidden;
	margin-bottom: 0.375em;
}

.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: 1.25em;
}

.dev-uploads-modal[hidden] {
	display: none;
}

.dev-uploads-modal-card {
	background-color: var(--bgcolor);
	color: var(--color);
	border: 1px solid #e4cd8b;
	border-radius: 0.5em;
	padding: 1.25em 1.5em;
	max-width: 37.5em;
	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 0.5em;
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--color);
}

.dev-uploads-modal-list {
	max-height: 13.75em;
	overflow: auto;
	background-color: var(--grid_odd);
	color: var(--color);
	padding: 0.5em 0.75em 0.5em 1.5em;
	border-radius: 0.375em;
	margin: 0.5em 0 1em;
	font-size: 0.85rem;
}

.dev-uploads-result-block {
	margin-bottom: 0.875em;
}

.dev-uploads-result-block h4 {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.375em 0 0.25em;
	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: 1.25em;
	font-size: 0.85rem;
	max-height: 12.5em;
	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(8.125em, 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;
	}
}

/* ============================================================
   ADMIN / SITETOOLS — Tool-specific pages
   ============================================================ */

/* Avatar tool — obtain_method key reference */

.av-ref-outer {
	border: 2px solid #e4cd8b;
	border-radius: 0.875em;
	overflow: hidden;
}
.av-ref-outer-head {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.625em;
	padding: 0.875em 1em;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.05em;
	color: #4b2d00;
	background: rgba(255, 248, 225, 0.85);
	user-select: none;
}
.av-ref-outer-head::-webkit-details-marker { display: none; }
.av-ref-outer-head::marker { content: none; }
.av-ref-outer[open] > .av-ref-outer-head { border-bottom: 1px solid #e4cd8b; }
.av-ref-body {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fffdf1;
}
.av-ref-group {
	border-bottom: 1px solid #e4cd8b;
}
.av-ref-group:last-child { border-bottom: none; }
.av-ref-group-head {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1em;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.88em;
	color: #4b2d00;
	background: rgba(255, 248, 225, 0.6);
	user-select: none;
	letter-spacing: 0.02em;
}
.av-ref-group-head::-webkit-details-marker { display: none; }
.av-ref-group-head::marker { content: none; }
.av-ref-group[open] > .av-ref-group-head { border-bottom: 1px solid #e4cd8b; }
.av-ref-chevron {
	transition: transform 200ms ease;
	font-size: 0.95em;
	flex-shrink: 0;
	color: #8e5f00;
}
.av-ref-outer[open] > .av-ref-outer-head .av-ref-chevron,
.av-ref-group[open] > .av-ref-group-head .av-ref-chevron { transform: rotate(90deg); }
.av-ref-list {
	margin: 0;
	padding: 0.25em 0;
}
.av-ref-entry {
	display: grid;
	grid-template-columns: 1fr;
	padding: 0.55em 1.1em 0.55em 1.3em;
	border-bottom: 1px solid rgba(228, 205, 139, 0.4);
}
.av-ref-entry:last-child { border-bottom: none; }
.av-ref-entry dt {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	font-weight: normal;
	margin: 0;
}
.av-ref-entry dt code {
	font-size: 0.88em;
	background: #fef3cc;
	border: 1px solid #d4a820;
	border-radius: 3px;
	padding: 1px 5px;
	color: #5a3a00;
	white-space: nowrap;
}
.av-ref-entry dd {
	margin: 0.2em 0 0;
	font-size: 0.82em;
	color: #7a5c2a;
	line-height: 1.4;
}
.av-ref-ex {
	font-family: monospace;
	font-size: 0.82em;
	color: #8e5f00;
	background: rgba(228, 205, 139, 0.25);
	border-radius: 3px;
	padding: 1px 4px;
}
.av-ref-tag {
	font-size: 0.72em;
	font-weight: bold;
	background: #c9a030;
	color: #fff;
	border-radius: 3px;
	padding: 1px 4px;
	letter-spacing: 0.04em;
	align-self: center;
}
.av-ref-with {
	font-size: 0.72em;
	font-weight: bold;
	background: rgba(228, 205, 139, 0.35);
	color: #6b4500;
	border: 1px dashed #c9a030;
	border-radius: 3px;
	padding: 1px 4px;
	letter-spacing: 0.03em;
	align-self: center;
	white-space: nowrap;
}
.av-ref-type-badge {
	font-size: 0.72em;
	font-weight: bold;
	background: rgba(228, 205, 139, 0.5);
	color: #6b4500;
	border: 1px solid #c9a030;
	border-radius: 3px;
	padding: 1px 5px;
	margin-left: 0.25em;
	letter-spacing: 0.03em;
}
.av-ref-entry--typed {
	grid-template-columns: 6em 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.75em;
}
.av-ref-entry--typed .av-ref-type {
	grid-row: 1 / 3;
	align-self: center;
	font-size: 0.75em;
	font-weight: bold;
	color: #6b4500;
	background: rgba(228, 205, 139, 0.4);
	border: 1px solid #c9a030;
	border-radius: 3px;
	padding: 2px 5px;
	text-align: center;
	white-space: nowrap;
	height: fit-content;
}
.av-ref-entry--typed dt { grid-column: 2; }
.av-ref-entry--typed dd { grid-column: 2; }
.av-ref-note-row {
	padding: 0.45em 1.1em 0.45em 1.3em;
	font-size: 0.82em;
	color: #7a5c2a;
	background: rgba(228, 205, 139, 0.15);
	border-bottom: 1px solid rgba(228, 205, 139, 0.4);
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

/* 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 {
	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: auto;
	padding: 1em;
}

.item-search-form label {
	display: block;
	text-align: left;
	flex: 1;
	margin-right: auto;
}

.item-search-form label.checkbox-full-width {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-right: 0;
}

.staff-filters-details {
	width: 100%;
}

.staff-filters-summary {
	cursor: pointer;
	padding: 0.4em 0.6em;
	font-weight: bold;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.4em;
	user-select: none;
}

.staff-filters-summary::-webkit-details-marker { display: none; }

.staff-filters-summary::before {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 0.7em;
	transition: transform 150ms ease;
}

.staff-filters-details[open] > .staff-filters-summary::before {
	transform: rotate(90deg);
}

.staff-filters-body {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding-top: 0.5em;
}


.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;
	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: transparent;
	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: rgb(255,255,255, .5)
	/* 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;
}

.special-rule-note {
	display: inline-block;
	background-color: #faea96;
	border: 2px solid #fcd303;
	box-shadow: 0 0 8px #fcd303;
	color: #000;
	padding: 4px 12px;
	border-radius: 6px;
}

.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;
}

/* Contact / report form */
.report-table {
    margin: auto;
    padding: 5px;
    border: 1px solid var(--color);
    background-color: var(--bgcolor);
    color: var(--color);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

.report-table td {
    padding: 4px;
    vertical-align: top;
    font-weight: bold;
}

.report-table .report-cell-center {
    text-align: center;
}

.report-table .report-char-counter {
    text-align: center;
    margin-top: 4px;
}

/* All report dropdowns share the full cell width so they line up */
.report-table .select-wrapper {
    display: flex;
    width: 100%;
}

/* -- Report form: native-styled drag & drop image picker -- */
.report-file-picker {
    position: relative;
}

/* Visually hide the native file input but keep it accessible / focusable */
.report-file-picker > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.report-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    padding: 1em 0.875em;
    border: 2px dashed var(--color);
    border-radius: var(--input-border-radius, 4px);
    background-color: var(--grid_odd);
    color: var(--color);
    cursor: pointer;
    text-align: center;
    font-weight: normal;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.report-file-drop:hover,
.report-file-drop.is-dragover,
.report-file-picker > input[type="file"]:focus + .report-file-drop {
    background-color: var(--grid_select);
    border-color: var(--link_color);
}

.report-file-drop-icon {
    width: 2rem;
    height: 2rem;
    color: var(--link_color);
}

.report-file-drop-primary {
    font-weight: bold;
}

.report-file-drop-secondary {
    font-size: 0.85em;
    opacity: 0.75;
}

.report-file-drop-status {
    font-size: 0.85em;
    margin-top: 0.15em;
    word-break: break-word;
}

.report-file-drop-status.has-files {
    color: var(--link_color);
    font-weight: bold;
}

/* == AiO Sidebar customization page (help/sidebar) == */
.sb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4286em;
    padding: 0.4286em 0;
}
.sb-card {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    align-items: center;
    gap: 0.5714em;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5714em 0.8571em;
    border: 1px solid var(--color);
    border-radius: 6px;
    background-color: var(--grid_odd);
}
.sb-grid .sb-card:hover {
    background-color: var(--grid_select) !important;
}
@media (pointer: fine) {
    .sb-card {
        cursor: grab;
    }
    .sb-card:active {
        cursor: grabbing;
    }
}
/* On touch only the drag handle captures the gesture, so the rest of the card
   still scrolls the page and its checkboxes stay tappable. */
.sb-touch-device .sb-card-handle {
    touch-action: none;
    font-size: 1.7rem;
    padding: 0.2em 0.25em;
    margin: -0.2em 0;
    cursor: grab;
}
.sb-card.sb-hidden {
    opacity: 0.45;
}
.sb-css-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.5rem 0 0.75rem;
}
.sb-css-bar-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 1.05rem;
}
.sb-css-bar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sb-css-bar-actions .form-control {
    width: auto;
}
.sb-css-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--link_color);
    color: #fff;
}
.sb-css-badge-default {
    background: transparent;
    color: var(--color);
    border: 1px solid var(--color);
    opacity: 0.7;
}
.sb-css-hint {
    opacity: 0.8;
    font-size: 0.9rem;
}
.sb-css-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5714em;
    min-inline-size: 0;
    margin: 0.75rem 0;
    padding: 0;
    border: 0;
}
.sb-mode-opt {
    display: grid;
    grid-template-columns: 1.5em minmax(0, 1fr);
    align-items: center;
    gap: 0.7143em;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color);
    border-radius: 6px;
    background-color: var(--grid_even);
    line-height: 1.25;
    cursor: pointer;
}
.sb-mode-opt:hover {
    background-color: var(--grid_select);
}
.sb-mode-opt:has(input:checked) {
    border-color: var(--link_color);
    background-color: var(--grid_select);
}
.sb-mode-opt input {
    flex: 0 0 auto;
    margin: 0;
}
.sb-mode-opt small {
    display: block;
    margin-top: 0.15rem;
    opacity: 0.75;
}
.sb-mode-opt span {
    min-width: 0;
}
.sb-css-readonly {
    opacity: 0.78;
}
.sitewide-css-tools {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color);
    border-radius: 6px;
    background-color: var(--grid_even);
}
.sitewide-css-tools p {
    margin: 0 0 0.35rem;
}
.sb-card-handle {
    cursor: grab;
    color: var(--color);
    font-size: 1.2rem;
    line-height: 1;
    user-select: none;
}
.sb-card-handle:active {
    cursor: grabbing;
}
.sb-card-icon {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--color);
    background-color: #fff;
}
.sb-card-icon.small-image {
    width: 40px;
    height: 40px;
}
.sb-card-name {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2857em;
    white-space: nowrap;
    cursor: pointer;
}
.sb-card-gear {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    color: var(--link_color);
    font-size: 1.2em !important;
    line-height: 1;
    padding: 0.25em;
    min-height: 0;
    height: 1.75em;
    width: 1.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}
.sb-card-gear i {
    pointer-events: none;
}
.sb-card-gear:hover,
.sb-card-gear:focus {
    background: none;
    box-shadow: none;
    outline: none;
}
/* panel spans all columns */
.sb-card-panel {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 0.5714em;
    padding-top: 0.5714em;
    margin-top: 0.2857em;
    border-top: 1px solid var(--color);
}
.sb-card.sb-open .sb-card-panel {
    display: flex;
}
.sb-panel-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 0.7143em;
}
.sb-panel-label {
    font-weight: bold;
    white-space: nowrap;
}
.sb-panel-row input[type="text"],
.sb-panel-row input[type="number"],
.sb-panel-row .select-wrapper {
    width: 100%;
    min-width: 0;
}
.sb-card-placeholder {
    width: 100%;
    min-height: 50px;
    border: 1px dashed var(--link_color);
    border-radius: 6px;
    background-color: var(--grid_even);
    box-sizing: border-box;
}
.sb-card.ui-sortable-helper {
    background-color: var(--grid_select);
}
/* section-level options panel */
.sb-opts {
    display: flex;
    flex-direction: column;
    gap: 0.4286em;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8571em 1.1429em;
    margin-bottom: 0.8571em;
    border: 1px solid var(--color);
    border-radius: 6px;
    background-color: var(--grid_even);
}
.sb-opts .select-wrapper {
    margin-left: auto;
    min-width: 220px;
}
.sb-opts .sb-opt-row select {
    width: 100%;
}
/* collapsible info note */
.sb-info {
    margin-top: 0.1553em;
    font-size: 0.92em;
}
.sb-info > summary {
    cursor: pointer;
    color: var(--link_color);
    font-weight: bold;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.1553em 0;
}
.sb-info > summary::-webkit-details-marker {
    display: none;
}
.sb-info > summary::before {
    content: "\24D8"; /* circled i */
    font-size: 1.5em;
    line-height: 1;
}
.sb-info[open] > summary::before {
    content: "\229F"; /* squared minus */
}
.sb-info-body {
    margin: 0.4658em 0 0.1553em;
    padding: 0.6211em 0.9317em;
    border-left: 3px solid var(--link_color);
    border-radius: 0 4px 4px 0;
    background-color: var(--grid_odd);
    line-height: 1.4;
}
.sb-qmark-fill {
    fill: var(--link_color);
}
.sb-qmark-stroke {
    fill: none;
    stroke: var(--color);
    stroke-width: 10;
}
.sb-qmark-text {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 128.7px;
    fill: var(--color);
}
.css-save-field {
    display: none;
}
/* checkbox label rows: text left, checkbox right, all boxes aligned */
.center-checkbox,
.checkbox-full-width,
.sb-opt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8571em;
    width: 100%;
    padding: 0.2143em 0;
    box-sizing: border-box;
}
.center-checkbox input[type="checkbox"],
.checkbox-full-width input[type="checkbox"],
.sb-opt-row input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}

/* Manual Batches Interactive Info */
.dev-btn--info-toggle {
    padding: 0 !important;
    width: var(--button_size, 40px);
    height: var(--button_size, 40px);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dev-btn--info-toggle i {
    margin-right: 0 !important;
    top: 0 !important;
    font-size: 1.25em;
}

.manual-batch-info-box {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    padding: 0 1em;
    margin: 0;
    background-color: var(--grid_even);
    border: 1px solid transparent;
    border-radius: 0.5em;
    color: var(--color);
    box-sizing: border-box;
}

.manual-batch-info-box.open {
    max-height: 200px;
    opacity: 1;
    padding: 0.75em 1em;
    margin-top: 0.375em;
    margin-bottom: 0.375em;
    border-color: var(--color);
    border-left: 4px solid var(--link_color);
}

/* ============================================================
   ADMIN / SITETOOLS — Admin nav (admintools_menu)
   ============================================================ */
/*
 * Font scale: everything is set in rem so values never compound through
 * nested elements. Two sizes cover the whole nav:
 *   --nav-fs:      13px  — primary links, group summaries, group links
 *   --nav-fs-sm:   11px  — utility pill toggle
 * Icons/chevrons get no explicit font-size so they inherit cleanly.
 */
.admin-tools-nav {
    background: linear-gradient(180deg, #fffdf1 0%, #fff7db 100%);
    border: 2px solid #dcbf6a;
    border-radius: 0.875em;
    padding: 0.85em 1em;
    margin-bottom: 1em;
    box-sizing: border-box;
    --nav-fs:    0.929rem; /* 13px @ 14px base */
    --nav-fs-sm: 0.786rem; /* 11px @ 14px base */
}

/* Primary dashboard shortcuts — centered cluster */
.admin-nav-primary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    margin-bottom: 0.85em;
    padding-bottom: 0.85em;
    border-bottom: 1px solid #ecd9a0;
}

.admin-tools-nav--primary-only .admin-nav-primary {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.admin-nav-primary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 1em;
    background: linear-gradient(180deg, #fffdf0 0%, #f5e9be 100%);
    border: 2px solid #c9a030;
    border-radius: 2em;
    color: #2e1a00;
    font-size: var(--nav-fs);
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
    white-space: nowrap;
}

.admin-nav-primary-link:hover {
    background: linear-gradient(180deg, #fff8d8 0%, #f0dc98 100%);
    border-color: #a07010;
    color: #2e1a00;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Accordion of grouped sections */
.admin-nav-groups {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.admin-nav-group {
    border: 1px solid #e4cd8b;
    border-radius: 0.5em;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.4);
}

.admin-nav-group-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    cursor: pointer;
    font-size: var(--nav-fs);
    font-weight: bold;
    line-height: 1;
    color: #3d2000;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    user-select: none;
    transition: background 120ms ease;
}

.admin-nav-group-summary::-webkit-details-marker { display: none; }
.admin-nav-group-summary::marker { content: none; }

.admin-nav-group-summary:hover {
    background: rgba(255, 240, 185, 0.6);
}

/* Icons inherit font-size from their summary — no extra sizing needed */
.admin-nav-group-icon {
    color: #7a5010;
    flex-shrink: 0;
}

.admin-nav-group .details-chevron {
    color: #7a5010;
}

.admin-nav-group[open] > .admin-nav-group-summary .details-chevron {
    transform: rotate(90deg);
}

.admin-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    padding: 0.55em 0.75em 0.65em;
    border-top: 1px solid #ecd9a0;
}

.admin-nav-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.7em;
    background: #fffdf3;
    border: 1px solid #d9c070;
    border-radius: 0.4em;
    color: #2e1a00;
    font-size: var(--nav-fs);
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 100ms, border-color 100ms, color 100ms;
}

.admin-nav-links a:hover {
    background: #fff0b0;
    border-color: #b08020;
    color: #1a0e00;
    text-decoration: none;
}

/* Outer nav collapse toggle — flat disclosure chip (distinct from the
   gradient pill primary links: flatter fill, smaller radius, icon + label
   + chevron, with a dynamic show/hide caption). */
.admin-nav-groups-wrap {
    border: none;
}

.admin-nav-groups-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    width: 100%;
    margin: 0;
    padding: 0.55em 0.5em;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0.4em;
    font-size: calc(var(--nav-fs) * 1.18);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #5a3d00;
    user-select: none;
    transition: background 120ms ease, color 120ms ease;
}

.admin-nav-groups-summary::-webkit-details-marker { display: none; }
.admin-nav-groups-summary::marker { content: none; }

.admin-nav-groups-summary:hover {
    background: rgba(211, 178, 87, 0.14);
    color: #3d2000;
}

/* Dynamic caption: swaps with the open/closed state */
.admin-nav-toggle-label::after {
    content: "Show Sections";
}

.admin-nav-groups-wrap[open] > .admin-nav-groups-summary .admin-nav-toggle-label::after {
    content: "Hide Sections";
}

/* Trailing hamburger inherits the row's color, sized up for prominence */
.admin-nav-toggle-icon {
    color: currentColor;
    flex-shrink: 0;
    font-size: 1.5em;
    line-height: 1;
}

.admin-nav-groups-wrap .details-chevron {
    color: currentColor;
    flex-shrink: 0;
    transition: transform 180ms ease;
}

.admin-nav-groups-wrap[open] > .admin-nav-groups-summary .details-chevron {
    transform: rotate(180deg);
}

/* NeoSchool: pass/fail indicators */
.correct, .wrong {
    font-size: 1.5em;
    line-height: 1.5em;
}

.correct {
    color: #2e7d32;
}

.wrong {
    color: #c62828;
}

.correct-chalkboard {
    color: #c8ffb7;
}

/* NeoSchool: course page */
:root {
    --school-note-bg: #ffc;
    --school-note-color: #333;
    --school-card-bg: #fffde7;
    --school-card-border: #c8b400;
}

.answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 90%;
    margin: 16px auto;
    text-align: left;
}

.answers input[type="radio"] {
    display: none !important;
}

.answers label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 16px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(232,232,232,0.3);
    border-radius: 8px;
    cursor: pointer;
    font-family: "Pangolin", cursive;
    color: #E8E8E8;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    transition: background 0.12s ease, border-color 0.12s ease;
    box-sizing: border-box;
}

.answers label::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(232,232,232,0.5);
    border-radius: 50%;
    margin-top: 3px;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.answers label:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(232,232,232,0.65);
}

.answers label:hover::before {
    border-color: rgba(232,232,232,0.9);
}

.answers input[type="radio"]:checked + label {
    background: rgba(255,255,255,0.2);
    border-color: #E8E8E8;
    font-weight: bold;
}

.answers input[type="radio"]:checked + label::before {
    background-color: #E8E8E8;
    border-color: #E8E8E8;
    box-shadow: inset 0 0 0 4px #497959;
}

.item_wrapper h1 {
    font-family: "Pangolin", cursive;
}

.item_wrapper {
    font-family: "Pangolin", cursive;
    text-align: center;
    text-decoration: none;
    color: var(--school-note-color);
    background: var(--school-note-bg);
    width: 90%;
    padding: 5%;
    box-shadow: .14em .14em .21em rgba(33, 33, 33, 0.7);
    margin: auto;
}

#report_card {
    text-align: center;
    margin: auto;
    background-color: var(--school-card-bg);
    color: var(--school-note-color);
    width: 100%;
    border: 1px solid var(--school-card-border);
    border-collapse: collapse;
}

#report_card td {
    font-family: "Pangolin", cursive;
    border: 1px solid var(--school-card-border);
    padding: 3px 5px;
}

span.score {
    color: green;
    font-weight: bold;
}

.chalkboard {
    text-align: center;
    color: #E8E8E8;
    font-family: "Pangolin";
    display: block;
    background-color: #497959;
    padding: 3%;
    box-shadow: -1px 2px 2px 0px #555, inset 0 0 10px 0 #555;
    border-radius: 10px;
    border: #B78240 solid 10px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.chalk {
    display: block;
    position: absolute;
    border-radius: 0.1em 0.1em 0 0.1em;
    width: 50px;
    height: 8px;
    background: #f1f1f1;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 -4px 1px rgba(0, 0, 0, 0.3), -1px -1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.3);
}

.chalkboard a {
    color: #ff0;
}

.class-button {
    width: 90%;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid rgba(232,232,232,0.6);
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    color: inherit;
    padding: 12px 16px;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.class-button:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(232,232,232,0.9);
    cursor: pointer;
}

.item-button {
    width: 90%;
    border: 2px solid var(--school-card-border);
    background: rgba(255,255,255,0.55);
    border-radius: 20px;
    color: var(--school-note-color);
    padding: 12px 16px;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.item-button:hover {
    background: rgba(255,255,255,0.8);
    border-color: var(--school-note-color);
    cursor: pointer;
}

.items {
    display: flex;
    justify-content: center;
    gap: 0 25px;
    flex-wrap: wrap;
}

.reward-item {
    width: 105px;
}

.highlighted-text {
    color: green;
}

.question-image {
    border: 3px solid var(--school-card-border);
    width: 75%;
    border-radius: 15px;
}

.answer-the-question {
    text-align: left;
    margin: 0;
    display: block;
    width: 100%;
}