/* 1. Embed the provided RuneScape TrueType Font */
  @font-face {
    font-family: 'basic';
    src: url('/runescape.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'quil';
    src: url('/quil.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  :root {
    --gold: #ffff00;
    --gold-dark: #aaaa00;
    --ink: #ffffff;
    
    /* RSC HUD Theme Colors */
    --rsc-cyan: #00ffff;
    --rsc-teal-dark: #002b2b;
    --rsc-teal-bright: #005f5f;
    --rsc-border: #555555;
    --rsc-border-light: #888888;
  }
  
  * { box-sizing: border-box; }

  html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: 'basic', monospace;
    font-size: 16px;
    image-rendering: pixelated;
    
    color: var(--ink);
    -webkit-user-select: none; user-select: none;
  }

  #page-layout { 
    width: 512px;
    height: 346px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    position: relative;
    transform-origin: center center;
    flex-shrink: 0;
  }

  .rsc-frame {
    width: 100%;
    height: 100%;
  }

  /* --- CLASSIC 2001 RSC LOGIN UI OVERLAY --- */
  #login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .rsc-login-logo-container {
    width: min(90%, 380px);
    height: clamp(70px, 30vh, 140px);
    background-color: black;
    margin-bottom: clamp(10px, 3vh, 25px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .rsc-logo-fallback-text {
    width: 100%;
    height: 100%;
    font-size: 42px;
    color: #8c8c8c;
    font-weight: bold;
    text-shadow: 3px 3px 0px #000000;
    letter-spacing: 4px;
    text-transform: uppercase;
  }

  .rsc-login-prompt {
    color: #ffffff;
    font-size: clamp(14px, 4vw, 22px);
    margin-bottom: clamp(12px, 3vh, 25px);
    text-align: center;
    letter-spacing: 0.5px;
    font-family: 'basic';
    font-weight: bold;
  }
  
  .rsc-login-notice {
    color: #ffffff;
    font-size: clamp(10px, 2.5vw, 15px);
    margin-bottom: clamp(12px, 3vh, 25px);
    text-align: center;
    letter-spacing: 0.5px;
    font-family: 'basic';
  }

  /* Screens */
  .rsc-login-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hidden {
    display: none !important;
  }

  .rsc-button-container-horizontal {
    display: flex;
    gap: clamp(16px, 5vw, 45px);
    justify-content: center;
    align-items: center;
  }

  .rsc-classic-btn {
    background: linear-gradient(to right, #5d75a8, #384359);
    border: 2px solid #000000;
    color: #ffffff;
    font-family: 'quil', monospace;
    font-size: clamp(12px, 3vw, 16px);
    padding: clamp(6px, 1.5vh, 10px) clamp(14px, 4vw, 24px);
    min-width: clamp(90px, 25vw, 140px);
    cursor: default;
    box-shadow: inset 2px 2px 0px #6b7587, inset -2px -2px 0px #2d323b;
    text-align: center;
  }

  .rsc-classic-btn:active {
    box-shadow: inset -2px -2px 0px #6b7587, inset 2px 2px 0px #2d323b;
  }

  /* Credentials input container styling */
  .rsc-credentials-box {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vh, 16px);
    width: min(80%, 290px);
    margin-bottom: clamp(10px, 2vh, 20px);
  }

  .rsc-credentials-box .input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .rsc-credentials-box label {
    font-size: clamp(11px, 3vw, 16px);
    color: var(--gold);
    text-transform: lowercase;
  }

  .rsc-credentials-box input {
    width: 100%;
    padding: clamp(4px, 1vh, 6px);
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #5c5c5c;
    font-family: inherit;
    font-size: clamp(11px, 3vw, 16px);
  }
  /* ----------------------------------------- */

  /* Character select screen */
  .rsc-charselect-grid {
    display: flex;
    gap: clamp(8px, 2vw, 18px);
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(12px, 3vh, 22px);
    flex-wrap: wrap;
    max-width: 90%;
  }

  .rsc-char-thumb {
    width: clamp(48px, 15vw, 84px);
    height: clamp(48px, 15vw, 84px);
    background: #000000;
    border: 2px solid #5c5c5c;
    box-shadow: inset 2px 2px 0px #333, inset -2px -2px 0px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
  }

  .rsc-char-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .rsc-char-thumb.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold), inset 2px 2px 0px #333, inset -2px -2px 0px #000;
  }
  /* ----------------------------------------- */

  /* INTEGRATED LAYOUT — full-bleed viewport, everything else floats over it */
  #gameUI {
    width: 100%;
    height: 100%;
    background: #000; 
    overflow: hidden; 
    position: relative;
  }

  /* THE VIEWPORT NOW FILLS THE ENTIRE 875x650 FRAME */
  #mainViewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
  }

  /* CANVAS FILLS THE FULL VIEWPORT */
  #canvasWrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: none;
  }

  #canvasWrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    cursor: default;
    image-rendering: pixelated;
  }

  /* --- UPDATED TAB ROW TO MATCH SCREENSHOT --- */
  /* --- TRANSPARENT WHITE STYLE WITH LIGHT GRAY BORDERS --- */
#tabBtnsRow { 
  position: absolute;
  top: 4px; 
  right: 4px;
  display: grid; 
  grid-template-columns: repeat(6, 46px);
  background: transparent; /* Allows the underlying UI to show through the gaps */
  border: none;
  gap: 2px; /* Small spacing to separate the light gray borders cleanly */
  z-index: 36;
}

#tabBtnsRow button {
  padding: 0; 
  background: rgb(128, 128, 128); /* Translucent white background */
  border: 2px solid #d3d3d3; /* Solid light gray border */
  display: flex; 
  align-items: center; 
  justify-content: center;
  height: 46px;
  width: 46px;
  cursor: default;
  box-shadow: none; /* Removed the old 3D stone bevel shadow */
  transition: background 0.15s ease;
  
  /* --- FIXES TO CLIP THE OVERFLOWING IMAGE --- */
  overflow: hidden;        /* Crops the image to the button's borders */
  box-sizing: border-box;  /* Forces the 2px border to stay inside the 46px limit */
}

#tabBtnsRow button:hover {
  background: rgba(255, 255, 255, 0.4); /* Slightly brighter on hover */
}

#tabBtnsRow button.active { 
  background: rgba(255, 255, 255, 0.55); /* Noticeably solid/opaque when active */
  border-color: #ffffff; /* Turns white when active to highlight selection */
}

