/* 2003Scape palette — ported from rsc-web/app/globals.css (stone + gold) */
:root {
    --bg: #14110d;          /* stone-950 */
    --surface: #1e1913;     /* stone-900 */
    --surface-2: #2a231a;   /* stone-800 */
    --surface-3: #3a3023;   /* stone-700 */
    --text: #eae4d8;        /* text-primary */
    --muted: #a89f8f;       /* text-secondary */
    --muted-2: #6e6459;     /* text-muted */
    --accent: #d4af37;      /* gold-500 */
    --accent-hi: #f0c674;   /* gold-400 */
    --accent-lo: #b59026;   /* gold-600 */
    --accent-glow: rgba(212, 175, 55, 0.35);
    --danger: #e0776b;
    --success: #6a9955;
    --border: rgba(212, 175, 55, 0.2);  /* border-gold-500/20 */
    --border-soft: #2a231a;             /* stone-800 */
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.12);
    --font-adventure: 'Book Antiqua', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
}
/* Classic stays on the same warm stone + gold palette, only darker and
   higher-contrast so the toggle still reads as a deliberate change */
:root[data-theme="classic"] {
    --bg: #0b0906;
    --surface: #14110d;
    --surface-2: #1e1913;
    --surface-3: #2a231a;
    --text: #f5efe2;
    --muted: #b3a894;
    --accent: #ffd700;
    --accent-hi: #ffe97a;
    --accent-lo: #c9a227;
    --accent-glow: rgba(255, 215, 0, 0.4);
    --border: rgba(255, 215, 0, 0.22);
    --border-soft: #1e1913;
    --shadow-glow: 0 0 30px rgba(255, 215, 0, 0.1);
}
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    overflow: hidden;
    background:
        radial-gradient(60% 40% at 50% 25%, rgba(212, 175, 55, 0.10), transparent 70%),
        linear-gradient(to bottom, var(--bg) 0%, var(--surface) 55%, var(--bg) 100%);
}

/* standalone-client framing: the shell owns the viewport and the stage
   keeps every pixel the header does not use */
.rsc-shell {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.9rem);
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* the header: the classic shell's. every dimension is em-based off this
   font-size, and the game itself always fits the stage */
.rsc-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    font-size: 0.95rem;
    padding: 0.8em 1.1em;
    border: 1px solid var(--border);
    border-radius: 0.85em;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(240, 198, 116, 0.06),
        0 10px 30px -20px rgba(0, 0, 0, 0.9);
}

.rsc-eyebrow {
    margin: 0 0 0.2em;
    color: var(--accent);
    font-size: 0.72em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}

h1, h2 {
    margin: 0;
}

h1 {
    font-family: var(--font-adventure);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

h2 {
    margin-bottom: 1em;
    font-family: var(--font-adventure);
    font-size: 1.15em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.rsc-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.9em;
}

.rsc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.5rem;
}
button, select, input {
    font: inherit;
}

/* mirrors rsc-web/components/ui/Button.tsx (secondary + primary variants) */
button {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.6em 1.1em;
    border: 1px solid var(--surface-3);
    border-radius: 0.55em;
    font-family: var(--font-adventure);
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent-hi);
    background: var(--surface-2);
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease,
        border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

button:hover {
    color: #fff8e6;
    background: var(--surface-3);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent), transparent 50%);
    outline-offset: 2px;
}

button[aria-pressed="true"] {
    border-color: rgba(240, 198, 116, 0.6);
    background: linear-gradient(to bottom, var(--accent), var(--accent-lo));
    color: #14110d;
}

button:active {
    transform: translateY(0);
    box-shadow: none;
}
.rsc-stage {
    position: relative;
    /* definite tracks (not auto) so percentage heights inside resolve
       against the stage instead of the canvas' own size */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    /* flex item that absorbs all of the space the header leaves behind */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.35rem, 0.8vw, 0.75rem);
    border: 1px solid var(--border-soft);
    border-radius: 0.9rem;
    background: #0b0906;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(240, 198, 116, 0.05);
}

/* host for the letterboxed canvas - game-shell.js scales the canvas to
   fill this box while keeping the native 512x346 aspect ratio */
#rsc-game {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.rsc-game-container {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rsc-game-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.65);
    image-rendering: pixelated;
}

.rsc-status {
    margin: 0;
    padding: 0.3em 0.75em;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--muted-2);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    font-size: 0.75em;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.rsc-error {
    color: var(--danger);
    border-color: rgba(224, 119, 107, 0.35);
    font-weight: 500;
}

.rsc-panel {
    position: fixed;
    z-index: 100;
    top: 6rem;
    right: 1rem;
    width: min(340px, calc(100vw - 2rem));
    font-size: 0.95rem;
    padding: 1.15em 1.25em;
    border: 1px solid var(--border);
    border-radius: 0.9em;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow), var(--shadow-glow);
    animation: slideIn 200ms ease-out;
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.rsc-panel label {
    display: grid;
    gap: 0.35em;
    margin: 0.9em 0;
    color: var(--muted);
    font-size: 0.92em;
    font-weight: 500;
}

.rsc-panel select, .rsc-panel input[type="range"] {
    width: 100%;
    padding: 0.5em 0.7em;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 0.5em;
    color: var(--text);
    font-size: 0.92em;
    accent-color: var(--accent);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.rsc-panel select:hover, .rsc-panel input[type="range"]:hover {
    border-color: rgba(212, 175, 55, 0.4);
}

.rsc-panel select:focus, .rsc-panel input[type="range"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 65%);
}

.rsc-check {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5em;
    margin: 0.5em 0;
    color: var(--muted);
}

.rsc-check input[type="checkbox"] {
    accent-color: var(--accent);
}

.rsc-help {
    margin: 1em 0 0;
    color: var(--muted-2);
    font-size: 0.84em;
    line-height: 1.55;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-lo);
    border: 2px solid var(--bg);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hi);
}

/* Selection styling */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: var(--text);
}

