/* ==========================================================
	CSS GUIDE / TABLE OF CONTENTS

	1. Base article styles
	2. Tables, text content, scrolling, and sticky cells
	3. Images, captions, and carousels
	4. Dialogue boxes and dialogue slideshows
	5. Image maps
	6. Navigation and tab system
	7. Embeds and cookie consent messaging
	8. Scroll background and OSRS page chrome
	9. Local / UTC time component
	10. Event calendar component
	11. Game Status issue component
	12. Responsive rules
========================================================== */

/* ==========================================================
	1. BASE ARTICLE STYLES
========================================================== */
.news-article-content .header {
	font-family: Cinzel, 'Cinzel', serif;
	font-size: 22px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 1px 1px #121212;
}

.osrs-title {
	font-family: Cinzel, 'Cinzel', serif !important;
	font-size: 22px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 1px 1px #121212;
	text-align: center;
	margin: 1.75em 0;
}

.osrs-subtitle {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 18px;
	line-height: 1.35;
	font-weight: bold;
	color: #000000;
	text-align: center;
	margin: 1.75em 0 0.75em 0;
}

.osrs-subheading {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	text-align: left;
	margin: 1.5em 0 0.5em 0;
}

.osrs-notice {
    text-align: center;
    margin: 0 0 1.25em;
    font-size: 14px;
    font-style: italic;
	align-self: center;
	font-weight: 400;
}

.osrs-byline {
	text-align: center;
	font-style: italic;
	margin-top: -1.25em;
	margin-bottom: 1em;
	font-size: 14px;
}

.divider {
	text-align: center;
	padding: 1.5em 0;
	background: url("https://cdn.runescape.com/assets/img/external/oldschool/2017/common/hr.png") no-repeat center;
	background-size: auto 9px;
	height: 9px;
	margin: 0 auto;
}

.poll-box {
	padding: 5px 10px;
	background-color: rgba(245, 220, 108, 0.158);
	box-shadow: 0 0 3px #000;
	text-align: center;
}

.poll-box p {
	margin: 0.5em 0;
}



/* ==========================================================
	2. TABLES AND TEXT CONTENT
========================================================== */
table,
th,
td {
	border: 1px solid black;
	border-collapse: collapse;
}

.news-article-content table,
#newspost-content table,
#article-top table {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

th,
td {
	padding: 6px;
}

.news-article-content th,
.news-article-content td,
#newspost-content th,
#newspost-content td,
#article-top th,
#article-top td {
	text-align: center;
	padding: 0.5em;
	border: 1px solid black;
	color: #000000;
}

.news-article-content summary,
#newspost-content summary,
#article-top summary {
	font-family: Cinzel, 'Cinzel', serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	text-shadow: 1px 1px #C0C0C0;
	cursor: pointer;
	padding: 8px 0;
}

.news-article-content details[open] summary,
#newspost-content details[open] summary,
#article-top details[open] summary {
	margin-bottom: 0.4em;
}

.news-article-content table,
#newspost-content table,
#article-top table {
	margin-bottom: 1em;
}

.news-article-content p,
#newspost-content p,
#article-top p {
	margin: 1.75em 0;
}

.news-article-content ul,
#newspost-content ul,
#article-top ul {
	padding-left: 1.25em !important;
	margin: 1.05em 0 !important;
}

.news-article-content ol,
#newspost-content ol,
#article-top ol {
	padding-left: 1.5em;
	margin: 1.25em 0;
}

.news-article-content li,
#newspost-content li,
#article-top li {
	margin: 0.35em 0;
	padding-left: 0.25em;
}

tr:nth-child(even) {
	background-color: #f0d7b760;
}

.table-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
	margin: 0 auto 20px;
	box-sizing: border-box;
}