#tabBtnsRow button img { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated; 
  display: block; /* Prevents any inline baseline gaps under the image */
}

  /* THE DROPDOWN PANEL - shows on hover, floats under the tab row like the real client */
  #tabDropdown {
    position: absolute;
    top: 32px; right: 4px;
    width: 205px;
    max-height: 420px;
    display: none;
    flex-direction: column;
    background: #5c5c5c;
    border: 2px solid #000;
    z-index: 35;
    box-shadow: 0 4px 14px rgba(0,0,0,.6);
  }
  #tabDropdown.open { display: flex; }

  #tabContent { flex: 1; overflow-y: auto; padding: 4px; background: #5c5c5c; max-height: 420px; }

  /* BOTTOMBAR - compact overlay, bottom-right, above the classic link bar */
  #bottombar {
    position: absolute;
    right: 4px; bottom: 30px;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px;
    background: #5c5c5c;
    border: 2px solid #000000;
    z-index: 22;
  }
  #bottombar .rs-btn { text-align: center; width: 100%; box-sizing: border-box; }

  /* CLASSIC FIXED TOP-LEFT ACTION TEXT (not a cursor tooltip) */
  #npcHint {
    position: absolute; 
    top: 4px; left: 4px;
    max-width: 320px;
    z-index: 32; 
    padding: 3px 6px; 
    font-size: 15px; 
    color: #ffffff;
    background: none; 
    border: none;
    display: block; 
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 0px #000;
  }

  /* AUTO-APPEARING COMBAT STYLE MENU, replaces/augments the action text while fighting */
  #combatStyleOverlay {
    position: absolute;
    top: 28px; left: 4px;
    width: 190px;
    z-index: 33;
    display: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.6);
  }

  /* WAVE COUNTDOWN. The "Select combat style" box also lives in this corner
     (top:28px, left:4px) and can be visible at the same time if the player is
     fighting a critter/dummy between waves - pushed down below its full
     height (~170-180px) to clear it. Hidden between waves by main-boot.js. */
  /* FPS READOUT. Now the sole occupant of this corner: the wilderness depth
     percentage that used to sit here reported the same thing as the skull's
     wilderness level, just in different units. */
  #fpsDisplay {
    position: absolute;
    top: 189px; left: 4px;
    color: #ffffff;
    pointer-events: none;
    z-index: 10;
    opacity: 0.95;
    line-height: 1.4;
    font-size: 15px;
    font-weight: normal;
    font-family: 'quil', monospace;
  }

  .clickMarker {
    position: absolute; width: 16px; height: 16px; border: 2px solid #ff0000;
    transform: translate(-50%,-50%); pointer-events: none; z-index: 26;
    animation: clickPing .4s steps(4) forwards;
  }
  @keyframes clickPing {
    0% { opacity: 1; transform: translate(-50%,-50%) scale(0.6); border-color: #ff0000; }
    50% { border-color: #ffff00; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4); }
  }

  #blockIndicator {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 70px; 
    height: 70px; 
    border: 2px dashed #ff0000; 
    z-index: 21;
    opacity: 0 ; 
    pointer-events: none;
  }

  #blockIndicator.active { opacity: 0.8; }

  h1, h2, h3, .rs-title { margin: 0; color: var(--gold); font-weight: bold; text-transform: lowercase; }

  .rs-panel { 
    background: #5c5c5c; 
    border: 2px solid #000000;
  }
  
  .rs-parchment { 
    font-family: 'quil', monospace;
    background: transparent; 
    color: #fff;
    border: none;
  }
  
  .rs-btn {
    font-family: 'basic', monospace;
    background: #444444; 
    border: 2px solid #222222;
    color: #fff; padding: 4px 10px; cursor: default; font-size: 14px;
    box-shadow: inset 1px 1px 0 #6b6b6b, inset -1px -1px 0 #1a1a1a;
  }
  .rs-btn:active {
    box-shadow: inset -1px -1px 0 #6b6b6b, inset 1px 1px 0 #1a1a1a;
  }

  ::-webkit-scrollbar { width: 14px; background: #111111; border-left: 1px solid var(--rsc-border); }
  ::-webkit-scrollbar-thumb { background: #333333; border: 1px solid var(--rsc-border-light); }

  /* FLOATING STAT BAR */
  #topbar {
    display: none;
  }
  .stat { font-size: 14px; color: var(--gold); display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .stat b { color: #fff; }
  .stat .icon { font-size: 14px; display: flex; align-items: center; }
  .stat .icon img { max-height: 14px; }

  #lvlbar { width: 50px; height: 8px; background: #000; border: 1px solid var(--rsc-border); overflow: hidden; display: inline-block; }
  #lvlbarFill { height: 100%; background: #00ff00; width: 0%; }

  /* EXTRA TAB (formerly a persistent panel, now its own tab - see .rscExtraBlock below) */
  #rsExtraHUD {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 6px;
    font-size: 13px;
    background: #4a4a4a;
    border-top: 2px solid #000000;
    text-shadow: 1px 1px 0px #000;
    color: #ffffff;
    flex-shrink: 0;
  }
  .hud-btn-toggle {
    cursor: default;
    text-align: center;
    padding: 2px;
    border: 1px solid #222;
    border-radius: 3px;
    background: #333;
    margin-bottom: 6px;
    box-shadow: inset 1px 1px 0 #555, inset -1px -1px 0 #111;
  }
  .hud-btn-toggle:hover { color: var(--gold); background: #444; }
  .hud-btn-toggle:active { box-shadow: inset -1px -1px 0 #555, inset 1px 1px 0 #111; }

  /* FLOATING CHAT LOG WINDOW */
  #log {
    position: absolute; left: 2px; bottom: 1px; width: 50%; height: 50px; z-index: 20;
    padding: 1px; font-size: 16px; overflow-y: auto; text-align: left;
    background: transparent; border: none;
    text-shadow: 1px 1px 0px #000;
    color: #ffffff; 
    pointer-events: none;
  }
  #log .g { color: #ffffff; }
  #log .r { color: #ffffff; }
  #log .b { color: #ffffff; }
  #log .p { color: #ffffff; }
  #log .c { color: #ffffff; }
  #log .v { color: #ffffff; }

  /* OSRS-STYLE CHAT FILTER BAR */
  .rsc-tabs { 
    position: absolute; left: 0; bottom: 0; width: 100%; height: 26px; 
    display: flex; z-index: 35; 
    background: linear-gradient(#1a3a6b, #0d2547); 
    padding: 0; opacity: 0;
    border-top: 1px solid #2a4d80; cursor: default;
  }
  .rsc-tabs span {
    flex: 1; text-align: center; padding-top: 6px; 
    color: var(--rsc-cyan); 
    cursor: default; background: transparent; border-right: 1px solid #2a4d80;
    font-size: 13px; white-space: nowrap; text-transform: none; 
    text-shadow: 1px 1px 0 #000;
  }
  .rsc-tabs span:last-child { 
    border-right: none; 
    background: #7a0b00; 
    color: #ffffff; 
  }
  
  #waveBanner {
    position: absolute; top: 25%; left: 50%; transform: translate(-50%,-50%);
    z-index: 25; padding: 10px 20px; text-align: center; opacity: 0; pointer-events: none;
    border: 1px solid #fff; background: #000;
  }
  #waveBanner.show { opacity: 1; }

  /* Low-hitpoints vignette - opacity/animation driven by updateLowHpVignette()
     in main-boot.js. Sits above the 3d canvas, below all HUD/menu chrome. */
  #lowHpVignette {
    position: absolute; inset: 0; z-index: 20; pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(180,0,0,0) 55%, rgba(180,0,0,0.55) 100%);
    animation: lowHpPulse 1.6s ease-in-out infinite;
  }
  @keyframes lowHpPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35); }
  }

  /* --- Classic RSC sleeping screen --- */
  #sleepScreen {
    position: absolute; inset: 0; z-index: 90;
    background: #000;
    display: none;
    align-items: center; justify-content: center;
    text-align: center;
  }
  #sleepScreen.show { display: flex; }
  #sleepScreen .sleepInner { position: relative; z-index: 2; max-width: 480px; padding: 0 20px; }
  #sleepScreen h1 { color: #ffe066; font-size: 26px; margin: 0 0 6px; text-shadow: 1px 1px 0 #000; }
  #sleepScreen h2 { color: #ffe066; font-size: 18px; margin: 0 0 18px; text-shadow: 1px 1px 0 #000; }
  #sleepScreen p { color: #fff; font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
  #sleepScreen .sleepRerollLine { font-size: 12px; color: #ccc; }
  #sleepScreen .sleepRerollLine a { color: #ffe066; text-decoration: none; cursor: default; }
  #sleepScreen .sleepRerollLine a:hover { color: #fff; }

  .sleepWord {
    font-size: 26px; font-weight: bold; color: #e8e8e8; margin: 10px auto 14px;
    letter-spacing: 3px; user-select: none;
  }
  .sleepWord span { display: inline-block; }

  #sleepWordInput {
    display: block; margin: 0 auto 14px; width: 220px;
    background: #000; border: 2px solid #fff; color: #fff;
    font-family: inherit; font-size: 16px; text-align: center; padding: 5px;
    outline: none;
  }

  .sleepZ {
    position: absolute; font-weight: bold; font-size: 22px; z-index: 1;
    text-shadow: 1px 1px 0 #000; user-select: none; opacity: 0.9;
  }
  .z1 { top: 8%;  left: 6%;  color: #33ff33; transform: rotate(-12deg); font-size: 20px; }
  .z2 { top: 20%; left: 16%; color: #ff4444; transform: rotate(8deg);  font-size: 16px; }
  .z3 { top: 42%; left: 4%;  color: #6699ff; transform: rotate(-6deg); font-size: 24px; }
  .z4 { top: 70%; left: 10%; color: #cc66ff; transform: rotate(10deg); font-size: 18px; }
  .z5 { top: 10%; right: 6%; color: #33ff33; transform: rotate(14deg); font-size: 22px; }
  .z6 { top: 34%; right: 14%; color: #ffee44; transform: rotate(-10deg); font-size: 17px; }
  .z7 { top: 58%; right: 5%; color: #ff8844; transform: rotate(6deg);  font-size: 20px; }
  .z8 { top: 80%; right: 16%; color: #66ccff; transform: rotate(-8deg); font-size: 16px; }

  #modalWrap { position: absolute; inset: 0; background: rgba(0,0,0,0.8); z-index: 50; display: none; align-items: center; justify-content: center; }

  #modalBox {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: 92%;
    max-height: 500px;
    overflow: hidden;
    text-align: center;
    border: 2px solid #000;
    background: #4a4a4a;
  }

  #modalTitleBar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px;
    background: linear-gradient(#2a4d80, #0d2547);
    border-bottom: 2px solid #000;
  }
  #modalTitleBar #modalTitle { margin: 0; font-size: 14px; color: #fff; text-align: left; }
  #modalBtn {
    cursor: default; font-size: 12px; color: #fff; white-space: nowrap; padding-left: 10px;
  }
  #modalBtn:hover { color: var(--rsc-gold); }

  #modalSubBar {
    display: none;
    justify-content: space-between;
    padding: 4px 10px;
    background: #12345c;
    border-bottom: 2px solid #000;
    font-size: 11px;
  }
  #modalSubBar.show { display: flex; }
  #modalSubLeft { color: #55ff55; }
  #modalSubRight { color: #6699ff; }

  #modalBodyScroll { flex: 1; overflow-y: auto; padding: 14px 18px; }

  #modalFooterHint {
    display: none;
    padding: 6px 10px;
    text-align: center;
    color: #ffe066;
    font-size: 12px;
    background: #2a2a2a;
    border-top: 2px solid #000;
    text-shadow: 1px 1px 0 #000;
  }
  #modalFooterHint.show { display: block; }

  #loadScreen { position: absolute; inset: 0; background: #000; z-index: 100; display: flex; align-items: center; justify-content: center; }
  .loading-bar-container {
    width: 250px; height: 30px; background: black; border: 2px solid #730000; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  #loadingBarFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #d60000; z-index: 0; }
  #loadScreen p { color: #00ffff; font-size: 12px; font-family: Arial, sans-serif; margin: 0; position: relative; z-index: 1; pointer-events: none; }

  .damageFloat { position: absolute; z-index: 26; font-size: 18px; pointer-events: none; text-shadow: 1px 1px 0px #000; }

  .invGrid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 0px; 
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    background: #000;
    margin-bottom: 8px; 
  }
  .invSlot {
    position: relative; 
    background: #5c5c5c; 
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 1px 1px 0 #7a7a7a, inset -1px -1px 0 #2a2a2a;
    cursor: default;
  }
  .invSlot:hover { background: #6c6c6c; box-shadow: inset 0 0 0 2px #7a6a00; }
  .invSlot.selected { background: #444444; box-shadow: inset 0 0 0 2px #ffcc33; }
  .invSlot .qty { position: absolute; top: 2px; left: 2px; font-size: 14px; color: var(--gold); font-weight: bold; text-shadow: 1px 1px 0px #000;}

  /* Bank window: same beveled slot-grid look as the inventory, but denser
     (7 columns, like the reference RSC bank screen) and with two quantity
     badges per slot instead of one - how many of that item sit in the bank
     (green, bottom-left) and how many the player is currently carrying
     (blue, top-right), matching the color legend already set by
     setModalSubBar()/#modalSubLeft/#modalSubRight above the grid. */
  .bankGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    background: #000;
    margin-bottom: 8px;
  }
  .bankSlot {
    position: relative;
    background: #5c5c5c;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 1px 1px 0 #7a7a7a, inset -1px -1px 0 #2a2a2a;
    cursor: pointer;
  }
  .bankSlot:hover { background: #6c6c6c; box-shadow: inset 0 0 0 2px #7a6a00; }
  .bankSlot.selected { background: #444444; box-shadow: inset 0 0 0 2px #ffcc33; }
  .bankSlot img { max-width: 78%; max-height: 78%; }
  .bankSlot .qtyBank { position: absolute; bottom: 1px; left: 2px; font-size: 11px; color: #55ff55; font-weight: bold; text-shadow: 1px 1px 0px #000; }
  .bankSlot .qtyHeld { position: absolute; top: 1px; right: 2px; font-size: 11px; color: #6699ff; font-weight: bold; text-shadow: 1px 1px 0px #000; }

  /* Deposit/withdraw panel that appears under the grid once an item is
     selected - was completely unstyled before (raw browser default block
     text), which is why it read as broken next to the grid above it. */
  .invActionBox {
    border: 2px solid #000; background: #4a4a4a; padding: 8px 10px; text-align: left;
    box-shadow: inset 1px 1px 0 #6b6b6b, inset -1px -1px 0 #1a1a1a;
  }
  .iaName { color: var(--rsc-gold); font-weight: bold; font-size: 13px; margin-bottom: 3px; }
  .iaDesc { color: #ddd; font-size: 11px; margin-bottom: 6px; }
  .iaBtns { display: flex; flex-wrap: wrap; gap: 5px; }

  /* Gold variant: withdraw / buy actions get a warm brass look so they read
     as distinct from the plain-grey deposit actions at a glance. */
  .rs-btn.gold {
    background: linear-gradient(#6b5522, #3a2e10);
    border-color: #1a1400;
    color: #ffe066;
    box-shadow: inset 1px 1px 0 #a4883c, inset -1px -1px 0 #1a1400;
  }
  .rs-btn.gold:active { box-shadow: inset -1px -1px 0 #a4883c, inset 1px 1px 0 #1a1400; }
  .rs-btn:disabled { opacity: 0.5; cursor: default; }

  .achRow, .bestRow, .merchRow, .satchelRow, .skillRow, .questRow, .craftRow { 
    border: 2px solid #000; margin-bottom: 4px; background: #4a4a4a; padding: 5px; text-align: left;
  }

  .csHeader {
    background: #1a1a1a;
    color: var(--gold);
    font-size: 13px;
    font-weight: bold;
    text-transform: none;
    padding: 4px 6px;
    border: 2px solid #000;
    border-bottom: none;
  }
  .combatStylePanel {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    border: 2px solid #000;
  }
  .csRow {
    background: #2b2b2b;
    color: #ffffff;
    font-size: 13px;
    padding: 6px 8px;
    cursor: default;
    border-top: 1px solid #444;
  }
  .csRow:first-child { border-top: none; }
  .csRow:hover { background: #3a3a3a; color: var(--gold); }
  .csRow.selected {
    background: #7a0000;
    color: #ffffff;
    font-weight: bold;
    box-shadow: inset 0 0 0 1px #ff5555;
  }
  
#playerHpWrap, #gearBar, #slayerTracker {
  position: absolute; left: 0px; z-index: 21; width: 150px;
  background: rgba(0,0,0,.85); border: 2px solid #000; padding: 6px;
}
#playerHpWrap { bottom: 100px; }

/* CLASSIC RSC/RS2-BETA WILDERNESS SKULL. Overlaid on the 3D view,
   directly under the wilderness percentage line, in normal document flow (no
   absolute positioning needed - it just stacks below the text above it).
   Only shown while the player is both past the first wilderness tier AND
   actively in combat (toggled in main-boot.js) - matching the real client,
   where the indicator never appears outside a fight. */
/* Overlaid on the bottom-right of the 3D view, as in the 2004 client, rather
   than stacked under the sidebar depth readout. */
#wildernessLevelIndicator {
  display: none;
  position: absolute;
  right: calc(var(--rs-col) + 14px);
  bottom: 92px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 30;
  pointer-events: none;
}
#wildernessSkullIcon {
  /* waveactive.png is 24x24 - drawn at native size so the pixels land 1:1. */
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.9));
}
#wildernessLevelText {
  font-family: 'quil', serif;
  font-size: 14px;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  white-space: nowrap;
}
#gearBar { bottom: 250px; font-size: 13px; }
#slayerTracker { bottom: 310px; font-size: 13px; color: #fff; }

#playerHpBarBg, #prayerBarBg { width: 100%; height: 10px; border: 1px solid #000; margin-top: 2px; }
#playerHpBarBg { background: #600; }
#prayerBarBg { background: #222; }

#playerHpBarFill, #prayerBarFill { height: 100%; width: 100%; }
#playerHpBarFill { background: #0f0; }
#prayerBarFill { background: #0ff; }
  
  /* Container for the background slideshow */
.login-slideshow {
  position: relative;
  width: 100%;        /* Fills .rsc-login-logo-container, which is now responsive */
  height: 100%;
  overflow: hidden;
  border: 1px solid lightgray;
}

/* Layer images directly on top of each other */
.login-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Use a linear timing function for a smoother cross-dissolve blend */
  animation: rscDissolveLonger 20s linear infinite;
}

/* Stagger start times by 5 seconds each */
.login-slideshow img:nth-child(1) { animation-delay: 0s; }
.login-slideshow img:nth-child(2) { animation-delay: 5s; }
.login-slideshow img:nth-child(3) { animation-delay: 10s; }

/* 20-second dissolve loop timeline with a 2.5-second transition */
@keyframes rscDissolveLonger {
  0% {
    opacity: 1;
  }
  /* Takes 2.5 seconds (12.5% of 20s) to fade in completely */
  12.5% {
    opacity: 1;
  }
  /* Stays fully visible until the 5-second mark (25% of 20s) */
  37.5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* ============================================================
   RUNESCAPE CLASSIC (2001-2003) RESKIN  — overrides above
   ============================================================ */
:root{
  --rsc-panel: rgba(60,60,60,0.88);      /* translucent gray tab panels */
  --rsc-panel-lite: rgba(90,90,90,0.88);
  --rsc-slot:#2b2b2b;
  --rsc-gold:#ffdd33;
}

/* --- Classic dark palette for the HUD deck & panels --- */
#gameUI, #bottombar, .rs-panel { 
  background: var(--rsc-panel) !important; 
}

/* --- UPDATED TAB ROW & BUTTON CONTAINER STYLING --- */
#tabBtnsRow {
  position: absolute;
  top: 4px; right: 4px;
  display: grid; 
  grid-template-columns: repeat(6, 46px); /* 6 tabs layout */
  background: transparent !important;    /* Keeps background clear */
  border: none !important;
  gap: 2px !important;
  z-index: 36;
}

#tabBtnsRow button {
  padding: 0 !important; 
  background: rgba(80, 80, 80, 0.9) !important; /* SLIGHTLY LIGHTER GRAY BACKGROUND */
  border: 2px solid #d3d3d3 !important;         /* Solid light gray border */
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important;
  height: 46px !important;
  width: 46px !important;
  cursor: default;
  box-shadow: none !important;
  transition: background 0.15s ease;
}

#tabBtnsRow button:hover {
  background: rgba(100, 100, 100, 0.95) !important; /* Lighter highlight on hover */
}

#tabBtnsRow button.active {
  background: rgba(55, 55, 55, 0.95) !important;   /* Distinct darker active state */
  border-color: #ffffff !important;                /* Bright white highlight border */
  box-shadow: none !important;
}

#tabBtnsRow button img { 
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: pixelated !important; 
}

/* --- MATCHING SLIGHTLY LIGHTER GRAY DROPDOWN PANEL STYLING --- */
#tabDropdown {
  position: absolute;
  top: 54px !important; /* Lowered from 32px to clear the new taller 46px buttons */
  right: 4px;
  width: 286px; /* Matches the total width of the 6 button columns + gaps */
  background: rgba(80, 80, 80, 0.9) !important; /* MATCHING SLIGHTLY LIGHTER GRAY BACKGROUND */
  border: 2px solid #d3d3d3 !important;         /* Solid light gray matching border */
  box-shadow: 0 4px 14px rgba(0,0,0,.6) !important;
}

#tabContent {
  background: transparent !important; /* Allows the dropdown's background to show through */
}

/* Header text inside the box styled to fit the new theme */
#tabDropdown::before {
  display: block; padding: 3px 0 2px; margin: 2px 2px 0;
  text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 1px;
  color: var(--rsc-gold); /* Yellow gold looks beautiful over the gray background */
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid #777777 !important;
  text-shadow: 1px 1px 0px #000000 !important;
  content: "INVENTORY";
}
/* ============================================================
   512x346 FIT LAYER  — appended last so it wins over everything above.
   The frame stays a true 512x346 RSC applet internally (so nothing has to
   be re-authored), but every piece of chrome is re-sized to the proportions
   the real 2001 client used at that resolution, and the whole frame is then
   scaled up to the window with --rsc-zoom. Text is re-rasterized at the
   zoomed size (crisp), and the 3D canvas gets a matching pixel ratio from
   the fit script in index.html, so it is bigger without being blockier.
   ============================================================ */