@media (max-width: 650px) {
    .rsc-header {
        align-items: flex-start;
        flex-direction: column;
    }
    
    .rsc-actions {
        justify-content: start;
    }
    
    /* small screens: let the page scroll instead of clipping the shell */
    .rsc-shell {
        height: auto;
        min-height: 100vh;
    }

    body {
        overflow: auto;
    }

    .rsc-stage {
        min-height: 60vh;
        padding: 0.75rem;
    }
    
    .rsc-panel {
        right: 0.5rem;
        width: calc(100vw - 1rem);
        top: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.reduce-motion * {
    transition: none !important;
    animation: none !important;
}

/* the bot panel (world 2 only) reuses .rsc-panel, and adds the bits the
   settings panel has no equivalent for: a button row, a status line and a
   scrolling log */
.rsc-bot {
    top: 6rem;
    left: 1rem;
    right: auto;
    width: min(380px, calc(100vw - 2rem));
}

.rsc-bot input[type="text"] {
    width: 100%;
    margin-top: 0.35em;
    padding: 0.4em 0.55em;
    font: inherit;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 0.5em;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.rsc-bot-buttons {
    display: flex;
    gap: 0.5em;
    margin: 0.85em 0 0.5em;
}

.rsc-bot-buttons button {
    flex: 1;
}

.rsc-bot-status {
    margin: 0.35em 0 0.6em;
    font-size: 0.9em;
    opacity: 0.85;
}

.rsc-bot-log {
    max-height: 12em;
    margin: 0 0 0.75em;
    padding: 0.6em 0.7em;
    overflow-y: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8em;
    line-height: 1.45;
    white-space: pre-wrap;
    border: 1px solid var(--border);
    border-radius: 0.5em;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* the runner tags every line info/warn/error; colouring them is what stops a
   script that has been quietly failing from looking like one that is working */
.rsc-bot-log-info {
    opacity: 0.85;
}

.rsc-bot-log-warn {
    color: #e3b341;
}

.rsc-bot-log-error {
    color: #f4707a;
}

/* ---------------------------------------------------------------------------
   the loading and login screens (src/title-screen.js), laid out like Old
   School RuneScape's. the overlay shares the canvas's grid cell and is sized
   to it; everything inside .title-stage is laid out at the canvas's native
   512x346 and scaled up with it, so these px are game pixels
   ------------------------------------------------------------------------- */

.rsc-game-container > * {
    grid-area: 1 / 1;
}

.title-screen {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: #000;
    color: #fff;
    font: 700 11px/1.3 Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 0 #000;
    user-select: none;
}

.title-screen[hidden] {
    display: none;
}

.title-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 512px;
    height: 346px;
    transform-origin: 0 0;
}

.title-scenes,
.title-shade {
    position: absolute;
    inset: 0;
}

/* the painted scene's animations are stacked by z-index (src/title-screen.js),
   which has to order them among themselves only, not lift them over the
   logo and the login box */
.title-scenes {
    isolation: isolate;
}

/* each scene keeps its animations' z-indexes to itself, so a scene fading
   in over another isn't overlaid by the other's animations */
.title-scene {
    position: absolute;
    inset: 0;
    isolation: isolate;
    background: center / cover no-repeat;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.title-scene.active {
    opacity: 1;
    animation: title-drift 12s ease-out both;
}

@keyframes title-drift {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.1);
    }
}

/* the game's renders are dark; the painted scene is lit as it was drawn */
.title-scene:not(.title-painted) {
    filter: brightness(1.3) saturate(1.1);
}

/* pixel art at its native 512x346, so it's scaled up whole pixels crisp and
   left still, like the original's login art */
.title-scene.title-painted {
    overflow: hidden;
    background-size: 100% 100%;
    image-rendering: pixelated;
    animation: none;
    transition-duration: 0.5s;
}

/* what moves in it: Aseprite sprite sheets laid over the scene in its own
   pixels, stepped through a frame at a time by keyframes made from each
   sheet's JSON (src/title-screen.js), after fading in with title-anim-in.
   reduced motion holds the first frame, but still lets them fade in */
.title-anim {
    position: absolute;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
}

@keyframes title-anim-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .title-anim {
        animation-play-state: paused, running;
    }
}

.title-shade {
    background:
        radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(0, 0, 0, 0.5) 90%),
        linear-gradient(rgba(0, 0, 0, 0.5), transparent 26%, transparent 80%, rgba(0, 0, 0, 0.35));
}

/* the painted scene is already dark at its edges; it only needs the top
   dimming a little behind the logo. the Halloween scene has no logo there */
.title-screen.title-has-painted .title-shade {
    background: linear-gradient(rgba(0, 0, 0, 0.35), transparent 24%);
}

.title-screen.title-has-painted[data-scene='halloween'] .title-shade {
    background: none;
}

/* like the original, loading happens on black */
.title-screen[data-state='loading'] .title-scenes,
.title-screen[data-state='error'] .title-scenes {
    display: none;
}

/* the logo, the rune-stone wordmark drawn in Aseprite (branding/logo.aseprite,
   exported as assets/title/login-logo.png). it's pixel art at the scene's own
   scale, one of its pixels to one of the scene's, so it's scaled up with the
   stage as crisply as the backdrop. it hangs over the top of the arch, its
   ends over the pillars' capitals */
.title-logo {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* over the Halloween scene it would hide the skull, so once the scene shows
   it fades out, and the welcome box carries it instead (.title-greeting-logo).
   it stays for loading, which is on black, as the scene's own burning logo,
   and for screen readers */
.title-screen[data-scene='halloween']:not([data-state='loading']):not([data-state='error']) .title-logo {
    opacity: 0;
}

.title-wordmark {
    margin: 0;
    line-height: 0;
}

.title-logo-image {
    display: block;
    width: 240px;
    height: 100px;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65));
}

/* no logo until the website has said which scene, and so which logo, it is,
   rather than its alt text */
.title-logo-image:not([src]) {
    visibility: hidden;
}

/* loading */
.title-loading {
    position: absolute;
    top: 176px;
    left: 50%;
    display: none;
    width: 304px;
    transform: translateX(-50%);
}

.title-screen[data-state='loading'] .title-loading,
.title-screen[data-state='error'] .title-loading {
    display: block;
}

.title-bar {
    position: relative;
    height: 22px;
    padding: 1px;
    border: 1px solid #8c1111;
    background: #000;
}

.title-bar-fill {
    width: 0;
    height: 100%;
    background: #8c1111;
    transition: width 0.25s ease;
}

.title-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-error {
    display: none;
    margin: 0;
    text-align: center;
    color: #ff4d4d;
}

.title-screen[data-state='error'] .title-error {
    display: block;
}

.title-screen[data-state='error'] .title-bar {
    display: none;
}

