/* 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. */
  #waveTimerDisplay {
    position: absolute;
    top: 165px; left: 4px;
    color: #ffffff;
    pointer-events: none;
    z-index: 1000;
    display: none;
  }
  /* FPS READOUT. A sibling of #waveTimerDisplay, not a child - it used to be
     nested inside it and shared its display:none, so the fps counter vanished
     the instant a wave started (waveTimerDisplay only shows *between* waves).
     Positioned independently so it stays visible the whole time, in the same
     spot it always sat (just under where the countdown text appears). */
  #fpsDisplay {
    position: absolute;
    top: 189px; left: 4px;
    color: #ffffff;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.95;
    line-height: 1.4;
  }
  /* Next-wave line and fps line share this rule so they can never drift apart
     in size/font/weight - change one, both change. */
  #waveTimerText, #fpsDisplay {
    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; }

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

  .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; }
#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; }
.login-slideshow img:nth-child(4) { animation-delay: 15s; }

/* 20-second dissolve loop timeline with a 2.5-second transition */
@keyframes rscDissolveLonger {
  0% {
    opacity: 0;
  }
  /* 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) */
  25% {
    opacity: 1;
  }
  /* Spends 2.5 seconds fading back out (ends at 37.5%) */
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* ============================================================
   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; }
.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; }