:root{
  --rsc-zoom: 1;              /* set by rscFitFrame() in index.html */
  --rsc-tab: 27px;            /* tab icon size (was 46px) */
  --rsc-panel-w: 168px;       /* right-hand panel width (was 286px) */
  --rsc-font: 11px;
}

/* Scale the whole applet to the window, from the centre. */
#page-layout{
  width: 512px;
  height: 346px;
  transform: scale(var(--rsc-zoom));
  transform-origin: center center;
  image-rendering: auto;
}

/* Body/base type: RSC used a ~11-12px face at this resolution. */
html, body{ font-size: var(--rsc-font); }

/* The 3D view should be smooth when zoomed, not nearest-neighbour blown up.
   The fit script raises the renderer's pixel ratio to match --rsc-zoom, so
   the buffer is genuinely higher-res rather than upscaled. */
#canvasWrap canvas{ image-rendering: auto; }

/* --- Tab icons: 6 across the top-right in 167px instead of 286px --- */
#tabBtnsRow{
  top: 3px !important; right: 3px !important;
  grid-template-columns: repeat(6, var(--rsc-tab)) !important;
  gap: 1px !important;
}
#tabBtnsRow button{
  width: var(--rsc-tab) !important;
  height: var(--rsc-tab) !important;
  border-width: 1px !important;
}