/* the login box */
.title-box {
    position: absolute;
    top: 128px;
    left: 50%;
    display: none;
    width: 250px;
    padding: 10px 14px 12px;
    transform: translateX(-50%);
    border: 1px solid #6b5a3e;
    background: rgba(10, 8, 5, 0.82);
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, 0.6);
    transform-origin: 50% 0;
    transition: top 0.5s ease, transform 0.5s ease;
}

/* in the Halloween scene the box stands in the gate's doorway (x 180 to
   332, under the beam at y 131, assets/title/hades.lua), made smaller to fit
   between its columns, so the pillars, the lintel and the skull all show
   round it */
.title-screen[data-scene='halloween'] .title-box {
    top: 141px;
    transform: translateX(-50%) scale(0.584);
}

/* the stone hall, Christmas and Easter scenes share one gateway
   (assets/title/gateway.lua), its pillars' inner edges at x 186 and 326. the
   box stands in the doorway between them, under the logo, made smaller to
   fit (250px at 0.56 is 140px) so both pillars and the arch show round it */
.title-screen[data-scene='default'] .title-box,
.title-screen[data-scene='christmas'] .title-box,
.title-screen[data-scene='easter'] .title-box {
    top: 108px;
    transform: translateX(-50%) scale(0.56);
}

.title-welcome,
.title-login {
    display: none;
}

.title-screen[data-state='welcome'] .title-box,
.title-screen[data-state='login'] .title-box,
.title-screen[data-state='connecting'] .title-box,
.title-screen[data-state='welcome'] .title-welcome,
.title-screen[data-state='login'] .title-login,
.title-screen[data-state='connecting'] .title-login {
    display: block;
}

.title-heading {
    margin: 2px 0 12px;
    font-size: 12px;
    text-align: center;
    color: #ffff00;
}

/* the Halloween scene's welcome box has its own logo, the letters burning
   with ghost-fire, in place of its greeting, which is still there for screen
   readers. it's the 3x GIF smoothed down, as at this size the logo's pixels
   don't land on whole screen pixels (src/title-screen.js picks the file) */
.title-greeting-logo {
    display: none;
}

.title-screen[data-scene='halloween'] .title-welcome .title-heading {
    margin: 0 0 8px;
    line-height: 0;
}

