/*
 * rs2b2t HQ — 2004 RuneScape-era theme for MediaWiki (ADR-0027).
 *
 * Served from the container docroot as /rs2b2t-theme.css and attached by a
 * BeforePageDisplay hook in LocalSettings.php. It lives in git rather than in
 * MediaWiki:Common.css on purpose: the theme is reviewable, deploys with
 * `make deploy ROLE=wiki`, and cannot be broken from inside the wiki.
 *
 * Built on MonoBook, whose DOM is the classic 2004-era MediaWiki layout — far less to
 * fight than Vector 2022's modern chrome.
 *
 * Textures and framing graphics are rs2b2t's OWN assets, served from rs2b2t.com, the same
 * ones site/src/chrome.ts uses. Nothing is loaded from another fan site. Body text is
 * Arial, which is what the real 2004 RuneScape website used and what rs2b2t.com uses, so
 * no font files are needed.
 */

:root {
    --rs-gold: #ffb000;
    --rs-green: #90c040;
    --rs-brown: #382418;
    --rs-brown-dark: #241801;
    --rs-parchment: #d8ccb4;
    --rs-ink: #1a1008;
}

body {
    /* A scrim over the texture: rs2b2t's chain-and-rock tile is busy, and content has to
       win against it. Without this the page reads as noise. */
    background:
        linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
        #000 url(https://rs2b2t.com/img/background.jpg) top center repeat;
    color: var(--rs-parchment);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* ---- The content panel: a framed slab over the stone body ---------------------- */

#globalWrapper,
#column-content {
    background: none;
}

#content,
.mw-body {
    background:
        linear-gradient(rgba(20, 12, 6, 0.82), rgba(20, 12, 6, 0.82)),
        var(--rs-brown-dark) url(https://rs2b2t.com/img/background2.jpg) top left/100% auto repeat-y;
    border: 2px solid #5a4632;
    border-radius: 0;
    color: var(--rs-parchment);
    box-shadow: 0 0 0 1px #000 inset;
    padding: 1em 1.4em;
    margin-left: 12.2em;
}

/* ---- Headings ------------------------------------------------------------------ */

#content h1,
#content h2,
#content h3,
#content h4,
.mw-body h1,
.mw-body h2,
.mw-body h3 {
    color: var(--rs-gold);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-bottom: 1px solid #5a4632;
    text-shadow: 1px 1px 0 #000;
}

#content h1.firstHeading,
.mw-body h1.firstHeading {
    color: #fff;
    font-size: 1.7em;
    border-bottom: 2px solid var(--rs-gold);
}

#content h3,
.mw-body h3 {
    border-bottom: none;
    color: var(--rs-green);
}

/* ---- Links: RuneScape green, gold on hover ------------------------------------- */

#content a,
.mw-body a,
#p-cactions a,
.portlet a {
    color: var(--rs-green);
    text-decoration: none;
}

#content a:hover,
.mw-body a:hover,
.portlet a:hover {
    color: var(--rs-gold);
    text-decoration: underline;
}

/* A red link should still read as "missing", not as an error. */
#content a.new,
.mw-body a.new {
    color: #c86040;
}

/* MonoBook pins #p-logo a to a 155px box and sets `background-position: 35% 50%
   !important` while never setting background-size — so the shield renders at natural
   size and gets cropped to "s2b". Both overrides are required, and the position one has
   to out-!important theirs. */
#p-logo a,
#p-logo a:hover,
body:not(.skin--responsive) #p-logo a,
body:not(.skin--responsive) #p-logo a:hover {
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    height: 130px;
    width: 12em;
}

/* ---- Sidebar portlets ---------------------------------------------------------- */

#column-one {
    padding-top: 1em;
}

.portlet h3,
.portlet h5,
body:not(.skin--responsive) .portlet h3,
body:not(.skin--responsive) .portlet h5,
.mw-portlet > h3 {
    background: var(--rs-brown) !important;
    border: 1px solid #5a4632 !important;
    color: var(--rs-gold) !important;
    font-size: 11px;
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    margin: 0;
}

/* !important is load-bearing here, not laziness. ResourceLoader injects the skin's styles
   DYNAMICALLY, so skins.monobook.styles lands in <head> AFTER this static stylesheet and
   wins every specificity tie. MonoBook sets background-color:#fff and color:#222 on these,
   which is why the sidebar stayed white through two rounds of selector fixes. Only the
   properties that must win carry !important. */