/* --- Right-hand panel: fits under the icons inside 346px of height --- */
#tabDropdown{
  top: calc(var(--rsc-tab) + 5px) !important;
  right: 3px !important;
  width: var(--rsc-panel-w) !important;
  max-height: 296px !important;
  border-width: 1px !important;
}
#tabContent{
  max-height: 276px !important;
  padding: 3px !important;
  font-size: var(--rsc-font);
}
#tabDropdown::before{
  padding: 1px 0 !important;
  margin: 1px 1px 0 !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

/* Panel innards */
.rs-btn{ font-size: 10px; padding: 2px 5px; border-width: 1px; }
.rs-btn.small{ font-size: 9px; padding: 1px 4px; }
.achRow, .bestRow, .merchRow, .satchelRow, .skillRow, .questRow, .craftRow{
  border-width: 1px; margin-bottom: 2px; padding: 3px; font-size: 10px;
}
.invGrid{ border-top-width: 1px; border-left-width: 1px; margin-bottom: 4px; }
.invSlot{ border-right-width: 1px; border-bottom-width: 1px; }
.invSlot img{ max-width: 82%; max-height: 82%; }
.invSlot .qty{ font-size: 9px; top: 0; left: 1px; }
.bankGrid{ border-top-width: 1px; border-left-width: 1px; margin-bottom: 4px; grid-template-columns: repeat(6, 1fr); }
.bankSlot{ border-right-width: 1px; border-bottom-width: 1px; }
.bankSlot .qtyBank, .bankSlot .qtyHeld{ font-size: 9px; }
.invActionBox{ padding: 5px 6px; border-width: 1px; }
.iaName{ font-size: 10px; }
.iaDesc{ font-size: 9px; margin-bottom: 4px; }
.csHeader{ font-size: 10px; padding: 2px 4px; border-width: 1px; }
.csRow{ font-size: 10px; padding: 3px 5px; }
::-webkit-scrollbar{ width: 7px; }

/* --- Action text / combat style overlay --- */
#npcHint{
  font-size: 11px; padding: 1px 3px; max-width: 200px; top: 2px; left: 2px;
}
#combatStyleOverlay{ top: 18px; left: 2px; width: 120px; }

/* --- Left column: HP/prayer, gear, slayer. Stacked bottom-up so all three
       stay inside 346px instead of running off the top. --- */
#playerHpWrap, #gearBar, #slayerTracker{
  width: 104px; padding: 3px; border-width: 1px; font-size: 10px;
}
#playerHpWrap{ bottom: 78px; }
#playerHpWrap .lbl{ font-size: 9px !important; }
#playerHpWrap .lbl span{ font-size: 9px !important; }
#playerHpBarBg, #prayerBarBg{ height: 6px; }
#gearBar{ bottom: 132px; font-size: 9px; }
#slayerTracker{ bottom: 186px; font-size: 9px; }

/* --- Chat log: classic 5 lines along the bottom-left --- */
#log{
  left: 2px; bottom: 2px; width: 62%; height: 62px;
  font-size: 11px; line-height: 1.15;
}

/* --- Mute button cluster --- */
#bottombar{ right: 3px; bottom: 4px; width: 26px; padding: 2px; border-width: 1px; }
/* The button was still using the general .rs-btn border (2px) + .rs-btn.small
   padding (1px 4px), which left only ~14px of interior room in this 26px-wide
   shell - too small for the 16px icon below, so it spilled outside the
   button's edges instead of sitting inside it. Slimmed to match the
   container's own 1px border and centered properly. */
#bottombar .rs-btn{
  border-width: 1px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#bottombar .rs-btn img{ max-width: 16px; max-height: 16px; }

/* --- Modals: must live inside 512x346 --- */
#modalBox{ width: 320px !important; max-width: 94% !important; max-height: 280px !important; }
#modalTitleBar{ padding: 3px 6px; border-bottom-width: 1px; }
#modalTitleBar #modalTitle{ font-size: 11px; }
#modalBtn{ font-size: 10px; }
#modalSubBar{ padding: 2px 6px; font-size: 9px; }
#modalBodyScroll{ padding: 6px 8px; font-size: 10px; }
#modalText{ font-size: 10px; margin: 0 0 6px; }
#modalFooterHint{ padding: 3px 6px; font-size: 9px; }
.mn{ font-size: 10px; }
.md, .mc{ font-size: 9px; }
.mIcon img{ width: 14px !important; height: 14px !important; }