.title-screen[data-scene='halloween'] .title-greeting {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.title-screen[data-scene='halloween'] .title-greeting-logo {
    display: block;
    width: 162px;
    height: 67.5px;
    margin: 0 auto;
}

.title-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.title-screen .title-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    padding: 5px 0;
    font: 700 11px/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 1px solid #120d08;
    border-radius: 2px;
    background: linear-gradient(#5d4b35, #3a2d1f);
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    transform: none;
    transition: none;
}

.title-screen .title-button:hover {
    color: #ffff00;
    border-color: #120d08;
    background: linear-gradient(#6d5840, #45362a);
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    transform: none;
}

.title-screen .title-button:active {
    background: linear-gradient(#3a2d1f, #5d4b35);
}

.title-screen .title-button:disabled {
    color: #9a9a9a;
    cursor: default;
}

.title-screen .title-button:focus-visible,
.title-screen .title-world:focus-visible,
.title-screen .title-world-row:focus-visible {
    outline: 1px solid #ffff00;
    outline-offset: 1px;
}

.title-status {
    min-height: 28px;
    margin: 0 0 8px;
    font-size: 11px;
    text-align: center;
    color: #ffff00;
}

.title-status-line {
    display: block;
}

.title-fields {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.title-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.title-field span {
    width: 58px;
    text-align: right;
}

.title-field input {
    flex: 1;
    min-width: 0;
    padding: 3px 5px;
    font: 700 11px Arial, Helvetica, sans-serif;
    color: #fff;
    caret-color: #ffff00;
    text-shadow: none;
    border: 1px solid #4a3d2b;
    border-radius: 0;
    outline: none;
    background: rgba(0, 0, 0, 0.6);
    user-select: text;
}

.title-field input:focus {
    border-color: #8a7550;
}

.title-remember {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 2px 0 10px;
    font-size: 10px;
    color: #d9cfb8;
}

.title-remember input {
    width: 11px;
    height: 11px;
    margin: 0;
    accent-color: #b8860b;
}

/* the world switcher in the bottom left corner */
.title-screen .title-world {
    position: absolute;
    left: 6px;
    bottom: 7px;
    display: none;
    flex-direction: column;
    align-items: center;
    width: 96px;
    padding: 4px 6px;
    font: 700 11px/1.25 Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 1px solid #5a4d3a;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: none;
    transform: none;
    transition: none;
}

.title-screen[data-state='welcome'] .title-world,
.title-screen[data-state='login'] .title-world {
    display: flex;
}

.title-screen .title-world:hover {
    color: #fff;
    border-color: #ffff00;
    background: rgba(0, 0, 0, 0.85);
    box-shadow: none;
    transform: none;
}

.title-world-hint {
    font-size: 9px;
    font-weight: 400;
    color: #ffff00;
}

.title-worlds {
    position: absolute;
    inset: 14px 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid #6b5a3e;
    background: rgba(8, 6, 4, 0.94);
    box-shadow: 0 0 0 1px #000;
}

.title-worlds[hidden] {
    display: none;
}

.title-worlds-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.title-worlds-head .title-heading {
    margin: 0;
}

.title-screen .title-worlds-head .title-button {
    width: 70px;
}

.title-worlds-list {
    overflow: auto;
}

.title-screen .title-world-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr)
        minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 6px;
    width: 100%;
    padding: 5px 6px;
    font: 700 10.5px/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 0;
    border-bottom: 1px solid #2a2218;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
}

.title-screen .title-world-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.title-screen .title-world-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
    image-rendering: pixelated;
}

.title-screen button.title-world-row:hover:not(:disabled) {
    color: #ffff00;
    border-color: #2a2218;
    background: rgba(255, 255, 0, 0.08);
    box-shadow: none;
    transform: none;
}

.title-screen .title-world-row[aria-current='true'] {
    color: #ffff00;
}

.title-screen .title-world-row:disabled {
    color: #7a7266;
    cursor: default;
}

.title-screen .title-world-header {
    color: #ff981f;
    border-bottom-color: #5a4d3a;
}

.title-note {
    margin: 12px 0;
    text-align: center;
    color: #d9cfb8;
}

/* the bot panel keeps its side-panel shape, but never runs off the screen */
.rsc-panel {
    max-height: calc(100vh - 7rem);
    overflow: auto;
}

/* ------------------------------------------------------------------------
   the plugin panel (src/client-api/config-panel.js): RuneLite's
   configuration sidebar - a searchable list with a switch per plugin, and a
   page of settings for each
   ------------------------------------------------------------------------ */

.rsc-plugins {
    width: min(360px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.rsc-plugins-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.rsc-plugins-head h2 {
    flex: 1;
    margin: 0;
}

.rsc-plugins-back {
    padding: 0.1em 0.55em;
    font-size: 1.3em;
    line-height: 1;
}

.rsc-plugins-search {
    width: 100%;
    padding: 0.5em 0.7em;
    border: 1px solid var(--border-soft);
    border-radius: 0.45em;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.rsc-plugin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3em;
}

.rsc-plugin-row {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.5em 0.6em;
    border-radius: 0.4em;
    background: color-mix(in srgb, var(--bg) 60%, transparent);
}

.rsc-plugin-text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.1em;
}

.rsc-plugin-text strong {
    font-size: 0.95em;
    color: var(--text);
}

.rsc-plugin-text em {
    margin-left: 0.4em;
    padding: 0 0.35em;
    font-size: 0.75em;
    font-style: normal;
    border-radius: 0.3em;
    color: var(--accent-hi);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.rsc-plugin-text small {
    font-size: 0.8em;
    color: var(--muted);
}

.rsc-plugin-gear {
    padding: 0.2em 0.5em;
    font-size: 1.1em;
    line-height: 1;
}

/* the on/off switch */
.rsc-switch {
    position: relative;
    flex: none;
    width: 2.4em;
    height: 1.3em;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    cursor: pointer;
}

.rsc-switch input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.rsc-switch span {
    position: absolute;
    inset: 0;
    border-radius: 1em;
    background: var(--surface-3);
    transition: background-color 150ms;
    pointer-events: none;
}

.rsc-switch span::after {
    content: '';
    position: absolute;
    top: 0.15em;
    left: 0.15em;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: var(--text);
    transition: transform 150ms;
}

.rsc-switch input:checked + span {
    background: var(--accent);
}

.rsc-switch input:checked + span::after {
    transform: translateX(1.1em);
}

.rsc-switch input:focus-visible + span {
    outline: 2px solid var(--accent-hi);
    outline-offset: 2px;
}

.rsc-config {
    display: grid;
    gap: 0.35em;
}

.rsc-config label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
    margin: 0;
    color: var(--text);
    font-size: 0.9em;
}

.rsc-config input[type='number'],
.rsc-config input[type='text'],
.rsc-config input[type='password'],
.rsc-config select {
    width: 8.5em;
    padding: 0.3em 0.5em;
    border: 1px solid var(--border-soft);
    border-radius: 0.35em;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.rsc-config label.rsc-check {
    justify-content: flex-start;
}

.rsc-number {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--muted);
}

.rsc-number input {
    width: 5.5em !important;
}

.rsc-config input[type='color'] {
    width: 3em;
    height: 1.8em;
    padding: 0;
    border: 1px solid var(--border-soft);
    background: none;
}

.rsc-keybind {
    min-width: 8.5em;
    justify-content: center;
    font-size: 0.8em;
}

.rsc-config-section {
    margin-top: 0.3em;
    padding: 0.3em 0.6em 0.5em;
    border: 1px solid var(--border-soft);
    border-radius: 0.45em;
}

.rsc-config-section summary {
    cursor: pointer;
    color: var(--accent-hi);
    font-weight: 600;
    padding: 0.2em 0;
}

.rsc-config-section[open] summary {
    margin-bottom: 0.3em;
}

.rsc-plugins-reset {
    align-self: flex-start;
}

/* the launcher's skin (the .rsc-launcher section below) squares it off */
body.rsc-launcher .rsc-plugin-row {
    border-radius: 0;
    background: rgba(25, 26, 54, 0.49);
}

body.rsc-launcher .rsc-plugins-search,
body.rsc-launcher .rsc-config input,
body.rsc-launcher .rsc-config select {
    border-radius: 2px;
    background: #101633;
}

/* ------------------------------------------------------------------------
   the standalone launcher's look (rsc-tauri-client): index.js puts
   .rsc-launcher on the body when the page was opened by the launcher. the
   same shell, dressed after the launcher window - a navy night over the
   title scene, a flat top bar with the logo and links out to the site, and
   squared blue panels (inspired by xan105/Aion-Launcher). nothing here
   applies in a browser or on the website's /play page.
   ------------------------------------------------------------------------ */

body.rsc-launcher {
    --bg: #0b1026;
    --surface: #161b3b;
    --surface-2: #1d2345;
    --surface-3: #2d356d;
    --text: #e4e7f2;
    --muted: #a3abcc;
    --muted-2: #6f78a0;
    --accent: #3498db;
    --accent-hi: #5cbcff;
    --accent-lo: #2672a8;
    --accent-glow: rgba(52, 152, 219, 0.35);
    --danger: #e0564b;
    --success: #4fd17a;
    --border: rgba(120, 140, 220, 0.22);
    --border-soft: rgba(120, 140, 220, 0.12);
    --shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 30px rgba(52, 152, 219, 0.15);
    --font-body: 'Segoe UI', 'Open Sans', system-ui, sans-serif;

    color: var(--text);
    font-family: var(--font-body);
    background:
        linear-gradient(to bottom, rgba(11, 16, 38, 0.55), rgba(11, 16, 38, 0.93) 60%),
        radial-gradient(70% 50% at 50% 0%, rgba(52, 152, 219, 0.18), transparent 70%),
        url(./title/login-default.png) center 30% / cover no-repeat,
        var(--bg);
    image-rendering: pixelated;
}

body.rsc-launcher .rsc-shell {
    gap: 0;
    padding: 0;
}

/* the top bar */
body.rsc-launcher .rsc-header {
    height: 58px;
    padding: 0 16px 0 18px;
    gap: 22px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(9, 12, 28, 0.9), rgba(9, 12, 28, 0.55));
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    justify-content: flex-start;
}

body.rsc-launcher .rsc-brand {
    display: flex;
    align-items: center;
    flex: none;
}

body.rsc-launcher .rsc-brand-logo {
    height: 46px;
    width: auto;
    image-rendering: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

body.rsc-launcher .rsc-links {
    display: flex;
    gap: 22px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

body.rsc-launcher .rsc-links a {
    position: relative;
    color: #e8ebf5;
    font-family: var(--font-adventure);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    padding: 4px 0;
}

body.rsc-launcher .rsc-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--accent-hi);
    transform: scaleX(0);
    transition: transform 160ms ease;
}

body.rsc-launcher .rsc-links a:hover {
    color: var(--accent-hi);
}

body.rsc-launcher .rsc-links a:hover::after {
    transform: scaleX(1);
}

body.rsc-launcher .rsc-controls {
    flex: none;
    gap: 10px;
}

body.rsc-launcher .rsc-actions {
    gap: 4px;
}

/* buttons: flat and squared, blue when they mean "go" */
body.rsc-launcher button {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #dedede;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

body.rsc-launcher button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

body.rsc-launcher button[aria-pressed='true'],
body.rsc-launcher #rsc-bot-start {
    color: #fff;
    background: linear-gradient(to bottom, #3cb0fd, #3498db);
    border-color: #2a86c4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.rsc-launcher button[aria-pressed='true']:hover,
body.rsc-launcher #rsc-bot-start:hover {
    background: linear-gradient(to bottom, #5cc0ff, #3cb0fd);
}

body.rsc-launcher [data-action='reset-options'],
body.rsc-launcher #rsc-bot-stop {
    color: #fff;
    background: rgba(215, 40, 40, 0.85);
}

body.rsc-launcher [data-action='reset-options']:hover,
body.rsc-launcher #rsc-bot-stop:hover {
    background: rgba(235, 60, 60, 0.95);
}

body.rsc-launcher .rsc-status {
    border-color: rgba(120, 140, 220, 0.25);
    background: rgba(9, 12, 28, 0.6);
    color: var(--muted);
    border-radius: 2px;
}

/* the game */
body.rsc-launcher .rsc-stage {
    margin: 10px;
    padding: 6px;
    border: 1px solid rgba(120, 140, 220, 0.28);
    border-radius: 3px;
    background: rgba(9, 12, 28, 0.82);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.rsc-launcher .rsc-game-canvas {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.7);
}

/* the bot panel */
body.rsc-launcher .rsc-panel {
    border: 1px solid #2d356d;
    border-radius: 3px;
    background: linear-gradient(to bottom, rgba(45, 53, 109, 0.97), rgba(22, 27, 59, 0.98) 30%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 24px 70px rgba(0, 0, 0, 0.8);
}

body.rsc-launcher .rsc-panel h2 {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 2px solid #dedede;
    color: #f1f3f5;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    text-shadow: none;
}

body.rsc-launcher .rsc-panel select,
body.rsc-launcher .rsc-panel input[type='text'] {
    border-radius: 2px;
    border-color: rgba(120, 140, 220, 0.25);
    background: #101633;
    accent-color: var(--accent);
}

body.rsc-launcher kbd {
    border-color: #2d356d;
    background: #101633;
}

/* the launcher's top bar at game-window widths: the links come first, the
   status pill gives way (the launcher shows the same thing) */
body.rsc-launcher .rsc-status {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1240px) {
    body.rsc-launcher .rsc-status {
        display: none;
    }

    body.rsc-launcher .rsc-links {
        gap: 16px;
    }

    body.rsc-launcher .rsc-links a {
        font-size: 13px;
    }
}

/* ------------------------------------------------------------------------
   the RuneLite frame (src/client-api/shell.js): a title bar, the game, and a
   sidebar of panels on the right. RuneLite's own palette - ColorScheme's
   DARKER_GRAY (#1e1e1e), DARK_GRAY (#282828), MEDIUM_GRAY (#4d4d4d),
   LIGHT_GRAY (#a5a5a5) and the brand orange (#dc8a00).
   ------------------------------------------------------------------------ */

body.rsc-runelite,
body.rsc-sidebar {
    --rl-darker: #1e1e1e;
    --rl-dark: #282828;
    --rl-dark-hover: #313131;
    --rl-medium: #4d4d4d;
    --rl-light: #a5a5a5;
    --rl-text: #c6c6c6;
    --rl-white: #ffffff;
    --rl-orange: #dc8a00;
    --rl-orange-dim: #9b6200;
    --rl-green: #19c919;
    --rl-red: #e63939;
    --rl-font: 'Segoe UI', Tahoma, system-ui, sans-serif;
}

body.rsc-runelite {
    background: #000;
}

body.rsc-runelite .rl-titlebar {
    display: flex;
    align-items: center;
    height: 26px;
    padding-left: 8px;
    background: var(--rl-darker);
    border-bottom: 1px solid #111;
    color: var(--rl-text);
    font: 600 13px var(--rl-font);
    user-select: none;
}

body.rsc-runelite .rl-title-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

body.rsc-runelite .rl-title-text {
    letter-spacing: 0.02em;
    white-space: nowrap;
}

body.rsc-runelite .rl-title-space {
    flex: 1;
}

/* links out to the website, on a browser's game page (shell.js's
   setSiteLinks). they open a new tab, so the game keeps running */
body.rsc-runelite .rl-title-links {
    display: flex;
    gap: 2px;
    height: 100%;
    margin-left: 14px;
    overflow: hidden;
}

body.rsc-runelite .rl-title-links a {
    display: grid;
    place-items: center;
    padding: 0 8px;
    color: var(--rl-light);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

body.rsc-runelite .rl-title-links a:hover,
body.rsc-runelite .rl-title-links a:focus-visible {
    color: var(--rl-orange);
    background: var(--rl-dark-hover);
    outline: none;
}

@media (max-width: 640px) {
    body.rsc-runelite .rl-title-links {
        display: none;
    }
}

.rl-title-buttons,
.rl-window-buttons {
    display: flex;
    height: 100%;
}

.rl-title-buttons button,
.rl-window-buttons button {
    width: 30px;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--rl-light);
    transform: none;
}

.rl-title-buttons button[hidden] {
    display: none;
}

.rl-title-buttons button:hover,
.rl-window-buttons button:hover {
    color: var(--rl-white);
    background: var(--rl-dark-hover);
    border: none;
    box-shadow: none;
    transform: none;
}

.rl-window-buttons button.rl-close:hover {
    background: #c42b1c;
}

.rl-icon {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
}

.rl-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.rl-icon img {
    max-width: 18px;
    max-height: 18px;
    image-rendering: pixelated;
}

/* the body: the game, then the sidebar */
.rl-body {
    display: flex;
    min-height: 0;
}

body.rsc-runelite .rl-body {
    height: calc(100vh - 27px);
}

/* the launcher's full screen: the window fills the screen, no title bar */
body.rsc-runelite.rl-fullscreen .rl-titlebar {
    display: none;
}

body.rsc-runelite.rl-fullscreen .rl-body {
    height: 100vh;
}

body.rsc-sidebar .rl-body {
    height: 100vh;
}

.rl-body > .rsc-shell {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

/* in the RuneLite frame the game is edge to edge on black */
body.rsc-runelite .rsc-header {
    display: none;
}

body.rsc-runelite .rsc-shell {
    padding: 0;
    gap: 0;
}

body.rsc-runelite .rsc-stage {
    padding: 0;
    border: none;
    border-radius: 0;
    background: #000;
    box-shadow: none;
}

body.rsc-runelite .rsc-game-canvas {
    box-shadow: none;
}

/* the sidebar */
.rl-sidebar {
    display: flex;
    flex: none;
    height: 100%;
    font: 13px/1.35 var(--rl-font);
    color: var(--rl-text);
}

.rl-sidebar[hidden] {
    display: none;
}

.rl-panel {
    width: 242px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--rl-dark);
    border-left: 1px solid #111;
    scrollbar-color: var(--rl-medium) var(--rl-darker);
    scrollbar-width: thin;
}

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

.rl-nav {
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 6px;
    background: var(--rl-darker);
    border-left: 1px solid #111;
}

.rl-nav-button {
    position: relative;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--rl-light);
    box-shadow: none;
    transform: none;
}

.rl-nav-button:hover {
    background: var(--rl-dark-hover);
    border: none;
    box-shadow: none;
    transform: none;
}

.rl-nav-button.active {
    background: var(--rl-dark);
}

/* RuneLite's orange marker beside the open panel's icon */
.rl-nav-button.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--rl-orange);
}