.portlet .pBody,
.mw-portlet > div,
body:not(.skin--responsive) .pBody,
body:not(.skin--responsive) .mw-portlet > div {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #5a4632 !important;
    border-top: none !important;
    color: var(--rs-parchment) !important;
    font-size: 12px;
    padding: 4px 6px;
}

.portlet ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portlet li {
    padding: 1px 0;
}

/* ---- Tabs --------------------------------------------------------------------- */

#p-cactions li,
#p-cactions li.selected,
body:not(.skin--responsive) #p-cactions li,
body:not(.skin--responsive) #p-cactions li.selected {
    background-color: var(--rs-brown) !important;
    border: 1px solid #5a4632 !important;
    border-bottom: none !important;
}

#p-cactions li.selected,
body:not(.skin--responsive) #p-cactions li.selected {
    background-color: #5a4632 !important;
}

/* MonoBook colours tab links blue, and red for a missing talk page. Both read as broken
   against the panel; keep them parchment and let hover do the work. */
#p-cactions li a,
#p-cactions li a:visited,
#p-cactions li.new a,
body:not(.skin--responsive) #p-cactions li a {
    background-color: transparent !important;
    color: var(--rs-parchment) !important;
}

#p-cactions li a:hover {
    color: var(--rs-gold) !important;
}

/* ---- Top-right personal bar: log in / user links / Echo notification badges ---- */

#p-personal,
#p-personal .pBody,
body:not(.skin--responsive) #p-personal .pBody {
    background: transparent !important;
    border: none !important;
}

#p-personal li a,
#p-personal li a:visited {
    color: var(--rs-green) !important;
}

#p-personal li a:hover {
    color: var(--rs-gold) !important;
}

/* Echo's alert/message badges are white pills by default. */
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
    background: var(--rs-brown) !important;
    border: 1px solid #5a4632 !important;
    color: var(--rs-gold) !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup,
.oo-ui-popupWidget-popup {
    background: var(--rs-brown-dark) !important;
    border: 1px solid #5a4632 !important;
    color: var(--rs-parchment) !important;
}

/* ---- Tables: wikitable and the {{Quest}} infobox ------------------------------- */

#content table.wikitable,
.mw-body table.wikitable,
#content table.infobox,
.mw-body table.infobox {
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid #5a4632;
    border-collapse: collapse;
    color: var(--rs-parchment);
}

#content table.wikitable > * > tr > th,
.mw-body table.wikitable > * > tr > th,
#content table.infobox th,
.mw-body table.infobox th {
    background: var(--rs-brown);
    border: 1px solid #5a4632;
    color: var(--rs-gold);
    text-align: left;
    padding: 3px 7px;
}

#content table.wikitable > * > tr > td,
.mw-body table.wikitable > * > tr > td,
#content table.infobox td,
.mw-body table.infobox td {
    border: 1px solid #5a4632;
    padding: 3px 7px;
}

/* The quest infobox floats right, like every RuneScape wiki since. */
#content table.infobox,
.mw-body table.infobox {
    float: right;
    margin: 0 0 1em 1.4em;
    min-width: 18em;
    max-width: 24em;
}

/* ---- The Main Page quest index ------------------------------------------------ */

.rs-quest-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
}

.rs-quest-column {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #5a4632;
    flex: 1 1 14em;
    min-width: 13em;
    padding: 0.4em 0.8em 0.8em;
}

.rs-quest-column h3 {
    color: var(--rs-gold) !important;
    font-size: 13px;
    margin: 0.3em 0 0.5em;
    text-transform: uppercase;
}

.rs-quest-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rs-quest-column li {
    padding: 1px 0;
}

/* A callout for the fact-audit link and other notices. */
.rs-notice {
    background: rgba(90, 70, 50, 0.35);
    border-left: 3px solid var(--rs-gold);
    margin: 1em 0;
    padding: 0.6em 1em;
}

/* The category bar at the foot of every article — MonoBook gives it a white box. */
#catlinks,
.catlinks,
body:not(.skin--responsive) #catlinks,
body:not(.skin--responsive) .catlinks {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #5a4632 !important;
    color: var(--rs-parchment) !important;
}

/* ---- Chrome that would look wrong in 2004 ------------------------------------- */

#siteNotice,
.usermessage {
    background: var(--rs-brown);
    border: 1px solid var(--rs-gold);
    color: var(--rs-parchment);
}

#footer {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #5a4632;
    color: #9f9f8a;
    font-size: 11px;
    margin-left: 12.2em;
}

#footer a {
    color: var(--rs-green);
}