/* --- Wave banner / load screen / sleep screen --- */
#waveBanner{ padding: 4px 10px; }
#waveBanner h2{ font-size: 14px; }
#waveBanner p{ font-size: 10px; margin: 2px 0 0; }
.loading-bar-container{ width: 180px; height: 20px; }
#loadScreen p{ font-size: 10px; }
#sleepScreen .sleepInner{ max-width: 340px; padding: 0 10px; }
#sleepScreen h1{ font-size: 16px; margin-bottom: 3px; }
#sleepScreen h2{ font-size: 12px; margin-bottom: 8px; }
#sleepScreen p{ font-size: 10px; margin-bottom: 5px; }
.sleepWord{ font-size: 17px; letter-spacing: 2px; margin: 5px auto 7px; }
#sleepWordInput{ width: 150px; font-size: 11px; padding: 2px; border-width: 1px; }
.sleepZ{ font-size: 14px !important; }
.damageFloat{ font-size: 12px; }
.stat{ font-size: 10px; }
.stat .icon img{ max-height: 10px; }

/* --- Login overlay: the 512x346 frame is scaled, the login screen is not,
       so give it its own sensible ceiling. --- */
#login-overlay{ font-size: 12px; }

/* ============================================================
   RUNESCAPE 2004-05 BETA HUD — fitted to the true 512x346 applet.
   (appended last — wins over everything above; delete to revert.)
   Sidebar/frame use the game's own stone textures (darkened so light text
   stays readable). Every coordinate is sized so the whole HUD lands inside
   512x346; the applet is then scaled up by --rsc-zoom.
   ============================================================ */
:root{
  --rs-col: 156px;         /* right column width */
  --rs-mini: 106px;        /* round minimap size */
  --rs-tab: 25px;          /* tab icon size (6 across the 156px column) */
  --rs-chat: 76px;         /* parchment chat height */
  --rs-bar: 16px;          /* bottom chat-control bar height */
  --rs-parch: #d9caa2;     /* aged chat parchment */
  --rs-gold2: #ffdd44;
  /* Darkening overlays laid over the stone texture so the panels aren't too
     light for white/gold text. */
  --rs-tint:   linear-gradient(rgba(28,24,18,0.56), rgba(28,24,18,0.56));
  --rs-tint-d: linear-gradient(rgba(16,13,9,0.72), rgba(16,13,9,0.72));
}

/* Stone frame backdrop (the border area around the view/panel/chat). */
#gameUI, #mainViewport{
  background: var(--rs-tint-d), url('textures/rock.jpg') !important;
  background-size: 96px 96px !important;
  image-rendering: pixelated;
}
#mainViewport{ box-shadow: inset 0 0 0 1px #17130d, inset 0 0 16px rgba(0,0,0,0.6); }

/* --- 3D VIEW: framed block, top-left --- */
#canvasWrap{
  top: 3px !important; left: 3px !important;
  right: calc(var(--rs-col) + 8px) !important;
  bottom: calc(var(--rs-chat) + var(--rs-bar) + 7px) !important;
  border: 2px solid #14110b !important;
}

/* --- ROUND MINIMAP: centred at the top of the right column --- */
#hudMinimap{
  position: absolute; top: 3px;
  right: calc((var(--rs-col) - var(--rs-mini))/2 + 3px);
  width: var(--rs-mini); height: var(--rs-mini);
  border-radius: 50%;
  background: #223018;
  border: 2px solid #14110b;
  box-shadow: inset 0 0 0 3px #2c2820, 0 0 0 1px #6a6252;
  /* Was overflow:hidden, which clipped the compass to the round map. The
     canvas carries its own border-radius so the map is still a clean circle,
     and the compass is now free to sit proud of the edge like the real client. */
  overflow: visible; z-index: 34;
}
#hudMinimapCanvas{ width: 100%; height: 100%; display: block; border-radius: 50%; image-rendering: pixelated; }
/* Compass: sits over the top-left of the minimap and is rotated every frame by
   updateHudCompass() so its needle holds true north. */
#hudCompass{
  position: absolute; top: -7px; left: -7px;
  width: 30px; height: 30px;
  z-index: 36; cursor: pointer;
  transform-origin: 50% 50%;
  /* No CSS transition: the rotation is already smoothed by the camera's own
     easing, and a transition on top of a per-frame update just adds lag. */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
}
#hudCompass img{ width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; }
#hudCompass:hover{ filter: drop-shadow(0 0 3px #ffd98a); }
/* Fallback needle, shown only if compass.png is missing (see the img onerror
   in playgame.html) so the control is never invisible or broken-looking. */
#hudCompass.noCompassImg{
  background: radial-gradient(circle, #cfc6ac 0 46%, #6a6252 47% 100%);
  border-radius: 50%; border: 1px solid #14110b;
}
#hudCompass.noCompassImg::after{
  content: ''; position: absolute; left: 50%; top: 3px;
  width: 0; height: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 11px solid #d64b2a;
}

/* --- TAB ROW: directly below the minimap, 6 stone tabs across the column --- */
#tabBtnsRow{
  top: calc(var(--rs-mini) + 6px) !important;
  right: 3px !important;
  grid-template-columns: repeat(6, var(--rs-tab)) !important;
  gap: 1px !important;
}
#tabBtnsRow button{
  width: var(--rs-tab) !important; height: var(--rs-tab) !important;
  background: var(--rs-tint), url('textures/stone2.jpg') !important;
  background-size: 48px 48px !important;
  border: 1px solid #14110b !important;
  box-shadow: inset 1px 1px 0 #7a725e, inset -1px -1px 0 #322e28 !important;
  image-rendering: pixelated;
}
#tabBtnsRow button.active{
  background: var(--rs-tint-d), url('textures/stone2.jpg') !important;
  background-size: 48px 48px !important;
  border-color: var(--rs-gold2) !important;
  box-shadow: inset -1px -1px 0 #7a725e, inset 1px 1px 0 #322e28 !important;
}

/* --- PANEL: stone-textured, always open, below the tab row --- */
#tabDropdown{
  display: flex !important;
  top: calc(var(--rs-mini) + var(--rs-tab) + 10px) !important;
  right: 3px !important;
  bottom: calc(var(--rs-bar) + 3px) !important;
  width: var(--rs-col) !important;
  max-height: none !important;
  background: var(--rs-tint), url('textures/totemwood.png') !important;
  background-size: 64px 64px !important;
  border: 2px solid #14110b !important;
  box-shadow: inset 1px 1px 0 #7a725e, inset -1px -1px 0 #322e28 !important;
  image-rendering: pixelated;
}
#tabContent{ max-height: none !important; flex: 1 1 auto; overflow-y: auto; background: transparent !important; padding: 4px !important; }
#tabDropdown::before{ color: var(--rs-gold2) !important; background: rgba(0,0,0,0.3) !important; border-color: #6a6252 !important; }

/* --- INVENTORY: borderless slots so items sit right on the stone --- */
.invGrid{ border: none !important; background: transparent !important; gap: 1px !important; }
.invSlot{ background: transparent !important; border: none !important; box-shadow: none !important; }
.invSlot:hover{ background: rgba(255,255,255,0.08) !important; box-shadow: none !important; }
.invSlot.selected{ background: rgba(255,220,80,0.16) !important; box-shadow: inset 0 0 0 1px var(--rs-gold2) !important; }
.invSlot .qty{ color: var(--rs-gold2) !important; }