/* Optional column wrapper for stacking two or more smaller tables on one side. */
.table-column {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.table-column > table,
.table-column > .table-scroll-group {
	width: 100%;
}

.table-column table {
	width: 100%;
	margin-bottom: 0;
}

/* Direct tables and generated scroll groups share the available columns. */
.table-container > table,
.table-container > .table-scroll-group {
	flex: 1 1 0;
	min-width: 0;
	width: calc(50% - 10px);
}

.table-container.table-container--flex {
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.table-container.table-container--flex > table,
.table-container.table-container--flex > .table-scroll-group,
.table-container.table-container--flex > .table-column {
	flex: 1 1 180px;
	width: auto;
}

.table-scroll-notice {
	display: none;
	margin: 0 0 8px;
	padding: 7px 10px;
	border: 1px solid #59452c;
	background: #534a3e;
	color: #f0eae5;
	font-size: 13px;
	font-style: italic;
	line-height: 1.35;
	text-align: center;
	text-shadow: 1px 1px #121212;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.table-scroll-notice.is-visible {
	display: block;
}

/* Keeps each scroll hint attached to its own table as one layout item. */
.table-scroll-group {
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.table-column > .table-scroll-group {
	flex: 0 0 auto;
	width: 100%;
}

.table-scroll-group .table-scroll {
	width: 100%;
	margin-bottom: 0;
}

.table-scroll {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto 1em;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: auto;
	scrollbar-color: #6d4d21 #b69a6a;
	scrollbar-width: auto;
	box-sizing: border-box;
}

.table-scroll.has-sticky-rows,
.table-scroll.has-custom-height {
	overflow-y: auto;
	max-height: var(--table-scroll-height, min(70vh, 600px));
	background: rgba(232, 210, 170, 0.45);
}

.table-scroll > table,
.news-article-content .table-scroll > table,
#newspost-content .table-scroll > table,
#article-top .table-scroll > table {
	width: var(--osrs-table-width, 100%);
	max-width: none;
	margin: 0;
	table-layout: auto;
}

.table-scroll > table.table-scroll-table--sticky {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.table-scroll > table.table-scroll-table--sticky th,
.table-scroll > table.table-scroll-table--sticky td {
	border: 0;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

.table-scroll > table.table-scroll-table--sticky tr:first-child > th,
.table-scroll > table.table-scroll-table--sticky tr:first-child > td {
	border-top: 1px solid #000000;
}

.table-scroll > table.table-scroll-table--sticky tr > th:first-child,
.table-scroll > table.table-scroll-table--sticky tr > td:first-child {
	border-left: 1px solid #000000;
}

.table-scroll::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

.table-scroll::-webkit-scrollbar-track {
	border: 1px solid #59452c;
	background: #b69a6a;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.55);
}

.table-scroll::-webkit-scrollbar-thumb {
	border: 1px solid #3c2c18;
	background: linear-gradient(to bottom, #9d7a3d, #6d4d21);
	box-shadow:
		inset 0 1px rgba(255, 255, 255, 0.2),
		inset 0 -1px rgba(0, 0, 0, 0.35);
}

.table-scroll::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, #b18a47, #795725);
}

.table-scroll-cell--sticky {
	position: sticky;
	background-color: #e8d2aa;
	background-clip: padding-box;
}

.table-scroll tr:nth-child(even) > .table-scroll-cell--sticky {
	background-color: #ead7bd;
}

.table-scroll th.table-scroll-cell--sticky,
.table-scroll .table-scroll-cell--sticky-row {
	background-color: #d8bd91;
}

.table-scroll-cell--sticky-col {
	left: var(--table-sticky-left, 0px);
	z-index: 2;
}

.table-scroll-cell--sticky-row {
	top: var(--table-sticky-top, 0px);
	z-index: 3;
}

.table-scroll-cell--sticky-corner {
	z-index: 4;
}

.table-scroll-cell--sticky-col-edge {
	box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.55);
}

.table-scroll-cell--sticky-row-edge {
	box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.55);
}

.table-scroll-cell--sticky-col-edge.table-scroll-cell--sticky-row-edge {
	box-shadow:
		5px 0 5px -5px rgba(0, 0, 0, 0.55),
		0 5px 5px -5px rgba(0, 0, 0, 0.55);
}

@media (max-width: 650px) {
	.table-container {
		flex-direction: column;
	}

	.table-container > table,
	.table-container > .table-scroll-group,
	.table-container > .table-column {
		width: 100%;
		flex-basis: auto;
	}

	.table-scroll-notice {
		font-size: 12px;
	}

	.table-scroll::-webkit-scrollbar {
		width: 14px;
		height: 14px;
	}

	.table-scroll.has-sticky-rows,
	.table-scroll.has-custom-height {
		max-height: var(--table-scroll-height, 70vh);
	}
}



/* ==========================================================
	3. IMAGES, CAPTIONS, AND CAROUSELS
========================================================== */
.news-article-content img,
#article-top img,
#newspost-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.auto-image-link,
.asset-link {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.imgContainer {
	float: center;
}

.image-caption,
.image-row-caption {
	font-style: italic;
	text-align: center;
	font-size: 13px;
	margin: 0.5em 0 1.25em 0;
	line-height: 1.4;
	min-height: 1.4em;
	box-sizing: border-box;
}

.image-caption--empty {
	visibility: hidden;
}

.asset-auto-sized {
	max-width: 100%;
	height: auto;
}

.soul-scroll .image-caption {
	display: none !important;
}

.image-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 1.5em 0;
}

.image-row .asset-link {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	text-align: center;
}

.osrs-carousel {
	margin: 16px auto;
	max-width: 650px;
	width: 100%;
	text-align: center;
}

.osrs-carousel__slide {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.osrs-carousel__slide[hidden] {
	display: none !important;
}

/* Generated media stage for previous/next carousel arrow navigation. */
.osrs-carousel__stage {
	position: relative;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.osrs-carousel__stage > .osrs-carousel__slide {
	width: 100%;
}

.osrs-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 38px;
	margin: 0;
	padding: 0 0 2px;
	border: 2px solid #382418;
	border-radius: 0;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	text-decoration: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
	touch-action: manipulation;
	transform: translateY(-50%);
	user-select: none;
}

.osrs-carousel__nav--previous {
	left: 8px;
}

.osrs-carousel__nav--next {
	right: 8px;
}

.osrs-carousel__nav:hover,
.osrs-carousel__nav:focus-visible {
	background: #0b0b0b;
	color: #90c040;
	text-decoration: underline;
	text-decoration-color: #90c040;
	filter: none;
	outline: none;
}

.osrs-carousel__nav:active {
	background: #0b0b0b;
	color: #90c040;
	text-decoration: underline;
	transform: translateY(-50%);
}

@media (max-width: 600px) {
	.osrs-carousel__nav {
		width: 38px;
		height: 42px;
		font-size: 30px;
	}

	.osrs-carousel__nav--previous {
		left: 6px;
	}

	.osrs-carousel__nav--next {
		right: 6px;
	}
}

.osrs-carousel__slide img {
	max-width: 650px;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.osrs-carousel__slide > video,
.osrs-carousel__slide > .osrs-embed {
	display: block;
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	box-sizing: border-box;
}

.osrs-carousel__slide > video {
	height: auto;
	max-height: 650px;
	background: #000;
	object-fit: contain;
}

.osrs-video {
	display: block;
	width: 100%;
	max-width: 650px;
	margin: 1.5em auto;
	text-align: center;
	box-sizing: border-box;
}

.osrs-video > video {
	display: block;
	width: 100%;
	max-width: 650px;
	height: auto;
	max-height: 650px;
	margin: 0 auto;
	background: #000;
	object-fit: contain;
	box-sizing: border-box;
}

.osrs-carousel__slide.osrs-carousel__video,
.osrs-carousel__slide.osrs-carousel-video {
	width: 100%;
}

.osrs-carousel__slide > .osrs-embed {
	margin-top: 0;
	margin-bottom: 0;
}

.osrs-carousel__thumbs {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 12px;
	padding-bottom: 16px;
	box-sizing: border-box;
}

.osrs-carousel__thumbs button {
	flex: 0 0 calc(
		(100% - (var(--carousel-thumb-columns, 5) - 1) * 8px)
		/ var(--carousel-thumb-columns, 5)
	);
	min-width: 0;
	max-width: 120px;
	aspect-ratio: 3 / 2;
	border: 1px solid #000;
	background: transparent;
	padding: 2px;
	cursor: pointer;
	opacity: 0.65;
	box-sizing: border-box;
}

.osrs-carousel__thumbs button.is-active {
	opacity: 1;
	outline: 2px solid #000;
}

.osrs-carousel__thumbs img,
#newspost-content .osrs-carousel__thumbs img,
.news-article-content .osrs-carousel__thumbs img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
}

.osrs-carousel__thumb-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 42px;
	background: rgba(0, 0, 0, .12);
	color: #3b2f1f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
}

.osrs-carousel__slide > .osrs-carousel__caption,
.osrs-carousel__caption {
	display: none !important;
}



/* ==========================================================
	4. DIALOGUE BOXES AND DIALOGUE SLIDESHOWS
========================================================== */
.dialogue-box {
	position: relative;
	margin: 30px auto;
	width: 519px;
	height: 142px;
	background: url('https://cdn.runescape.com/assets/img/external/oldschool/2026/Newsposts/2026-02-10/chatbox.png') no-repeat center;
	background-size: cover;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 10px 15px;
	overflow: hidden;
}

.dialogue-box img {
	width: auto;
	height: auto;
	max-width: 110px;
	max-height: 116px;
	object-fit: contain;
	flex-shrink: 0;
	margin-left: 20px;
	margin-right: 2cqw;
	border: none;
	background: none;
}

.dialogue-content {
	flex: 1;
	align-self: stretch;
	position: relative;
	box-sizing: border-box;
	padding: 24px 20px;
	color: #20180C;
	text-align: center;
}

.dialogue-name {
	position: absolute;
	top: 6px;
	left: 0;
	width: 100%;
	color: #7D2B20;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
	font-size: 14px;
}

.dialogue-text {
	height: 76px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-family: 'Times New Roman', Times, serif;
	line-height: 1.3;
	color: #1A0D00;
	word-wrap: break-word;
}

.dialogue-continue {
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 100%;
	font-size: 14px;
	font-family: 'Times New Roman', Times, serif;
	line-height: 1.3;
	color: #0004e9;
	text-align: center;
}

.dialogue-slideshow {
	position: relative;
	width: 519px;
	height: 142px;
	margin: 30px auto;
	cursor: pointer;
}

.dialogue-slideshow .dialogue-box {
	margin: 0;
}

.dialogue-slideshow-caption {
	text-align: center;
	margin: 1em 0;
	font-style: italic;
}

.dialogue-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.dialogue-slide.active {
	opacity: 1;
	pointer-events: auto;
}



/* ==========================================================
	5. IMAGE MAPS
========================================================== */
.map-image,
.result-image {
	width: 650px;
	max-width: 100%;
	height: auto;
	display: block;
}

.result-image {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
}

.map-container {
	width: 650px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}



/* ==========================================================
	6. NAVIGATION AND TAB SYSTEM
========================================================== */
.osrsTabNavigation {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 5px;
	overflow: visible;
	padding: 6px 8px;
	margin: 10px auto 0;
	width: 100%;
	box-sizing: border-box;
	background: #6b5631;
	box-shadow: 0 0 3px 3px #4a381f;
}

.osrsTabNavigation__track {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
	box-sizing: border-box;
}

.osrsTabNavigation__track::-webkit-scrollbar {
	display: none;
}

.osrsTabNavigation__track > .osrsTabButton,
.osrsTabNavigation__track > .osrsTabDropdown {
	flex: 0 0 auto;
}

.osrsTabScrollButton {
	display: none;
	flex: 0 0 auto;
	min-width: 28px;
	height: 30px;
	padding: 0 7px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

.osrsTabNavigation.has-tab-overflow .osrsTabScrollButton {
	display: block;
}

.osrsTabScrollButton:hover:not(:disabled),
.osrsTabScrollButton:focus-visible:not(:disabled) {
	color: #a8dc54;
	-webkit-text-fill-color: #a8dc54;
	filter: brightness(1.12);
}

.osrsTabScrollButton:disabled {
	opacity: 0.35;
	cursor: default;
}

.osrsTabNavigation button,
.osrsTabNavigation a {
	outline: none;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s, filter 0.2s, text-decoration-color 0.2s;
}

.osrsTabNavigation .osrsTabButton,
.osrsTabNavigation .osrsTabDropButton,
.osrsTabDropdownMenu button,
.osrsTabDropdownMenu a {
	padding: 7px 9px;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-sizing: border-box;
}

.osrsTabNavigation .osrsTabButton,
.osrsTabNavigation .osrsTabDropButton {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
	float: none;
	border: 2px solid #382418;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
}

.osrsTabNavigation .osrsTabButton:hover,
.osrsTabNavigation .osrsTabDropButton:hover,
.osrsTabDropdownMenu button:hover,
.osrsTabDropdownMenu a:hover {
	color: #90c040;
	text-decoration: underline;
}

.osrsTabNavigation .osrsTabButton.active,
.osrsTabNavigation .osrsTabDropButton.active {
	background: #646464;
	color: white;
}

.osrsTabNavigation .osrsTabButton,
.osrsTabNavigation .osrsTabButton:link,
.osrsTabNavigation .osrsTabButton:visited,
.osrsTabNavigation .osrsTabDropButton,
.osrsTabNavigation .osrsTabDropdownMenu button,
.osrsTabNavigation .osrsTabDropdownMenu a {
	color: #90c040 !important;
	-webkit-text-fill-color: #90c040 !important;
	text-decoration-color: #90c040 !important;
}

.osrsTabNavigation .osrsTabButton:hover,
.osrsTabNavigation .osrsTabButton:focus-visible,
.osrsTabNavigation .osrsTabDropButton:hover,
.osrsTabNavigation .osrsTabDropButton:focus-visible,
.osrsTabNavigation .osrsTabDropdownMenu button:hover,
.osrsTabNavigation .osrsTabDropdownMenu button:focus-visible,
.osrsTabNavigation .osrsTabDropdownMenu a:hover,
.osrsTabNavigation .osrsTabDropdownMenu a:focus-visible {
	color: #a8dc54 !important;
	-webkit-text-fill-color: #a8dc54 !important;
	text-decoration: underline !important;
	text-decoration-color: #a8dc54 !important;
	filter: brightness(1.12);
}

.osrsTabNavigation .osrsTabButton.active,
.osrsTabNavigation .osrsTabDropButton.active,
.osrsTabNavigation .osrsTabButton.active:hover,
.osrsTabNavigation .osrsTabDropButton.active:hover {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-decoration-color: #ffffff !important;
}

#newspost-content a:not(.osrsTabButton):not(.asset-link):hover,
#newspost-content a:not(.osrsTabButton):not(.asset-link):focus-visible,
.news-article-content a:not(.osrsTabButton):not(.asset-link):hover,
.news-article-content a:not(.osrsTabButton):not(.asset-link):focus-visible {
	text-decoration: underline !important;
	filter: brightness(1.18);
}

#newspost-content a.asset-link,
#newspost-content a.asset-link:hover,
#newspost-content a.asset-link:focus-visible,
.news-article-content a.asset-link,
.news-article-content a.asset-link:hover,
.news-article-content a.asset-link:focus-visible {
	filter: none !important;
	transform: none !important;
	transition: none !important;
	text-decoration: none !important;
}

#newspost-content a.asset-link img,
#newspost-content a.asset-link:hover img,
#newspost-content a.asset-link:focus-visible img,
.news-article-content a.asset-link img,
.news-article-content a.asset-link:hover img,
.news-article-content a.asset-link:focus-visible img {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.osrsTabDropdown {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
}

.osrsTabDropdown .osrsTabDropButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	height: auto;
	white-space: nowrap;
}

.osrsTabDropdownMenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1002;
	min-width: 100%;
	width: max-content;
	background: #0b0b0b;
	border: 2px solid #2b2418;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* Desktop hover opening is handled by the navbar JavaScript.
   Keeping visibility tied to .is-open means selecting an option can
   close the submenu immediately, even while the pointer is still
   over the area where the menu was displayed. */
.osrsTabDropdown.is-open .osrsTabDropdownMenu,
.osrsTabDropdownMenu.is-floating {
	display: block;
}

/* After a submenu option is selected, keep the menu forcibly hidden until
   the pointer genuinely moves away or the main dropdown button is used again. */
.osrsTabDropdown.is-selection-closed .osrsTabDropdownMenu,
.osrsTabDropdownMenu.is-selection-closed {
	display: none !important;
}

/* Desktop dropdown menus are temporarily moved outside the horizontal
   scrolling track so they cannot be clipped by the track's overflow. */
.osrsTabDropdownMenu.is-floating {
	z-index: 1003;
	max-width: calc(100% - 16px);
}

.osrsTabDropdownMenu button,
.osrsTabDropdownMenu a {
	display: block;
	width: 100%;
	border: 0;
	box-sizing: border-box;
}


.dropdown-arrow {
	display: inline;
	font-size: 10px;
	line-height: 1;
	margin-top: 0;
}

.osrsTabPlaceholder {
	display: none;
	height: 0;
}

.osrsTabPlaceholder[data-generated-tab-placeholder="true"] {
	width: 100%;
}

.osrsTabPanel {
	display: none;
	width: 100%;
	padding: 20px 10px;
	border-top: none;
	box-sizing: border-box;
}

#newspost-content [id],
.news-article-content [id],
#article-top[id] {
	scroll-margin-top: 86px;
}

.osrsTabMenuToggle {
	display: none;
}



/* ==========================================================
	7. EMBEDS AND COOKIE CONSENT MESSAGING
========================================================== */
.osrs-embed {
	margin: 16px auto;
	width: 100%;
	max-width: 1000px;
}

.osrs-embed__frame {
	width: 100%;
	overflow: visible;
	border: 0;
	background: transparent;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

.osrs-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent !important;
}

.osrs-embed blockquote {
	margin: 0 auto !important;
}

.osrs-embed blockquote.twitter-tweet,
.osrs-embed blockquote.x-tweet {
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
}

.osrs-embed--video .osrs-embed__frame,
.osrs-embed--video .osrs-embed__consent {
	aspect-ratio: 16 / 9;
}

.osrs-embed--social .osrs-embed__frame {
	padding: 16px;
	min-height: 120px;
	padding-bottom: 0;
	margin-bottom: 0;
}

.osrs-embed__consent {
	align-items: center;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.osrs-embed__consent p {
	margin: 0;
}

.osrs-embed__fallback {
	font-style: italic;
	text-align: center;
	font-size: 13px;
	margin: 0.5em 0 1.25em 0;
	line-height: 1.4;
	min-height: 1.4em;
	box-sizing: border-box;
}



/* ==========================================================
	8. SCROLL BACKGROUND AND OSRS PAGE CHROME
========================================================== */
#scrollBackground {
	background: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif) repeat-y top;
	padding: 50px 75px;
	width: 665px;
	display: block;
}

.osrsTabNavigation--sticky.is-stuck,
#stickyNavigation.is-stuck {
	position: fixed !important;
	top: 0;
	z-index: 1000;
	font-family: Cinzel, 'Cinzel', serif;
}