/* Search and other inputs: light fields on a dark page, so they read as inputs. */
#searchInput,
#p-search input,
#content input[type="text"],
#content input[type="search"] {
    background: #f8f5ee;
    border: 1px solid #5a4632;
    color: #111;
}

/* Editing surfaces stay legible — dark-on-dark textareas are miserable to work in. */
#content textarea,
.mw-body textarea,
#wpTextbox1 {
    background: #f8f5ee;
    color: #111;
    font-family: monospace;
}

/* Keep wide tables and code from breaking the layout on narrow screens. */
#content pre,
.mw-body pre {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #5a4632;
    color: var(--rs-parchment);
    overflow-x: auto;
}

@media (max-width: 700px) {
    #content,
    .mw-body,
    #footer {
        margin-left: 0;
    }

    #content table.infobox,
    .mw-body table.infobox {
        float: none;
        margin: 0 0 1em;
        max-width: 100%;
    }
}

/* =================================================================================
 * Special pages, forms, diffs and popups — "stone chrome, parchment documents".
 *
 * The chrome above is dark. Everything below is a WORKING surface: forms, editors,
 * diffs, data tables, notification popups. Those are deliberately light parchment with
 * brown frames and dark ink, rather than dark-on-dark.
 *
 * Why, since the brief was "theme everything": MediaWiki's special pages are built from
 * OOUI and Codex widgets assembled client-side, with their own light palettes baked into
 * dozens of internal elements. Chasing them dark is unwinnable and ends in unreadable
 * form controls — and the 2004 site itself paired stone framing with light panels, so
 * parchment is period-correct rather than a compromise. What matters is that they look
 * INTENTIONAL: framed, tinted, never default white.
 * ================================================================================= */

:root {
    --rs-panel: #e6ddc6;
    --rs-panel-edge: #8a6f4e;
    --rs-panel-ink: #1e1408;
    --rs-panel-link: #2b6410;
}

/* ---- The shared parchment surface ---------------------------------------------- */

#content .oo-ui-panelLayout-padded,
#content .oo-ui-fieldsetLayout,
#content .mw-htmlform,
#content fieldset,
#content table.diff,
#content table.TablePager,
#content table.mw-datatable,
#content .mw-search-results-container,
#content .mw-rcfilters-ui-filterWrapperWidget,
#content .oo-ui-popupWidget-popup,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup,
.oo-ui-popupWidget-popup {
    background-color: var(--rs-panel) !important;
    border: 1px solid var(--rs-panel-edge) !important;
    color: var(--rs-panel-ink) !important;
}

/* Text and links inside a parchment panel: the page-level green is far too light here. */
#content .oo-ui-fieldsetLayout,
#content .mw-htmlform,
#content table.diff,
#content table.TablePager,
#content table.mw-datatable,
#content .mw-search-results-container,
.oo-ui-popupWidget-popup {
    --rs-parchment: var(--rs-panel-ink);
}

#content .mw-htmlform a,
#content table.TablePager a,
#content table.mw-datatable a,
#content .mw-search-results-container a,
#content table.diff a,
.oo-ui-popupWidget-popup a {
    color: var(--rs-panel-link) !important;
}

#content .mw-htmlform a:visited,
#content table.TablePager a:visited,
#content .mw-search-results-container a:visited {
    color: #5a4632 !important;
}

/* ---- Form controls ------------------------------------------------------------- */

#content input[type="text"],
#content input[type="search"],
#content input[type="password"],
#content input[type="number"],
#content select,
#content textarea,
#content .oo-ui-inputWidget-input {
    background-color: #f8f5ee !important;
    border: 1px solid var(--rs-panel-edge) !important;
    color: #111 !important;
}

/* Buttons are PARCHMENT, not brown.
 *
 * Brown buttons were tried first and failed: OOUI sets its own colours on the inner
 * .oo-ui-labelElement-label span and renders icons as dark SVG background-images, so
 * "Namespaces" and "Tags" on Special:RecentChanges came out near-invisible. Chasing every
 * label and icon rule is whack-a-mole; a light button with dark ink lets OOUI's own
 * defaults be correct, and these live inside parchment panels anyway. */
#content .oo-ui-buttonElement-button,
#content .cdx-button,
#content button,
#content input[type="submit"] {
    background-color: #d9cdb0 !important;
    border: 1px solid var(--rs-panel-edge) !important;
    color: var(--rs-panel-ink) !important;
}

#content .oo-ui-buttonElement-button .oo-ui-labelElement-label,
#content .cdx-button .cdx-button__label {
    color: var(--rs-panel-ink) !important;
}