/* --- EQUIPMENT DIAMOND (buildEquipmentHTML) --- */
.eqDiamond{ display:flex; flex-direction:column; align-items:center; gap:3px; margin:3px 0 5px; }
.eqRow{ display:flex; gap:12px; justify-content:center; }
.eqCell{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background: var(--rs-tint-d), url('textures/stone2.jpg'); background-size:48px 48px;
  border:1px solid #14110b; box-shadow: inset 1px 1px 0 #6a6252, inset -1px -1px 0 #2a2620;
  position:relative; image-rendering:pixelated;
}
.eqCell.empty{ visibility:hidden; }
.eqCell img{ max-width:80%; max-height:80%; image-rendering:pixelated; }
.eqCell .eqLbl{ font-size:6px; color:#c6beae; text-align:center; line-height:1; }
.eqCell.filled{ box-shadow: inset 0 0 0 1px var(--rs-gold2), inset 1px 1px 0 #6a6252; }
.eqStats{
  margin:4px 2px; padding:3px 5px; background:rgba(9,32,16,0.85); border:1px solid #14110b;
  font-size:9px; color:#55dd55; display:grid; grid-template-columns:1fr 1fr; gap:1px 8px;
}
.eqStats span{ color:#9fe89f; }
.eqStats b{ color:#fff; float:right; }

/* --- CORE STAT BAR: compact, top-left over the view --- */
#topbar{
  display:flex !important; position:absolute; top:5px; left:6px;
  align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap;
  max-width: calc(100% - var(--rs-col) - 20px);
  padding:1px 4px; background:rgba(0,0,0,0.5); border:1px solid #000;
  z-index:34; overflow:hidden;
}
#topbar .stat{ font-size:9px; gap:2px; }
#topbar .stat .icon img{ max-height:9px; }
#topbar #lvlbar{ width:24px; height:5px; }
#npcHint{ top:18px !important; max-width: calc(100% - var(--rs-col) - 20px) !important; }
#combatStyleOverlay{ top:32px !important; }

/* --- FEWER FLOATERS --- */
#gearBar, #slayerTracker{ display:none !important; }
#playerHpWrap{ left:6px !important; bottom: calc(var(--rs-chat) + var(--rs-bar) + 11px) !important; width:112px !important; }

/* --- PARCHMENT CHAT --- */
#log{
  top:auto !important; left:3px !important;
  right: calc(var(--rs-col) + 8px) !important;
  bottom: calc(var(--rs-bar) + 2px) !important;
  width:auto !important; height: var(--rs-chat) !important;
  padding:3px 7px !important;
  /* Real parchment sheet; --rs-parch is the fallback colour if the image is missing. */
  background: var(--rs-parch) url('textures/parchment.jpg') center/cover !important;
  border:2px solid #14110b !important;
  font-size:11px !important; line-height:1.22 !important;
  pointer-events:auto !important; overflow-y:auto !important;
}
#log, #log .g, #log .r, #log .b, #log .p, #log .c, #log .v{ color:#6a1c08 !important; text-shadow:none !important; }

/* --- BOTTOM CHAT-CONTROL BAR --- */
.rsc-tabs{
  display:flex !important; left:0 !important; bottom:0 !important;
  width:100% !important; height: var(--rs-bar) !important;
  background: var(--rs-tint-d), url('textures/stone2.jpg') !important;
  background-size: 64px 64px !important;
  border-top:1px solid #14110b !important; opacity:1 !important; z-index:40 !important;
  align-items:center; image-rendering:pixelated;
}
.rsc-tabs span{
  flex:1; text-align:center; font-size:9px; color:#cfc6b0 !important;
  border-right:1px solid #14110b; padding:0 !important; background:transparent !important;
  white-space:nowrap;
}
.rsc-tabs span:last-child{ border-right:none; color:#fff !important; }
.rsc-tabs .on{ color:#33dd33; }
.rsc-tabs a{ color:inherit; text-decoration:none; }

/* ============================================================
   HUD TEXT PLACEMENT FIX (512x346) — appended last, wins.
   Keep the next-wave countdown and FPS readout from overlapping the stat bar,
   action text, combat menu, HP panel, chat or the sidebar.
   ============================================================ */
/* FPS takes the top-left slot the wilderness percentage used to occupy, just
   under the action text. */
#fpsDisplay{
  top: 32px !important; left: 4px !important;
  right: auto !important; bottom: auto !important;
  text-align: left !important;
}
/* Wilderness skull: this used to shrink it to 16px because it sat in normal
   flow in the sidebar HUD. It is now an overlay on the 3D view
   instead, and waveactive.png is a 24x24 pixel-art icon - forcing 16px scaled
   it by a non-integer factor, which blurs pixel art no matter what
   image-rendering says. Drawn 1:1 at its native size so it stays crisp. */
#wildernessSkullIcon{ width:24px !important; height:24px !important; }
#wildernessLevelText{ font-size:12px !important; }
#fpsDisplay{ font-size: 10px !important; line-height: 1.2 !important; }

/* ============================================================
   NPC-HINT vs STAT-BAR FIX (appended last, wins).
   Give the stat bar a fixed compact height, drop the action text to a clear
   row just beneath it, and put the action text ABOVE the bar in z-order so it
   can never render behind the bar. The next-wave/combat rows shift down to
   match. All still inside 512x346.
   ============================================================ */
#topbar{ top: 4px !important; height: 13px !important; line-height: 11px !important; }
#npcHint{ top: 19px !important; z-index: 36 !important; }
/* Tucked against the left edge, on the row BELOW #combatStyleOverlay
   (y 34-74) rather than beside it. Sharing that row meant pushing the counter
   130px inward to clear the combat menu, which left it stranded in the middle
   of the view; dropping a row keeps it hard against the side and clear of the
   menu at the same time. */
#fpsDisplay{ top: 78px !important; left: 4px !important; }
#combatStyleOverlay{ top: 34px !important; }

/* ============================================================
   RIGHT-CLICK CONTEXT MENU — styled to match the OSRS "Choose Option" box.
   Solid black panel with a thin light border; a grey "Choose Option" header
   over a divider; rows show a WHITE action verb + a CYAN object name. On hover
   only the verb turns YELLOW (no row highlight), exactly like the client.
   Positioned in the frame's own coordinate space by openContextMenuAt().
   ============================================================ */
#rsContextMenu{
  position: absolute;
  z-index: 200;
  min-width: 96px;
  max-width: 280px;
  padding: 0 0 2px 0;
  background: #000;
  border: 1px solid #5a5a5a;         /* light outer edge like the client box */
  box-shadow: 0 1px 3px rgba(0,0,0,0.7);
  font-size: 12px;
  line-height: 1.18;
  font-weight: bold;
  color: #ffffff;
  text-transform: none !important;    /* the game lowercases chat; this box is proper-case */
  user-select: none;
  display: none;
}
#rsContextMenu .rsCtxHeader{
  padding: 2px 5px 3px 5px;
  margin-bottom: 1px;
  background: #000;
  color: #b0b0b0;                     /* grey header text */
  font-weight: bold;
  border-bottom: 1px solid #5a5a5a;   /* divider under the header */
  white-space: nowrap;
  text-transform: none !important;
}
#rsContextMenu .rsCtxRow{
  padding: 0 5px;
  white-space: nowrap;
  cursor: pointer;
  background: #53504A;
  text-transform: none !important;
}
/* Action verb = white; object name = cyan. */
#rsContextMenu .rsCtxAct{ color: #ffffff; }
#rsContextMenu .rsCtxObj{ color: #00ffff; }
/* Hover: only the verb turns yellow; the object stays cyan, no row highlight. */
#rsContextMenu .rsCtxRow:hover .rsCtxAct{ color: #ffff00; }
#rsContextMenu .rsCtxRow:hover .rsCtxObj{ color: #00ffff; }
/* --- 2004 LEVEL-UP DIALOGUE ------------------------------------------------
   The moment everything stops and the chat area is taken over by the skill
   icon and two centred lines, until you click to continue. Sits directly over
   #log (same corner, same parchment font) so it reads as the chat box being
   commandeered, exactly as the 2004 client did it - rather than as a modern
   toast floating somewhere else on screen. */
/* Same footprint as #log and the NPC panel (left:2px, bottom:2px, 62% x 62px).
   It was 50% x 50px, which left chat text visible around its edges, and the
   translucent wash let more show through underneath - both of which read as a
   box floating on the chat rather than replacing it. */
#levelUpPanel{
  /* Exactly the geometry of #log's authoritative rule (the !important
     "PARCHMENT CHAT" block further up), so this sheet lands pixel-for-pixel on
     top of the chat box and hides it completely - which is what the real client
     did: the dialogue REPLACES the chat area for as long as it's open.
     Previously these used left:2px/62%/62px, taken from an earlier #log rule
     that the parchment block overrides, so they covered only part of it and the
     log showed around the edges. Same parchment texture and border too, so the
     swap reads as the chat box changing contents rather than a panel landing on
     top of it. */
  position: absolute;
  left: 3px;
  right: calc(var(--rs-col) + 8px);
  bottom: calc(var(--rs-bar) + 2px);
  width: auto; height: var(--rs-chat);
  box-sizing: border-box;
  background: var(--rs-parch) url('textures/parchment.jpg') center/cover;
  border: 2px solid #14110b;
  text-shadow: none;
  overflow: hidden;
  z-index: 40;                 /* above #log (20) so it covers the chat text */
  display: none;
  align-items: center; gap: 10px;
  padding: 3px 7px;
  font-family: 'quil', monospace;
  text-align: center;
  color: #000080;              /* the classic navy dialogue text */
  cursor: pointer;
}
#levelUpPanel.show{ display: flex; }
#levelUpPanel .luIcon{ flex: 0 0 auto; }
#levelUpPanel .luIcon img{
  width: 36px; height: 36px; display: block;
  image-rendering: pixelated;
}
#levelUpPanel .luText{ flex: 1 1 auto; line-height: 1.25; }
#levelUpPanel .luLine1{ font-size: 13px; }
#levelUpPanel .luLine2{ font-size: 13px; color: #000000; }
#levelUpPanel .luMore{ font-size: 12px; color: #000080; margin-top: 2px; }
#levelUpPanel:hover .luMore{ text-decoration: underline; }