#backToTopButton {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	padding: 7px 9px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

#backToTopButton:hover {
	color: #90c040;
	text-decoration: underline;
}

.global-time-toggle-wrapper {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1.5em;
}



/* ==========================================================
	9. LOCAL / UTC TIME COMPONENT
========================================================== */
.local-time {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.35;
}

p .local-time,
li .local-time {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	vertical-align: baseline;
}

/* Optional author control. data-inline="true" forces date/time onto one line.
   data-inline="false" explicitly keeps the standard stacked treatment. */
.local-time[data-inline="true"] {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	vertical-align: baseline;
}

p .local-time[data-inline="false"],
li .local-time[data-inline="false"],
.local-time[data-inline="false"] {
	flex-direction: column;
	gap: 0;
	white-space: normal;
}

/* Date/time ranges generated with data-end-time. */
.local-range-text {
	display: inline;
}

.local-range-date {
	font-weight: bold;
}

.local-time[data-inline="true"] .local-range-text {
	white-space: nowrap;
}

.utc-date,
.utc-time,
.utc-datetime {
	white-space: nowrap;
}

.local-date {
	display: block;
	font-weight: bold;
}

.local-time-toggle {
	cursor: default;
}

.local-clock {
	display: block;
}

.timezone-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 18px;
	margin-left: 4px;
	padding: 0 4px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 3px;
	background: rgba(0, 0, 0, .08);
	color: #3b2f1f;
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	text-shadow: none;
	cursor: pointer;
	user-select: none;
	vertical-align: middle;
	box-sizing: border-box;
}