#content .oo-ui-buttonElement-button:hover,
#content .cdx-button:hover,
#content button:hover,
#content input[type="submit"]:hover {
    background-color: #efe4c8 !important;
    border-color: #4a2f10 !important;
}

/* Primary/progressive actions keep their emphasis, in gold rather than blue. */
#content .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
#content .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
#content .cdx-button--action-progressive,
#content .cdx-button--weight-primary {
    background-color: #e8c65c !important;
    border-color: #7a5c1e !important;
    color: #2a1b08 !important;
}

#content .oo-ui-flaggedElement-progressive .oo-ui-labelElement-label,
#content .cdx-button--action-progressive .cdx-button__label {
    color: #2a1b08 !important;
}

/* Destructive stays legible without going pink-on-parchment. */
#content .oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button,
#content .cdx-button--action-destructive {
    color: #8f2d18 !important;
}

/* ---- Preferences: the tabbed index layout -------------------------------------- */

#content .oo-ui-indexLayout .oo-ui-tabSelectWidget {
    background-color: transparent !important;
    border-bottom: 1px solid var(--rs-gold) !important;
}

#content .oo-ui-tabOptionWidget {
    background-color: var(--rs-brown) !important;
    border: 1px solid #5a4632 !important;
    color: var(--rs-parchment) !important;
}

#content .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background-color: #5a4632 !important;
    color: var(--rs-gold) !important;
}

#content .oo-ui-fieldsetLayout-header,
#content legend,
#content .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
    color: #4a2f10 !important;
    font-weight: bold;
}

/* ---- Diffs: legibility wins. Keep MediaWiki's own add/remove tints ------------- */

#content table.diff td.diff-addedline,
#content table.diff td.diff-deletedline,
#content table.diff td.diff-context {
    color: var(--rs-panel-ink) !important;
}

#content table.diff td.diff-addedline {
    background-color: #d8ecc8 !important;
}

#content table.diff td.diff-deletedline {
    background-color: #f2d8c8 !important;
}

#content table.diff td.diff-context {
    background-color: #ded5be !important;
}

#content .diff-lineno,
#content td.diff-marker {
    color: #4a2f10 !important;
}

/* ---- Data tables: history, RecentChanges, Special:Moderation ------------------- */

#content table.TablePager th,
#content table.mw-datatable th {
    background-color: #cdbf9f !important;
    color: #2a1b08 !important;
}

#content table.TablePager tr:hover td,
#content table.mw-datatable tr:hover td {
    background-color: #d9cdb0 !important;
}

/* History and RecentChanges lists sit directly on the dark panel, not in a table. */
#content .mw-changeslist,
#content .mw-changeslist li,
#content .mw-contributions-list li,
#content #pagehistory li {
    color: var(--rs-parchment);
}

#content #pagehistory li.selected {
    background-color: rgba(90, 70, 50, 0.4) !important;
    color: var(--rs-parchment) !important;
}

#content .mw-plusminus-pos { color: #8ed24a !important; }
#content .mw-plusminus-neg { color: #e08a6a !important; }
#content .mw-plusminus-null { color: #b8ab92 !important; }

/* ---- Message boxes: errors, warnings, successes, notices ---------------------- */

#content .mw-message-box,
#content .cdx-message,
#content .errorbox,
#content .warningbox,
#content .successbox,
#content .mw-warning-with-logexcerpt {
    background-color: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid #5a4632 !important;
    color: var(--rs-parchment) !important;
}

#content .mw-message-box-error,
#content .cdx-message--error,
#content .errorbox {
    border-left: 4px solid #c8503a !important;
}

#content .mw-message-box-warning,
#content .cdx-message--warning,
#content .warningbox {
    border-left: 4px solid var(--rs-gold) !important;
}

#content .mw-message-box-success,
#content .cdx-message--success,
#content .successbox {
    border-left: 4px solid var(--rs-green) !important;
}

/* ---- Search results ----------------------------------------------------------- */

#content .mw-search-result-heading a { font-weight: bold; }
#content .searchresult { background-color: #f2e9d2 !important; color: var(--rs-panel-ink) !important; }
#content .mw-search-results-info,
#content .results-info { color: #4a2f10 !important; }

/* ---- Edit page ---------------------------------------------------------------- */

#content .wikiEditor-ui-toolbar,
#content .wikiEditor-ui-top,
#content #editform .editOptions {
    background-color: var(--rs-brown) !important;
    border: 1px solid #5a4632 !important;
    color: var(--rs-parchment) !important;
}