/* --- 2004 NPC CHAT HEAD ----------------------------------------------------
   Parchment panel with a portrait, the speaker's name in red, their line in
   black, and "Click here to continue" in blue.

   The portrait SIDE encodes who is talking: NPCs sit on the left, the player's
   own head on the right. That alternation is most of what makes an exchange
   read as a conversation instead of a wall of text with a picture attached, and
   it's how the real client did it. Markup order never changes - the head is
   always written first - and .side-right just reverses the flex row. */
/* Footprint matches #log (left:2px, bottom:2px, 62% x 62px) exactly. It was
   50% x 50px, so the chat log poked out to the right of it and above it - the
   panel is meant to take the chat area OVER, not sit on part of it. Fully
   opaque for the same reason. */
#npcDialoguePanel{
  /* Exactly the geometry of #log's authoritative rule (the !important
     "PARCHMENT CHAT" block further up), so this sheet lands pixel-for-pixel on
     top of the chat box and hides it completely - which is what the real client
     did: the dialogue REPLACES the chat area for as long as it's open.
     Previously these used left:2px/62%/62px, taken from an earlier #log rule
     that the parchment block overrides, so they covered only part of it and the
     log showed around the edges. Same parchment texture and border too, so the
     swap reads as the chat box changing contents rather than a panel landing on
     top of it. */
  position: absolute;
  left: 3px;
  right: calc(var(--rs-col) + 8px);
  bottom: calc(var(--rs-bar) + 2px);
  width: auto; height: var(--rs-chat);
  box-sizing: border-box;
  background: var(--rs-parch) url('textures/parchment.jpg') center/cover;
  border: 2px solid #14110b;
  text-shadow: none;
  overflow: hidden;
  z-index: 41;                 /* above #log (20) and the level-up sheet (40) */
  display: none;
  align-items: center; gap: 8px;
  padding: 3px 7px;
  font-family: 'quil', monospace;
  cursor: pointer;
}
#npcDialoguePanel.show{ display: flex; }
#npcDialoguePanel.side-left{  flex-direction: row; }
#npcDialoguePanel.side-right{ flex-direction: row-reverse; }
/* Chat head cropped from the full-body world sprite. Every sprite in sprimg is
   39px wide, so the numbers below are fixed rather than proportional:
   render at 96px (~2.5x native), pull left by (96-44)/2 to centre the figure,
   and pull up 4px to trim the empty pixels above the scalp. The 44px box then
   frames the head and shoulders.

   This replaced `width:46px; transform:scale(2.2); transform-origin:50% 20%`,
   which compounded a 1.18x fit with a 2.2x transform into ~2.6x and cropped to
   roughly an 18x18 patch of the source - a fragment of the face blown up until
   it was unrecognisable, which is the grey block in the screenshot. */
#npcDialoguePanel .npcHead{
  flex: 0 0 auto; width: 44px; height: 44px;
  overflow: hidden;
}
#npcDialoguePanel .npcHead img{
  display: block;
  width: 96px; height: auto;
  margin-left: -26px;
  margin-top: -4px;
  image-rendering: pixelated;
}
#npcDialoguePanel .npcSay{ flex: 1 1 auto; text-align: center; line-height: 1.2; min-width: 0; }
#npcDialoguePanel .npcName{ font-size: 13px; color: #b02020; }
#npcDialoguePanel .npcLine{
  font-size: 13px; color: #000000;
  /* Long lines wrap and centre, as in the reference - they never clip. */
  overflow-wrap: break-word;
}
#npcDialoguePanel .npcMore{ font-size: 12px; color: #0000c0; margin-top: 2px; }
#npcDialoguePanel:hover .npcMore{ text-decoration: underline; }

/* --- RUN TOGGLE ------------------------------------------------------------
   Beside the minimap where the real client kept it. */
#runToggle{
  position: absolute;
  top: calc(var(--rs-mini) + 4px);
  right: calc((var(--rs-col) - var(--rs-mini))/2 + 3px);
  display: flex; align-items: center; gap: 3px;
  padding: 1px 5px;
  font-family: 'basic', monospace; font-size: 11px;
  color: #e8dfc8;
  background: var(--rs-tint), url('textures/stone2.jpg');
  background-size: 48px 48px;
  border: 1px solid #14110b;
  box-shadow: inset 1px 1px 0 #7a725e, inset -1px -1px 0 #322e28;
  cursor: pointer; z-index: 35; user-select: none;
}
#runToggle #runToggleIcon{ color: #6b6353; font-size: 9px; }
#runToggle.running #runToggleIcon{ color: #4ddb4d; }
#runToggle.spent   #runToggleIcon{ color: #d64b2a; }
#runToggle.spent   #runToggleText{ color: #d64b2a; }
#runToggle:hover{ filter: brightness(1.25); }
/* The tab row sits below the minimap; nudge it down to clear the toggle. */
#tabBtnsRow{ top: calc(var(--rs-mini) + 22px) !important; }

/* ============================================================
   RS2-BETA INTERFACE SKIN (appended last, wins)
   Matched against the beta bank / shop / treasure-trail screens. What the
   modals had before was the RSC palette: a blue gradient title bar and a flat
   grey body. The beta dropped both - its windows are a single dark warm-brown
   sheet with a bevelled edge, an AMBER title centred across the top, and
   "Close Window" as plain text in the corner rather than a button. Item counts
   are yellow, hint lines at the foot are orange, and any action buttons are
   maroon. Those five things are most of the look.
   ============================================================ */
:root{
  /* The body is a TINT over the stone texture rather than a colour blended
     into it. `background-blend-mode: multiply` was darkening #3f3a32 by the
     texture's own value, so the result landed far darker than the swatch
     suggested and nothing here was predictable. An rgba layer over the image
     lands exactly where it says it will. */
  --rs2-panel:      #665f4e;   /* window body / fallback if uibg.jpg is absent */
  --rs2-panel-dark: #4e4940;   /* recessed areas: item grids, scroll troughs */
  --rs2-border:     #bfb394;   /* SOLID frame - deliberately lighter than the body */
  --rs2-bevel-lo:   #4e4940;   /* retained for the few rules still naming it */
  --rs2-amber:      #ff9040;   /* titles */
  --rs2-orange:     #ff8020;   /* footer hints */
  --rs2-yellow:     #ffff00;   /* item quantities */
  --rs2-btn:        #7d2626;   /* maroon buttons */
  --rs2-btn-hi:     #9a3434;
}
#modalBox{
  /* textures/uibg.jpg is the window sheet. background-COLOR is set separately
     from background-image on purpose: if the file is missing the colour alone
     still renders a proper opaque panel, whereas a shorthand would leave the
     tint layer floating over the 3D scene behind it.
     The wash over the top is deliberately light and quite transparent so
     whatever art goes in reads mostly as drawn - it is there to stop a dark
     source image dragging the panel back down, not to recolour it. */
  background-color: var(--rs2-panel) !important;
  background-image:
    linear-gradient(rgba(45,38,28,0.20), rgba(45,38,28,0.20)),
    url('textures/uibg.jpg') !important;
  /* Tiled at the image's own size rather than stretched to `cover`. `auto`
     respects whatever you author - a 64px tile and a 256px tile both repeat at
     the size you drew them, instead of being scaled to the panel and losing
     their pixel grid. Swap to a fixed `64px 64px` if you'd rather pin it. */
  background-size: auto, auto !important;
  background-position: top left !important;
  background-repeat: repeat, repeat !important;
  /* A single solid frame, lighter than the body it surrounds - no black outline
     and no bevel shadows, which were reading as a second darker border just
     inside the first. */
  border: 2px solid var(--rs2-border) !important;
  box-shadow: none !important;
}
/* No coloured title bar in the beta - the title sits directly on the sheet,
   centred, with the close text pinned to the corner beside it. */