.timezone-toggle:hover {
	background: rgba(0, 0, 0, .15);
}

.timezone-toggle:active {
	background: rgba(0, 0, 0, .22);
}

.timezone-toggle:focus {
	outline: 1px dotted #000;
	outline-offset: 2px;
}

td.local-time,
th.local-time {
	display: table-cell;
	width: auto;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}

td .local-date,
td .local-clock,
th .local-date,
th .local-clock {
	display: block;
}

td.local-time[data-inline="true"] .local-date,
td.local-time[data-inline="true"] .local-clock,
th.local-time[data-inline="true"] .local-date,
th.local-time[data-inline="true"] .local-clock {
	display: inline;
}

td.utc-date,
td.utc-time,
td.utc-datetime,
th.utc-date,
th.utc-time,
th.utc-datetime {
	text-align: center;
	white-space: nowrap;
}



/* ==========================================================
	10. EVENT CALENDAR COMPONENT
========================================================== */
.event-calendar {
	max-width: 650px;
	margin: 1.5em auto;
}

.event-calendar.calendar-view {
	display: block;
}

.calendar-help {
	margin: 0.25em auto 0.75em;
	text-align: center;
	font-size: 12px;
	font-style: italic;
	color: #3b2f1f;
}

.calendar-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin: 0.75em auto 0.5em;
}

.calendar-bottom-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0.85em auto 1.25em;
}