.rl-nav-button .rl-icon svg {
    fill: var(--rl-light);
}

.rl-nav-button:hover .rl-icon svg,
.rl-nav-button.active .rl-icon svg {
    fill: var(--rl-white);
}

/* panel bits */
.rl-plugin-panel {
    padding: 8px;
    font: 13px/1.35 var(--rl-font);
    color: var(--rl-text);
}

.rl-plugin-panel button {
    font-family: var(--rl-font);
    text-transform: none;
    letter-spacing: 0;
}

.rl-note {
    margin: 6px 2px;
    color: var(--rl-light);
    font-size: 12px;
}

.rl-empty {
    display: grid;
    gap: 2px;
    margin-top: 30px;
    text-align: center;
}

.rl-empty strong {
    color: var(--rl-white);
    font-weight: 500;
}

.rl-empty span {
    font-size: 11.5px;
    color: var(--rl-light);
}

.rl-link {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--rl-light) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.rl-link:hover {
    color: var(--rl-orange) !important;
    transform: none !important;
}

.rl-search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin-bottom: 6px;
    padding: 0 8px;
    background: var(--rl-darker);
}

.rl-search svg {
    width: 14px;
    height: 14px;
    fill: var(--rl-light);
    flex: none;
}

.rl-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--rl-white);
    font: 13px var(--rl-font);
    outline: none;
}