#modalTitleBar{
  background: transparent !important;
  border-bottom: none !important;
  position: relative !important;
  justify-content: center !important;
  padding: 5px 8px 3px !important;
}
#modalTitleBar #modalTitle{
  color: var(--rs2-amber) !important;
  text-align: center !important;
  font-size: 13px !important;
  /* Full outline rather than a single offset shadow. The amber only had 1.7:1
     contrast once the panel was lightened, and since uibg.jpg is user-supplied
     the background brightness isn't knowable - an outline reads on either. */
  text-shadow: 1px 1px 0 #2a2118, -1px 1px 0 #2a2118,
               1px -1px 0 #2a2118, -1px -1px 0 #2a2118 !important;
  letter-spacing: 0.3px;
}
#modalBtn{
  position: absolute !important; right: 6px; top: 5px;
  padding-left: 0 !important;
  color: #ffffff !important; font-size: 10px !important;
  text-shadow: 1px 1px 0 #1a1610 !important;
  cursor: pointer !important;
}
#modalBtn:hover{ color: #ffe9a8 !important; }
/* Sub bar / footer hints: orange centred text on the sheet, no blue strip. */
#modalSubBar{
  background: transparent !important;
  color: var(--rs2-orange) !important;
  border-bottom: 1px solid var(--rs2-border) !important;
  font-size: 10px !important;
}
#modalSubLeft, #modalSubRight{
  color: var(--rs2-orange) !important;
  text-shadow: 1px 1px 0 #2a2118, -1px -1px 0 #2a2118 !important;
}
#modalFooterHint{
  color: var(--rs2-orange) !important;
  text-align: center !important;
  font-size: 10px !important;
  text-shadow: 1px 1px 0 #2a2118, -1px -1px 0 #2a2118 !important;
}
/* Item grids sit in a recessed well, like the beta's bank and shop panes. */
/* .bankGrid is a class, not an id (modals-ui.js sets className='bankGrid'), and
   the merchant is a LIST not a grid - there is no #shopGrid or .shopSlot in
   this codebase, so those selectors are gone rather than left dangling. */
.bankGrid, .invGrid, .merchList{
  background: var(--rs2-panel-dark);
  border: 1px solid var(--rs2-border);
  box-shadow: none;
}
/* Quantities: yellow, top-left, hard black shadow - the beta's single most
   recognisable inventory detail. */
.invSlot .qty, .bankSlot .qtyBank{
  color: var(--rs2-yellow) !important;
  text-shadow: 1px 1px 0 #000 !important;
}
/* Maroon buttons ("Swap / Insert", "Item / Note"). */
#modalBox .rs-btn, #modalBox button{
  background: var(--rs2-btn) !important;
  border: 1px solid var(--rs2-border) !important;
  box-shadow: none !important;
  color: #f0e6d2 !important;
  font-family: 'basic', monospace !important;
}
#modalBox .rs-btn:hover, #modalBox button:hover{ background: var(--rs2-btn-hi) !important; }
#modalBox .rs-btn:disabled, #modalBox button:disabled{
  background: #5f584a !important; color: #9a9080 !important;
  border-color: #7d7362 !important;
  box-shadow: none !important;
}
/* Chunky beta scrollbar rather than the thin dark one. */
/* Merchant rows: alternating tint inside the well so a long list stays
   readable, matching the beta's banded shop panes. */
.merchRow{ background: transparent; border-bottom: none; }
.merchRow:nth-child(even){ background: rgba(255,255,255,0.03); }
.merchRow .mn{ color: var(--rs2-amber) !important; }
.merchRow .mc{ color: var(--rs2-yellow) !important; text-shadow: 1px 1px 0 #000; }

#modalBodyScroll::-webkit-scrollbar{ width: 12px; background: var(--rs2-panel-dark); }
#modalBodyScroll::-webkit-scrollbar-thumb{
  background: #8a7c62; border: 1px solid var(--rs2-border);
  box-shadow: none;
}

/* ============================================================
   RS2-BETA LAYOUT MATCH (appended after the skin, wins)
   The skin above got the colours right; this gets the SHAPE right. Measured
   against the bank and shop screenshots: eight columns, borderless cells over
   one continuous recessed well, a single yellow count per item sitting at the
   top-left, and a centred amber title with an orange instruction line at the
   foot of the pane.
   ============================================================ */

/* ---- BANK: eight columns, like the beta's bank pane ---- */
.bankGrid{
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 0 !important;
  border: none !important;
  padding: 3px !important;
  margin-bottom: 5px !important;
  background: var(--rs2-panel-dark) !important;
  border: 1px solid var(--rs2-border) !important;
  box-shadow: none !important;
}
/* Cells are invisible in the beta - items float on one continuous well rather
   than sitting in a chequerboard of bordered boxes. */
.bankSlot{
  border: none !important;
  background: transparent !important;
  aspect-ratio: 1 / 1;
  padding: 1px !important;
}
.bankSlot:hover{
  background: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
.bankSlot.selected{
  background: rgba(255,204,51,0.16) !important;
  box-shadow: inset 0 0 0 1px #ffcc33 !important;
}
.bankSlot img{ max-width: 88% !important; max-height: 88% !important; }
/* The banked amount is THE number in the beta: yellow, top-left, hard shadow.
   The carried count stays but recedes to a dim corner figure so the pane reads
   as one quantity per item the way the screenshots do, without losing the
   information the sub-bar promises. */
.bankSlot .qtyBank{
  top: 0 !important; left: 1px !important; bottom: auto !important;
  color: var(--rs2-yellow) !important;
  font-size: 9px !important;
}
.bankSlot .qtyHeld{
  top: auto !important; bottom: 0 !important; right: 1px !important;
  /* The carried-count figure: 8px and a dim warm grey against the recessed
     well, which was the least legible thing in the interface. */
  color: #ffffff !important;
  text-shadow: 1px 1px 0 #1a1610, -1px -1px 0 #1a1610 !important;
  font-size: 8px !important;
}

/* ---- MERCHANT: a shop GRID, not a list of rows ---- */
.merchList{
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  padding: 3px !important;
  background: var(--rs2-panel-dark);
  border: 1px solid var(--rs2-border);
  box-shadow: none;
}
.merchRow{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative;
  padding: 2px 1px !important;
  border: none !important;
  background: transparent !important;
  text-align: center;
  min-height: 0 !important;
}
.merchRow:nth-child(even){ background: transparent !important; }
.merchRow:hover{ background: rgba(255,255,255,0.07) !important; }
.merchRow .mIcon img{ height: 26px !important; width: auto !important; }
/* Price sits over the icon in yellow, exactly where the beta puts stock counts. */
.merchRow .mc{
  position: absolute; top: 0; left: 2px;
  color: var(--rs2-yellow) !important;
  font-size: 9px !important; font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
.merchRow .mn{ font-size: 8px !important; color: #ffffff !important; line-height: 1.1;
  text-shadow: 1px 1px 0 #1a1610, -1px -1px 0 #1a1610 !important; }
/* Descriptions don't exist in the beta shop - the item name and price are the
   whole cell. Hidden rather than deleted so the tooltip text stays available. */
.merchRow .md{ display: none !important; }
.merchRow .mi{ display: flex; flex-direction: column; align-items: center; }

/* ---- Title / footer, matched to the screenshots ---- */
#modalTitleBar #modalTitle{ font-size: 12px !important; }
#modalText{
  color: #ffffff !important;
  text-shadow: 1px 1px 0 #1a1610 !important;
  font-size: 9px !important;
  text-align: center !important;
}

/* Buy buttons are hidden, not removed - see renderMerchantModal. The cell is
   the click target, as in the beta. */
.merchRow > .rs-btn{ display: none !important; }
.merchRow{ cursor: pointer; }
.merchRow.cantAfford{ opacity: 0.45; cursor: default; }
.merchRow.cantAfford:hover{ background: transparent !important; }

/* Eight columns need more width than the 320px the modal was capped at - the
   beta's bank pane fills most of the frame. */
#modalBox{ width: 420px !important; max-width: 96% !important; max-height: 300px !important; }

/* Body copy inside modals. These lines used to carry inline `color:#ccc` /
   `color:#fff` in modals-ui.js, which beats every stylesheet rule - so they sat
   outside all the theming work and stayed dim no matter what the panel did.
   Moved to a class so they follow the theme like everything else. */
#modalBox .modalBodyText,
#modalBox .modalBodyText *{
  color: #ffffff !important;
  text-shadow: 1px 1px 0 #1a1610 !important;
  font-size: 10px !important;
}
#modalBox .modalBodyText b{ color: var(--rs2-yellow) !important; }
/* Strengthened outline on the headline body line: uibg.jpg is user-supplied, so
   a single-offset shadow can vanish against a mid-tone tile. */
#modalText{
  text-shadow: 1px 1px 0 #1a1610, -1px 1px 0 #1a1610,
               1px -1px 0 #1a1610, -1px -1px 0 #1a1610 !important;
}