#content #wpSummary { background-color: #f8f5ee !important; color: #111 !important; }

/* ---- Notifications (Echo) ----------------------------------------------------- */

.mw-echo-ui-notificationItemWidget {
    background-color: var(--rs-panel) !important;
    border-bottom: 1px solid var(--rs-panel-edge) !important;
    color: var(--rs-panel-ink) !important;
}

.mw-echo-ui-notificationItemWidget-unread {
    background-color: #f2e9d2 !important;
}

.mw-echo-ui-notificationItemWidget a,
.mw-echo-ui-notificationsWidget a {
    color: var(--rs-panel-link) !important;
}

/* =================================================================================
 * The landing-page portal: a grid of section tiles.
 *
 * Icons are set HERE, not in the wikitext, because MediaWiki strips <img> tags — so a
 * page cannot carry an external image without an upload. The wikitext emits a class per
 * tile and this file supplies the sprite, which also keeps the image URLs in git.
 *
 * Sprites are rs2b2t's own, generated from the Content pack (ADR-0025) and served from
 * rs2b2t.com — the same first-party source as the textures above.
 * ================================================================================= */

/* Grid, not flex-wrap: six tiles wrapped 4+2 and read as a mistake. Three columns give
   two even rows, and collapse to two then one on narrow screens. */
#content .rs-portal {
    display: grid;
    gap: 0.9em;
    grid-template-columns: repeat(3, 1fr);
    margin: 1.4em 0;
    padding: 0;
}

#content .rs-portal-tile {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid #5a4632;
    box-shadow: 0 0 0 1px #000 inset;
    /* Sized to its content: an earlier min-height left a band of dead space under every
       blurb. The sprite is absolutely positioned, so the top padding reserves its room. */
    padding: 4.6em 0.8em 1em;
    position: relative;
    text-align: center;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

#content .rs-portal-tile:hover {
    background: rgba(90, 70, 50, 0.4);
    border-color: var(--rs-gold);
}

/* The sprite sits above the label, centred, 48px tall. */
#content .rs-portal-tile::before {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 3.4em;
    left: 0;
    position: absolute;
    right: 0;
    top: 1.1em;
}

#content .rs-portal-tile a {
    color: var(--rs-gold) !important;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

#content .rs-portal-tile a:hover { color: #fff !important; }

#content .rs-portal-tile .rs-portal-blurb {
    color: #b8ab92;
    display: block;
    font-size: 11.5px;
    font-weight: normal;
    margin-top: 0.35em;
    text-transform: none;
}

#content .rs-tile-quests::before  { background-image: url(https://rs2b2t.com/img/items/arravcert_scroll.webp); }
#content .rs-tile-skills::before  { background-image: url(https://rs2b2t.com/img/items/adamant_pickaxe.webp); }
#content .rs-tile-special::before { background-image: url(https://rs2b2t.com/img/items/adamant_kiteshield.webp); }
#content .rs-tile-trails::before  { background-image: url(https://rs2b2t.com/img/items/casket.webp); }
#content .rs-tile-audit::before   { background-image: url(https://rs2b2t.com/img/items/gianne_cook_book.webp); }
#content .rs-tile-play::before    { background-image: url(https://rs2b2t.com/img/items/crystal_key.webp); }

@media (max-width: 860px) {
    #content .rs-portal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    #content .rs-portal { grid-template-columns: 1fr; }
}

/* ---- Skill portal: one tile per skill, denser than the 3-column landing grid ------
 *
 * Same tile treatment as .rs-portal, but 19 items want more columns. Icons come from the
 * game's own stat sprites, sliced out of the Content pack's staticons sheets and served
 * from rs2b2t.com like the item sprites (ADR-0025).
 *
 * image-rendering: pixelated is load-bearing — these are 25x25 pixel art upscaled 4x, and
 * smooth interpolation turns them to mush.
 */

#content .rs-skill-grid {
    display: grid;
    gap: 0.75em;
    grid-template-columns: repeat(5, 1fr);
    margin: 1.2em 0;
}

#content .rs-skill-grid .rs-portal-tile {
    padding: 3.9em 0.5em 0.8em;
}

#content .rs-skill-grid .rs-portal-tile::before {
    height: 2.9em;
    image-rendering: pixelated;
    top: 0.85em;
}

#content .rs-skill-grid .rs-portal-tile a {
    font-size: 12px;
}