.rl-plugin-panel input[type='number'],
.rl-plugin-panel input[type='text'],
.rl-plugin-panel input[type='password'],
.rl-plugin-panel select,
.rl-plugin-panel textarea {
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--rl-darker);
    color: var(--rl-white);
    font: 13px var(--rl-font);
    outline: none;
}

.rl-plugin-panel input:focus,
.rl-plugin-panel select:focus,
.rl-plugin-panel textarea:focus {
    border-color: var(--rl-medium);
}

/* --- Configuration ------------------------------------------------------- */

.rl-tabs {
    display: flex;
    gap: 4px;
    margin: -8px -8px 8px;
    padding: 6px 8px 0;
    background: var(--rl-dark);
}

.rl-tab {
    flex: 1;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: var(--rl-darker);
    box-shadow: none;
    color: var(--rl-light);
}

.rl-tab:hover {
    background: var(--rl-dark-hover);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.rl-tab.active {
    border-bottom-color: var(--rl-orange);
    color: var(--rl-white);
}

.rl-tab svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.rl-plugin-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rl-plugin {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 2px;
}

.rl-plugin:hover {
    background: var(--rl-dark-hover);
}

.rl-plugin-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--rl-text);
}

.rl-star,
.rl-cog,
.rl-back,
.rl-x {
    width: 18px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--rl-medium);
    transform: none !important;
}

.rl-star svg,
.rl-cog svg,
.rl-back svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.rl-star.pinned,
.rl-star:hover {
    color: var(--rl-orange);
}

.rl-cog,
.rl-back {
    color: var(--rl-light);
}

.rl-cog:hover,
.rl-back:hover {
    color: var(--rl-white);
}

/* RuneLite's switch: grey off, orange on */
.rl-toggle,
.rl-check {
    position: relative;
    flex: none;
    width: 26px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.rl-toggle input,
.rl-check input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.rl-toggle span,
.rl-check span {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: var(--rl-medium);
    pointer-events: none;
    transition: background-color 120ms;
}

.rl-toggle span::after,
.rl-check span::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8d8d8d;
    transition: transform 120ms, background-color 120ms;
}

.rl-toggle input:checked + span,
.rl-check input:checked + span {
    background: var(--rl-orange-dim);
}

.rl-toggle input:checked + span::after,
.rl-check input:checked + span::after {
    transform: translateX(12px);
    background: var(--rl-orange);
}

.rl-config-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--rl-medium);
}

.rl-config-head strong {
    flex: 1;
    color: var(--rl-white);
    font-weight: 500;
}

.rl-config-items {
    display: grid;
    gap: 2px;
    margin-top: 6px;
}

.rl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    padding: 2px;
}

.rl-item > span {
    flex: 1;
    min-width: 0;
}

.rl-item input[type='number'] {
    width: 64px;
    padding: 2px 4px;
}

.rl-item input[type='text'],
.rl-item input[type='password'],
.rl-item select {
    width: 110px;
    padding: 2px 4px;
}

.rl-item input[type='color'] {
    width: 34px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
}

.rl-number {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rl-number em {
    font-style: normal;
    font-size: 11px;
    color: var(--rl-light);
}

.rl-keybind {
    min-width: 110px;
    padding: 3px 6px !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--rl-darker) !important;
    box-shadow: none !important;
    color: var(--rl-white) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.rl-section {
    margin-top: 6px;
}

.rl-section summary {
    padding: 4px 2px;
    border-bottom: 1px solid var(--rl-medium);
    color: var(--rl-orange);
    font-weight: 600;
    cursor: pointer;
}

.rl-reset {
    margin-top: 10px;
    padding: 4px 12px !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--rl-darker) !important;
    box-shadow: none !important;
    color: var(--rl-text) !important;
    font-size: 12px !important;
}