.calendar-nav-button,
.calendar-time-toggle {
	padding: 7px 9px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

.calendar-nav-button:hover,
.calendar-time-toggle:hover {
	color: #90c040;
	text-decoration: underline;
}

.calendar-nav-button:disabled {
	cursor: default;
	opacity: 0.45;
	text-decoration: none;
}

.calendar-modal-close {
	padding: 7px 9px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

.calendar-modal-close:hover,
.calendar-modal-close:focus-visible {
	color: #a8dc54;
	text-decoration: underline;
}

.calendar-month-label {
	flex: 1;
	text-align: center;
	font-family: Cinzel, 'Cinzel', serif;
	font-weight: bold;
	font-size: 18px;
	color: #FFFFFF;
	text-shadow: 1px 1px #121212;
}

.calendar-legend {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 11px;
	text-align: center;
}

.calendar-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.calendar-legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1px solid #000;
}

.calendar-month {
	display: none;
	margin-bottom: 1.75em;
}

.calendar-month.is-active {
	display: block;
}

.calendar-week {
	position: relative;
	margin-bottom: 4px;
}

.calendar-day-headings,
.calendar-week-days,
.calendar-span-row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.calendar-day-headings {
	margin-bottom: 4px;
}

.calendar-week-days {
	margin-bottom: 0;
}

.calendar-day-name {
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	padding: 6px 2px;
	background: #534a3e;
	color: #f0eae5;
	text-shadow: 1px 1px #000;
}

.calendar-day {
	position: relative;
	min-height: 92px;
	padding: 5px 5px 30px 5px;
	border: 1px solid #3b2f1f;
	background: #f0d7b760;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	min-width: 0;
	cursor: pointer;
	transition: none;
}

.calendar-day:hover {
	background: rgba(240, 215, 183, 0.55);
}

.calendar-day.is-empty {
	background: rgba(0, 0, 0, 0.08);
	box-shadow: none;
}

.calendar-day.is-today {
	outline: 1px solid rgba(1, 199, 77, 0.856);
	outline-offset: -2px;
	background: #bcf0b760;
}

.calendar-date-number {
	position: relative;
	z-index: 5;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 4px;
}

.calendar-day.is-empty .calendar-date-number {
	opacity: 0.45;
}

.calendar-today-label {
	float: right;
	font-size: 9px;
	font-weight: bold;
	color: #3b2f1f;
	background: rgba(1, 199, 77, 0.856);
	border: 1px solid rgba(59, 47, 31, 0.45);
	border-radius: 3px;
	padding: 0 3px;
	text-transform: uppercase;
}

.calendar-event {
	position: relative;
	display: block;
	padding: 3px 4px;
	border: 1px solid #000;
	background: rgba(255, 255, 255, 0.25);
	font-size: 11px;
	line-height: 1.25;
	cursor: default;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	overflow: hidden;
	min-width: 0;
	max-width: 100%;
	transition: none;
}

.calendar-event.is-expandable:hover,
.calendar-event.is-open {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.calendar-event + .calendar-event {
	margin-top: 3px;
}

.calendar-event.is-expandable {
	cursor: pointer;
}

/* Reserve the top-right corner for the expand/collapse marker so long titles
   and always-visible times cannot run underneath it. */
.calendar-event.is-expandable > .calendar-event-title,
.calendar-event.is-expandable > .calendar-event-summary {
	padding-right: 26px;
	box-sizing: border-box;
}

.calendar-event-title {
	display: block;
	padding-right: 0;
	font-weight: bold;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.calendar-event-summary {
	display: block;
	margin-top: 4px;
}

.calendar-event.is-open .calendar-event-title {
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

.calendar-event-expand-hint {
	position: absolute;
	top: 3px;
	right: 4px;
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	color: #3b2f1f;
	text-align: center;
	text-decoration: none;
}

.calendar-event-expand-hint::before {
	content: "+";
}

.calendar-event.is-open .calendar-event-expand-hint::before {
	content: "-";
}

.calendar-event.is-title-cutoff .calendar-event-title,
.calendar-event.is-compact .calendar-event-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calendar-event.is-compact {
	min-height: 20px;
	white-space: nowrap;
}

.calendar-event-details {
	display: none;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.3;
}

.calendar-event.is-open {
	height: auto;
	min-height: 20px;
	white-space: normal;
	overflow: visible;
}

.calendar-event.is-open .calendar-event-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.calendar-event.is-open .calendar-event-details {
	display: block;
}

.calendar-event-time,
.calendar-event-downtime,
.calendar-event-range,
.calendar-event-date,
.calendar-event-description {
	display: block;
	margin-top: 2px;
}

/* Keep clock values such as "11:00 AM" together inside narrow month cells. */
.calendar-event-time {
	white-space: nowrap;
}

.calendar-event-link {
	display: block;
	margin-top: 8px;
}

.calendar-event-link a {
	display: inline-block;
	padding: 4px 7px;
	background: #ffffff70;
	border: 1px solid rgba(59, 47, 31, 0.45);
	color: #3b2f1f;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	line-height: 1.2;
	cursor: pointer;
}

.calendar-event-link a:hover,
.calendar-event-link a:focus {
	background: #ffffff85;
	border-color: #3b2f1f;
	color: #3b2f1f;
	text-decoration: underline;
}

.calendar-week.has-spans {
	--calendar-span-row-height: 23px;
	--calendar-span-row-gap: 3px;
	--calendar-span-height: calc(
		(var(--calendar-span-lanes, 1) * var(--calendar-span-row-height)) +
		((var(--calendar-span-lanes, 1) - 1) * var(--calendar-span-row-gap))
	);
}

/* Keep date numbers in their normal top position. The reserved span area
   belongs between the date label and any single-day cards, not above both. */
.calendar-week.has-spans .calendar-date-number {
	margin-bottom: calc(4px + var(--calendar-span-height) + 8px);
}

.calendar-span-row {
	position: absolute;
	left: 0;
	right: 0;
	top: 28px;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-auto-rows: minmax(var(--calendar-span-row-height), auto);
	column-gap: 4px;
	row-gap: var(--calendar-span-row-gap);
	pointer-events: none;
	margin: 0;
}

.calendar-span-row .calendar-event {
	min-height: var(--calendar-span-row-height);
	white-space: nowrap;
	margin-top: 0 !important;
	margin-left: 5px;
	margin-right: 5px;
	width: auto;
	pointer-events: auto;
}

/* Multi-day cards always keep their collapsed title to one line.
   This keeps the same event visually consistent when it continues into another week. */
.calendar-span-row .calendar-event:not(.is-open) .calendar-event-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calendar-span-row .calendar-event.is-open {
	height: auto;
	white-space: normal;
	overflow: visible;
}

.calendar-span-row .calendar-event.is-span-continues-before {
	margin-left: 0;
}

.calendar-span-row .calendar-event.is-span-continues-after {
	margin-right: 0;
}

.calendar-event[data-type="maintenance"],
.calendar-legend-swatch[data-type="maintenance"] {
	background: #d98932;
}

.calendar-event[data-type="update"],
.calendar-legend-swatch[data-type="update"] {
	background: #56b4e9;
}

.calendar-event[data-type="event"],
.calendar-legend-swatch[data-type="event"] {
	background: #b7e3a1;
}

.calendar-event[data-type="newspost"],
.calendar-legend-swatch[data-type="newspost"] {
	background: #ffb0a8;
}

.calendar-event[data-type="livestream"],
.calendar-legend-swatch[data-type="livestream"] {
	background: #d7b7ff;
}

.calendar-event[data-type="video"],
.calendar-legend-swatch[data-type="video"] {
	background: #cc79a7;
}

.calendar-event[data-type="poll"],
.calendar-legend-swatch[data-type="poll"] {
	background: #f6e58d;
}

.calendar-week-span-marker[data-type="maintenance"] { background: #d98932; }
.calendar-week-span-marker[data-type="update"] { background: #56b4e9; }
.calendar-week-span-marker[data-type="event"] { background: #b7e3a1; }
.calendar-week-span-marker[data-type="newspost"] { background: #ffb0a8; }
.calendar-week-span-marker[data-type="livestream"] { background: #d7b7ff; }
.calendar-week-span-marker[data-type="video"] { background: #cc79a7; }
.calendar-week-span-marker[data-type="poll"] { background: #f6e58d; }

.calendar-view-switch {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0 0 0.75em;
}

.calendar-view-button {
	padding: 6px 9px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1;
	box-shadow: inset 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .12);
	cursor: pointer;
}

.calendar-view-button:hover,
.calendar-view-button:focus-visible {
	color: #a8dc54;
	text-decoration: underline;
}

.calendar-view-button.is-active {
	background: #646464;
	color: #fff;
}

.calendar-today-panel {
	margin: 0 0 1.25em;
}

/* Optional external placement point for Happening Today. */
.calendar-today-target {
	width: 100%;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.calendar-today-panel[hidden] {
	display: none;
}

.calendar-today-title,
.calendar-week-day-title {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000;
}

.calendar-today-title {
	margin: 0 0 0.55em;
	font-size: 18px;
	text-align: center;
}


.calendar-today-empty {
	margin: 0;
	padding: 9px 10px;
	border: 1px solid #3b2f1f;
	background: #f0d7b760;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	font-size: 13px;
	font-style: italic;
	text-align: center;
	color: #3b2f1f;
}

.calendar-today-events,
.calendar-week-events {
	display: grid;
	gap: 6px;
}

.calendar-week-view {
	display: none;
	margin-bottom: 1.75em;
}

.calendar-week-view.is-active {
	display: block;
}

.calendar-week-spans-summary {
	margin: 0 0 0.9em;
	padding: 8px;
	border: 1px solid rgba(59, 47, 31, 0.45);
	background: rgba(240, 215, 183, 0.22);
}

.calendar-week-spans-title {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: bold;
	color: #3b2f1f;
}

.calendar-week-spans-cards {
	display: grid;
	gap: 5px;
}

.calendar-week-rail-grid {
	display: grid;
	grid-template-columns: repeat(var(--calendar-week-rail-lanes, 1), 10px) minmax(0, 1fr);
	grid-template-rows: repeat(7, auto);
	column-gap: 5px;
	row-gap: 0;
	align-items: stretch;
}

.calendar-week-span-marker {
	position: relative;
	display: block;
	width: 6px;
	min-height: 100%;
	justify-self: center;
	border: 1px solid rgba(59, 47, 31, 0.55);
	border-radius: 4px;
	box-sizing: border-box;
	z-index: 2;
}

.calendar-week-day {
	min-width: 0;
	margin-bottom: 1em;
}

.calendar-week-day-title {
	margin: 0 0 0.4em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid rgba(59, 47, 31, 0.45);
	font-size: 15px;
}

.calendar-week-empty {
	margin: 0;
	padding: 7px 9px;
	border: 1px solid rgba(59, 47, 31, 0.35);
	background: rgba(240, 215, 183, 0.22);
	font-size: 12px;
	font-style: italic;
	color: #3b2f1f;
}

.calendar-today-events .calendar-event,
.calendar-week-events .calendar-event {
	padding: 7px 8px;
	font-size: 13px;
	line-height: 1.35;
}

.calendar-today-events .calendar-event-details,
.calendar-week-events .calendar-event-details {
	font-size: 13px;
}

.calendar-today-events .calendar-event-expand-hint,
.calendar-week-events .calendar-event-expand-hint {
	top: 7px;
	right: 8px;
	font-size: 14px;
}

.calendar-month-view {
	display: none;
}

.calendar-month-view.is-active {
	display: block;
}

@media (max-width: 600px) {
	.calendar-today-events .calendar-event,
	.calendar-week-events .calendar-event {
		font-size: 12px;
	}

	.calendar-modal-header {
		align-items: stretch;
		gap: 8px;
	}

	.calendar-modal-date-navigation {
		grid-template-columns: 28px minmax(0, 1fr) 28px;
		gap: 4px;
	}

	.calendar-modal-day-nav-button {
		font-size: 20px;
	}
}

.calendar-modal-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.55);
	padding: 24px;
	box-sizing: border-box;
}

.calendar-modal-backdrop.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar-modal {
	width: min(620px, 100%);
	max-height: 86vh;
	overflow: auto;
	border: 2px solid #3b2f1f;
	background: #e8d2aa;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
	padding: 14px;
	box-sizing: border-box;
}

.calendar-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.calendar-modal-date-navigation {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) 30px;
	align-items: stretch;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

.calendar-modal-day-nav-button {
	padding: 0;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow: inset 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

.calendar-modal-day-nav-button:hover,
.calendar-modal-day-nav-button:focus-visible {
	color: #a8dc54;
	filter: brightness(1.12);
}

.calendar-modal-title {
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid #3b2f1f;
	background: #534a3e;
	font-family: Cinzel, 'Cinzel', serif;
	font-weight: bold;
	font-size: 18px;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 1px 1px #121212;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.calendar-modal-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Match the card sizing and typography used by Happening Today while
   leaving modal cards expanded so their full information remains visible. */
.calendar-modal-event {
	font-size: 13px;
	line-height: 1.35;
}

.calendar-modal-event .calendar-event {
	padding: 7px 8px;
	font-size: 13px;
	line-height: 1.35;
}

.calendar-modal-event .calendar-event-title {
	font-size: inherit;
	font-weight: bold;
	line-height: 1.35;
	margin-bottom: 0;
}

.calendar-modal-event .calendar-event-time,
.calendar-modal-event .calendar-event-downtime,
.calendar-modal-event .calendar-event-range {
	display: block;
	font-size: inherit;
	font-weight: normal;
	color: #3b2f1f;
	margin-top: 4px;
}

.calendar-modal-event .calendar-event-description {
	display: block;
	font-size: inherit;
	font-weight: normal;
	line-height: 1.35;
	margin-top: 7px;
}

.calendar-modal-event .calendar-event-expand-hint {
	display: none;
}

.calendar-modal-empty {
	margin: 1em 0;
	font-style: italic;
	text-align: center;
}

.event-fields {
	display: none;
}



/* ==========================================================
	11. GAME STATUS ISSUE COMPONENT
========================================================== */
.issue-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	max-width: 650px;
	margin: 1.5em auto;
	align-items: start;
}

/* Full-width remains the default. Add issue--half to allow two cards per row. */
.issue {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid #3b2f1f;
	background: #f0d7b760;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.issue.issue--half {
	grid-column: auto;
}

.issue-button {
	position: relative;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.issue:not(.is-expandable) .issue-button {
	cursor: default;
}

.issue-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title status"
		"meta meta";
	gap: 6px 10px;
	align-items: center;
}

.issue-title {
	grid-area: title;
	min-width: 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.28;
}

.issue-status {
	grid-area: status;
	justify-self: end;
	white-space: nowrap;
	padding: 1px 8px;
	border: 1px solid #000;
	border-radius: 4px;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: #fffffffd;
	text-shadow: 1px 1px 1px #000;
}

.issue-meta {
	grid-area: meta;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 12px;
	line-height: 1.3;
	color: #3b2f1f;
}

.issue-meta-left {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	row-gap: 4px;
	min-width: 0;
}

.issue-time-label {
	font-weight: bold;
}

/* Date and time intentionally use the same lighter/original weight. */
.issue-time-value,
.issue-end-date-meta {
	font-weight: 400;
	color: #3b2f1f;
	white-space: nowrap;
}

.issue-meta-updated {
	margin-left: auto;
	white-space: nowrap;
	font-size: 11.5px;
	font-style: italic;
	font-weight: 400;
	color: rgba(59, 47, 31, .82);
}

.issue-time-toggle {
	cursor: pointer;
}

.issue-timezone-badge {
	display: inline-block;
	margin-left: 5px;
	padding: 0 4px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 3px;
	background: rgba(0, 0, 0, .08);
	font-size: 10px;
	font-weight: bold;
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
}

/* Plain + / - indicator. Only generated for cards with expandable details. */
.issue.is-expandable .issue-meta {
	padding-right: 18px;
	box-sizing: border-box;
}

.issue.is-expandable .issue-button::after {
	content: "+";
	position: absolute;
	right: 9px;
	bottom: 7px;
	color: #3b2f1f;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}

.issue.is-expandable.is-open .issue-button::after {
	content: "-";
}

.issue-details {
	display: none;
	padding: 0 12px 10px 12px;
	border-top: 1px solid rgba(0, 0, 0, .15);
}

.issue.is-open .issue-details {
	display: block;
}

.issue.is-open .issue-button {
	background: rgba(255, 255, 255, .14);
}

.issue-description {
	margin: .75em 0 0;
}

.issue-detail-meta {
	margin: .75em 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #3b2f1f;
}

.issue-detail-meta + .issue-description {
	margin-top: .5em;
}

.issue-description details {
	margin: 0.5em 0 0;
}

.issue-description details > p:first-of-type {
	margin-top: 0;
}

.issue-description details > p:last-child {
	margin-bottom: 0;
}

.issue-fields {
	display: none;
}

/* Desktop half-width cards use a more compact summary. Their clickable core
   is equalised in JavaScript, while expanded details stay independent. */
@media (min-width: 601px) {
	.issue--half .issue-button {
		padding: 8px 9px;
	}

	.issue--half .issue-summary {
		gap: 6px 7px;
	}

	/* Keep half-width typography close to the full-width baseline. */
	.issue--half .issue-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		max-height: calc(1.28em * 3);
		font-size: 13.5px;
	}

	/* Long status labels wrap neatly instead of stealing excessive title width. */
	.issue--half .issue-status {
		max-width: 92px;
		padding: 2px 6px;
		white-space: normal;
		overflow-wrap: normal;
		font-size: 9px;
		line-height: 1.05;
	}

	.issue--half .issue-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
		font-size: 11.5px;
	}

	.issue--half .issue-meta-updated {
		margin-left: 0;
		font-size: 11px;
	}

	.issue--half .issue-description,
	.issue--half .issue-detail-meta {
		font-size: 12px;
	}
}

@media (max-width: 600px) {
	.issue-list {
		grid-template-columns: 1fr;
	}

	.issue,
	.issue.issue--half {
		grid-column: 1;
	}

	/* Once stacked on mobile, half cards use the normal full-width treatment. */
	.issue--half .issue-title {
		display: block;
		max-height: none;
		overflow: visible;
		font-size: inherit;
	}

	.issue--half .issue-status {
		max-width: none;
		padding: 1px 8px;
		white-space: nowrap;
		font-size: inherit;
		line-height: 1.2;
	}
}



/* ==========================================================
	ROADMAP COMPONENT
========================================================== */
/* ---------- Core roadmap layout ---------- */
.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 650px;
    margin: 0 auto 1.5em;
    align-items: start;
}

.roadmap-period {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 4px 6px;
    border: 1px solid #3b2f1f;
    background: #6b56329a;
    color: #f7f7f7ec;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px #000;
    box-sizing: border-box;
}

/* ---------- Core card: shared by ALL three styles ---------- */
.roadmap-card {
    --roadmap-status-colour: #4b3d2b;
    --roadmap-image: none;

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    height: 139px;
    grid-template-rows:
        35px
        49px
        27px;
    grid-template-areas:
        "title status"
        "description description"
        "date toggle";
    gap: 5px 8px;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    padding: 11px 9px 5px;
    border: 1px solid #3b2f1f;
    background-color: #f0d7b760;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    box-sizing: border-box;
}

.roadmap-card.is-open {
    height: auto;
    min-height: 139px;
    grid-template-rows:
        35px
        49px
        27px
        auto;
    grid-template-areas:
        "title status"
        "description description"
        "date toggle"
        "details details";
}

.roadmap-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: 4px;
    background: var(--roadmap-status-colour);
}

/* ---------- Status colours ---------- */
.roadmap-card[data-status="live"] { --roadmap-status-colour: #1f7a36; }
.roadmap-card[data-status="polling"] { --roadmap-status-colour: #8a6b14; }
.roadmap-card[data-status="in-development"] { --roadmap-status-colour: #315f9c; }
.roadmap-card[data-status="coming-soon"] { --roadmap-status-colour: #8a4d1d; }
.roadmap-card[data-status="announced"] { --roadmap-status-colour: #6f4aa8; }
.roadmap-card[data-status="being-polled"] { --roadmap-status-colour: #8a6b14; }
.roadmap-card[data-status="greenlit"] { --roadmap-status-colour: #24753a; }
.roadmap-card[data-status="feedback"] { --roadmap-status-colour: #00796b; }
.roadmap-card[data-status="passed"] { --roadmap-status-colour: #1f7a36; }
.roadmap-card[data-status="failed"] { --roadmap-status-colour: #a83232; }
.roadmap-card[data-status="abandoned"] { --roadmap-status-colour: #6f3f36; }
.roadmap-card[data-status="paused"] { --roadmap-status-colour: #6b6255; }

/* Wide mode: <div class="roadmap-wide">true</div> */
.roadmap-card.is-wide {
    grid-column: 1 / -1;
}

.roadmap-title {
    grid-area: title;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 24px;
}

.roadmap-title,
.roadmap-title a,
.roadmap-title a:visited {
    color: #211a12 !important;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
    text-decoration: none !important;
}

.roadmap-title a:hover,
.roadmap-title a:focus-visible {
    color: #000 !important;
    text-decoration: underline !important;
    outline: none;
}

.roadmap-status {
    grid-area: status;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    align-self: center;
    max-width: 145px;
    min-height: 18px;
    padding: 2px 7px;
    border: 1px solid #000;
    border-radius: 4px;
    background: var(--roadmap-status-colour);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #000;
    transform: translateY(-1px);
    box-sizing: border-box;
}

/* Optional. Shares the footer row with Show More. The row stays reserved if either field is omitted. */
.roadmap-release-date {
    grid-area: date;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 195px;
    max-width: 100%;
    min-height: 27px;
    margin-top: 0;
    padding: 4px 6px;
    border: 1px solid rgba(59, 47, 31, .55);
    border-left: 3px solid var(--roadmap-status-colour);
    border-radius: 2px;
    background: rgba(240, 215, 183, .72);
    color: #2d2317;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.15;
    text-align: right;
    justify-self: start;
    box-sizing: border-box;
}

.roadmap-release-date::before {
    content: "Release Date";
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
}

.roadmap-description {
    grid-area: description;
    position: relative;
    z-index: 5;
    display: block;
    min-height: 34px;
    padding-top: 4px;
    color: #332819;
    font-size: 12.5px;
    line-height: 1.35;
    box-sizing: border-box;
}

/* Hidden authoring fields. */
.roadmap-image,
.roadmap-wide {
    display: none !important;
}

/* Generated visual. Header uses it; Simple/Full do not need a separate image layer. */
.roadmap-image-visual {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
}

/* ==========================================================
   EXPANDABLE AREA
   Add .roadmap-details and the helper creates the Show More control.
   Normal HTML can be placed directly inside .roadmap-details.
   ========================================================== */
.roadmap-details-toggle {
    grid-area: toggle;
    position: relative;
    z-index: 6;
    justify-self: end;
    align-self: center;
    width: 68px;
    min-width: 68px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    border: 2px solid #382418;
    border-radius: 0;
    background: #0b0b0b;
    color: #90c040;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    text-shadow: none;
    box-shadow:
        inset 0 0 0 1px #000,
        0 1px 0 rgba(255, 255, 255, .12);
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.roadmap-details-toggle:hover,
.roadmap-details-toggle:focus-visible {
    background: #0b0b0b;
    color: #a8dc54;
    text-decoration: underline;
    filter: brightness(1.12);
    outline: none;
}

.roadmap-details {
    grid-area: details;
    position: relative;
    z-index: 5;
    display: none;
    min-width: 0;
    margin: 0;
    padding: 7px 6px;
    border: 1px solid rgba(59, 47, 31, .5);
    background: transparent;
    color: #332819;
    font-size: 12.5px;
    line-height: 1.4;
    box-sizing: border-box;
}

.roadmap-card.is-open .roadmap-details {
    display: block;
}


/* ==========================================================
   SIMPLE - NO ARTWORK
   ========================================================== */
.roadmap-style-simple .roadmap-image-visual {
    display: none;
}

/* ==========================================================
   HEADER - IMAGE BEHIND TITLE / STATUS ONLY
   ========================================================== */
.roadmap-style-header.has-roadmap-image .roadmap-image-visual {
    display: block;
    top: 4px;
    left: 0;
    right: 0;
    height: 35px;
    background-image:
        linear-gradient(rgba(20, 14, 10, .54), rgba(20, 14, 10, .54)),
        var(--roadmap-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(59, 47, 31, .6);
}

.roadmap-style-header.has-roadmap-image .roadmap-title,
.roadmap-style-header.has-roadmap-image .roadmap-title a,
.roadmap-style-header.has-roadmap-image .roadmap-title a:visited {
    color: #fff !important;
    text-shadow: 1px 1px 2px #000;
}

/* ==========================================================
   FULL - IMAGE ACROSS THE WHOLE CARD
   ========================================================== */
.roadmap-style-full.has-roadmap-image {
    background-image:
        linear-gradient(to top, rgba(17, 12, 8, .94) 0%, rgba(17, 12, 8, .74) 58%, rgba(17, 12, 8, .28) 100%),
        var(--roadmap-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.roadmap-style-full .roadmap-image-visual {
    display: none;
}

.roadmap-style-full.has-roadmap-image .roadmap-title,
.roadmap-style-full.has-roadmap-image .roadmap-title a,
.roadmap-style-full.has-roadmap-image .roadmap-title a:visited,
.roadmap-style-full.has-roadmap-image > .roadmap-description {
    color: #fff !important;
    text-shadow: 1px 1px 2px #000;
}

.roadmap-style-full .roadmap-release-date {
    background: rgba(240, 215, 183, .72);
}

.roadmap-style-full .roadmap-details-toggle {
    background: #0b0b0b;
    border-color: #382418;
    color: #90c040;
    text-shadow: none;
}

.roadmap-style-full .roadmap-details-toggle:hover,
.roadmap-style-full .roadmap-details-toggle:focus-visible {
    background: #0b0b0b;
    color: #a8dc54;
    filter: brightness(1.12);
}

/* Full uses a very light dark overlay so the artwork still shows through, just more softly. */
.roadmap-style-full .roadmap-details {
    background: rgba(0, 0, 0, .22);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.roadmap-style-full .roadmap-details a {
    color: inherit;
}

/* ==========================================================
   RESPONSIVE RULES
   ========================================================== */
@media (max-width: 600px) {

    .roadmap-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .roadmap-card,
    .roadmap-card.is-wide {
        grid-column: auto;
        gap: 4px 7px;
        padding: 10px 8px 5px;
    }

    .roadmap-title,
    .roadmap-title a,
    .roadmap-title a:visited {
        font-size: 13px;
    }

    .roadmap-status {
        max-width: 130px;
        padding: 1px 5px;
        font-size: 8.5px;
    }

    .roadmap-release-date {
        font-size: 10.5px;
    }

    .roadmap-description,
    .roadmap-details {
        font-size: 12px;
    }

    .roadmap-style-header.has-roadmap-image .roadmap-image-visual {
        height: 33px;
    }
}

@media (max-width: 390px) {
    .roadmap-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .roadmap-status {
        max-width: 116px;
    }
}

/* ==========================================================
	12. RESPONSIVE RULES
========================================================== */
@media (max-width: 768px) {
	#newspost-content,
	.news-article-content {
		font-size: 18px;
		line-height: 1.55;
	}

	#newspost-content p,
	#newspost-content li,
	.news-article-content p,
	.news-article-content li {
		font-size: 18px;
		line-height: 1.55;
	}

	.osrs-title {
		font-size: 28px;
		line-height: 1.25;
	}

	.osrs-embed {
		max-width: 100%;
	}

	.news-article-content img,
	.news-article-content iframe,
	.news-article-content table,
	#newspost-content img,
	#newspost-content iframe,
	#newspost-content table,
	#article-top img,
	#article-top iframe,
	#article-top table {
		max-width: 100%;
	}

	#JMods table,
	#jmod-target table,
	.news-article-content table,
	#newspost-content table {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
	}

	#JMods th,
	#JMods td,
	#jmod-target th,
	#jmod-target td {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.osrsTabNavigation {
		display: block !important;
		overflow: visible !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.osrsTabMenuToggle {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 14px 16px 14px 46px !important;
		box-sizing: border-box !important;
		border: none !important;
		background-color: #6b5631 !important;
		color: #f0eae5 !important;
		font-family: Cinzel, 'Cinzel', serif !important;
		font-size: 18px !important;
		text-align: left !important;
		text-shadow: 1px 1px 1px #000000 !important;
		cursor: pointer !important;
		float: none !important;
		position: relative !important;
	}

	.osrsTabMenuToggle:hover {
		background-color: #9b8b75 !important;
	}

	.osrsTabMenuToggle::before {
		content: "";
		position: absolute;
		left: 18px;
		top: 50%;
		width: 16px;
		height: 2px;
		background: #f0eae5;
		box-shadow: 0 -5px 0 #f0eae5, 0 5px 0 #f0eae5;
		transform: translateY(-50%);
	}

	.osrsTabNavigation__track {
		display: block !important;
		overflow: visible !important;
		width: 100% !important;
	}

	.osrsTabNavigation__track > .osrsTabButton,
	.osrsTabNavigation__track > .osrsTabDropdown {
		display: none !important;
	}

	.osrsTabNavigation.is-open .osrsTabNavigation__track > .osrsTabButton,
	.osrsTabNavigation.is-open .osrsTabNavigation__track > .osrsTabDropdown {
		display: block !important;
		width: 100% !important;
		margin-top: 6px !important;
		box-sizing: border-box !important;
		float: none !important;
	}

	.osrsTabScrollButton {
		display: none !important;
	}

	.osrsTabNavigation.is-open .osrsTabButton,
	.osrsTabNavigation.is-open .osrsTabDropButton,
	.osrsTabNavigation.is-open .osrsTabDropdownMenu button,
	.osrsTabNavigation.is-open .osrsTabDropdownMenu a {
		display: block !important;
		width: 100% !important;
		padding: 10px 12px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-align: left !important;
		white-space: normal !important;
		box-sizing: border-box !important;
		float: none !important;
	}

	.osrsTabDropdown {
		position: relative !important;
		min-width: 0;
	}

	.osrsTabDropdown .osrsTabDropButton {
		display: block !important;
	}

	.osrsTabDropdownMenu {
		position: static !important;
		display: none !important;
		width: 100% !important;
		box-shadow: none !important;
		margin-top: 4px !important;
		border-left: 0;
		border-right: 0;
	}

	.osrsTabDropdown:hover .osrsTabDropdownMenu {
		display: none !important;
	}

	.osrsTabDropdown.is-open .osrsTabDropdownMenu {
		display: block !important;
	}

	.issue-title {
		font-size: 18px;
	}

	.issue-status {
		justify-self: end;
		margin: 0;
		font-size: 12px;
	}

	.issue-meta,
	.issue-description {
		font-size: 16px;
		line-height: 1.45;
	}

	.issue-meta {
		display: block;
	}

	.issue-meta-left,
	.issue-meta-updated {
		display: block;
		margin-top: 4px;
	}
}

@media (min-width: 769px) {
	.osrsTabMenuToggle {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.dialogue-box,
	.dialogue-slideshow {
		width: 100%;
		max-width: 519px;
	}

	.issue-summary {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title status"
			"meta meta";
		gap: 6px 10px;
		align-items: center;
	}

	.issue-meta {
		margin-top: 6px;
	}

	.event-calendar .calendar-day-headings,
	.event-calendar .calendar-week-days,
	.event-calendar .calendar-span-row {
		display: grid !important;
		grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
		gap: 4px !important;
	}

	.event-calendar .calendar-week {
		position: relative !important;
		margin-bottom: 4px !important;
	}

	.event-calendar .calendar-day-headings {
		margin-bottom: 4px !important;
	}

	.event-calendar .calendar-day-name {
		font-size: 10px;
		padding: 5px 1px;
	}

	.event-calendar .calendar-day,
	.event-calendar .calendar-day.is-empty {
		display: block !important;
		min-height: 92px !important;
		padding: 5px 5px 30px 5px !important;
	}

	.event-calendar .calendar-date-number {
		font-size: 13px;
		margin-bottom: 4px !important;
	}

	.event-calendar .calendar-today-label {
		display: none !important;
	}

	.event-calendar .calendar-event {
		font-size: 10px;
		line-height: 1.15;
		padding: 2px 3px;
		min-height: 18px;
	}

	.event-calendar .calendar-span-row {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 28px !important;
		z-index: 3 !important;
		pointer-events: none !important;
		margin: 0 !important;
	}

	.event-calendar .calendar-span-row .calendar-event {
		display: block !important;
		pointer-events: auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-top: 0 !important;
		margin-left: 5px !important;
		margin-right: 5px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}


	.calendar-bottom-controls {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		text-align: center;
	}

	.calendar-legend {
		justify-content: center;
		margin-top: 0;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.calendar-week-rail-grid {
		grid-template-columns: repeat(var(--calendar-week-rail-lanes, 1), 8px) minmax(0, 1fr);
		column-gap: 3px;
	}

	.calendar-week-span-marker {
		width: 5px;
	}
}

/* Optional external placement point for calendar filters. */
.calendar-filter-target {
	width: 100%;
	max-width: 650px;
	margin: 0.75em auto;
	box-sizing: border-box;
}

/* ==========================================================
   CALENDAR FILTERS
   Subtle, OSRS-style controls that stay visually secondary to
   the calendar itself. Disabled types use a non-colour cue too.
========================================================== */

.calendar-filter-target .calendar-legend,
.calendar-bottom-controls .calendar-legend {
	gap: 5px 6px;
}

.calendar-filter-label {
	display: inline-flex;
	align-items: center;
	margin-right: 2px;
	color: #d7c9a5;
	font-size: 11px;
	font-weight: normal;
	line-height: 1;
}

.calendar-filter-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 24px;
	padding: 4px 7px;
	border: 1px solid #4a3928;
	background: rgba(11, 11, 11, 0.36);
	color: #c8bda4;
	font-size: 11px;
	font-weight: normal;
	line-height: 1;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
	opacity: 0.68;
	text-decoration: none;
}

.calendar-filter-button .calendar-legend-swatch {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-color: rgba(0, 0, 0, 0.65);
}

.calendar-filter-button.is-active {
	background: rgba(34, 29, 23, 0.72);
	color: #f1ead8;
	border-color: #685239;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
	opacity: 1;
}

.calendar-filter-button:not(.is-active) {
	text-decoration: line-through;
}

.calendar-filter-button:not(.is-active) .calendar-legend-swatch {
	filter: grayscale(1);
	opacity: 0.35;
}

.calendar-filter-button:hover,
.calendar-filter-button:focus-visible {
	background: rgba(44, 37, 29, 0.8);
	color: #fff;
	border-color: #806746;
	opacity: 1;
	text-decoration: none;
}

.calendar-filter-button:not(.is-active):hover,
.calendar-filter-button:not(.is-active):focus-visible {
	text-decoration: line-through;
}

.calendar-filter-button:focus-visible,
.calendar-filter-show-all:focus-visible {
	outline: 1px solid #90c040;
	outline-offset: 2px;
}

.calendar-filter-show-all {
	padding: 4px 7px;
	border: 1px solid #4a3928;
	background: rgba(11, 11, 11, 0.22);
	color: #b8aa89;
	font-size: 11px;
	line-height: 1;
	box-shadow: none;
}

/* When there are hidden filters to restore, make Show all read as an
   available action without making it visually louder than the calendar. */
.calendar-filter-show-all:not(:disabled) {
	background: rgba(24, 19, 14, 0.9);
	border-color: #665038;
	color: #e7dcc2;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.calendar-filter-show-all:not(:disabled):hover,
.calendar-filter-show-all:not(:disabled):focus-visible {
	background: rgba(40, 32, 23, 0.96);
	border-color: #806746;
	color: #fff4dc;
	text-decoration: none;
}

.calendar-filter-show-all:disabled {
	opacity: 0.32;
	background: transparent;
	color: #8f856f;
}

@media (max-width: 600px) {
	.calendar-filter-target .calendar-legend,
	.calendar-bottom-controls .calendar-legend {
		gap: 5px;
	}

	.calendar-filter-label {
		flex-basis: 100%;
		justify-content: center;
		margin: 0 0 2px;
	}

	.calendar-filter-button,
	.calendar-filter-show-all {
		padding: 5px 6px;
		font-size: 10px;
	}
}