@media (max-width: 900px) {
    #content .rs-skill-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    #content .rs-skill-grid { grid-template-columns: repeat(2, 1fr); }
}

#content .rs-skill-agility::before { background-image: url(https://rs2b2t.com/img/skills/agility.png); }
#content .rs-skill-attack::before { background-image: url(https://rs2b2t.com/img/skills/attack.png); }
#content .rs-skill-cooking::before { background-image: url(https://rs2b2t.com/img/skills/cooking.png); }
#content .rs-skill-crafting::before { background-image: url(https://rs2b2t.com/img/skills/crafting.png); }
#content .rs-skill-defence::before { background-image: url(https://rs2b2t.com/img/skills/defence.png); }
#content .rs-skill-firemaking::before { background-image: url(https://rs2b2t.com/img/skills/firemaking.png); }
#content .rs-skill-fishing::before { background-image: url(https://rs2b2t.com/img/skills/fishing.png); }
#content .rs-skill-fletching::before { background-image: url(https://rs2b2t.com/img/skills/fletching.png); }
#content .rs-skill-herblore::before { background-image: url(https://rs2b2t.com/img/skills/herblore.png); }
#content .rs-skill-hitpoints::before { background-image: url(https://rs2b2t.com/img/skills/hitpoints.png); }
#content .rs-skill-magic::before { background-image: url(https://rs2b2t.com/img/skills/magic.png); }
#content .rs-skill-mining::before { background-image: url(https://rs2b2t.com/img/skills/mining.png); }
#content .rs-skill-prayer::before { background-image: url(https://rs2b2t.com/img/skills/prayer.png); }
#content .rs-skill-ranged::before { background-image: url(https://rs2b2t.com/img/skills/ranged.png); }
#content .rs-skill-runecraft::before { background-image: url(https://rs2b2t.com/img/skills/runecraft.png); }
#content .rs-skill-smithing::before { background-image: url(https://rs2b2t.com/img/skills/smithing.png); }
#content .rs-skill-strength::before { background-image: url(https://rs2b2t.com/img/skills/strength.png); }
#content .rs-skill-thieving::before { background-image: url(https://rs2b2t.com/img/skills/thieving.png); }
#content .rs-skill-woodcutting::before { background-image: url(https://rs2b2t.com/img/skills/woodcutting.png); }

/* ---- Treasure trail portal: three difficulties, plus rewards in its own section --- */

#content .rs-trail-grid {
    display: grid;
    gap: 0.9em;
    grid-template-columns: repeat(3, 1fr);
    margin: 1.2em 0;
}

/* The rewards section holds a single tile; keep it the width of one column rather than
   letting it stretch across the row. */
#content .rs-trail-grid--single {
    grid-template-columns: repeat(3, 1fr);
}

#content .rs-trail-grid--single .rs-portal-tile {
    grid-column: 1;
}

/* Armour and casket sprites are chunkier than the stat icons, so give them more room. */
#content .rs-trail-grid .rs-portal-tile::before {
    height: 3.6em;
    image-rendering: pixelated;
    top: 0.9em;
    z-index: 1;
}

/* A lit backing behind the sprite. Load-bearing, not decoration: all three difficulty
   icons are platebodies — same silhouette, distinguished only by colour — and black
   trimmed on a near-black tile was indistinguishable from adamant. The backing is the
   game's own inventory-slot idea: light the item so a dark one still reads. */
#content .rs-trail-grid .rs-portal-tile {
    overflow: hidden;
}

#content .rs-trail-grid .rs-portal-tile::after {
    background: radial-gradient(circle at 50% 42%,
        rgba(214, 198, 160, 0.30) 0%,
        rgba(140, 120, 86, 0.16) 45%,
        rgba(0, 0, 0, 0) 68%);
    content: '';
    height: 5.2em;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0.2em;
}

#content .rs-trail-easy::before    { background-image: url(https://rs2b2t.com/img/items/black_platebody_trim.webp); }
#content .rs-trail-medium::before  { background-image: url(https://rs2b2t.com/img/items/adamant_platebody_trim.webp); }
#content .rs-trail-hard::before    { background-image: url(https://rs2b2t.com/img/items/rune_platebody_zamorak.webp); }
#content .rs-trail-rewards::before { background-image: url(https://rs2b2t.com/img/items/casket.webp); }

@media (max-width: 700px) {
    #content .rs-trail-grid,
    #content .rs-trail-grid--single { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
    #content .rs-trail-grid,
    #content .rs-trail-grid--single { grid-template-columns: 1fr; }
}