.rl-reset:hover {
    background: var(--rl-dark-hover) !important;
    transform: none !important;
}

/* --- the settings tab (src/ui/settings-view.js) --------------------------- */

.rl-settings {
    display: grid;
    gap: 2px;
}

/* the sections are the plugin page's, and fold the same way. a row or a
   section the search box has ruled out goes away outright */
.rl-settings .rl-section[hidden],
.rl-settings .rl-item[hidden] {
    display: none;
}

.rl-settings .rl-help {
    margin: 4px 2px;
    color: var(--rl-light);
    font-size: 11.5px;
}

.rl-settings-foot {
    display: grid;
    justify-items: start;
    gap: 4px;
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--rl-medium);
}

.rl-settings-foot[hidden] {
    display: none;
}

.rl-settings select {
    width: 122px;
    padding: 2px 4px;
    border: 1px solid var(--rl-medium);
    border-radius: 0;
    background: var(--rl-darker);
    color: var(--rl-text);
    font: inherit;
}

/* a slider and its value, where the plugin pages have a number box */
.rl-settings .rl-slider {
    flex: none;
    width: 122px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rl-settings .rl-slider input[type='range'] {
    flex: 1;
    min-width: 0;
    accent-color: var(--rl-orange);
}

.rl-settings .rl-slider output {
    min-width: 26px;
    color: var(--rl-orange);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rl-settings .rl-slider em,
.rl-settings .rl-slider output + em {
    color: var(--rl-light);
    font-style: normal;
    font-size: 11px;
}

/* the Plugin Hub */
.rl-hub {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.rl-hub-card {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: var(--rl-darker);
}

.rl-hub-icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--rl-dark);
    color: var(--rl-orange);
    font: 700 22px var(--rl-font);
}

.rl-hub-text {
    flex: 1;
    min-width: 0;
}

.rl-hub-top {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.rl-hub-top strong {
    color: var(--rl-white);
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rl-hub-top span {
    font-size: 11px;
    color: var(--rl-light);
    white-space: nowrap;
}

.rl-hub-text p {
    margin: 2px 0 4px;
    font-size: 11.5px;
    color: var(--rl-text);
}

.rl-hub-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--rl-light);
}

.rl-hub-bottom > span:first-child {
    flex: 1;
}

.rl-hub-perms {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rl-medium);
    color: var(--rl-white);
    font-size: 10px;
    cursor: help;
}

.rl-install,
.rl-remove,
.rl-update {
    padding: 1px 10px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.rl-install {
    background: #1e9a1e !important;
}

.rl-remove {
    background: #c82828 !important;
}

.rl-update {
    background: var(--rl-orange) !important;
}

.rl-install:hover,
.rl-remove:hover,
.rl-update:hover {
    filter: brightness(1.15);
    transform: none !important;
}

.rl-hub-problem {
    color: var(--rl-red);
}

.rl-hub-busy {
    color: var(--rl-orange);
    font-style: italic;
}

.rl-hub-card.installed .rl-hub-icon {
    color: #0dc10d;
}

.rl-note.rl-bad {
    color: var(--rl-red);
}

/* --- XP Tracker -------------------------------------------------------------------- */

.rl-xp-total,
.rl-xp-box {
    background: var(--rl-darker);
    margin-bottom: 6px;
    padding: 6px 8px;
}

.rl-xp-total {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.rl-xp-total > div {
    flex: 1;
}

.rl-xp-total img,
.rl-xp-row img {
    width: 20px;
    image-rendering: pixelated;
}

.rl-xp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}

.rl-xp-col {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.rl-xp-col b {
    color: var(--rl-white);
    font-weight: 500;
}

.rl-x {
    align-self: flex-start;
    color: var(--rl-medium) !important;
    font-size: 14px !important;
    line-height: 1;
}

.rl-x:hover {
    color: var(--rl-red) !important;
}

.rl-progress {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 16px;
    margin-top: 6px;
    padding: 0 4px;
    background: #770a0a;
    font-size: 11px;
    line-height: 16px;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

.rl-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: #0d8f0d;
}

.rl-progress span {
    position: relative;
}

/* --- World Hopper ------------------------------------------------------------------ */

.rl-worlds {
    padding: 0;
}

.rl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.rl-table th {
    position: sticky;
    top: 0;
    padding: 5px 4px;
    background: var(--rl-darker);
    color: var(--rl-light);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.rl-table th.active {
    color: var(--rl-orange);
}

.rl-table td {
    padding: 5px 4px;
    white-space: nowrap;
}

.rl-table tbody tr {
    cursor: pointer;
}

.rl-table tbody tr:nth-child(even) {
    background: #2d2d2d;
}

.rl-table tbody tr:hover {
    background: var(--rl-medium);
}

.rl-table .world {
    color: var(--rl-white);
}

.rl-table tr.members .world {
    color: var(--rl-orange);
}

.rl-table tr.current {
    background: #3a3a1a !important;
}

.rl-table tr.current .world::after {
    content: ' ●';
    color: var(--rl-green);
    font-size: 9px;
}

.rl-table tr.offline {
    color: #666;
    cursor: default;
}

.rl-table .activity {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rl-table .ping {
    text-align: right;
}

/* --- Hiscore ----------------------------------------------------------------------- */

.rl-hiscore .rl-search input {
    padding: 0;
}

.rl-hiscore-name {
    margin: 4px 2px 6px;
    color: var(--rl-white);
    font-weight: 600;
}

.rl-hiscore-grid,
.rl-hiscore-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 6px;
    background: var(--rl-darker);
}

.rl-hiscore-totals {
    grid-template-columns: repeat(3, 1fr);
    margin: 6px 0;
}

.rl-hiscore-cell,
.rl-hiscore-totals > div {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding-left: 6px;
    color: var(--rl-white);
    cursor: default;
}

.rl-hiscore-cell img,
.rl-hiscore-totals img {
    width: 18px;
    image-rendering: pixelated;
}

/* the achievement diaries: an area's name over its four tiers */
.rl-hiscore-diaries {
    margin-top: 6px;
    padding: 6px;
    background: var(--rl-darker);
}

.rl-hiscore-diaries-head {
    margin-bottom: 4px;
    color: var(--rl-orange);
    font-size: 12px;
    font-weight: 600;
}

.rl-hiscore-diary {
    margin-top: 6px;
}

.rl-hiscore-diary-name {
    margin-bottom: 3px;
    color: var(--rl-text);
    font-size: 12px;
}

.rl-hiscore-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

/* claimed is green, complete is the sidebar's orange, the rest is grey -
   the website's DiaryCard, in the sidebar's colours */
.rl-hiscore-tier {
    padding: 2px 0;
    border: 1px solid var(--rl-medium);
    color: var(--rl-light);
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: default;
}

.rl-hiscore-tier.complete {
    border-color: var(--rl-orange-dim);
    background: rgba(220, 138, 0, 0.16);
    color: var(--rl-orange);
}

.rl-hiscore-tier.claimed {
    border-color: #0dc10d;
    background: rgba(13, 193, 13, 0.14);
    color: var(--rl-white);
}

/* the ironman helm the tiers temper */
.rl-hiscore-helm {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 8px 0 0;
    color: var(--rl-light);
    font-size: 11.5px;
}

.rl-hiscore-helm img {
    width: 18px;
    image-rendering: pixelated;
}

/* --- Loot Tracker -------------------------------------------------------------------- */

.rl-loot-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.rl-loot-box {
    margin-bottom: 6px;
    background: var(--rl-darker);
}

.rl-loot-head {
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    background: #1a1a1a;
    font-size: 12px;
}

.rl-loot-head strong {
    color: var(--rl-white);
    font-weight: 500;
}

.rl-loot-head span {
    color: var(--rl-light);
}

.rl-loot-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 4px;
}

.rl-loot-item {
    position: relative;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--rl-dark);
}

.rl-loot-item img {
    max-width: 36px;
    max-height: 34px;
    image-rendering: pixelated;
}

.rl-loot-item span {
    position: absolute;
    top: 1px;
    left: 3px;
    color: #ffff00;
    font-size: 10.5px;
    text-shadow: 1px 1px 0 #000;
}

/* --- Market --------------------------------------------------------------------------- */

.rl-text-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}

.rl-text-tab {
    padding: 4px 6px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--rl-light) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transform: none !important;
}

.rl-text-tab.active {
    color: var(--rl-white) !important;
    border-bottom-color: var(--rl-orange) !important;
}

.rl-market-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 6px;
    background: var(--rl-darker);
    cursor: pointer;
}

.rl-market-item:hover {
    background: var(--rl-dark-hover);
}

.rl-market-item img {
    width: 36px;
    image-rendering: pixelated;
}

.rl-market-text {
    display: grid;
    font-size: 11.5px;
}

.rl-market-text strong {
    color: var(--rl-white);
    font-weight: 500;
    font-size: 12.5px;
}

.rl-market-text .buy {
    color: var(--rl-green);
    font-weight: 400;
}

.rl-market-text .sell {
    color: #ff9040;
    font-weight: 400;
}

/* --- Skill Calculator ---------------------------------------------------------------- */

.rl-calc-skills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    margin-bottom: 8px;
}

.rl-calc-skills button {
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--rl-darker) !important;
    box-shadow: none !important;
    transform: none !important;
}

.rl-calc-skills button.active {
    outline: 1px solid var(--rl-orange);
}

.rl-calc-skills img {
    width: 18px;
    image-rendering: pixelated;
}

.rl-calc-title {
    margin-bottom: 6px;
    color: var(--rl-white);
    font-weight: 600;
}

.rl-calc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.rl-calc-field {
    display: grid;
    gap: 2px;
    font-size: 11.5px;
}

.rl-calc-field input {
    width: 100%;
    padding: 5px;
}

.rl-calc-result {
    margin-top: 10px;
    padding: 6px 8px;
    background: var(--rl-darker);
    font-size: 12px;
}

.rl-calc-result b {
    color: var(--rl-white);
    font-weight: 500;
}

/* --- Notes ----------------------------------------------------------------------------- */

.rl-notes {
    height: 100%;
    padding: 6px;
}

.rl-notes textarea {
    width: 100%;
    height: calc(100vh - 60px);
    padding: 8px;
    resize: none;
    line-height: 1.45;
}

/* --- Info ------------------------------------------------------------------------------ */

.rl-info-box {
    margin-bottom: 8px;
    padding: 8px;
    background: var(--rl-darker);
    font-size: 12px;
}

.rl-info-link {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 10px 8px !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--rl-darker) !important;
    box-shadow: none !important;
    color: var(--rl-text) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: left;
    white-space: normal !important;
    transform: none !important;
}

.rl-info-link:hover {
    background: var(--rl-dark-hover) !important;
}

.rl-info-link .rl-icon {
    width: 22px;
    height: 22px;
    flex: none;
}

.rl-info-link .rl-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--rl-light);
}

.rl-info-link span:nth-child(2) {
    flex: 1;
}

.rl-chevron {
    color: var(--rl-light);
    font-size: 18px;
}

/* the client's own side panels, dressed to match */
body.rsc-runelite .rsc-panel {
    border: 1px solid #111;
    border-radius: 0;
    background: var(--rl-dark);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    color: var(--rl-text);
    font-family: var(--rl-font);
}

body.rsc-runelite .rsc-panel h2 {
    color: var(--rl-orange);
    font-family: var(--rl-font);
    text-shadow: none;
}

body.rsc-runelite .rsc-panel button {
    border: none;
    border-radius: 0;
    background: var(--rl-medium);
    color: var(--rl-white);
    font-family: var(--rl-font);
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

body.rsc-runelite .rsc-panel button:hover {
    background: #5d5d5d;
    transform: none;
    box-shadow: none;
}

/* the floating version of the Configuration panel (the website's frame) */
.rl-floating {
    width: 270px;
    padding: 0 !important;
    background: #282828 !important;
    border-radius: 0 !important;
}

.rl-floating .rl-plugin-panel {
    --rl-darker: #1e1e1e;
    --rl-dark: #282828;
    --rl-dark-hover: #313131;
    --rl-medium: #4d4d4d;
    --rl-light: #a5a5a5;
    --rl-text: #c6c6c6;
    --rl-white: #ffffff;
    --rl-orange: #dc8a00;
    --rl-orange-dim: #9b6200;
    --rl-font: 'Segoe UI', Tahoma, system-ui, sans-serif;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    background: var(--rl-dark);
}