/* =============================================
Alynore — OSRS-inspired, iPad-first
============================================= */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/google/Cinzel-400.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/google/Cinzel-500.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/google/Cinzel-600.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/google/Cinzel-700.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/google/Cinzel-800.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/google/Cinzel-900.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/google/Nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/google/Nunito-500.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/google/Nunito-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/google/Nunito-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/google/Nunito-800.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/google/Rubik-400.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/google/Rubik-500.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/google/Rubik-600.woff2') format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/google/Rubik-700.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/google/Lexend-400.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/google/Lexend-500.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/google/Lexend-600.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/google/Lexend-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/google/Outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/google/Outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/google/Outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/google/Outfit-700.woff2') format('woff2'); }
@font-face {
font-family: 'RS Plain';
src: url('../fonts/RuneScape-Plain-12.ttf') format('truetype');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: 'RS Bold';
src: url('../fonts/RuneScape-Bold-12.ttf') format('truetype');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: 'RS Quill';
src: url('../fonts/RuneScape-Quill-8.ttf') format('truetype');
font-weight: normal;
font-display: swap;
}
*, *::before, *::after {
margin: 0; padding: 0; box-sizing: border-box;
user-select: none; -webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/* Prevent Android "share image" long-press menu */
img { pointer-events: none; }
img.settings-vol-icon { pointer-events: auto; }
:root {
/* Layer scale (UX-12) — the ONLY z-indexes top-level surfaces may use.
panel < bank window < modal (+2 per stacked) < confirm < takeover < menu < tooltip < drag < system */
--z-panel: 100;
--z-window: 150;
--z-modal: 200;
--z-confirm: 300;
--z-takeover: 400;
--z-takeover2: 410;
--z-menu: 500;
--z-tooltip: 600;
--z-drag: 700;
--z-system: 800;
--frame: #494034;
--frame-hi: #6B5D4F;
--frame-lo: #2A2118;
--panel-bg: #3E3529;
--dark-bg: #252017;
--darkest: #1A1610;
--gold: #FFD700;
--gold-dim: #B8860B;
--green: #00FF00;
--red: #FF3333;
--white: #F5F0E0;
--muted: #9B8B6B;
--chat-bg: #111A10;
--cell-bg: #2b271f;
--cell-hover: #3b3226;
--cell-active: #4a4035;
}
html, body { height: 100%; overflow: hidden; }
body {
background: #0E0C08;
color: var(--white);
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
}
.gold { color: var(--gold); }
.bank-item-count { color: var(--muted); font-size: 0.85em; font-weight: normal; }
/* === ICONS (OSRS wiki sprites) === */
.icon {
display: inline-block;
object-fit: contain;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
vertical-align: middle;
}
/* Custom hi-res icons need smooth downscaling, not nearest-neighbor.
Blanket override — pixelated only helps when upscaling pixel art;
all our custom icons are 1024px+ downscaled to 14-48px display. */
body.rebrand img {
image-rendering: auto;
}
.icon-skill { width: 30px; height: 30px; }
.icon-method { width: 32px; height: 32px; image-rendering: pixelated; }
.icon-detail { width: 100%; height: 100%; object-fit: contain; }
.icon-action { width: 48px; height: 48px; }
/* Canonical item-icon size — uniform across bank, shops, pickers, logs, marketplace.
Matches the equipment tab (.icon-raid-slot). The qty badge (.bi-qty) sits top-right,
size-independent, so it works at this size everywhere. */
.icon-bank { width: var(--iw-icon-tile); height: var(--iw-icon-tile); image-rendering: pixelated; }
.icon-shop { width: 28px; height: 28px; }
.icon-lu { width: 56px; height: 56px; image-rendering: pixelated; }
.icon-tab { width: 20px; height: 20px; }
.icon-equip { width: 30px; height: 30px; }
.icon-sm { width: 20px; height: 20px; }
.icon-xs { width: 14px; height: 14px; }
/* =============================================
RC PANEL TEMPLATE — sidebar panels
============================================= */
.rc-panel-wrap {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.rc-panel-head {
padding: 6px 8px;
font-size: 12px;
font-weight: 700;
color: var(--gold);
background: linear-gradient(180deg, #3E3529, #2A2118);
border-bottom: 1px solid #000;
text-shadow: 1px 1px 0 #000;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.rc-panel-head-info {
font-size: 10px;
color: var(--muted);
font-weight: 400;
}
.rc-panel-head-right {
display: flex;
align-items: center;
gap: 6px;
}
.rc-panel-tabs {
display: flex;
gap: 0;
background: linear-gradient(180deg, #3E3529, #2A2118);
border-bottom: 1px solid #000;
padding: 2px 4px;
flex-shrink: 0;
}
.rc-panel-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 3px 2px;
background: linear-gradient(180deg, #4a3c2a, #362a1c);
border: 1px solid #1a1510;
border-radius: 3px 3px 0 0;
color: var(--muted);
font-size: 11px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
opacity: 0.6;
text-shadow: 1px 1px 0 #000;
transition: opacity 0.15s, background 0.15s;
}
.rc-panel-tab:hover {
opacity: 0.85;
background: linear-gradient(180deg, #5a4c38, #4a3c2a);
color: var(--white);
}
.rc-panel-tab.active {
opacity: 1;
color: var(--gold);
background: linear-gradient(180deg, #5c4a30, #483820);
border-bottom-color: #483820;
box-shadow: inset 0 1px 0 rgba(255,215,0,0.15);
}
.rc-panel-tab.empty { opacity: 0.3; }
.rc-panel-tab.empty:hover { opacity: 0.5; }
.rc-panel-search {
padding: 4px 6px;
background: linear-gradient(180deg, #3E3529, #2A2118);
border-bottom: 1px solid #000;
flex-shrink: 0;
}
.rc-panel-search input {
width: 100%;
box-sizing: border-box;
padding: 3px 6px;
font-family: 'RS Plain', serif;
font-size: 14px;
color: var(--white);
background: #1a1610;
border: 1px solid #0d0b08;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
outline: none;
}
.rc-panel-search input::placeholder { color: var(--muted); }
.rc-panel-search input:focus {
border-color: var(--gold);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 3px rgba(255,215,0,0.2);
}
.rc-panel-body {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* When panel body contains a scrollable child (e.g. bank-grid), use flex layout */
[data-panel="bank"] > .rc-panel-body {
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image);
background-size: auto, auto, cover;
background-position: center, center, center;
background-repeat: repeat, no-repeat, no-repeat;
}
.rc-panel-foot {
padding: 6px 8px;
background: linear-gradient(180deg, #2A2118, #1E1912);
border-top: 1px solid #000;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
flex-shrink: 0;
}
/* =============================================
RC MODAL TEMPLATE — overlay modals
============================================= */
.rc-overlay {
position: absolute;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
animation: panel-fade 0.2s ease-out;
}
.rc-modal {
background: #5d5549;
background-image:
linear-gradient(180deg, #706358 0%, #5d5549 8%, #524940 92%, #3d3630 100%);
border: 2px solid #000;
box-shadow:
inset 1px 1px 0 #8B7D6B,
inset -1px -1px 0 #2A2420,
0 6px 24px rgba(0,0,0,0.7);
padding: 5px;
min-width: 270px;
max-width: 90%;
width: 420px;
animation: panel-slide 0.25s ease-out;
}
.rc-modal-inner {
background: #3a342c;
background-image:
linear-gradient(180deg, #332e27 0%, #3a342c 15%, #3a342c 85%, #2e2922 100%);
border: 1px solid #1a1610;
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.4),
0 1px 0 #6B6256;
}
.rc-modal-head {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 9px 14px 8px;
background: linear-gradient(180deg, #4a4238 0%, #3d3630 100%);
border-bottom: 1px solid #2A2420;
}
.rc-modal-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.8px;
}
.rc-modal-head-left {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 6px;
}
.rc-modal-head-right {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--gold);
}
.rc-modal-close {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #999;
font-size: 14px;
font-weight: 700;
cursor: pointer;
line-height: 1;
font-family: 'RS Bold', serif;
text-shadow: 1px 1px 0 #000;
}
.rc-modal-close:hover { color: #fff; }
.rc-modal-body {
overflow-y: auto;
max-height: 70vh;
}
/* =============================================
GLOBAL CONFIRM DIALOG — showConfirm() output
Universal confirmation primitive for the whole game. Never use
window.confirm() in player-facing flows; use showConfirm() instead.
Lives above other modals (zIndex: 200) and styled to match the
stone+brass+ember language.
============================================= */
#confirm-overlay {
z-index: var(--z-confirm);
}
#confirm-overlay .rc-modal {
width: 380px;
max-width: 90%;
}
.confirm-body {
padding: 18px 22px 18px !important;
max-height: none !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 152, 31, 0.06) 0%, transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
}
.confirm-icon {
position: relative;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, #1a140d 0%, #0a0805 80%);
border: 1px solid #0a0805;
box-shadow:
inset 0 0 14px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(0, 0, 0, 0.6),
0 0 0 1px #4a3e2e,
0 0 0 2px #1a140d,
0 2px 6px rgba(0, 0, 0, 0.5);
}
.confirm-icon img {
max-width: 46px;
max-height: 46px;
image-rendering: pixelated;
filter:
drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
drop-shadow(0 0 8px rgba(255, 152, 31, 0.3));
}
.confirm-message {
font-family: 'RS Plain', serif;
font-size: 13px;
line-height: 1.45;
color: #e8dcc8;
text-shadow: 1px 1px 0 #000;
max-width: 100%;
letter-spacing: 0.2px;
}
.confirm-message strong {
color: #FFB75A;
font-weight: 700;
text-shadow: 1px 1px 0 #000, 0 0 4px rgba(255, 152, 31, 0.35);
}
.confirm-actions {
display: flex;
gap: 14px;
margin-top: 4px;
width: 100%;
}
.confirm-btn {
flex: 1;
min-width: 0;
padding: 9px 12px;
font-family: 'Cinzel', 'RS Bold', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
cursor: pointer;
border: 1px solid #000;
border-radius: 2px;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
outline: none;
}
.confirm-btn:focus { outline: none; }
.confirm-btn:active { transform: translateY(1px); }
.confirm-btn-cancel {
color: #a89a86;
background: linear-gradient(180deg, #3a342c 0%, #2a241c 100%);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
box-shadow:
inset 1px 1px 0 rgba(255, 230, 180, 0.06),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 2px 4px rgba(0, 0, 0, 0.45);
}
.confirm-btn-cancel:hover {
color: #d4c8b4;
background: linear-gradient(180deg, #4a4238 0%, #3a3128 100%);
box-shadow:
inset 1px 1px 0 rgba(255, 230, 180, 0.1),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 3px 6px rgba(0, 0, 0, 0.55);
}
.confirm-btn-ok {
color: #fff1c4;
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 200, 100, 0.22), transparent 75%),
linear-gradient(180deg, #5a3a1f 0%, #3a2410 100%);
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.85),
0 0 4px rgba(255, 152, 31, 0.45);
box-shadow:
inset 1px 1px 0 rgba(255, 220, 160, 0.28),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 2px 6px rgba(0, 0, 0, 0.6),
0 0 10px rgba(255, 152, 31, 0.25);
}
.confirm-btn-ok:hover {
color: #fff7d8;
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 200, 100, 0.32), transparent 75%),
linear-gradient(180deg, #6a4525 0%, #4a2c14 100%);
box-shadow:
inset 1px 1px 0 rgba(255, 220, 160, 0.4),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 3px 10px rgba(0, 0, 0, 0.65),
0 0 16px rgba(255, 152, 31, 0.5);
}
/* Danger variant for destructive confirmations (delete, abandon, etc.) */
.confirm-btn-danger {
color: #ffd6d6;
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 100, 100, 0.22), transparent 75%),
linear-gradient(180deg, #5a1f1f 0%, #341010 100%);
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.85),
0 0 4px rgba(255, 80, 80, 0.45);
box-shadow:
inset 1px 1px 0 rgba(255, 180, 180, 0.25),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 2px 6px rgba(0, 0, 0, 0.6),
0 0 10px rgba(255, 70, 70, 0.25);
}
.confirm-btn-danger:hover {
color: #ffe8e8;
background:
radial-gradient(ellipse at 50% 30%, rgba(255, 100, 100, 0.32), transparent 75%),
linear-gradient(180deg, #6a2525 0%, #421414 100%);
box-shadow:
inset 1px 1px 0 rgba(255, 180, 180, 0.4),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 3px 10px rgba(0, 0, 0, 0.65),
0 0 16px rgba(255, 70, 70, 0.5);
}
@media (max-width: 480px) {
#confirm-overlay .rc-modal { width: 92%; }
.confirm-body { padding: 16px 16px 16px !important; gap: 12px; }
.confirm-icon { width: 54px; height: 54px; }
.confirm-icon img { max-width: 40px; max-height: 40px; }
.confirm-message { font-size: 12px; }
.confirm-btn { font-size: 10px; padding: 8px 10px; letter-spacing: 1.4px; }
}
/* RC Mobile overrides */
@media (max-width: 768px) {
.rc-overlay {
position: fixed;
align-items: center;
padding: env(safe-area-inset-top, 8px) 0 env(safe-area-inset-bottom, 8px);
}
.rc-modal {
width: 96%;
max-width: 96%;
border-radius: 6px;
max-height: 85vh;
max-height: 85dvh;
display: flex;
flex-direction: column;
}
.rc-modal-inner {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.rc-modal-body {
flex: 1;
min-height: 0;
max-height: none;
}
.rc-modal-close {
width: 32px;
height: 32px;
font-size: 18px;
}
}
/* RC Rebrand overrides */
body.rebrand .rc-panel-head {
background: linear-gradient(180deg, #302220, #221814);
border-bottom-color: #100C08;
}
body.rebrand .rc-panel-tabs {
background: linear-gradient(180deg, #302220, #221814);
border-bottom-color: #100C08;
}
body.rebrand .rc-panel-tab {
background: linear-gradient(180deg, #3C2A22, #2E1E18);
border-color: #18100E;
}
body.rebrand .rc-panel-tab:hover {
background: linear-gradient(180deg, #4A3428, #3C2A22);
}
body.rebrand .rc-panel-tab.active {
background: linear-gradient(180deg, #503C30, #442E24);
border-bottom-color: #442E24;
box-shadow: inset 0 1px 0 rgba(212,133,74,0.15);
}
body.rebrand .rc-panel-search {
background: linear-gradient(180deg, #302220, #221814);
border-bottom-color: #100C08;
}
body.rebrand .rc-panel-search input {
background: var(--darkest);
border-color: #100C08;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
body.rebrand .rc-panel-search input:focus {
border-color: var(--gold);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), 0 0 5px rgba(212,133,74,0.25);
}
body.rebrand .rc-panel-foot {
background: linear-gradient(180deg, #2A2018, #201812);
}
body.rebrand .rc-modal {
background: #442E24;
background-image: linear-gradient(180deg, #4A3428 0%, #442E24 8%, #3C2A22 92%, #302220 100%);
border-color: #100C08;
box-shadow:
inset 1px 1px 0 #5E4438,
inset -1px -1px 0 #1E1410,
0 6px 24px rgba(0,0,0,0.8);
}
body.rebrand .rc-modal-inner {
background: #302220;
background-image: linear-gradient(180deg, #362820 0%, #382A22 15%, #382A22 85%, #302220 100%);
border-color: #18100E;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 #5E4438;
}
body.rebrand .rc-modal-head {
background: linear-gradient(180deg, #3E302A, #302220);
border-bottom-color: #1E1410;
}
/* =============================================
GAME SHELL
============================================= */
.game {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
}
/* Secondary top bar — desktop hides it; mobile media query reveals it */
.topbar-secondary { display: none; }
/* =============================================
TOP BAR
============================================= */
.topbar {
position: relative;
z-index: 100;
background: linear-gradient(180deg, #5A4E40, #3E3529);
border-bottom: 2px solid #000;
box-shadow: inset 0 1px 0 var(--frame-hi);
display: flex;
align-items: center;
padding: 0 16px;
height: 48px;
gap: 12px;
}
.topbar-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex-shrink: 1;
}
.topbar-logo {
width: 32px;
height: 32px;
image-rendering: auto;
vertical-align: middle;
margin-right: 6px;
flex-shrink: 0;
}
.topbar-title {
font-size: 16px;
font-weight: 800;
color: var(--gold);
text-shadow: 1px 1px 0 #000, 0 0 10px rgba(255,215,0,0.3);
letter-spacing: 1px;
white-space: nowrap;
flex-shrink: 0;
}
.topbar-alpha {
font-size: 9px;
font-weight: 700;
color: #fff;
background: #c0392b;
padding: 1px 4px;
border-radius: 3px;
vertical-align: top;
letter-spacing: 0.5px;
text-shadow: none;
margin-left: 2px;
}
.topbar-online {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
}
.online-dot {
width: 6px;
height: 6px;
background: #2ecc40;
border-radius: 50%;
box-shadow: 0 0 4px rgba(46,204,64,0.5);
}
.server-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff3333;
box-shadow: 0 0 4px rgba(255,51,51,0.5);
}
.server-dot.connected {
background: #2ecc40;
box-shadow: 0 0 4px rgba(46,204,64,0.5);
}
/* Disconnect notice */
.disconnect-notice {
position: fixed;
top: 48px;
left: 12px;
z-index: var(--z-system);
display: flex;
align-items: center;
gap: 8px;
background: var(--panel-bg, #3b3027);
border: 1px solid var(--border, #5c483a);
border-radius: 6px;
padding: 8px 14px;
font-size: 12px;
color: var(--text, #e0d6c2);
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
pointer-events: none;
}
.disconnect-spinner {
width: 14px;
height: 14px;
border: 2px solid var(--border, #5c483a);
border-top-color: #ff981f;
border-radius: 50%;
flex-shrink: 0;
animation: dc-spin 0.8s linear infinite;
}
@keyframes dc-spin {
to { transform: rotate(360deg); }
}
/* Support pill — chrome-level contrast, no more yellow GIF shouting */
.topbar-support {
position: relative;
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
padding: 2px 9px;
font-family: 'RS Plain', serif;
font-size: 12px;
color: #8a7d5f;
text-decoration: none;
border: 1px solid rgba(176, 158, 116, 0.25);
border-radius: 10px;
opacity: 0.8;
transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.topbar-support:hover {
opacity: 1;
color: #e0d5b8;
border-color: rgba(224, 213, 184, 0.4);
}
.topbar-support-text { line-height: 1; }
@media (max-height: 500px) {
.topbar-support { padding: 1px 7px; font-size: 11px; }
}
.topbar-cloud-save {
cursor: pointer;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
color: var(--muted);
white-space: nowrap;
transition: background 0.15s, color 0.15s;
display: flex;
align-items: center;
}
.topbar-cloud-save:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.topbar-roadmap {
cursor: pointer;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
color: var(--muted);
white-space: nowrap;
transition: background 0.15s;
display: flex;
align-items: center;
gap: 4px;
}
.topbar-roadmap:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.topbar-roadmap.has-update::after {
content: '';
width: 8px;
height: 8px;
background: #e03030;
border-radius: 50%;
animation: update-pulse 1.5s ease-in-out infinite;
}
@keyframes update-pulse { 0%,100% { opacity:1 } 50% { opacity:0.3 } }
.pause-btn {
margin-left: auto;
cursor: pointer;
color: var(--muted);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.15s, color 0.15s;
}
.pause-btn:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.pause-btn.paused { background: rgba(255,152,31,0.25); color: #FF981F; }
.pause-btn.paused:hover { background: rgba(255,152,31,0.4); }
.topbar-stats {
display: flex;
gap: 10px;
margin-left: auto;
font-size: 13px;
color: var(--muted);
align-items: center;
flex-shrink: 0;
white-space: nowrap;
}
.topbar-settings-btn {
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--muted);
transition: background 0.15s, color 0.15s;
}
.topbar-settings-btn:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.topbar-settings-btn svg { width: 18px; height: 18px; }
.stat-val {
font-weight: 700;
color: var(--white);
}
.topbar-coin-icon {
width: 16px;
height: 16px;
image-rendering: pixelated;
vertical-align: middle;
margin-right: 2px;
}
/* Rolling topbar banner */
.topbar-rolling-banner {
display: flex;
align-items: center;
gap: 6px;
background: linear-gradient(180deg, rgba(192,57,43,0.25), rgba(192,57,43,0.15));
border: 1px solid rgba(192,57,43,0.4);
border-radius: 3px;
padding: 3px 8px 3px 10px;
animation: topbar-banner-in 0.4s ease-out;
max-width: 420px;
overflow: hidden;
}
.topbar-rolling-banner.topbar-rolling-hide {
animation: topbar-banner-out 0.3s ease-in forwards;
}
.topbar-rolling-link {
text-decoration: none;
display: block;
overflow: hidden;
}
.topbar-rolling-text {
display: block;
font-size: 11px;
color: #e8c9a0;
white-space: nowrap;
animation: topbar-scroll 12s linear infinite;
font-family: 'RS Plain', sans-serif;
}
.topbar-rolling-link:hover .topbar-rolling-text {
color: #FF981F;
}
.topbar-rolling-dismiss {
color: #888;
font-size: 13px;
cursor: pointer;
flex-shrink: 0;
line-height: 1;
}
.topbar-rolling-dismiss:hover { color: #fff; }
@keyframes topbar-banner-in {
from { opacity: 0; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes topbar-banner-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-100%); }
}
@keyframes topbar-scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/* Server migration overlay enhancements */
.server-migration-overlay .rc-modal {
animation: panel-slide 0.3s ease-out;
}
/* Settings server section */
.settings-server-section {
padding: 8px 0 4px;
}
/* =============================================
GAME BODY — left column + sidebar
============================================= */
.game-body {
flex: 1;
display: flex;
min-height: 0;
gap: 0;
background: #000;
}
body.rebrand .game-body { position: relative; }
/* =============================================
REBRAND LOAD-IN ANIMATIONS
============================================= */
body.rebrand .game {
animation: rebrand-game-load 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes rebrand-game-load {
0% {
opacity: 0;
transform: scale(0.98) translateY(20px);
filter: blur(10px);
}
50% {
filter: blur(0);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Top bar slides down */
body.rebrand .topbar {
animation: rebrand-slide-down 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
@keyframes rebrand-slide-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Sidebar slides in from right */
body.rebrand .sidebar {
animation: rebrand-slide-left 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}
@keyframes rebrand-slide-left {
0% {
opacity: 0;
transform: translateX(30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* RL bar slides in from left */
body.rebrand .rl-bar {
animation: rebrand-slide-right 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
}
@keyframes rebrand-slide-right {
0% {
opacity: 0;
transform: translateX(-30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Viewport emerges with warm glow */
body.rebrand .viewport {
animation: rebrand-viewport-emerge 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes rebrand-viewport-emerge {
0% {
opacity: 0;
transform: scale(0.95);
box-shadow: 0 0 0 rgba(212, 133, 74, 0);
}
50% {
box-shadow: 0 0 40px rgba(212, 133, 74, 0.3);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Chat slides up */
body.rebrand .chatbox {
animation: rebrand-slide-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}
@keyframes rebrand-slide-up {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Skill chips pop in with stagger */
body.rebrand #skill-grid .skill-chip {
animation: rebrand-chip-pop 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.rebrand #skill-grid .skill-chip:nth-child(1) { animation-delay: 0.5s; }
body.rebrand #skill-grid .skill-chip:nth-child(2) { animation-delay: 0.52s; }
body.rebrand #skill-grid .skill-chip:nth-child(3) { animation-delay: 0.54s; }
body.rebrand #skill-grid .skill-chip:nth-child(4) { animation-delay: 0.56s; }
body.rebrand #skill-grid .skill-chip:nth-child(5) { animation-delay: 0.58s; }
body.rebrand #skill-grid .skill-chip:nth-child(6) { animation-delay: 0.6s; }
body.rebrand #skill-grid .skill-chip:nth-child(7) { animation-delay: 0.62s; }
body.rebrand #skill-grid .skill-chip:nth-child(8) { animation-delay: 0.64s; }
body.rebrand #skill-grid .skill-chip:nth-child(9) { animation-delay: 0.66s; }
body.rebrand #skill-grid .skill-chip:nth-child(10) { animation-delay: 0.68s; }
body.rebrand #skill-grid .skill-chip:nth-child(11) { animation-delay: 0.7s; }
body.rebrand #skill-grid .skill-chip:nth-child(12) { animation-delay: 0.72s; }
body.rebrand #skill-grid .skill-chip:nth-child(13) { animation-delay: 0.74s; }
body.rebrand #skill-grid .skill-chip:nth-child(14) { animation-delay: 0.76s; }
body.rebrand #skill-grid .skill-chip:nth-child(15) { animation-delay: 0.78s; }
body.rebrand #skill-grid .skill-chip:nth-child(16) { animation-delay: 0.8s; }
body.rebrand #skill-grid .skill-chip:nth-child(17) { animation-delay: 0.82s; }
body.rebrand #skill-grid .skill-chip:nth-child(18) { animation-delay: 0.84s; }
body.rebrand #skill-grid .skill-chip:nth-child(19) { animation-delay: 0.86s; }
body.rebrand #skill-grid .skill-chip:nth-child(20) { animation-delay: 0.88s; }
body.rebrand #skill-grid .skill-chip:nth-child(21) { animation-delay: 0.9s; }
body.rebrand #skill-grid .skill-chip:nth-child(22) { animation-delay: 0.92s; }
body.rebrand #skill-grid .skill-chip:nth-child(23) { animation-delay: 0.94s; }
body.rebrand #skill-grid .skill-chip:nth-child(24) { animation-delay: 0.96s; }
@keyframes rebrand-chip-pop {
0% {
opacity: 0;
transform: scale(0.8) translateY(10px);
}
70% {
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* =============================================
ACTION BUTTON — Enhanced Visual Effects
============================================= */
/* Core glow - always visible */
body.rebrand #click-zone::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 133, 74, 0.5) 0%, transparent 60%);
opacity: 0.8;
animation: rebrand-core-pulse 2s ease-in-out infinite;
pointer-events: none;
z-index: -2;
}
@keyframes rebrand-core-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.1); opacity: 0.9; }
}
/* Expanding ring - fires on action completion */
body.rebrand #click-zone::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid rgba(255, 184, 77, 0.7);
box-shadow:
0 0 15px rgba(255, 184, 77, 0.5),
inset 0 0 10px rgba(255, 184, 77, 0.2);
pointer-events: none;
z-index: -1;
opacity: 0;
transform: scale(0.95);
}
body.rebrand #click-zone.ring-burst::after {
animation: rebrand-ring-rapid 0.6s linear forwards;
}
@keyframes rebrand-ring-rapid {
0% { transform: scale(0.95); opacity: 0.9; }
50% { opacity: 0.5; }
100% { transform: scale(1.2); opacity: 0; }
}
/* Outer slow ring */
body.rebrand #click-zone .action-outer-ring {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(212, 133, 74, 0.4);
box-shadow: 0 0 20px rgba(212, 133, 74, 0.2);
animation: rebrand-outer-ring 1.2s ease-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes rebrand-outer-ring {
0% { transform: scale(0.9); opacity: 0.6; }
70% { opacity: 0.2; }
100% { transform: scale(1.3); opacity: 0; }
}
/* Hover intensifies */
body.rebrand #click-zone:hover::before {
animation-duration: 1s;
opacity: 1;
background: radial-gradient(circle, rgba(255, 184, 77, 0.6) 0%, transparent 60%);
}
body.rebrand #click-zone:hover::after {
animation-duration: 0.4s;
border-color: rgba(255, 200, 100, 0.9);
box-shadow:
0 0 25px rgba(255, 184, 77, 0.7),
inset 0 0 15px rgba(255, 184, 77, 0.4);
}
/* Active/click state */
body.rebrand #click-zone:active {
transform: scale(0.96);
}
/* Progress bar glow */
body.rebrand .action-progress-fill {
box-shadow: 0 0 8px rgba(212, 133, 74, 0.6);
position: relative;
}
/* Progress shine */
body.rebrand .action-progress-fill::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
animation: rebrand-shine 1.5s ease-in-out infinite;
}
@keyframes rebrand-shine {
0% { transform: translateX(-40px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(40px); opacity: 0; }
}
.left-col {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
z-index: 1;
}
/* =============================================
VIEWPORT (main game window)
============================================= */
.viewport {
flex: 1;
background: url('../img/viewport-background-texture.png') center/cover no-repeat #1a1610;
border: 2px solid #000;
box-shadow: inset 0 0 80px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-width: 0;
padding: 16px;
}
.viewport.bg-dungeon {
background: url('../img/background.png') center/cover no-repeat #1a1610;
}
.viewport.bg-castle {
background: url('../img/castle.png') center/cover no-repeat #1a1610;
}
.viewport.bg-lava_castle {
background: url('../img/lava_castle.png') center/cover no-repeat #1a1610;
}
.viewport.bg-valley {
background: url('../img/valley.png') center/cover no-repeat #1a1610;
}
.viewport.bg-village {
background: url('../img/village.png') center/cover no-repeat #1a1610;
}
.viewport.bg-forest_cave {
background: url('../img/forest_cave.png') center/cover no-repeat #1a1610;
}
.viewport.bg-forest_waterfall {
background: url('../img/forest_waterfall.png') center/cover no-repeat #1a1610;
}
.viewport.bg-harbor {
background: url('../img/harbor.png') center/cover no-repeat #1a1610;
}
.viewport.bg-fishing {
background: url('../img/fishing.png') center/cover no-repeat #1a1610;
}
.viewport.bg-smithy {
background: url('../img/smithy.png') center/cover no-repeat #1a1610;
}
.viewport.bg-marketplace {
background: url('../img/marketplace.png') center/cover no-repeat #1a1610;
}
.viewport.bg-crystal_gate {
background: url('../img/crystal_gate.png') center/cover no-repeat #1a1610;
}
.viewport.bg-login {
background: url('../banner.png') center/cover no-repeat #0E0C08;
}
.viewport.bg-farmstead {
background: url('../img/farmstead.jpg') center/cover no-repeat #1a1610;
}
.viewport.bg-theatre {
background: url('../img/theatre.png') center/cover no-repeat #0a0202;
}
.viewport.bg-arena {
background: url('../img/arena.webp') center/cover no-repeat #1a1610;
}
.viewport.bg-bell-warden {
background: url('../img/bell-warden.webp') center/cover no-repeat #1a1208;
}
.action-icon.bell-warden-boss .icon-action,
body.rebrand .action-icon.bell-warden-boss .icon-action {
width: 280px !important;
height: 280px !important;
}
@media (max-width: 768px) {
.action-icon.bell-warden-boss .icon-action,
body.rebrand .action-icon.bell-warden-boss .icon-action {
width: 50vw !important;
height: 50vw !important;
}
}
.vp-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: auto 0;
}
.action-status {
position: absolute;
top: 10px;
left: 12px;
font-size: 12px;
font-weight: 700;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
letter-spacing: 0.5px;
}
.action-status.idle { color: var(--muted); }
.make-x-badge {
position: absolute;
top: 26px;
left: 12px;
font-size: 10px;
font-weight: 700;
color: #c9a24a;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
letter-spacing: 0.5px;
}
.action-status.training {
color: var(--green);
animation: pulse 2.5s infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.action-icon-wrap {
position: relative;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,215,0,0.04) 0%, transparent 70%),
rgba(30, 25, 20, 0.15);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: 3px solid var(--frame);
box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 50px rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
cursor: pointer;
transition: transform 0.08s;
}
/* Runic charge ring canvas — dynamically sized via JS */
.orb-canvas {
position: absolute;
pointer-events: none;
z-index: 10;
}
.action-icon-wrap:active {
transform: scale(0.93);
border-color: var(--gold);
box-shadow: 0 0 25px rgba(255,215,0,0.15), inset 0 0 15px rgba(0,0,0,0.4);
}
.action-icon-wrap.clog-complete {
border-color: #00ff00;
box-shadow: 0 0 15px rgba(255,215,0,0.4), 0 0 30px rgba(255,215,0,0.2), inset 0 0 50px rgba(0,0,0,0.5);
}
.action-icon-wrap.hit-flash {
animation: hitFlash 0.15s ease-out;
}
@keyframes hitFlash {
0% { filter: brightness(1.6); transform: scale(0.94); }
40% { filter: brightness(1.2); transform: scale(1.03); }
100% { filter: brightness(1); transform: scale(1); }
}
.action-icon { font-size: 40px; }
.action-icon .icon-action { width: 128px; height: 128px; }
.action-icon.monster .icon-action { width: 200px; height: 200px; }
.cow-easter-egg {
position: absolute;
width: 7%;
height: auto;
bottom: 28%;
left: 30%;
image-rendering: pixelated;
z-index: 5;
cursor: pointer;
opacity: 0.85;
pointer-events: auto;
}
.farmer-easter-egg {
position: absolute;
width: 6%;
height: auto;
bottom: 42%;
left: 44%;
image-rendering: pixelated;
z-index: 5;
cursor: pointer;
opacity: 0.55;
pointer-events: auto;
filter: brightness(0.8) saturate(0.7);
}
.partyhat-overlay {
position: absolute;
top: -28px;
left: 23%;
transform: translateX(-60%) rotate(-28deg);
width: 72px;
height: 72px;
image-rendering: pixelated;
z-index: 10;
cursor: pointer;
pointer-events: auto;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6))
drop-shadow(0 0 8px rgba(85, 205, 252, 0.4));
animation: partyhatShimmer 3s ease-in-out infinite;
}
@keyframes partyhatShimmer {
0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(85, 205, 252, 0.35)); }
50% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(85, 205, 252, 0.7)); }
}
.partyhat-overlay-right {
left: auto;
right: 23%;
transform: translateX(60%) rotate(28deg);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6))
drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
animation: partyhatShimmerGold 3s ease-in-out infinite;
}
@keyframes partyhatShimmerGold {
0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.35)); }
50% { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(255, 215, 0, 0.7)); }
}
/* =============================================
LOOTING BAG — Viewport icon + loot window
============================================= */
.looting-bag-overlay {
position: absolute;
bottom: -16px;
right: -20px;
width: 52px;
height: 52px;
cursor: pointer;
pointer-events: auto;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(100,85,65,0.25) 0%, transparent 60%),
linear-gradient(145deg, #2e2820 0%, #1e1a14 50%, #161210 100%);
border: 2px solid #4a3e30;
box-shadow:
0 0 0 1px rgba(0,0,0,0.9),
0 3px 10px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(180,150,100,0.1),
inset 0 -1px 0 rgba(0,0,0,0.3);
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.2s ease;
}
.looting-bag-overlay:hover {
transform: scale(1.1) translateY(-2px);
border-color: #6a5a44;
box-shadow:
0 0 0 1px rgba(0,0,0,0.9),
0 6px 16px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(180,150,100,0.15),
inset 0 -1px 0 rgba(0,0,0,0.3);
}
.looting-bag-overlay:active {
transform: scale(0.95);
transition-duration: 0.05s;
}
.looting-bag-overlay .lbag-icon {
width: 34px;
height: 34px;
image-rendering: pixelated;
display: block;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
/* Unique drop glow state — fast breathing pulse */
.looting-bag-overlay.has-unique {
border-color: #c8a045;
animation: lbag-breathe 1.6s ease-in-out infinite;
}
.looting-bag-overlay.has-unique::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200,160,69,0.35) 0%, rgba(200,160,69,0) 70%);
animation: lbag-aura 1.6s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes lbag-breathe {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 0 1px rgba(0,0,0,0.9),
0 0 8px rgba(200,160,69,0.4),
0 0 20px rgba(200,160,69,0.15),
inset 0 1px 0 rgba(255,200,100,0.12);
border-color: #b89040;
}
50% {
transform: scale(1.08);
box-shadow:
0 0 0 1px rgba(0,0,0,0.9),
0 0 16px rgba(200,160,69,0.7),
0 0 32px rgba(200,160,69,0.3),
0 0 48px rgba(200,160,69,0.1),
inset 0 1px 0 rgba(255,200,100,0.2);
border-color: #d4aa50;
}
}
@keyframes lbag-aura {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
/* Loot window modal content */
.lbag-gold-row {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px 6px;
border-bottom: 1px solid rgba(90,72,48,0.35);
font-size: 13px;
color: #f0d060;
font-weight: 600;
text-shadow: 1px 1px 0 #000;
}
.lbag-gold-row img {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.lbag-item-grid {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 10px 10px;
min-height: 54px;
max-height: 260px;
overflow-y: auto;
}
.lbag-item {
position: relative;
width: 44px;
height: 44px;
background: rgba(30,26,20,0.5);
border: 1px solid #2e2820;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
transition: border-color 0.15s, box-shadow 0.15s;
}
.lbag-item:hover {
border-color: #4a3e30;
background: rgba(40,34,26,0.6);
}
.lbag-item img.icon {
width: 32px;
height: 32px;
image-rendering: pixelated;
}
.lbag-item-qty {
position: absolute;
bottom: 1px;
right: 2px;
font-size: 9px;
font-weight: 700;
color: #ffff00;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
pointer-events: none;
line-height: 1;
}
.lbag-item-qty.qty-white { color: #ffffff; }
.lbag-item-qty.qty-green { color: #00ff80; }
.lbag-item-unique {
border-color: #9a7a30;
box-shadow:
0 0 6px rgba(200,160,69,0.35),
inset 0 0 6px rgba(200,160,69,0.08);
background: rgba(40,30,15,0.7);
}
.lbag-item-unique:hover {
border-color: #c8a045;
box-shadow:
0 0 10px rgba(200,160,69,0.5),
inset 0 0 8px rgba(200,160,69,0.12);
}
.lbag-modal-footer {
display: flex;
gap: 8px;
padding: 8px 10px 10px;
border-top: 1px solid rgba(90,72,48,0.35);
}
.lbag-modal-footer .osrs-btn {
flex: 1;
text-align: center;
}
.action-progress {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.3);
overflow: hidden;
z-index: 10;
}
.action-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #00AA00, #55DD55);
transition: width 0.1s linear;
box-shadow: 0 0 4px rgba(0,255,0,0.3);
}
.action-info { text-align: center; }
.action-skill-name {
font-size: 18px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.action-method-name {
font-size: 14px;
color: var(--white);
margin-top: 2px;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
.action-xp {
font-size: 13px;
color: var(--green);
margin-top: 4px;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.action-cost {
font-size: 12px;
margin-top: 4px;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.res-ok { color: var(--green); }
.res-no { color: var(--red); }
.weapon-display {
font-size: 12px;
color: var(--muted);
margin-top: 6px;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
position: relative;
}
.weapon-display img {
width: 16px;
height: 16px;
image-rendering: pixelated;
vertical-align: middle;
}
.weapon-display .weapon-name {
vertical-align: middle;
}
.weapon-ammo-row {
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
cursor: default;
}
.weapon-ammo-row img {
width: 14px;
height: 14px;
}
.weapon-ammo-timer {
font-size: 10px;
color: #cc8800;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
line-height: 1;
}
.weapon-ammo-tip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #3b3024;
border: 1px solid #5a4a3a;
border-radius: 4px;
padding: 6px 10px;
z-index: 100;
white-space: nowrap;
font-size: 11px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
pointer-events: none;
}
.weapon-ammo-tip-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
}
.weapon-ammo-tip-row img {
width: 14px;
height: 14px;
image-rendering: pixelated;
}
.weapon-ammo-tip-row .tip-qty {
color: #cc8800;
margin-left: auto;
}
.weapon-ammo-tip-row .tip-rate {
color: var(--green);
font-size: 10px;
}
/* XP bar */
.xp-bar-wrap {
width: 100%;
max-width: 300px;
margin-top: 4px;
}
.xp-bar-label {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
margin-bottom: 3px;
}
.xp-bar {
height: 10px;
background: #111;
border: 2px solid var(--frame-lo);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 1px 0 var(--frame-hi);
overflow: hidden;
}
.xp-bar-fill {
height: 100%;
background: linear-gradient(180deg, #55DD55, #00AA00, #008800);
transition: width 0.3s;
}
/* Viewport shop/hub button — right of HP bar */
.shop-orbs {
position: absolute;
bottom: 12px;
left: calc(50% + 138px);
z-index: 10;
display: flex;
flex-direction: column;
gap: 6px;
}
.shop-hub-btn {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
background: var(--cell-bg);
border: 3px solid #494034;
border-top-color: #6B5D4F;
border-left-color: #5A4E40;
border-right-color: #3E3529;
border-bottom-color: #2A2118;
box-shadow:
0 0 0 1px #000,
inset 0 0 6px rgba(0,0,0,0.5),
0 2px 6px rgba(0,0,0,0.6);
padding: 6px 14px 6px 10px;
border-radius: 6px;
opacity: 0.9;
transition: opacity 0.15s, background 0.15s;
}
.shop-hub-btn:hover { opacity: 1; background: var(--cell-hover); }
.shop-hub-btn img {
width: 24px;
height: 24px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.shop-hub-btn span {
font-size: 13px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.5px;
}
/* shop-hub structural removed — now uses rc-modal */
/* Shared panel animations — used by all modals/overlays */
@keyframes panel-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes panel-slide {
from { transform: translateY(10px) scale(0.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.shop-hub-gold {
position: absolute;
left: 10px;
font-family: 'RS Plain', serif;
font-size: 11px;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.shop-hub-coin-ico {
width: 14px;
height: 14px;
image-rendering: pixelated;
vertical-align: middle;
margin-right: 4px;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.shop-hub-coin-amt {
font-family: 'RS Bold', 'RS Plain', serif;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.4px;
}
/* Directory wallet — every shop currency at a glance (UX-15) */
.shop-wallet {
display: flex;
align-items: center;
gap: 10px;
}
.shop-wallet-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.3px;
cursor: default;
}
.shop-wallet-chip img {
width: 14px;
height: 14px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.shop-combined-iron-note {
margin: 2px 0 6px;
padding: 6px 10px;
font-family: 'RS Plain', serif;
font-size: 12px;
color: #c9b898;
background: rgba(107, 32, 32, 0.14);
border: 1px solid rgba(176, 90, 90, 0.25);
border-radius: 4px;
}
/* The shop hub overlay anchors to the .viewport on desktop so the modal
sits centered inside the play area (not over the sidebars / chat). The
modal sizes itself to almost-fill the viewport bounds so all directory
tiles fit without scrolling. */
#shop-hub-overlay {
/* When parented to .viewport, inset:0 already covers it exactly. */
}
#shop-hub-overlay .rc-modal {
width: 96%;
height: 95%;
max-width: none;
max-height: none;
aspect-ratio: auto;
display: flex;
flex-direction: column;
}
#shop-hub-overlay .rc-modal-inner {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
#shop-hub-overlay .rc-modal-body {
flex: 1;
min-height: 0;
max-height: none;
}
@media (max-width: 768px) {
#shop-hub-overlay .rc-modal {
width: 96%;
height: auto;
max-height: 85vh;
}
}
/* Directory body — default rules used by the inline (mobile sidebar)
render. The desktop modal overrides these below to flex-fill / no-scroll. */
.shop-hub-body {
padding: 14px 16px 16px;
overflow-y: auto;
/* very faint vignette so the grid feels like it sits on stone */
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 152, 31, 0.05) 0%, transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.35) 0%, transparent 60%);
}
/* Desktop modal: lay out section blocks as flex children that share the
body height equally, with NO vertical scroll. Tiles flex-fill their
grid cells rather than using a fixed aspect ratio. */
@media (min-width: 769px) {
#shop-hub-overlay .shop-hub-body {
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
#shop-hub-overlay .shop-hub-grid {
flex: 1;
min-height: 0;
margin-bottom: 0;
}
#shop-hub-overlay .shop-hub-item {
aspect-ratio: auto;
}
}
/* Section header — carved band with thin gilt rule on either side */
.shop-hub-section-label {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 12px;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 11px;
color: #c2a875;
text-shadow: 1px 1px 0 #000;
text-transform: uppercase;
letter-spacing: 3.2px;
padding: 4px 0 2px;
}
.shop-hub-section-label:first-child { padding-top: 0; }
.shop-hub-section-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(194, 168, 117, 0.45), transparent);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.shop-hub-section-text {
white-space: nowrap;
padding: 0 4px;
}
/* Multi-column grid of mini "windows". Each grid is a flex child of
.shop-hub-body and flex:1's to share the body height equally with the
other section grids — so all 10 tiles always fit without scrolling. */
.shop-hub-grid {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 0;
}
/* Mini-window tile. Default 16:9 aspect ratio used by inline (mobile
sidebar) renders; desktop modal overrides this to `auto` so tiles
stretch to fill the body's flex-distributed row heights. */
.shop-hub-item {
position: relative;
aspect-ratio: 16 / 9;
min-height: 0;
display: flex;
flex-direction: column;
cursor: pointer;
overflow: hidden;
background: #5d5549;
background-image: linear-gradient(180deg, #706358 0%, #5d5549 8%, #524940 92%, #3d3630 100%);
border: 1px solid #000;
box-shadow:
inset 1px 1px 0 rgba(255, 230, 180, 0.08),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 3px 6px rgba(0, 0, 0, 0.45);
padding: 3px;
transition: box-shadow 0.18s, transform 0.18s, filter 0.18s;
}
.shop-hub-item:hover {
box-shadow:
inset 1px 1px 0 rgba(255, 230, 180, 0.14),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 6px 14px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 152, 31, 0.45),
0 0 14px rgba(255, 152, 31, 0.22);
transform: translateY(-2px);
}
.shop-hub-item:active { transform: translateY(0); }
/* Faux title bar — mimics rc-modal-head */
.shop-hub-tile-head {
position: relative;
padding: 5px 10px;
background: linear-gradient(180deg, #4a4238 0%, #3d3630 100%);
border-bottom: 1px solid #2A2420;
text-align: center;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
}
.shop-hub-tile-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.shop-hub-item:hover .shop-hub-tile-title { color: #FFB75A; }
/* Mini viewport — the body holds the big icon and a small footer line */
.shop-hub-tile-body {
position: relative;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
background:
radial-gradient(ellipse at 50% 30%, #2a241c 0%, #14110c 80%);
border: 1px solid #1a1610;
box-shadow:
inset 0 0 18px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 220, 160, 0.04);
padding: 6px 8px 6px;
overflow: hidden;
}
.shop-hub-tile-icon {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.shop-hub-tile-icon img {
max-height: 100%;
max-width: 70%;
object-fit: contain;
image-rendering: pixelated;
filter:
drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
drop-shadow(0 0 8px rgba(255, 152, 31, 0.18));
transition: transform 0.2s, filter 0.2s;
}
.shop-hub-item:hover .shop-hub-tile-icon img {
transform: scale(1.06);
filter:
drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
drop-shadow(0 0 12px rgba(255, 152, 31, 0.55));
}
/* Footer strip inside the mini viewport — currency chip or lock reason */
.shop-hub-tile-foot {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 18px;
margin-top: 4px;
}
.shop-hub-tile-currency {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 9px;
color: #c2a875;
text-shadow: 1px 1px 0 #000;
text-transform: uppercase;
letter-spacing: 1.6px;
padding: 3px 9px;
background: linear-gradient(180deg, #3a3128 0%, #2a221b 100%);
border: 1px solid #1a140e;
box-shadow:
inset 1px 1px 0 rgba(255, 200, 120, 0.08),
inset -1px -1px 0 rgba(0, 0, 0, 0.55);
border-radius: 2px;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.shop-hub-item:hover .shop-hub-tile-currency {
color: #FFB75A;
background: linear-gradient(180deg, #4a3f30 0%, #34281e 100%);
box-shadow:
inset 1px 1px 0 rgba(255, 200, 120, 0.15),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 0 6px rgba(255, 152, 31, 0.25);
}
.shop-hub-tile-foot.locked-foot {
font-family: 'RS Plain', serif;
font-size: 10px;
font-style: italic;
color: #a05a5a;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.2px;
text-align: center;
padding: 0 4px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Red wax-seal pip in the corner of locked tile head */
.shop-hub-tile-pip {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #c83434 0%, #6d1a1a 70%, #2a0808 100%);
box-shadow:
inset 0 1px 0 rgba(255, 120, 120, 0.4),
0 0 4px rgba(170, 50, 50, 0.5),
0 0 0 1px rgba(0,0,0,0.7);
}
/* Shop view INSIDE the hub modal — keeps the same window size as the
directory. shop-modal-body styles already exist; this just relaxes the
max-height so it fills the wide modal nicely. */
.shop-hub-shop-body {
max-height: 75vh;
padding: 14px;
}
/* Back button (◀) lives in rc-modal-head-left and is reused from the
legacy shop modal. Tweak position for the wider hub head. */
.rc-modal-head-left .shop-modal-back {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #c2a875;
font-size: 13px;
text-shadow: 1px 1px 0 #000;
transition: color 0.15s, transform 0.15s;
}
.rc-modal-head-left .shop-modal-back:hover {
color: #FFB75A;
transform: translateX(-2px);
}
/* ===== LOCKED / SEALED TILE ===== */
.shop-hub-item.locked {
cursor: not-allowed;
filter: brightness(0.78);
}
.shop-hub-item.locked:hover {
transform: none;
filter: brightness(0.78);
box-shadow:
inset 1px 1px 0 rgba(255, 230, 180, 0.06),
inset -1px -1px 0 rgba(0, 0, 0, 0.55),
0 3px 6px rgba(0, 0, 0, 0.45);
}
.shop-hub-item.locked .shop-hub-tile-title,
.shop-hub-item.locked:hover .shop-hub-tile-title { color: #8a3e3e; }
.shop-hub-item.locked .shop-hub-tile-body {
background: radial-gradient(ellipse at 50% 30%, #1a1510 0%, #0a0805 80%);
}
/* Diagonal hatching over the locked tile's viewport — clearly reads as "sealed" */
.shop-hub-item.locked .shop-hub-tile-body::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
135deg,
rgba(0, 0, 0, 0.55) 0 3px,
rgba(0, 0, 0, 0) 3px 9px
);
pointer-events: none;
}
.shop-hub-item.locked .shop-hub-tile-icon img,
.shop-hub-item.locked:hover .shop-hub-tile-icon img {
transform: none;
filter: grayscale(1) brightness(0.45) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7));
}
/* Custom tooltip floating above a locked tile on hover (desktop) */
.shop-hub-item[data-shop-lock]:hover::after {
content: attr(data-shop-lock);
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
background: linear-gradient(180deg, #2a241c 0%, #1c1813 100%);
color: #f0d99a;
font-family: 'RS Plain', serif;
font-size: 11px;
padding: 6px 10px;
border: 1px solid #000;
box-shadow:
inset 1px 1px 0 rgba(255, 200, 100, 0.08),
inset -1px -1px 0 rgba(0, 0, 0, 0.5),
0 4px 10px rgba(0, 0, 0, 0.7);
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
z-index: 10;
pointer-events: none;
letter-spacing: 0.4px;
}
/* Mobile / narrow inline render: drop to 2 columns and tighten typography.
Tiles keep their 16:9 ratio so they shrink uniformly. */
@media (max-width: 720px) {
.shop-hub-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.shop-hub-body { padding: 12px; }
.shop-hub-tile-title { font-size: 11px; }
.shop-hub-tile-currency { font-size: 8px; letter-spacing: 1.2px; padding: 2px 7px; }
}
@media (max-width: 420px) {
.shop-hub-grid { grid-template-columns: 1fr; }
}
/* When rendered inline in the right-side rl-panel / mobile sidebar
(~280px wide), force 1 column. The 16:9 aspect ratio keeps tiles a
reasonable height even at narrow widths. */
.shop-hub-body-inline { padding: 10px; max-height: none; background: none; }
.shop-hub-body-inline .shop-hub-grid { grid-template-columns: 1fr; gap: 8px; }
.shop-hub-body-inline .shop-hub-section-label { padding: 10px 0 6px; letter-spacing: 2.6px; }
.shop-hub-body-inline .shop-hub-tile-title { font-size: 11px; }
/* Legacy orb style (keep for compatibility) */
.shop-orb {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--cell-bg);
border: 4px solid #494034;
border-top-color: #6B5D4F;
border-left-color: #5A4E40;
border-right-color: #3E3529;
border-bottom-color: #2A2118;
box-shadow:
0 0 0 1px #000,
inset 0 0 6px rgba(0,0,0,0.5),
0 2px 6px rgba(0,0,0,0.6);
opacity: 0.85;
transition: opacity 0.15s;
}
.shop-orb:hover { opacity: 1; }
.shop-orb img {
width: 28px;
height: 28px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
/* === EVENTS PANEL === */
.events-hub-btn {
position: absolute;
bottom: 8px;
left: 8px;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
background: var(--cell-bg);
border: 3px solid #494034;
border-top-color: #6B5D4F;
border-left-color: #5A4E40;
border-right-color: #3E3529;
border-bottom-color: #2A2118;
box-shadow: 0 0 0 1px #000, inset 0 0 6px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.6);
padding: 6px 14px 6px 10px;
border-radius: 6px;
opacity: 0.9;
transition: opacity 0.15s, background 0.15s;
}
.events-hub-btn:hover { opacity: 1; background: var(--cell-hover); }
.events-hub-btn img {
width: 24px;
height: 24px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.events-hub-btn span {
font-size: 13px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.5px;
}
.events-hub-btn img {
animation: events-egg-bob 2s ease-in-out infinite;
}
@keyframes events-egg-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
/* events structural removed — now uses rc-modal */
/* events-header kept as content class for inline events */
.events-header {
display: flex;
align-items: center;
gap: 10px;
}
.events-header-icon {
width: 20px;
height: 20px;
image-rendering: pixelated;
}
.events-header span {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.8px;
}
.events-close {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 14px;
color: #999;
text-shadow: 1px 1px 0 #000;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background: none;
border: none;
}
.events-close:hover { color: #fff; }
.events-content {
background: #3a342c;
background-image: linear-gradient(180deg, #332e27 0%, #3a342c 15%, #3a342c 85%, #2e2922 100%);
border: 1px solid #1a1610;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 0 #6B6256;
padding: 14px;
}
/* Events hub grid — list of events to click into */
.events-hub-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.events-hub-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
background: var(--cell-bg);
border: 2px solid var(--frame-lo);
border-top-color: #3E3529;
border-left-color: #3E3529;
border-right-color: #1a1610;
border-bottom-color: #1a1610;
transition: background 0.12s, border-color 0.12s;
}
.events-hub-item:hover {
background: var(--cell-hover);
border-color: var(--frame);
}
.events-hub-item-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #1a1510;
border: 1px solid #0d0a07;
flex-shrink: 0;
}
.events-hub-item-icon img {
width: 28px;
height: 28px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}
.events-hub-item-info {
flex: 1;
min-width: 0;
}
.events-hub-item-name {
font-family: 'RS Plain', sans-serif;
font-size: 14px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.events-hub-item-status {
font-size: 11px;
color: #8a7a6a;
text-shadow: 1px 1px 0 #000;
margin-top: 2px;
}
.events-hub-item-badge {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 10px;
padding: 3px 8px;
letter-spacing: 0.5px;
flex-shrink: 0;
text-shadow: 1px 1px 0 #000;
}
.badge-active {
color: #4CAF50;
background: rgba(76,175,80,0.1);
border: 1px solid rgba(76,175,80,0.25);
animation: status-pulse 2s ease-in-out infinite;
}
.badge-complete {
color: #FF981F;
background: rgba(255,152,31,0.1);
border: 1px solid rgba(255,152,31,0.25);
}
/* Back button in detail header */
.events-back {
cursor: pointer;
font-size: 14px;
color: #999;
text-shadow: 1px 1px 0 #000;
padding: 2px 8px 2px 4px;
transition: color 0.12s;
}
.events-back:hover { color: #fff; }
/* Event detail card */
/* Event banner */
.event-banner {
position: relative;
padding: 18px 16px 14px;
background: linear-gradient(135deg, #2a1a10 0%, #3a2518 40%, #2a1a10 100%);
border-bottom: 1px solid #1a1610;
overflow: hidden;
}
.event-banner-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(255,68,68,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(68,204,68,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(85,153,255,0.08) 0%, transparent 50%);
pointer-events: none;
}
.event-banner-content {
position: relative;
z-index: 1;
}
.event-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 20px;
color: #FF981F;
text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255,152,31,0.3);
text-align: center;
letter-spacing: 1px;
margin-bottom: 4px;
}
.event-subtitle {
font-size: 11px;
color: #a08868;
text-align: center;
text-shadow: 1px 1px 0 #000;
margin-bottom: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.event-progress-wrap {
max-width: 260px;
margin: 0 auto;
}
.event-progress-bar {
height: 10px;
background: #1a1510;
border: 1px solid #0d0a07;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
overflow: hidden;
}
.event-progress-fill {
height: 100%;
background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
box-shadow: 0 0 6px rgba(76,175,80,0.4);
transition: width 0.5s ease;
}
.event-progress-text {
font-size: 10px;
color: #8a7a6a;
text-align: center;
margin-top: 4px;
text-shadow: 1px 1px 0 #000;
}
/* Egg grid */
.event-eggs-grid {
display: flex;
flex-direction: column;
}
.event-egg-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid #1a1610;
transition: background 0.15s;
}
.event-egg-row:last-child { border-bottom: none; }
.event-egg-row:hover { background: rgba(255,255,255,0.02); }
.event-egg-row.claimed {
background: rgba(255,152,31,0.04);
}
/* Egg icon */
.event-egg-icon-wrap {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #1a1510;
border: 2px solid #0d0a07;
box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
flex-shrink: 0;
position: relative;
}
.event-egg-icon {
width: 32px;
height: 32px;
image-rendering: pixelated;
filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
}
/* Unclaimed egg pulse */
.event-egg-icon-wrap.pulse {
animation: egg-pulse 2.5s ease-in-out infinite;
}
.event-egg-icon-wrap.pulse::after {
content: '';
position: absolute;
inset: -3px;
border: 1px solid var(--egg-glow, #fff);
opacity: 0;
animation: egg-border-pulse 2.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes egg-pulse {
0%, 100% { box-shadow: inset 0 1px 4px rgba(0,0,0,0.5); }
50% { box-shadow: inset 0 1px 4px rgba(0,0,0,0.5), 0 0 10px color-mix(in srgb, var(--egg-glow, #fff) 30%, transparent); }
}
@keyframes egg-border-pulse {
0%, 100% { opacity: 0; }
50% { opacity: 0.5; }
}
/* Claimed egg — icon has slight gold tint */
.event-egg-row.claimed .event-egg-icon-wrap {
border-color: #3a3020;
}
/* Egg details */
.event-egg-details {
flex: 1;
min-width: 0;
}
.event-egg-name {
font-family: 'RS Plain', sans-serif;
font-size: 14px;
color: #c8b89a;
text-shadow: 1px 1px 0 #000;
}
.event-egg-claimer {
font-size: 12px;
color: #8a7a6a;
text-shadow: 1px 1px 0 #000;
margin-top: 2px;
}
.claimer-name {
color: #FF981F;
font-family: 'RS Bold', 'RS Plain', serif;
text-shadow: 1px 1px 0 #000, 0 0 4px rgba(255,152,31,0.3);
}
.event-egg-source {
font-size: 10px;
color: #6a5f50;
text-shadow: 1px 1px 0 #000;
font-style: italic;
margin-top: 1px;
}
.event-egg-available {
font-size: 12px;
color: #7a9a6a;
text-shadow: 1px 1px 0 #000;
margin-top: 2px;
}
/* Status badge */
.event-egg-status {
flex-shrink: 0;
text-align: right;
}
.status-claimed {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 11px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
padding: 3px 8px;
background: rgba(255,152,31,0.1);
border: 1px solid rgba(255,152,31,0.25);
letter-spacing: 0.5px;
}
.status-available {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 11px;
color: #4CAF50;
text-shadow: 1px 1px 0 #000;
padding: 3px 8px;
background: rgba(76,175,80,0.1);
border: 1px solid rgba(76,175,80,0.25);
letter-spacing: 0.5px;
animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
/* Flavor text */
.event-flavor {
padding: 10px 14px;
font-size: 11px;
color: #6a5f50;
text-align: center;
text-shadow: 1px 1px 0 #000;
line-height: 1.5;
border-top: 1px solid #1a1610;
font-style: italic;
}
/* settings structural removed — now uses rc-modal */
/* Settings body padding */
.settings-body {
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Settings row — icon + control */
.settings-row {
display: flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 2px 4px;
}
.settings-row-icon {
width: 20px;
height: 20px;
image-rendering: pixelated;
flex-shrink: 0;
}
/* Submenu chevrons */
.settings-chevron-right, .settings-chevron-left {
width: 8px;
height: 8px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
flex-shrink: 0;
}
.settings-chevron-right {
transform: rotate(-45deg);
margin-left: auto;
}
.settings-chevron-left {
transform: rotate(135deg);
}
.settings-submenu-row:hover .settings-chevron-right,
.settings-submenu-row:hover .settings-chevron-left {
border-color: #FF981F;
}
.settings-vol-icon { cursor: pointer; }
.settings-vol-icon:hover { filter: brightness(1.3); }
.settings-vol-icon.muted { opacity: 0.4; filter: grayscale(1); }
.settings-vol-icon.muted:hover { opacity: 0.7; }
.settings-row-label {
font-family: 'RS Plain', serif;
font-size: 15px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
flex-shrink: 0;
min-width: 65px;
}
/* Settings → Account: demoted delete + typed-name confirmation modal */
.settings-account-delete-link {
margin-left: auto;
padding: 4px 10px;
background: transparent;
color: #b05a5a;
font-family: 'RS Plain', serif;
font-size: 12px;
border: 1px solid rgba(176, 90, 90, 0.35);
border-radius: 3px;
cursor: pointer;
}
.settings-account-delete-link:hover {
color: #ff6b6b;
border-color: rgba(255, 107, 107, 0.5);
background: rgba(107, 32, 32, 0.15);
}
.delete-account-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
max-width: 360px;
}
.delete-account-warn {
font-family: 'RS Plain', serif;
font-size: 13px;
line-height: 1.5;
color: #d8cdb4;
background: rgba(107, 32, 32, 0.18);
border: 1px solid rgba(176, 90, 90, 0.3);
border-radius: 4px;
padding: 10px 12px;
}
.delete-account-warn b { color: #ff6b6b; }
.delete-account-prompt {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #b0a48a;
}
.delete-account-prompt b { color: #FF981F; }
.delete-account-input { width: 100%; box-sizing: border-box; }
.charslot-btn.charslot-delete:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Broadcast name input */
.settings-broadcast-name {
background: #1a1a1a;
border: 1px solid #555;
color: #c9a86c;
font-family: 'RS Plain', serif;
font-size: 14px;
padding: 2px 6px;
border-radius: 3px;
width: 120px;
margin-left: auto;
}
.settings-broadcast-name::placeholder { color: #666; }
.settings-broadcast-name:focus { outline: none; border-color: #FF981F; }
/* Eat threshold slider */
.settings-eat-value {
font-family: 'RS Plain', serif;
font-size: 14px;
color: #c9a86c;
text-shadow: 1px 1px 0 #000;
min-width: 30px;
text-align: right;
}
.settings-eat-slider {
-webkit-appearance: none;
appearance: none;
width: 80px;
height: 8px;
background: #3a3226;
border: 1px solid #000;
border-radius: 0;
outline: none;
cursor: pointer;
}
.settings-eat-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 16px;
background: linear-gradient(180deg, #7B6D5F, #494034);
border: 1px solid #000;
cursor: pointer;
}
.settings-eat-slider::-moz-range-thumb {
width: 10px;
height: 16px;
background: linear-gradient(180deg, #7B6D5F, #494034);
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
}
/* Background picker grid */
.bg-picker-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 6px 0 4px 0;
}
.bg-picker-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
background: #252019;
border: 2px solid #3a3226;
border-radius: 4px;
padding: 3px;
cursor: pointer;
color: #b0a48a;
font-family: 'RS Plain', serif;
font-size: 11px;
text-shadow: 1px 1px 0 #000;
transition: border-color 0.15s;
}
.bg-picker-btn:hover {
border-color: #5a4f3e;
}
.bg-picker-btn.active {
border-color: #FF981F;
color: #FF981F;
}
.bg-picker-thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 2px;
image-rendering: auto;
}
.bg-picker-none {
width: 100%;
aspect-ratio: 16/9;
background: #1a1610;
border-radius: 2px;
border: 1px solid #3a3226;
}
/* Settings background row */
.settings-row-bg {
gap: 8px;
}
.settings-bg-current {
color: #b0a48a;
font-size: 12px;
text-shadow: 1px 1px 0 #000;
margin-left: auto;
}
.settings-bg-browse {
background: #3a342c;
border: 1px solid #5a4f3e;
border-radius: 3px;
color: #FF981F;
font-family: 'RS Plain', serif;
font-size: 12px;
padding: 2px 10px;
cursor: pointer;
text-shadow: 1px 1px 0 #000;
transition: border-color 0.15s, background 0.15s;
}
.settings-bg-browse:hover {
border-color: #FF981F;
background: #4a4235;
}
/* bg-browser structural removed — now uses rc-modal */
.bg-browser-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 10px;
max-height: 60vh;
overflow-y: auto;
}
.bg-browser-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
background: #252019;
border: 2px solid #3a3226;
border-radius: 4px;
padding: 4px;
cursor: pointer;
color: #b0a48a;
font-family: 'RS Plain', serif;
font-size: 12px;
text-shadow: 1px 1px 0 #000;
transition: border-color 0.15s, transform 0.1s;
}
.bg-browser-btn:hover {
border-color: #5a4f3e;
transform: scale(1.02);
}
.bg-browser-btn.active {
border-color: #FF981F;
color: #FF981F;
box-shadow: 0 0 8px rgba(255,152,31,0.25);
}
.bg-browser-thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 2px;
image-rendering: auto;
}
.bg-browser-none {
width: 100%;
aspect-ratio: 16/9;
background: #1a1610;
border-radius: 2px;
border: 1px solid #3a3226;
}
@media (max-width: 500px) {
.bg-browser-grid { grid-template-columns: repeat(2, 1fr); }
}
/* shop-modal structural removed — now uses rc-modal */
.shop-modal-gold {
position: absolute;
right: 32px;
font-size: 11px;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.shop-modal-back {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
cursor: pointer;
font-size: 14px;
text-shadow: 1px 1px 0 #000;
transition: color 0.12s;
}
.shop-modal-back:hover { color: #fff; }
.shop-section-header {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 13px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
padding: 8px 8px 4px;
border-bottom: 1px solid var(--frame-lo);
margin-bottom: 2px;
}
/* Gauntlet style picker buttons */
.gauntlet-style-btn {
background: #3a342c;
border: 1px solid #5d5549;
border-radius: 4px;
padding: 10px 14px;
cursor: pointer;
text-align: center;
transition: background 0.15s;
}
.gauntlet-style-btn:hover {
background: #4a4238;
border-color: #8B7D6B;
}
.shop-modal-body {
overflow-y: auto;
padding: 8px;
}
/* Fixed 5-column grid for all shops — consistent size regardless of item count */
.shop-modal-body .bank-grid {
grid-template-columns: repeat(5, 1fr);
min-height: 200px;
}
/* Armoury: 7 columns (one per metal tier), items flow down each column */
.shop-modal-body .armoury-grid {
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(10, auto);
grid-auto-flow: column;
}
/* Combat shop tabs */
/* MTA Rewards Guardian balance bar */
.mta-balance-bar {
display: flex;
justify-content: center;
gap: 12px;
padding: 6px 8px;
margin-bottom: 8px;
background: rgba(0,0,0,0.3);
border-radius: 4px;
font-size: 12px;
color: #FF981F;
}
.mta-balance {
display: flex;
align-items: center;
gap: 3px;
}
/* Mobile — wrap pizazz types so they don't overflow */
@media (max-width: 768px) {
.mta-balance-bar {
flex-wrap: wrap;
justify-content: flex-start;
gap: 6px 10px;
font-size: 10px;
}
.mta-balance {
gap: 2px;
}
}
@media (max-width: 480px) {
.mta-balance-bar {
padding: 4px 6px;
gap: 4px 6px;
font-size: 9px;
}
.mta-balance img {
width: 12px !important;
height: 12px !important;
}
}
/* OSRS segmented slider — circular dots like real OSRS */
.osrs-slider {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
cursor: pointer;
padding: 2px 0;
height: 20px;
}
.osrs-slider-seg {
width: 7px;
height: 12px;
flex-shrink: 0;
border-radius: 2px;
background: #252019;
border: 1px solid #1a1610;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.osrs-slider-seg.filled {
background: linear-gradient(180deg, #6ABF3A 0%, #4AA528 30%, #3B9420 60%, #2D7A18 100%);
border-color: #1D5A10;
box-shadow:
inset 0 1px 0 rgba(180,255,120,0.3),
inset 0 -1px 0 rgba(0,0,0,0.25);
}
.osrs-slider-seg:hover {
box-shadow: 0 0 3px rgba(255,152,31,0.5);
}
/* OSRS-style checkbox toggle — green tick on dark bg */
.osrs-checkbox {
width: 16px;
height: 16px;
flex-shrink: 0;
background: #252019;
border: 1px solid #1a1610;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: auto;
}
.osrs-checkbox .checkmark {
display: none;
color: #3EBF2D;
font-size: 14px;
font-weight: 900;
text-shadow: 0 0 1px rgba(62,191,45,0.5);
line-height: 1;
}
.osrs-checkbox.checked .checkmark {
display: block;
}
/* Divider line */
.settings-divider {
height: 1px;
background: #1a1610;
box-shadow: 0 1px 0 rgba(107,98,86,0.3);
margin: 6px 0;
}
/* =============================================
CHARACTER SELECT OVERLAY
============================================= */
.charselect-overlay {
position: fixed;
inset: 0;
z-index: var(--z-takeover);
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
animation: panel-fade 0.2s ease-out;
}
.charselect-overlay::before { display: none; }
.charselect-overlay::after { display: none; }
.charselect-panel {
position: relative;
z-index: 1;
background: #5d5549;
background-image:
linear-gradient(180deg, #706358 0%, #5d5549 8%, #524940 92%, #3d3630 100%);
border: 2px solid #000;
box-shadow:
inset 1px 1px 0 #8B7D6B,
inset -1px -1px 0 #2A2420,
0 6px 24px rgba(0,0,0,0.7);
padding: 6px;
width: 460px;
max-width: 95%;
display: flex;
align-items: stretch;
animation: panel-slide 0.25s ease-out;
}
.charselect-inner {
background: #3a342c;
background-image:
linear-gradient(180deg, #332e27 0%, #3a342c 15%, #3a342c 85%, #2e2922 100%);
border: 1px solid #1a1610;
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.4),
0 1px 0 #6B6256;
display: flex;
flex-direction: column;
width: 100%;
}
.charselect-logo {
width: 48px;
height: 48px;
image-rendering: auto;
margin-right: 8px;
}
.charselect-header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 9px 14px 8px;
background: linear-gradient(180deg, #4a4238 0%, #3d3630 100%);
border-bottom: 1px solid #2A2420;
}
.charselect-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 20px;
color: #FF981F;
text-shadow: 1px 1px 0 #000, 0 0 12px rgba(255,152,31,0.2);
}
.charselect-close {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-weight: bold;
cursor: pointer;
font-size: 14px;
font-family: 'RS Bold', serif;
text-shadow: 1px 1px 0 #000;
}
.charselect-close:hover { color: #fff; }
.charselect-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-top: 1px solid #2A2420;
background: linear-gradient(180deg, #3d3630 0%, #4a4238 100%);
}
.charselect-footer-email {
font-size: 12px;
color: rgba(255,255,255,0.4);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1;
margin-right: 12px;
}
.charselect-signout-btn {
font-family: 'RS Plain', serif;
font-size: 13px;
color: #b0a48a;
background: linear-gradient(180deg, #5a4e40 0%, #3E3529 60%, #2A2118 100%);
border: 1px solid #1a1610;
border-radius: 2px;
padding: 6px 16px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
text-shadow: 1px 1px 0 #000;
}
.charselect-signout-btn:hover {
color: #fff;
background: linear-gradient(180deg, #c0392b 0%, #962d22 60%, #751f16 100%);
border-color: #4a1410;
}
.charselect-body {
padding: 12px 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
overflow-y: auto;
}
.charslot {
display: flex;
align-items: center;
justify-content: space-between;
background: #332e27;
border: 1px solid #1a1610;
border-radius: 2px;
padding: 10px 12px;
min-height: 48px;
transition: background 0.15s, border-color 0.15s;
}
.charslot:hover { border-color: #6B6256; background: #3d3630; }
.charslot-active { border-color: #FF981F; background: #4a4238; }
.charslot-info { flex: 1; min-width: 0; }
.charslot-name {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 15px;
color: #fff;
text-shadow: 1px 1px 0 #000;
margin-bottom: 2px;
}
.charslot-name.charslot-empty { color: #b0a48a; font-family: 'RS Plain', serif; }
.charslot-playing { font-size: 11px; color: #0f0; }
.charslot-stats { font-size: 12px; color: #b0a48a; }
.charslot-stats .stat-val { color: #fff; }
.charslot-actions { display: flex; gap: 6px; flex-shrink: 0; }
.charslot-btn {
font-family: 'RS Plain', serif;
font-size: 13px;
padding: 4px 12px;
border: 1px solid #000;
border-radius: 2px;
cursor: pointer;
text-shadow: 1px 1px 0 #000;
}
.charslot-load, .charslot-create, .charslot-confirm {
background: linear-gradient(180deg, #6ABF3A 0%, #3B9420 60%, #2D7A18 100%);
color: #fff;
border-color: #1D5A10;
}
.charslot-load:hover, .charslot-create:hover, .charslot-confirm:hover {
background: linear-gradient(180deg, #7ED34E 0%, #4AA528 60%, #3B9420 100%);
}
.charslot-delete {
background: linear-gradient(180deg, #c0392b 0%, #962d22 60%, #751f16 100%);
color: #fff;
border-color: #4a1410;
}
.charslot-delete:hover {
background: linear-gradient(180deg, #e74c3c 0%, #c0392b 60%, #962d22 100%);
}
.charslot-cancel {
background: linear-gradient(180deg, #5a4e40 0%, #3E3529 60%, #2A2118 100%);
color: #b0a48a;
border-color: #1a1610;
}
.charslot-cancel:hover { color: #fff; }
.charslot-export {
background: linear-gradient(180deg, #5a4e40 0%, #3E3529 60%, #2A2118 100%);
color: #b0a48a;
border-color: #1a1610;
}
.charslot-export:hover { color: #fff; }
.charslot-import {
background: linear-gradient(180deg, #3a6abf 0%, #204a94 60%, #183a7a 100%);
color: #fff;
border-color: #102a5a;
width: 100%;
margin-top: 8px;
padding: 8px 12px;
font-size: 14px;
}
.charslot-import:hover {
background: linear-gradient(180deg, #4e7ed3 0%, #2a5aa5 60%, #204a94 100%);
}
.charslot-create-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 16px 8px;
}
.charslot-create-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
}
.charslot-create-row { display: flex; align-items: center; gap: 8px; }
.charslot-create-label {
font-family: 'RS Plain', serif;
font-size: 15px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
}
.charslot-name-input {
font-family: 'RS Plain', serif;
font-size: 15px;
background: #1a1610;
border: 2px solid #3a3226;
color: #fff;
padding: 4px 8px;
width: 180px;
outline: none;
}
.charslot-name-input:focus { border-color: #FF981F; }
.charslot-create-buttons { display: flex; gap: 10px; }
.charslot-delete-warn {
font-family: 'RS Plain', serif;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 0 #000;
text-align: center;
line-height: 1.6;
}
/* Cloud saves */
.cloud-section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #3a3226;
}
.cloud-section-top {
margin-top: 0;
margin-bottom: 8px;
padding-top: 0;
padding-bottom: 8px;
border-top: none;
border-bottom: 1px solid #3a3226;
}
.cloud-signed-in {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
}
.cloud-user-row {
display: flex;
align-items: center;
gap: 6px;
}
.cloud-icon {
width: 16px;
height: 16px;
color: #6B6256;
flex-shrink: 0;
}
.cloud-icon-active {
color: #4da6ff;
}
.cloud-user-email {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #b0a48a;
text-shadow: 1px 1px 0 #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.cloud-signout-btn {
font-size: 11px !important;
padding: 2px 8px !important;
background: linear-gradient(180deg, #5a4e40 0%, #3E3529 60%, #2A2118 100%) !important;
color: #b0a48a !important;
border-color: #1a1610 !important;
}
.cloud-signout-btn:hover { color: #fff !important; }
.cloud-signed-out {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.cloud-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
font-family: 'RS Plain', serif;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 0 #000;
background: linear-gradient(180deg, #4a7ec7 0%, #2d5a9e 60%, #1e4280 100%);
border: 1px solid #15305a;
border-radius: 2px;
cursor: pointer;
}
.cloud-google-btn:hover {
background: linear-gradient(180deg, #5a8ed7 0%, #3d6aae 60%, #2d5a9e 100%);
}
.cloud-google-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.cloud-hint {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #6B6256;
text-shadow: 1px 1px 0 #000;
}
/* Centered variant — login/connecting screens */
.charselect-overlay.charselect-centered {
align-items: center;
justify-content: center;
}
.charselect-centered .charselect-panel {
width: 380px;
max-width: 90%;
align-items: stretch;
}
.charselect-centered .charselect-inner {
padding: 0;
}
/* Login screen */
.login-screen-body {
align-items: center;
padding: 20px 16px;
gap: 12px;
}
.login-welcome {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
margin-bottom: 4px;
}
.login-google-btn {
width: 100%;
padding: 10px 12px;
font-size: 15px;
}
.login-separator {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.login-separator-line {
flex: 1;
height: 1px;
background: #3a3226;
}
.login-separator-text {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #6B6256;
text-shadow: 1px 1px 0 #000;
}
.login-guest-btn {
width: 100%;
padding: 10px 12px;
font-size: 15px;
background: linear-gradient(180deg, #5a4e40 0%, #3E3529 60%, #2A2118 100%) !important;
color: #b0a48a !important;
border-color: #1a1610 !important;
}
.login-guest-btn:hover { color: #fff !important; }
.login-hint {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #6B6256;
text-shadow: 1px 1px 0 #000;
}
.topbar-char-btn {
cursor: pointer;
padding: 2px 8px;
border-radius: 3px;
transition: background 0.15s;
font-size: 13px;
color: var(--muted);
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.topbar-char-btn:hover { background: rgba(255, 255, 255, 0.1); }
.topbar-char-icon { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-char-caret {
width: 8px; height: 8px; flex-shrink: 0;
opacity: 0.4; margin-left: 2px;
transition: transform 0.2s, opacity 0.2s;
}
.topbar-account-wrap.open .topbar-char-caret {
transform: rotate(180deg); opacity: 0.8;
}
/* ============================================
ACCOUNT DROPDOWN MENU
Unfurled-scroll feel — warm parchment panel
============================================ */
.topbar-account-wrap { position: relative; }
.account-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: linear-gradient(180deg, #4a3e30, #352a20);
border: 2px solid #1a1510;
border-radius: 4px;
box-shadow:
inset 1px 1px 0 rgba(107,93,79,0.4),
inset -1px -1px 0 rgba(26,21,16,0.5),
0 8px 28px rgba(0,0,0,0.6),
0 2px 6px rgba(0,0,0,0.4);
z-index: var(--z-menu);
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(0.97);
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
overflow: hidden;
}
/* Top gold accent line */
.account-dropdown::before {
content: '';
position: absolute; top: 0; left: 10px; right: 10px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,215,0,0.25), transparent);
}
.topbar-account-wrap.open .account-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
}
.account-dropdown-header {
padding: 14px 16px 10px;
text-align: center;
}
.account-dropdown-name {
font-size: 15px;
font-weight: 800;
color: var(--gold);
text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255,215,0,0.15);
letter-spacing: 0.5px;
}
.account-dropdown-tier {
font-size: 10px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: 2px;
text-shadow: 1px 1px 0 #000;
}
.account-dropdown-email {
font-size: 10px;
color: rgba(155,139,107,0.6);
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-dropdown-divider {
height: 1px;
margin: 4px 12px;
background: linear-gradient(90deg, transparent, rgba(201,162,74,0.15), transparent);
}
.account-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--muted);
transition: background 0.12s, color 0.12s;
text-shadow: 1px 1px 0 #000;
position: relative;
}
.account-dropdown-item svg {
width: 16px; height: 16px;
min-width: 16px; max-width: 16px;
min-height: 16px; max-height: 16px;
flex-shrink: 0;
opacity: 0.6;
transition: opacity 0.12s;
}
.account-dropdown-item:hover {
background: linear-gradient(90deg, rgba(255,152,31,0.1), transparent 80%);
color: var(--white);
}
.account-dropdown-item:hover svg { opacity: 1; }
/* Amber left-edge glow on hover */
.account-dropdown-item::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--gold);
opacity: 0;
transition: opacity 0.12s;
}
.account-dropdown-item:hover::before { opacity: 0.6; }
/* Danger item (sign out) */
.account-dropdown-danger { color: rgba(255,100,100,0.7); }
.account-dropdown-danger:hover {
background: linear-gradient(90deg, rgba(255,51,51,0.08), transparent 80%);
color: #ff6666;
}
.account-dropdown-danger::before { background: #ff4444; }
/* Mobile: position dropdown properly */
@media (max-width: 768px) {
.account-dropdown {
position: fixed;
top: 48px;
right: 8px;
left: auto;
min-width: 200px;
}
}
/* Monster info button — moved to expanded method card, hidden from HP bar */
.monster-hp-wrap .monster-info-btn-wrap {
display: none;
}
.monster-hp-wrap #monster-clog-btn {
display: none !important;
}
.monster-info-btn-wrap {
flex-shrink: 0;
}
.monster-info-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #494034;
border: 2px solid #000;
border-top-color: #7B6D5F;
border-left-color: #6B5D4F;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.15s;
}
.monster-info-btn:hover { opacity: 1; }
.monster-info-btn img {
width: 16px;
height: 16px;
image-rendering: pixelated;
}
/* Monster info panel — left-aligned in viewport */
.monster-info-panel-left {
position: absolute;
left: 8px;
top: 40px;
max-width: 340px;
min-width: 280px;
z-index: 50;
background: linear-gradient(180deg, #5d5549 0%, #4a4136 100%);
border: 2px solid #000;
border-top-color: #7B6D5F;
border-left-color: #6B5D4F;
box-shadow: 2px 3px 8px rgba(0,0,0,0.6);
}
.monster-info-panel-left .rc-modal-inner {
background: none;
border: none;
box-shadow: none;
}
.monster-info-pin {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
filter: brightness(2) saturate(0.3);
transition: filter 0.15s, transform 0.15s;
}
.monster-info-pin:hover { filter: brightness(1.5) saturate(0.6); }
.monster-info-pin.pinned {
filter: none;
transform: translateY(-50%) rotate(45deg);
}
.monster-info-body {
padding: 6px 10px 10px;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 60vh;
overflow-y: auto;
}
/* Monster icon row */
.monster-info-icon-row {
display: flex;
justify-content: center;
padding: 4px 0 2px;
}
.monster-info-icon {
width: 48px;
height: 48px;
image-rendering: pixelated;
}
/* Monster stat sections (OSRS wiki-style) */
.mi-section {
margin-top: 4px;
padding: 4px 6px;
background: rgba(0,0,0,0.2);
border: 1px solid #1a1610;
border-radius: 2px;
}
.mi-section-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
text-align: center;
margin-bottom: 4px;
}
.mi-stat-row {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
gap: 2px;
}
.mi-stat-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 32px;
}
.mi-stat-cell img {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.mi-cell-val {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: #fff;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
}
.mi-attack-style .mi-stat-cell {
flex-direction: row;
gap: 4px;
}
.mi-cell-label {
font-family: 'RS Plain', serif;
font-size: 10px;
color: #c0b8a8;
text-shadow: 1px 1px 0 #000;
}
/* Magic defence row — align items side-by-side */
.mi-magic-def-row {
justify-content: center;
gap: 16px;
}
/* Elemental weakness styling */
.mi-weakness {
flex-direction: row;
gap: 4px;
}
.mi-weakness-val {
color: #7cc576;
font-size: 11px;
}
/* Loot table section */
.mi-loot-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 14px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
text-align: center;
padding: 6px 0 4px;
border-top: 1px solid #1a1610;
box-shadow: 0 -1px 0 rgba(107,98,86,0.3);
}
.mi-loot-grid {
display: flex;
flex-direction: column;
gap: 1px;
}
.mi-loot-row {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 4px;
background: rgba(0,0,0,0.15);
border: 1px solid transparent;
}
.mi-loot-row:nth-child(odd) {
background: rgba(0,0,0,0.25);
}
.mi-loot-row.mi-loot-unique {
border-color: rgba(255,152,31,0.25);
}
.mi-loot-icon {
width: 20px;
height: 20px;
image-rendering: pixelated;
flex-shrink: 0;
}
.mi-loot-name {
flex: 1;
font-family: 'RS Plain', serif;
font-size: 13px;
color: #c0b8a8;
text-shadow: 1px 1px 0 #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mi-loot-unique .mi-loot-name {
color: #FF981F;
}
.mi-loot-qty {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #aaa;
text-shadow: 1px 1px 0 #000;
min-width: 30px;
text-align: right;
}
.mi-loot-pct {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #7cc576;
text-shadow: 1px 1px 0 #000;
min-width: 42px;
text-align: right;
}
.mi-loot-unique .mi-loot-pct {
color: #ffcc33;
}
.mi-loot-buffed {
color: #888;
font-size: 10px;
font-weight: normal;
margin-left: 4px;
opacity: 0.75;
}
.mi-loot-row.mi-loot-always {
border-color: rgba(124,197,118,0.25);
}
.mi-loot-always .mi-loot-pct {
color: #7cc576;
font-weight: bold;
}
.mi-loot-row.mi-loot-pet {
border-color: rgba(170,120,255,0.25);
}
.mi-loot-pet .mi-loot-name {
color: #c8a0ff;
}
.mi-loot-pet .mi-loot-pct {
color: #c8a0ff;
}
.mi-loot-row.mi-loot-subtable {
border-color: rgba(100,180,255,0.2);
}
.mi-loot-subtable .mi-loot-name {
color: #88bbee;
font-style: italic;
}
.mi-loot-subtable .mi-loot-pct {
color: #88bbee;
}
/* =============================================
RIGHT SIDEBAR (OSRS-style with stone pillars)
============================================= */
.sidebar {
width: 410px;
flex-shrink: 0;
display: flex;
flex-direction: row;
background: var(--panel-bg);
border: 1px solid #000;
}
/* Stone pillar left */
.sidebar::before,
.sidebar::after {
content: '';
width: 7px;
flex-shrink: 0;
background:
linear-gradient(90deg,
#2A2118 0px,
#5A4E40 1px,
#6B5D4F 2px,
#5A4E40 4px,
#494034 5px,
#3E3529 6px,
#2A2118 7px
);
box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}
.sidebar-inner {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
/* =============================================
RUNELITE-STYLE ICON BAR (rebrand only)
============================================= */
.rl-bar {
display: none;
width: 36px;
flex-shrink: 0;
flex-direction: column;
align-items: center;
padding: 6px 0;
gap: 2px;
background: linear-gradient(180deg, #3E3529, #2A2118);
border-left: 2px solid #000;
z-index: 10;
}
.rl-bar-btn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 3px;
border: 1px solid transparent;
transition: background 0.12s, border-color 0.12s;
position: relative;
}
.rl-bar-btn:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.1);
}
.rl-bar-btn.active {
background: rgba(255,152,31,0.2);
border-color: rgba(255,152,31,0.4);
}
.rl-bar-btn img {
width: 22px;
height: 22px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
opacity: 0.7;
transition: opacity 0.12s;
}
.rl-bar-btn:hover img,
.rl-bar-btn.active img { opacity: 1; }
.rl-bar-emoji {
font-size: 20px;
line-height: 22px;
opacity: 0.7;
transition: opacity 0.12s;
}
.rl-bar-btn:hover .rl-bar-emoji,
.rl-bar-btn.active .rl-bar-emoji { opacity: 1; }
.rl-bar-home-logo {
width: 22px;
height: 22px;
image-rendering: auto;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
opacity: 0.85;
transition: opacity 0.12s;
}
.rl-bar-btn:hover .rl-bar-home-logo,
.rl-bar-btn.active .rl-bar-home-logo { opacity: 1; }
.rl-bar-sep {
width: 22px;
height: 1px;
background: #494034;
margin: 4px 0;
}
.rl-bar-prestige {
background: linear-gradient(135deg, #3a2a10, #5a3a15);
border-color: #D4854A;
margin: 2px 0;
}
.rl-bar-prestige span {
font-family: 'Lexend', sans-serif;
font-size: 10px;
font-weight: 700;
color: #D4854A;
text-shadow: 1px 1px 0 #000;
}
.rl-bar-prestige:hover {
background: linear-gradient(135deg, #5a3a15, #7a4a20);
border-color: #D4854A;
}
.rl-bar-icons {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex: 1;
min-height: 0;
}
.rl-bar-spacer {
margin-top: auto;
}
.rl-bar-settings svg {
width: 22px;
height: 22px;
color: inherit;
opacity: 0.7;
transition: opacity 0.12s;
}
.rl-bar-settings:hover svg { opacity: 1; }
/* Styled tooltip (shared) */
.rl-bar-btn::after,
.sidebar-top-tab::after,
.sidebar-tab::after {
content: attr(data-tooltip);
position: absolute;
background: #1a1610;
color: #FF981F;
font-family: 'RS Plain', sans-serif;
font-size: 16px;
padding: 6px 14px;
border-radius: 4px;
border: 1px solid #494034;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 100;
}
/* RL bar: tooltip to the right */
.rl-bar-btn::after {
right: auto;
left: calc(100% + 6px);
top: 50%;
transform: translateY(-50%);
}
/* Sidebar tabs: tooltip below */
.sidebar-top-tab::after,
.sidebar-tab::after {
top: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
}
.rl-bar-btn:hover::after,
.sidebar-top-tab:hover::after,
.sidebar-tab:hover::after { opacity: 1; }
/* Hide tooltip if no data-tooltip */
.sidebar-top-tab:not([data-tooltip])::after,
.sidebar-tab:not([data-tooltip])::after { display: none; }
/* Slide-in panel */
.rl-panel {
display: none; /* hidden until opened */
position: absolute;
top: 0;
bottom: var(--chatbox-h, 250px);
left: 48px; /* sits right of the rl-bar */
width: 410px;
flex-direction: column;
background: var(--panel-bg);
border-left: 2px solid #000;
border-right: 2px solid #000;
z-index: var(--z-panel);
box-shadow: 4px 0 12px rgba(0,0,0,0.5);
}
.rl-panel.open {
display: flex;
animation: rl-panel-in 0.2s ease-out;
}
.rl-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
padding: 0 10px;
background: linear-gradient(180deg, #5d5549, #4a4136);
border-bottom: 2px solid #000;
flex-shrink: 0;
}
.rl-panel-title {
font-family: 'RS Bold', sans-serif;
font-size: 14px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
}
.rl-panel-close {
font-size: 18px;
color: #888;
cursor: pointer;
line-height: 1;
padding: 2px 4px;
}
.rl-panel-close:hover { color: #fff; }
.rl-panel-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
background: var(--dark-bg);
}
@keyframes rl-panel-in {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* RL panel skill dropdown */
.rl-skill-dropdown-wrap {
padding: 6px 8px;
background: linear-gradient(180deg, #3a342c, #2a2118);
border-bottom: 1px solid #000;
}
.rl-skill-dropdown {
width: 100%;
padding: 5px 8px;
background: #1a1610;
color: #FF981F;
border: 1px solid #494034;
border-radius: 3px;
font-family: 'RS Plain', sans-serif;
font-size: 13px;
cursor: pointer;
outline: none;
}
.rl-skill-dropdown:hover { border-color: #6B5D4F; }
.rl-skill-dropdown option {
background: #1a1610;
color: #e8c9a0;
}
/* Rebrand overrides for rl-bar */
body.rebrand .rl-bar {
display: flex;
width: 48px;
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image);
background-size: auto, auto, cover;
background-position: center, center, center;
background-repeat: repeat, no-repeat, no-repeat;
border-right: 2px solid #100C08;
border-left: none;
order: 0; /* left position: first (left-col is 1, sidebar is 2) */
position: relative; /* for grab handle positioning */
}
/* Explicit flex orders for positioning */
body.rebrand .left-col { order: 1; }
body.rebrand .sidebar { order: 2; }
/* RL Bar Grab Handle */
.rl-bar-grab {
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 60px;
background: #3E3529;
border: 2px solid #000;
border-left: none;
border-radius: 0 4px 4px 0;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
transition: background 0.15s, width 0.15s;
}
.rl-bar-grab:hover {
background: #4E4539;
width: 14px;
right: -14px;
}
.rl-bar-grab:active {
cursor: grabbing;
background: #5E5549;
}
/* 6-dot grid pattern */
.rl-bar-dots {
display: grid;
grid-template-columns: repeat(2, 3px);
grid-template-rows: repeat(3, 3px);
gap: 2px;
}
.rl-bar-dots::before,
.rl-bar-dots::after {
content: '';
grid-column: 1 / -1;
grid-row: 1 / -1;
background-image: radial-gradient(circle, #888 1.5px, transparent 1.5px);
background-size: 5px 5px;
background-position: 0 0;
width: 100%;
height: 100%;
}
/* Right-docked RL Bar - sits between viewport (order 1) and sidebar (order 2) */
body.rebrand .rl-bar.rl-bar--right {
order: 1; /* sits between left-col and sidebar */
border-right: none;
border-left: 2px solid #100C08;
}
body.rebrand .rl-bar.rl-bar--right .rl-bar-grab {
right: auto;
left: -12px;
border-left: 2px solid #000;
border-right: none;
border-radius: 4px 0 0 4px;
}
body.rebrand .rl-bar.rl-bar--right .rl-bar-grab:hover {
left: -14px;
}
/* RL Panel - slides left when bar is right-docked (panel sits LEFT of bar, toward viewport) */
body.rebrand .rl-bar.rl-bar--right ~ .rl-panel {
left: auto !important;
right: 458px !important; /* 48px (bar) + 410px (sidebar) = left of RL bar */
border-right: none !important;
border-left: 2px solid #000 !important;
box-shadow: -4px 0 12px rgba(0,0,0,0.5) !important;
}
body.rebrand .rl-bar.rl-bar--right ~ .rl-panel.open {
animation: rl-panel-in-right 0.2s ease-out;
}
/* Panel slides in from the right (toward left) when docked on right side */
@keyframes rl-panel-in-right {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
body.rebrand .rl-bar-btn {
width: 40px;
height: 40px;
}
body.rebrand .rl-bar-btn.active {
background: rgba(180,100,50,0.2);
border-color: rgba(180,100,50,0.4);
}
body.rebrand .rl-bar-sep { background: #442E24; width: 32px; }
body.rebrand .rl-bar-btn::after {
background: var(--darkest);
border-color: #442E24;
}
body.rebrand .rl-bar-btn img {
image-rendering: auto;
width: 34px;
height: 34px;
}
body.rebrand .rl-bar-emoji {
font-size: 28px;
line-height: 34px;
}
body.rebrand .rl-bar-home-logo {
width: 34px;
height: 34px;
image-rendering: auto;
}
body.rebrand .rl-panel-header {
background: linear-gradient(180deg, #442E24, #302220);
}
/* RL Panel — Shop Hub */
.rl-shop-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: linear-gradient(180deg, #3a342c, #2a2118);
border-bottom: 1px solid #000;
font-size: 14px;
color: #FF981F;
}
.rl-shop-header-icon { width: 20px; height: 20px; image-rendering: auto; }
.rl-shop-gold { margin-left: auto; color: #FFD700; font-size: 12px; }
.rl-shop-cat {
padding: 6px 12px 3px;
font-size: 11px;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #1a1610;
}
.rl-shop-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid rgba(0,0,0,0.2);
transition: background 0.15s;
}
.rl-shop-item:hover { background: rgba(255,152,31,0.1); }
.rl-shop-item-icon { width: 22px; height: 22px; image-rendering: pixelated; }
.rl-shop-item-name { font-size: 13px; color: #e8c9a0; }
/* RL Panel — XP Tracker */
.rl-xpt-head {
display: flex;
justify-content: flex-end;
padding: 6px 10px;
background: linear-gradient(180deg, #3a342c, #2a2118);
border-bottom: 1px solid #000;
}
.rl-xpt-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.rl-xpt-icon { width: 20px; height: 20px; image-rendering: auto; }
.rl-xpt-info { flex: 1; min-width: 0; }
.rl-xpt-name { display: block; font-size: 13px; color: #FF981F; }
.rl-xpt-detail { display: block; font-size: 11px; color: #9B8B6B; }
.rl-xpt-remaining { display: block; font-size: 10px; color: #6B5D4F; }
/* Rebrand overrides for RL shop/xpt */
body.rebrand .rl-shop-header {
background: linear-gradient(180deg, #442E24, #302220);
}
body.rebrand .rl-shop-cat { color: #9C8878; }
body.rebrand .rl-shop-item:hover { background: rgba(212,133,74,0.12); }
body.rebrand .rl-shop-item-name { color: #D4B896; }
body.rebrand .rl-xpt-head {
background: linear-gradient(180deg, #442E24, #302220);
}
body.rebrand .rl-xpt-name { color: #D4854A; }
body.rebrand .rl-xpt-detail { color: #9C8878; }
body.rebrand .rl-xpt-remaining { color: #6B5040; }
/* ═══ RL Panel — Shared Design System (unified list language, --iw tokens) ═══
Mirrors .method-row so collection log / loot tracker / monster / boss lists
all speak the bank's carved-obsidian language. Themed via --iw-* tokens. */
/* Controls bar (top of panel) */
.rl-controls {
padding: 8px 10px 6px;
border-bottom: 1px solid #000;
flex-shrink: 0;
background: var(--iw-chrome-head);
box-shadow: inset 0 1px 0 rgba(255,200,100,.07);
}
.rl-controls-row { display: flex; gap: 6px; margin-bottom: 6px; }
.rl-controls-row:last-child { margin-bottom: 0; }
/* Shared select */
.rl-select {
flex: 1; background: var(--iw-field); color: var(--iw-accent-soft); border: 1px solid var(--iw-edge);
padding: 5px 8px; font-size: 12px; border-radius: 3px; cursor: pointer;
font-family: inherit;
}
.rl-select:focus { outline: none; border-color: var(--iw-accent); box-shadow: 0 0 6px var(--iw-glow); }
/* Shared search input — same treatment as the bank window's search */
.rl-search {
background: var(--iw-field); color: var(--white); border: 1px solid var(--iw-edge);
padding: 5px 8px; font-size: 12px; border-radius: 3px; font-family: inherit;
}
.rl-search::placeholder { color: var(--muted); opacity: .6; }
.rl-search:focus { outline: none; border-color: var(--iw-accent); box-shadow: 0 0 6px var(--iw-glow); }
.rl-search-full { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box; }
/* Shared pills / filter buttons — carved sockets like the bank's tab strip */
.rl-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.rl-pill {
position: relative;
font-size: 10px; font-weight: 700; color: var(--muted);
background: var(--iw-socket); border: 1px solid #000; border-radius: 4px;
padding: 4px 10px; cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,220,150,.06), inset 0 -2px 4px rgba(0,0,0,.5);
font-family: inherit; -webkit-tap-highlight-color: transparent;
transition: color 0.15s, box-shadow 0.15s;
}
.rl-pill:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--iw-accent), inset 0 -2px 4px rgba(0,0,0,.5); }
.rl-pill.active {
color: var(--iw-accent-bright);
background: var(--iw-socket-active);
box-shadow: inset 0 0 0 1px var(--iw-accent), 0 0 8px var(--iw-glow);
}
.rl-pill.active::after {
content: ''; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px;
background: linear-gradient(90deg, transparent, var(--iw-accent-bright), transparent);
}
/* Shared row — same tile as .method-row */
.rl-row {
display: flex; align-items: center; gap: 8px;
margin: 2px 6px;
padding: 7px 10px;
background: var(--iw-field);
border: 1px solid var(--iw-edge);
border-radius: 4px;
transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
cursor: pointer;
}
.rl-row:hover { background: var(--iw-tile-hover); border-color: var(--iw-accent); box-shadow: 0 0 8px var(--iw-glow); }
.rl-row-icon { width: var(--iw-icon-row); height: var(--iw-icon-row); image-rendering: pixelated; flex-shrink: 0; }
body.rebrand .rl-row-icon { image-rendering: auto; }
.rl-row-info { flex: 1; min-width: 0; }
.rl-row-name { font-size: 13px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-row-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.rl-row-stat { font-size: 11px; font-weight: 700; color: #8AB844; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rl-row-stat-dim { color: var(--muted); }
/* Row states */
.rl-row--active { border-color: var(--iw-accent); background: var(--iw-socket-active); box-shadow: inset 0 0 0 1px var(--iw-accent), 0 0 10px var(--iw-glow); }
.rl-row--complete { border-color: rgba(138,184,68,0.45); }
.rl-row--complete .rl-row-name { color: #8AB844; }
.rl-row--locked { opacity: 0.5; }
.rl-row--locked .rl-row-icon { filter: grayscale(0.6); }
.rl-row--progress { border-color: rgba(0,204,255,0.45); }
.rl-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* ═══ Tabs ═══ */
.rl-tabs {
display: flex; gap: 0; flex-shrink: 0;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
.rl-tab {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
padding: 6px 4px; background: transparent; border: none;
color: #8a7a6a; font-size: 12px; font-weight: 600; font-family: inherit;
cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.rl-tab:hover { color: #a09080; }
.rl-tab.active { color: #D4854A; border-bottom-color: #D4854A; }
.rl-tab img { width: 16px; height: 16px; image-rendering: auto; }
.rl-tab-badge {
font-size: 9px; background: #D4854A; color: #1a1410; border-radius: 8px;
padding: 0 4px; min-width: 14px; text-align: center; font-weight: 700;
}
/* Raised stone variant */
.rl-tabs--raised {
background: linear-gradient(180deg, #302220, #221814);
padding: 2px 4px 0; border-bottom: 1px solid #100C08;
}
.rl-tabs--raised .rl-tab {
background: linear-gradient(180deg, #442E24, #362a1c);
border: 1px solid #1a1510; border-radius: 3px 3px 0 0; border-bottom: none;
opacity: 0.6; font-size: 11px; padding: 4px 2px;
}
.rl-tabs--raised .rl-tab:hover { opacity: 0.85; color: #c4a882; }
.rl-tabs--raised .rl-tab.active {
opacity: 1; color: #D4854A;
background: linear-gradient(180deg, #5c4a30, #483820);
}
/* ═══ Buttons ═══ */
.rl-btn {
background: linear-gradient(180deg, #442E24, #3C2A22);
border: 1px solid #000; color: #c4a882;
box-shadow: inset 1px 1px 0 #5E4438, inset -1px -1px 0 #1E1410;
padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
cursor: pointer; border-radius: 3px; transition: all 0.15s;
-webkit-tap-highlight-color: transparent;
}
.rl-btn:hover { background: linear-gradient(180deg, #5E4438, #4A3830); color: #EDE4D8; }
.rl-btn:active { box-shadow: inset -1px -1px 0 #5E4438, inset 1px 1px 0 #1E1410; }
.rl-btn--primary {
background: linear-gradient(180deg, #D4854A, #B06830); color: #1a1410;
box-shadow: inset 1px 1px 0 #E8A060, inset -1px -1px 0 #8A4A20;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.rl-btn--primary:hover { background: linear-gradient(180deg, #E09558, #C07838); }
.rl-btn--primary:active { box-shadow: inset -1px -1px 0 #E8A060, inset 1px 1px 0 #8A4A20; }
.rl-btn--danger {
background: linear-gradient(180deg, #8A3A3A, #6A2D2D); color: #ffcccc;
box-shadow: inset 1px 1px 0 #A04A4A, inset -1px -1px 0 #4A1A1A;
}
.rl-btn--danger:hover { background: linear-gradient(180deg, #9A4A4A, #7A3D3D); }
.rl-btn--sm { padding: 2px 8px; font-size: 10px; }
.rl-btn--icon { padding: 4px; line-height: 0; }
.rl-btn--icon img, .rl-btn--icon svg { width: 14px; height: 14px; }
.rl-btn--ghost { background: none; border-color: transparent; color: #D4854A; }
.rl-btn--ghost:hover { background: rgba(212,133,74,0.1); color: #e09560; }
.rl-btn:disabled, .rl-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* ═══ Section Headers ═══ */
.rl-head {
padding: 6px 10px; font-size: 11px; font-weight: 700; color: #D4854A;
background: linear-gradient(180deg, #302220, #221814);
border-bottom: 1px solid #100C08; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.rl-head-info { font-size: 10px; color: #6a5a4a; font-weight: 400; }
/* ═══ Search wrap (for panel context) ═══ */
.rl-search-wrap { padding: 6px 10px; border-bottom: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }
/* ═══ Progress Bars ═══ */
.rl-progress { height: 6px; background: rgba(0,0,0,0.3); border-radius: 3px; overflow: hidden; }
.rl-progress-fill { height: 100%; background: linear-gradient(90deg, #D4854A, #e09560); border-radius: 3px; transition: width 0.3s; }
.rl-progress--green .rl-progress-fill { background: linear-gradient(90deg, #00AA00, #55DD55); }
.rl-progress--blue .rl-progress-fill { background: linear-gradient(90deg, #0088cc, #00ccff); }
.rl-progress--red .rl-progress-fill { background: linear-gradient(90deg, #aa0000, #dd3333); }
/* Shared empty state */
.rl-empty { text-align: center; padding: 30px 10px; color: #6a5a4a; font-size: 13px; }
/* Shared back button */
.rl-back {
background: none; border: none; color: #D4854A; font-size: 12px;
cursor: pointer; padding: 8px 10px; display: block; font-family: inherit;
}
.rl-back:hover { text-decoration: underline; }
/* Shared header stat bar */
.rl-stat-bar {
display: flex; gap: 10px; padding: 5px 12px; font-size: 11px; color: var(--muted);
border-bottom: 1px solid;
border-image: linear-gradient(90deg, var(--iw-accent), transparent 70%) 1;
flex-wrap: wrap;
}
.rl-stat-bar span { white-space: nowrap; }
.rl-stat-val { color: var(--iw-accent-bright); font-weight: 700; }
.rl-stat-gold {
background: var(--iw-text-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-weight: 700;
}
/* Shared action button — IDENTICAL component recipe to .rl-pill (one control
grammar across every list header); destructive variant tints red on hover. */
.rl-reset-btn {
position: relative;
font-size: 10px; font-weight: 700; color: var(--muted);
background: var(--iw-socket); border: 1px solid #000; border-radius: 4px;
padding: 4px 10px; cursor: pointer; flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255,220,150,.06), inset 0 -2px 4px rgba(0,0,0,.5);
font-family: inherit; -webkit-tap-highlight-color: transparent;
transition: color 0.15s, box-shadow 0.15s;
}
.rl-reset-btn:hover {
color: #ff9c9c;
box-shadow: inset 0 0 0 1px rgba(255,80,80,.6), inset 0 -2px 4px rgba(0,0,0,.5), 0 0 8px rgba(255,60,60,.2);
}
/* Category label */
.rl-cat {
padding: 6px 12px 3px; font-size: 10px; color: var(--iw-accent-soft);
text-transform: uppercase; letter-spacing: 1px;
border-bottom: 1px solid;
border-image: linear-gradient(90deg, var(--iw-accent), transparent 70%) 1;
}
/* ── Quest panel ── */
.rl-quest-status { display: flex; align-items: center; gap: 4px; }
.rl-quest-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.rl-quest-dot.completed { background: #00cc00; }
.rl-quest-dot.in-progress { background: #00ccff; box-shadow: 0 0 4px rgba(0,204,255,0.4); }
.rl-quest-dot.available { background: #ffff00; }
.rl-quest-dot.locked { background: #aa0000; }
.rl-quest-name-completed { color: #00cc00; }
.rl-quest-name-in-progress { color: #00ccff; }
.rl-quest-name-available { color: #ffff00; }
.rl-quest-name-locked { color: #aa0000; }
.rl-quest-timer { font-size: 10px; color: #00ccff; margin-left: auto; flex-shrink: 0; }
.rl-quest-qp { font-size: 10px; color: #6a5a4a; flex-shrink: 0; }
/* Pinned "Recommended" quest at the top of the list */
.rl-quest-recommended {
background: linear-gradient(90deg, rgba(255, 152, 31, 0.10), rgba(255, 152, 31, 0.02));
border: 1px solid rgba(255, 152, 31, 0.25);
border-radius: 4px;
margin-bottom: 6px;
}
.rl-rec-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-size: 9px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #FF981F;
background: rgba(255, 152, 31, 0.12);
border: 1px solid rgba(255, 152, 31, 0.3);
border-radius: 3px;
vertical-align: 1px;
}
/* ── Collection Log panel — completion states in the unified tile language ──
(The old rebrand border-left strips are retired; state lives in the tile's
border + name colour, with a slim progress line inside the tile.) */
.rl-clog-progress {
width: 100%; height: 3px; background: rgba(0,0,0,0.45); border-radius: 2px; margin-top: 3px;
}
.rl-clog-fill { height: 100%; background: #8AB844; border-radius: 2px; transition: width 0.3s; }
.rl-clog-complete .rl-clog-fill { background: #6BBF4A; }
.rl-clog-complete .rl-row-name { color: #8AB844; }
.rl-clog-partial .rl-row-name { color: var(--iw-accent-bright); }
/* Right-aligned stat inside a list head */
.mlh-stat { font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: none; color: var(--muted); }
.mlh-stat b { color: var(--iw-accent-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Trailing number slot on unified rows (KC, obtained counts) */
.meth-trail {
flex-shrink: 0; margin-left: auto;
font-size: 11px; font-weight: 700; color: var(--iw-accent-soft);
text-align: right; font-variant-numeric: tabular-nums;
}
/* Collection-log states on the unified row */
.method-row.clog-partial .meth-name { color: var(--iw-accent-bright); }
.method-row.clog-partial .meth-trail { color: var(--iw-accent-bright); }
.method-row.clog-complete .meth-trail { color: #8AB844; }
.method-row.clog-empty .meth-name { color: var(--muted); font-weight: 600; }
.method-row.clog-empty .meth-icon img { opacity: 0.4; filter: grayscale(0.6); }
/* Progress line + meth-info inside the row body (spans -> blocks) */
.method-row .meth-info { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.method-row .rl-clog-progress { display: block; }
.method-row .rl-clog-fill { display: block; }
/* Inline expanded collection header (replaces the old detail page head) */
.clog-detail-inline { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; text-align: left; }
.rl-clog-complete { border-color: rgba(138,184,68,0.45); }
.rl-clog-complete:hover { border-color: #8AB844; box-shadow: 0 0 8px rgba(138,184,68,0.25); }
.rl-clog-complete .rl-row-stat { color: #6BBF4A; font-weight: 700; }
.rl-clog-partial .rl-row-stat { color: var(--iw-accent-bright); }
.rl-clog-empty .rl-row-name { color: var(--muted); font-weight: 600; }
.rl-clog-empty .rl-row-icon { opacity: 0.4; filter: grayscale(0.6); }
/* Rebrand clog detail: obtained items glow */
body.rebrand .clog-item {
background: var(--iw-field); border: 1px solid var(--iw-edge); border-radius: 4px;
}
body.rebrand .clog-item img { image-rendering: auto; }
body.rebrand .clog-item.obtained {
background: rgba(107,191,74,0.12);
border-color: rgba(107,191,74,0.35);
box-shadow: 0 0 6px rgba(107,191,74,0.15);
}
body.rebrand .clog-item.missing {
background: rgba(0,0,0,0.3);
border-color: var(--iw-edge);
}
body.rebrand .clog-item.missing img { opacity: 0.15; filter: grayscale(1); }
/* ── Loot Tracker panel ── */
.rl-loot-kc { font-size: 11px; color: var(--iw-accent-soft); font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Hide rl-bar and panel on mobile */
@media (max-width: 768px) {
.rl-bar, .rl-panel { display: none !important; }
}
.sidebar-upper {
flex: 1;
display: flex;
flex-direction: column;
min-height: 200px;
}
.sidebar-splitter {
height: 6px;
cursor: row-resize;
background: #1a1610;
flex-shrink: 0;
position: relative;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.sidebar-splitter::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 2px;
background: #5a5040;
border-radius: 1px;
}
.sidebar-splitter:hover::after,
.sidebar-splitter:active::after {
background: #8a7a60;
}
.sidebar-skills {
flex: 0 1 auto;
border-top: 2px solid #000;
overflow-y: auto;
margin-top: auto;
}
/* Sidebar bottom button bar — fixed, not scrollable */
.sidebar-bottom-bar {
display: flex;
align-items: center;
gap: 2px;
padding: 3px 4px;
background: linear-gradient(180deg, #3E3529, #2A2118);
border-top: 2px solid #000;
flex-shrink: 0;
}
.sidebar-bottom-bar:empty { display: none; }
.sidebar-bar-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: linear-gradient(180deg, #4A4030, #3E3529);
border: 1px solid #000;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
color: #ccc;
font-family: 'RS Plain', serif;
font-size: 12px;
cursor: pointer;
border-radius: 3px;
transition: background 0.1s, color 0.1s;
}
.sidebar-bar-btn:hover {
background: linear-gradient(180deg, #5A5040, #4A4030);
color: #FFD700;
}
.sidebar-bar-emoji {
font-size: 14px;
line-height: 1;
}
.sidebar-bar-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
.sidebar-bar-label {
font-size: 11px;
}
/* Sidebar tab bar (OSRS stone tabs) */
/* Top tabs (shops) */
.sidebar-top-tabs {
display: flex;
height: 46px;
background: #2A2118;
border-bottom: 2px solid #000;
flex-shrink: 0;
gap: 1px;
padding: 2px 2px 0;
}
.sidebar-top-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #584C3E, #3E3529, #2A2118);
border: 1px solid #000;
border-bottom: none;
border-radius: 3px 3px 0 0;
cursor: pointer;
transition: background 0.1s;
padding: 0;
font-family: inherit;
position: relative;
}
.sidebar-top-tab:hover { background: linear-gradient(180deg, #6B5D4F, #4A4035, #3E3529); }
.sidebar-top-tab.active {
background: linear-gradient(180deg, #6B5D4F, #5A4E40, #494034);
border-color: #494034;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
z-index: 1;
}
.sidebar-top-tab.active::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #494034;
}
.sidebar-top-tab img { width: 28px; height: 28px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5)); }
.sidebar-top-tab[draggable="true"] { cursor: grab; }
.sidebar-top-tab.dragging { opacity: 0.35; cursor: grabbing; }
/* Bottom tabs (core) */
.sidebar-tabs {
display: flex;
height: 46px;
background: #2A2118;
border-bottom: 2px solid #000;
border-top: 2px solid #000;
flex-shrink: 0;
gap: 1px;
padding: 2px 2px 0;
}
.sidebar-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #584C3E, #3E3529, #2A2118);
border: 1px solid #000;
border-bottom: none;
border-radius: 3px 3px 0 0;
cursor: pointer;
transition: background 0.1s;
padding: 0;
font-family: inherit;
position: relative;
}
.sidebar-tab:hover { background: linear-gradient(180deg, #6B5D4F, #4A4035, #3E3529); }
.sidebar-tab.active {
background: linear-gradient(180deg, #6B5D4F, #5A4E40, #494034);
border-color: #494034;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
z-index: 1;
}
/* Active tab bottom merges with panel */
.sidebar-tab.active::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: #494034;
}
.sidebar-tab img {
width: 28px;
height: 28px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}
.sidebar-tab[draggable="true"] { cursor: grab; }
.sidebar-tab.dragging { opacity: 0.35; cursor: grabbing; }
/* Sidebar body */
.sidebar-body {
flex: 1;
overflow-y: auto;
min-height: 0;
background: #2b271f;
}
/* =============================================
SKILLS GRID (OSRS-style, always visible bottom-right)
============================================= */
.skill-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
padding: 4px;
background: #1a1610;
}
.skill-cell {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 6px;
background: #5a5043;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(31deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 3px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, transparent 3px),
repeating-linear-gradient(174deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 4px);
cursor: pointer;
transition: background 0.1s;
border: 1px solid rgba(180, 160, 120, 0.25);
aspect-ratio: 2 / 1;
-webkit-mask:
radial-gradient(circle 5px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 5px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 5px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 5px at 100% 100%, transparent 98%, black) bottom right;
-webkit-mask-size: 51% 51%;
-webkit-mask-repeat: no-repeat;
mask:
radial-gradient(circle 5px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 5px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 5px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 5px at 100% 100%, transparent 98%, black) bottom right;
mask-size: 51% 51%;
mask-repeat: no-repeat;
}
.skill-cell:hover {
background: #6a6053;
border-color: #3a3530;
}
.skill-cell.active {
background: #6a6053;
border-color: var(--gold-dim);
box-shadow: inset 0 0 6px rgba(255,215,0,0.1);
}
.skill-cell.coming-soon {
opacity: 0.4;
cursor: default;
}
.sk-icon {
width: auto;
height: 90%;
object-fit: contain;
image-rendering: pixelated;
flex-shrink: 0;
}
.sk-levels {
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sk-hi {
font-size: 22px;
font-weight: 700;
line-height: 1;
color: #ffff00;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}
.sk-lo, .sk-slash {
display: none;
}
/* =============================================
SKILL MILESTONE FX
- Level 99 (.maxed): the level number turns from yellow to gold
with a soft back glow.
- 200M XP (.truemax): the cell gains a green glow hugging its edge.
Both live in base CSS so they apply across every theme. The .maxed
rule uses !important because several themes set .sk-hi colour with
!important; 3 classes beats their 2-classes-1-element on the tie.
============================================= */
.skill-cell.maxed .sk-hi {
color: #ffd23f !important; /* yellow -> gold */
text-shadow:
1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, /* keep readable outline */
0 0 6px rgba(255, 201, 74, 0.95), /* gold back glow (inner) */
0 0 13px rgba(255, 162, 28, 0.6) !important; /* gold back glow (outer) */
}
/* Green edge glow drawn on a ::before overlay rather than the cell's own
border/box-shadow, so no theme's !important .maxed/.active styling can
stomp it. border-radius: inherit matches each mode's corner shape, and
position: relative anchors it even on the bare (masked) base theme. */
.skill-cell.truemax { position: relative; }
.skill-cell.truemax::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 4;
box-shadow:
inset 0 0 0 1.5px rgba(94, 255, 152, 0.85), /* crisp edge line — not just a glow */
inset 0 0 7px 0 rgba(52, 224, 116, 0.50), /* soft inward bloom — not just a line */
0 0 6px 0 rgba(52, 224, 116, 0.45); /* tight outer halo (shows where unmasked) */
animation: sk-truemax-pulse 2.8s ease-in-out infinite;
}
@keyframes sk-truemax-pulse {
0%, 100% { opacity: 0.82; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.skill-cell.truemax::before { animation: none; }
}
.total-level-cell {
grid-column: 1 / -1;
text-align: center;
background: #5a5043;
font-size: 11px;
color: #ffff00;
padding: 6px;
font-weight: 700;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}
.total-level-cell .total-num {
color: #ffff00;
}
/* =============================================
METHOD LIST (sidebar tab)
============================================= */
.method-list-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 10px 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--iw-accent-soft);
text-shadow: 0 1px 1px rgba(0,0,0,.7);
background: var(--iw-chrome-head);
border-bottom: 1px solid #000;
box-shadow: inset 0 1px 0 rgba(255,200,100,.07);
}
/* Boss list group dividers (progression families) */
.boss-group-head {
padding: 10px 10px 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #8a7d5f;
text-shadow: 0 1px 1px rgba(0,0,0,.7);
border-bottom: 1px solid rgba(176, 158, 116, 0.12);
margin-bottom: 2px;
}
.meth-kc {
flex-shrink: 0;
font-size: 10px;
color: #8a7d5f;
font-family: 'RS Plain', serif;
white-space: nowrap;
margin-right: 2px;
}
.method-row.clog-complete .meth-kc { color: #c9a227; }
.method-list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px;
background: transparent;
}
/* ============================================================================
UNIFIED LIST ROW — the game's one list language (bank look, --iw tokens).
Used by monster/boss/skill method lists here, and mirrored by .rl-row
(collection log / loot tracker). The old beige stone tile is retired.
============================================================================ */
.method-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--iw-field);
border: 1px solid var(--iw-edge);
border-radius: 4px;
color: var(--white);
font-family: inherit;
font-size: 13px;
cursor: pointer;
text-align: left;
width: 100%;
transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
.method-row:hover:not(:disabled) {
background: var(--iw-tile-hover);
border-color: var(--iw-accent);
box-shadow: 0 0 8px var(--iw-glow);
}
.method-row.active {
background: var(--iw-socket-active);
border-color: var(--iw-accent);
box-shadow: inset 0 0 0 1px var(--iw-accent), 0 0 10px var(--iw-glow);
}
.method-row.locked {
opacity: 1;
cursor: pointer;
}
/* Completion (collection log full) — one green across every list surface */
.method-row.clog-complete {
border-color: rgba(138, 184, 68, 0.45);
}
.method-row.clog-complete .meth-name {
color: #8AB844;
}
.method-row.clog-complete:hover:not(:disabled) {
border-color: #8AB844;
box-shadow: 0 0 8px rgba(138, 184, 68, 0.25);
}
.method-row.clog-complete.active {
background: var(--iw-socket-active);
border-color: #8AB844;
box-shadow: inset 0 0 0 1px rgba(138, 184, 68, 0.6), 0 0 10px rgba(138, 184, 68, 0.2);
}
.awakened-toggle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(0,0,0,0.3);
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s, background 0.15s;
z-index: 1;
}
.awakened-toggle:hover { opacity: 0.8; }
.awakened-toggle.active {
opacity: 1;
background: rgba(255, 102, 0, 0.25);
box-shadow: 0 0 4px rgba(255, 102, 0, 0.3);
}
.icon-awakened-orb { width: 16px; height: 16px; image-rendering: pixelated; }
.awakened-count { font-size: 10px; color: #ccc; }
.awakened-toggle.active .awakened-count { color: #ff6600; }
.meth-icon { flex-shrink: 0; }
/* ---- METHOD DETAIL CARD (expandable) ---- */
.method-row.expanded {
border-color: var(--iw-accent);
background: var(--iw-socket-active);
}
.meth-icon {
transition: opacity 0.15s ease;
}
.method-row.expanded .meth-icon {
opacity: 1;
}
.method-row.locked .meth-icon { position: relative; }
.method-row.locked .meth-lock-badge {
position: absolute;
bottom: -2px;
right: -4px;
font-size: 10px;
line-height: 1;
filter: drop-shadow(0 0 2px #000);
}
.method-row.locked .meth-name { color: var(--muted); }
.method-row.locked .meth-stats { opacity: 0.4; }
.method-detail {
background: var(--iw-field);
border: 1px solid var(--iw-edge);
border-top: none;
border-radius: 0 0 4px 4px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
}
.method-detail-inner {
display: flex;
gap: 12px;
align-items: stretch;
}
.method-detail-icon {
flex-shrink: 0;
width: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.method-detail-icon img {
width: 100%;
height: 100%;
object-fit: contain;
image-rendering: pixelated;
}
.method-detail-stats {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
min-width: 0;
}
.method-detail-stats .detail-row {
display: flex;
justify-content: space-between;
gap: 8px;
}
.method-detail-stats .detail-label {
color: var(--muted);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
}
.detail-label-icon {
width: 16px;
height: 16px;
image-rendering: pixelated;
vertical-align: middle;
}
.method-detail-stats .detail-value {
color: var(--white);
text-align: right;
}
.method-detail-stats .detail-value.green { color: var(--green); }
.method-detail-stats .detail-value.gold { color: var(--gold); }
.method-detail-stats .detail-value.red { color: var(--red); }
/* Monster detail card — combat level */
.mon-level {
font-size: 16px;
font-weight: 800;
color: var(--gold);
text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
letter-spacing: 0.5px;
margin-bottom: 2px;
}
/* Monster detail card — stat sections (mirrors mi-section pattern) */
.md-section {
margin-top: 4px;
padding: 4px 6px;
background: rgba(0,0,0,0.2);
border: 1px solid #1a1610;
border-radius: 2px;
}
.md-section-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
text-align: center;
margin-bottom: 4px;
}
.md-stat-row {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
gap: 2px;
}
.md-stat-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 32px;
}
.md-stat-cell img {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.md-cell-val {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: #fff;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
}
.md-weakness .md-cell-val {
color: #e74c3c;
}
.md-xp-row {
margin-top: 4px;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 11px;
color: var(--green);
text-shadow: 1px 1px 0 #000;
text-align: center;
}
.method-detail-reqs {
padding: 6px 8px;
background: rgba(180, 40, 40, 0.1);
border: 1px solid rgba(180, 40, 40, 0.2);
border-radius: 3px;
font-size: 11px;
color: var(--red);
}
.method-detail-resources {
font-size: 11px;
color: var(--muted);
line-height: 1.4;
}
.method-detail-resources.prod-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
margin-top: 6px;
padding: 6px 8px;
background: rgba(0,0,0,0.15);
border-radius: 6px;
}
.prod-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
}
.prod-chip img { width: 16px; height: 16px; }
.prod-chip.res-ok { color: var(--green); }
.prod-chip.res-no { color: var(--red); }
.prod-chip.prod-output { color: #FF981F; font-weight: 600; }
.prod-qty { opacity: 0.7; }
.prod-arrow {
color: var(--muted);
opacity: 0.5;
font-size: 12px;
margin: 0 2px;
}
.prod-can-make {
display: block;
font-size: 11px;
font-weight: 600;
margin-top: 4px;
text-align: right;
}
.method-detail-btn {
width: 100%;
padding: 8px 0;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: #1a1410;
background: linear-gradient(180deg, #D4854A, #B06830);
border: 1px solid #000;
box-shadow: inset 1px 1px 0 #E8A060, inset -1px -1px 0 #8A4A20;
border-radius: 3px;
cursor: pointer;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
transition: all 0.1s;
-webkit-tap-highlight-color: transparent;
}
.method-detail-btn:hover {
background: linear-gradient(180deg, #E09558, #C07838);
}
.method-detail-btn:active {
box-shadow: inset -1px -1px 0 #E8A060, inset 1px 1px 0 #8A4A20;
}
.method-detail-btn:disabled {
background: linear-gradient(180deg, #442E24, #3C2A22);
box-shadow: inset 1px 1px 0 #5E4438, inset -1px -1px 0 #1E1410;
color: #6a5a4a;
cursor: default;
opacity: 0.5;
text-shadow: 1px 1px 0 #000;
}
/* Shortcut buttons row inside expanded method card */
.method-detail-shortcuts {
display: flex;
gap: 6px;
}
.method-shortcut-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 5px 8px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(180, 160, 120, 0.25);
border-radius: 3px;
color: var(--muted);
font-family: inherit;
font-size: 11px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.method-shortcut-btn:hover {
background: rgba(255, 152, 31, 0.12);
color: #FF981F;
border-color: rgba(255, 152, 31, 0.35);
}
.method-shortcut-btn img {
width: 16px;
height: 16px;
image-rendering: pixelated;
opacity: 0.8;
}
.method-shortcut-btn:hover img {
opacity: 1;
}
.meth-body { flex: 1; min-width: 0; }
.meth-name {
font-weight: 700;
font-size: 13px;
display: block;
}
.superior-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
color: #000;
font-size: 9px;
font-weight: 800;
margin-left: 4px;
vertical-align: middle;
cursor: help;
line-height: 1;
}
.meth-info {
font-size: 10px;
color: var(--muted);
display: block;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.2px;
opacity: 0.85;
}
.meth-info.meth-lock {
color: var(--red);
opacity: 0.7;
}
.meth-stats {
flex-shrink: 0;
text-align: right;
display: flex;
flex-direction: column;
gap: 1px;
}
.meth-xp { color: var(--green); font-size: 10px; font-weight: 600; text-shadow: 1px 1px 0 #000; opacity: 0.8; white-space: nowrap; }
.meth-gp { color: var(--gold); font-size: 10px; }
/* Play/Stop button on method rows */
.meth-play-btn {
width: 22px;
height: 22px;
min-width: 22px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0.35;
transition: opacity 0.15s, background-color 0.15s, color 0.15s;
flex-shrink: 0;
}
.meth-play-btn:hover {
opacity: 1;
background: var(--iw-glow);
color: var(--iw-accent-soft);
}
.meth-play-btn:active {
background: var(--iw-glow);
}
.meth-play-btn.is-active {
opacity: 0.7;
color: var(--iw-accent-soft);
}
.meth-play-btn.is-active:hover {
opacity: 1;
background: var(--iw-glow);
color: var(--iw-accent-bright);
}
.meth-play-btn svg {
width: 12px;
height: 12px;
fill: currentColor;
}
.method-row:hover .meth-play-btn { opacity: 0.7; }
.method-row:hover .meth-play-btn.is-active { opacity: 0.85; }
/* Details chevron — skilling rows start on click, browsing lives here */
.meth-expand {
width: 22px;
height: 22px;
min-width: 22px;
border-radius: 50%;
background: transparent;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.35;
transition: opacity 0.15s, background-color 0.15s, color 0.15s;
flex-shrink: 0;
}
.method-row:hover .meth-expand { opacity: 0.7; }
.meth-expand:hover {
opacity: 1;
background: var(--iw-glow);
color: var(--iw-accent-soft);
}
.method-row.expanded .meth-expand { opacity: 0.85; transform: rotate(180deg); }
.meth-expand svg { width: 12px; height: 12px; }
/* Product info — inline within stats column */
.pi-divider {
height: 1px;
background: rgba(180, 160, 120, 0.15);
margin: 6px 0 5px;
}
/* Equipment slot badge */
.pi-slot {
font-size: 10px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
/* Stat group row: label + chips */
.pi-stat-group {
display: flex;
align-items: center;
gap: 6px;
margin: 2px 0;
}
.pi-group-label {
font-size: 10px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
min-width: 22px;
flex-shrink: 0;
}
.pi-stat-chips {
display: flex;
flex-wrap: wrap;
gap: 2px 6px;
}
.pi-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 600;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.pi-chip img { width: 14px; height: 14px; image-rendering: pixelated; }
.pi-chip .positive { color: var(--green); }
.pi-chip .negative { color: var(--red); }
.pi-chip-text { font-size: 11px; }
/* Level requirement */
.pi-req {
font-size: 10px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
margin-top: 3px;
}
.pi-req-met { color: var(--green); }
.pi-req-unmet { color: var(--red); }
/* Passive traits */
.pi-traits { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.pi-trait {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: #cdb98a;
text-shadow: 1px 1px 0 #000;
line-height: 1.3;
}
.pi-trait img { width: 14px; height: 14px; image-rendering: pixelated; flex-shrink: 0; }
/* Special attack */
.pi-spec {
font-size: 11px;
color: #f1c40f;
text-shadow: 1px 1px 0 #000;
margin-top: 4px;
line-height: 1.3;
}
/* Food / potion effect — prominent */
.pi-effect {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.pi-effect img { width: 18px; height: 18px; image-rendering: pixelated; }
.pi-effect strong { color: var(--green); }
.pi-note {
font-size: 10px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
margin-top: 2px;
font-style: italic;
}
/* "Used in" tags */
.pi-used-label {
font-size: 10px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 3px;
}
.pi-used-in {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
.pi-use-tag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(180, 160, 120, 0.15);
border-radius: 3px;
padding: 1px 5px;
}
.pi-use-tag img { width: 13px; height: 13px; image-rendering: pixelated; }
.pi-use-more { font-size: 10px; color: var(--muted); padding: 1px 4px; }
.md-cell-val.positive { color: var(--green); }
.md-cell-val.negative { color: var(--red); }
/* =============================================
RAIDS "COMING SOON" BANNER
============================================= */
.raid-coming-soon {
position: relative;
margin: 4px 0;
background: repeating-linear-gradient(
45deg,
#1a1610,
#1a1610 10px,
#2a2118 10px,
#2a2118 20px
);
border: 2px solid #000;
overflow: hidden;
opacity: 0.7;
}
.raid-tape-top, .raid-tape-bottom {
height: 14px;
background: repeating-linear-gradient(
-45deg,
#c4a000 0px, #c4a000 10px,
#1a1a1a 10px, #1a1a1a 20px
);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.raid-content {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 8px;
}
.raid-icon {
width: 36px;
height: 36px;
image-rendering: pixelated;
filter: grayscale(60%) brightness(0.7);
}
.raid-text {
font-family: 'RS Bold', sans-serif;
font-size: 16px;
font-weight: 700;
color: #c4a000;
letter-spacing: 3px;
text-shadow: 1px 1px 0 #000, 0 0 8px rgba(196,160,0,0.3);
}
/* =============================================
RAID UI
============================================= */
/* Raid hub — rendered in vp-center */
/* === Raid Hub === */
.raid-hub {
text-align: center;
padding: 6px 4px;
width: 100%;
}
.raid-hub-title {
color: #ff981f;
font-family: 'RS Bold', sans-serif;
font-size: 15px;
margin-bottom: 8px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.raid-hub-logo { margin-bottom: 8px; }
.raid-hub-logo .icon { width: 64px; height: 64px; }
.raid-splash-logo .icon { width: 96px; height: 96px; }
.raid-hub-label {
color: #c9a86c;
font-size: 11px;
margin-bottom: 4px;
}
.raid-hub-req {
color: #888;
font-size: 10px;
margin: 4px 0;
}
/* Raid weapon row (3 slots) */
.raid-weapon-row {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 6px;
}
.raid-weapon-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 6px 8px;
background: #1a1a1a;
border: 2px solid #555;
border-radius: 6px;
cursor: pointer;
min-width: 85px;
transition: border-color 0.2s;
}
.raid-weapon-slot:hover { border-color: #ff981f; }
.raid-weapon-style {
font-size: 10px;
color: #ff981f;
text-transform: capitalize;
}
.raid-weapon-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
}
/* This compact lineup keeps the old 30px icon — it must NOT pick up the new
global 40px .icon-bank (which would overflow the 32px box). */
.raid-weapon-icon .icon-bank { width: 30px; height: 30px; }
.raid-weapon-name {
font-size: 9px;
color: #c9a86c;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.raid-weapon-count {
font-size: 8px;
color: #888;
}
/* Loadout editor panel (overlay) */
.raid-editor-panel {
width: 400px;
max-height: 550px;
overflow: auto;
}
/* Style tabs (Melee / Ranged / Magic) */
.raid-tab-row {
display: flex;
justify-content: center;
gap: 3px;
margin-bottom: 0;
}
.raid-tab {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 18px;
background: #1a1610;
border: 1px solid #494034;
border-bottom: none;
border-radius: 4px 4px 0 0;
color: #888;
font-family: 'RS Bold', sans-serif;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
position: relative;
top: 1px;
}
.raid-tab .icon { width: 18px; height: 18px; }
.raid-tab-label { text-transform: capitalize; }
.raid-tab-check { color: #4a4; font-size: 12px; margin-left: 3px; }
.raid-tab:hover { color: #c9a86c; border-color: #6a5a44; }
.raid-tab.active {
background: #2b271f;
border-color: #ff981f;
color: #ff981f;
z-index: 1;
}
/* Loadout panel (below tabs) */
.raid-loadout-panel {
background: #2b271f;
border: 1px solid #ff981f;
border-radius: 0 0 4px 4px;
padding: 10px;
margin-bottom: 10px;
}
/* Mini equipment grid (OSRS cross layout) */
.raid-equip-grid {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-areas:
". head . "
"cape neck ammo"
"wep body shld"
". legs . "
"glov boot ring";
gap: 4px;
justify-content: center;
margin-bottom: 8px;
}
.raid-eq-slot {
width: 50px;
height: 50px;
background: #1a1610;
border: 2px solid #494034;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.15s;
image-rendering: pixelated;
}
.raid-eq-slot:hover { border-color: #c9a86c; }
.raid-eq-slot.filled { border-color: #6a5a34; background: #252118; }
.raid-eq-slot.weapon-slot { border-color: #ff981f; box-shadow: 0 0 4px rgba(255,152,31,0.3); }
.raid-eq-slot.weapon-slot:not(.filled) { border-style: dashed; }
.raid-eq-slot[data-slot="helmet"] { grid-area: head; }
.raid-eq-slot[data-slot="cape"] { grid-area: cape; }
.raid-eq-slot[data-slot="neck"] { grid-area: neck; }
.raid-eq-slot[data-slot="ammo"] { grid-area: ammo; }
.raid-eq-slot[data-slot="weapon"] { grid-area: wep; }
.raid-eq-slot[data-slot="body"] { grid-area: body; }
.raid-eq-slot[data-slot="shield"] { grid-area: shld; }
.raid-eq-slot[data-slot="legs"] { grid-area: legs; }
.raid-eq-slot[data-slot="gloves"] { grid-area: glov; }
.raid-eq-slot[data-slot="boots"] { grid-area: boot; }
.raid-eq-slot[data-slot="ring"] { grid-area: ring; }
.raid-eq-slot[data-slot="specWeapon"] { grid-area: ring; margin-left: 54px; }
.icon-raid-slot { width: 40px; height: 40px; image-rendering: pixelated; }
.icon-raid-placeholder { width: 34px; height: 34px; opacity: 0.3; }
/* Action buttons below grid */
.raid-loadout-actions {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.raid-action-btn {
padding: 5px 14px;
font-size: 12px;
font-family: 'RS Bold', sans-serif;
color: #c9a86c;
background: #1a1610;
border: 1px solid #494034;
border-radius: 3px;
cursor: pointer;
transition: all 0.15s;
}
.raid-action-btn:hover { border-color: #ff981f; color: #ff981f; }
.raid-action-clear { color: #a66; }
.raid-action-clear:hover { border-color: #c44; color: #c44; }
/* Boss lineup in raid hub */
.raid-boss-lineup {
display: flex;
gap: 3px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4px;
}
.raid-lineup-boss { text-align: center; }
.raid-lineup-icon {
width: 38px; height: 38px;
border: 1px solid #494034;
border-radius: 3px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.4);
overflow: visible;
}
.raid-lineup-icon .icon { width: 36px; height: 36px; }
.raid-lineup-label {
font-size: 7px;
color: #888;
margin-top: 1px;
}
/* Raid hub footer — enter button + repeat toggle */
.raid-hub-footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
gap: 6px;
}
.raid-enter-btn {
display: block;
padding: 7px 22px;
background: linear-gradient(180deg, #4a3a1a, #2a2010);
border: 2px solid #ff981f;
color: #ff981f;
font-family: 'RS Bold', sans-serif;
font-size: 13px;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.raid-enter-btn:hover { background: linear-gradient(180deg, #5a4a2a, #3a3020); }
.raid-auto-restart {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
}
.raid-auto-label {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
}
.raid-cancel-repeat {
margin-top: 4px;
padding: 3px 10px;
background: #2a1a1a;
border: 1px solid #882222;
border-radius: 3px;
color: #cc4444;
font-family: 'RS Plain', serif;
font-size: 11px;
cursor: pointer;
text-shadow: 1px 1px 0 #000;
}
.raid-cancel-repeat:hover { background: #3a2020; border-color: #aa3333; }
/* Advanced settings button in hub */
.raid-advanced-btn {
display: block;
margin: 6px auto 0;
font-size: 11px;
padding: 4px 14px;
}
.raid-advanced-panel { width: 420px; }
.raid-adv-desc {
font-size: 12px;
color: #888;
text-align: center;
margin-bottom: 10px;
line-height: 1.4;
}
.raid-adv-row {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 8px 0;
border-bottom: 1px solid #2a2520;
}
.raid-adv-row:last-child { border-bottom: none; }
.raid-adv-boss {
flex-shrink: 0;
width: 60px;
text-align: center;
}
.raid-adv-icon { width: 40px; height: 40px; margin: 0 auto; }
.raid-adv-icon .icon { width: 40px; height: 40px; }
.raid-adv-label {
font-size: 11px;
color: #c9a86c;
margin-top: 3px;
text-shadow: 1px 1px 0 #000;
}
.raid-adv-controls { flex: 1; }
.raid-adv-loadout-row {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.raid-adv-lo-btn {
padding: 4px 10px;
font-family: 'RS Plain', serif;
font-size: 12px;
background: #1a1610;
border: 1px solid #494034;
color: #888;
cursor: pointer;
border-radius: 2px;
}
.raid-adv-lo-btn:hover { border-color: #6B5D4F; color: #c9a86c; }
.raid-adv-lo-btn.active { border-color: #ff981f; color: #ff981f; background: #2a2010; }
.raid-adv-style-row {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.raid-adv-style-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
font-family: 'RS Plain', serif;
font-size: 12px;
background: #1a1610;
border: 1px solid #494034;
color: #888;
cursor: pointer;
border-radius: 2px;
}
.raid-adv-style-btn .icon { width: 18px; height: 18px; }
.raid-adv-style-btn:hover { border-color: #6B5D4F; color: #c9a86c; }
.raid-adv-style-btn.active { border-color: #ff981f; color: #ff981f; background: #2a2010; }
.raid-adv-no-weapon {
font-size: 12px;
color: #666;
font-style: italic;
}
.raid-prayer-row {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #3a3025;
}
.raid-prayer-label {
color: #aaa;
font-size: 12px;
margin-right: 3px;
}
.raid-prayer-opt {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: #2a2218;
border: 1px solid #3a3025;
border-radius: 3px;
color: #c9a86c;
font-size: 12px;
cursor: pointer;
}
.raid-prayer-opt:hover { border-color: #ff981f; }
.raid-prayer-opt.active {
border-color: #ff981f;
background: #3a2a10;
color: #ff981f;
}
.raid-prayer-opt .icon { width: 18px; height: 18px; }
/* Raid item picker option */
.raid-weapon-option {
display: flex;
align-items: center;
width: 100%;
padding: 6px 8px;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 3px;
cursor: pointer;
margin-bottom: 3px;
transition: border-color 0.15s;
}
.raid-weapon-option:hover { border-color: #ff981f; background: #2a2a1a; }
.raid-weapon-option.selected { border-color: #ff981f; background: #2a2518; }
.raid-picker-section-head {
color: #ff981f;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 6px 4px 2px;
border-bottom: 1px solid #333;
margin-bottom: 3px;
}
.raid-adv-oh-label {
color: #888;
font-size: 10px;
margin-top: 4px;
margin-bottom: 2px;
}
/* Raid ads row — flanks boss circle */
.raid-ads-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.raid-ads-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.raid-ad {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4px;
background: radial-gradient(circle, rgba(100,20,20,0.3) 0%, transparent 70%),
rgba(30, 15, 15, 0.3);
border: 2px solid #cc3333;
border-radius: 50%;
width: 140px;
height: 140px;
cursor: pointer;
animation: adPulse 1s infinite;
transition: border-color 0.2s;
}
.raid-ad.targeted { border-color: #ff981f; box-shadow: 0 0 12px rgba(255,152,31,0.5); animation: none; }
.raid-ad-icon { display: flex; align-items: center; justify-content: center; flex: 1; }
.raid-ad-icon .icon { width: 64px; height: 64px; }
.raid-ad-hp { width: 80%; height: 3px; background: #333; border-radius: 2px; overflow: hidden; }
.raid-ad-hp-fill { height: 100%; background: #cc0000; transition: width 0.1s; }
@keyframes adPulse {
0%, 100% { box-shadow: 0 0 6px rgba(204,51,51,0.4); }
50% { box-shadow: 0 0 16px rgba(204,51,51,0.8); }
}
/* Bloat vulnerability */
.vuln-flash {
animation: vulnFlash 0.5s infinite !important;
}
.vuln-active {
box-shadow: 0 0 30px rgba(0,200,0,0.6) !important;
border-color: #00cc00 !important;
}
@keyframes vulnFlash {
0%, 100% { box-shadow: 0 0 8px rgba(0,200,0,0.2); }
50% { box-shadow: 0 0 20px rgba(0,200,0,0.6); border-color: #00cc00; }
}
/* Nylo queue indicators */
.nylo-queue {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
padding: 4px 0;
}
.nylo-queue-dot {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #666;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20,20,20,0.4);
}
.nylo-queue-dot .icon { width: 20px; height: 20px; }
.nylo-queue-dot.melee { border-color: #cccccc; }
.nylo-queue-dot.ranged { border-color: #33cc33; }
.nylo-queue-dot.magic { border-color: #3399ff; }
/* Vasilias descent animation */
.vasilias-descent {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 15;
animation: vasiliasDrop 1.5s ease-out forwards;
pointer-events: none;
}
.web-string {
width: 2px;
height: 80px;
background: linear-gradient(180deg, #999, #666);
}
.vasilias-icon {
margin-top: -4px;
}
@keyframes vasiliasDrop {
0% { top: -100px; opacity: 0; }
30% { opacity: 1; }
100% { top: 60px; opacity: 1; }
}
/* Status effect bar */
.status-effect-bar {
text-align: center;
margin-bottom: 6px;
padding: 4px 8px;
background: rgba(0,0,0,0.5);
border-radius: 4px;
}
.status-label {
font-size: 11px;
font-family: 'RS Bold', sans-serif;
margin-bottom: 3px;
}
.status-progress {
height: 4px;
background: #333;
border-radius: 2px;
overflow: hidden;
}
.status-fill {
height: 100%;
transition: width 0.1s;
border-radius: 2px;
}
/* Xarpus states */
.xarpus-vuln {
box-shadow: 0 0 20px rgba(0,200,0,0.4) !important;
}
.xarpus-danger {
box-shadow: 0 0 20px rgba(200,0,0,0.4) !important;
}
/* =============================================
BANK (sidebar tab)
============================================= */
/* bank-wrap, bank-head, bank-search removed — now uses rc-panel-* */
.bank-sort-btn {
font-size: 10px;
padding: 2px 8px;
line-height: 1.2;
}
.bank-orb-btn {
display: inline-flex;
align-items: center;
gap: 4px;
color: #ffd89a;
border-color: rgba(255,170,60,0.55);
box-shadow: inset 0 0 0 1px rgba(255,200,90,0.22), 0 0 10px rgba(255,140,40,0.25);
}
.bank-orb-btn:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 1px rgba(255,215,120,0.4), 0 0 16px rgba(255,140,40,0.5); }
.bank-orb-btn-icon { width: 14px; height: 14px; filter: drop-shadow(0 0 3px rgba(255,170,60,0.6)); }
/* === Global Item Search === */
.global-search-wrap {
position: relative;
flex-shrink: 1;
min-width: 100px;
max-width: 180px;
}
.global-search-input {
width: 100%;
box-sizing: border-box;
padding: 3px 8px;
font-family: 'RS Plain', serif;
font-size: 13px;
color: var(--white);
background: #1a1610;
border: 1px solid #0d0b08;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
outline: none;
border-radius: 2px;
height: 28px;
}
.global-search-input::placeholder { color: var(--muted); }
.global-search-input:focus {
border-color: var(--gold);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 3px rgba(255,215,0,0.2);
}
.global-search-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
width: 320px;
max-height: 400px;
overflow-y: auto;
background: #3a342c;
background-image: linear-gradient(180deg, #332e27 0%, #3a342c 15%, #3a342c 85%, #2e2922 100%);
border: 2px solid #000;
box-shadow: inset 1px 1px 0 #6B6256, 0 6px 24px rgba(0,0,0,0.7);
z-index: var(--z-menu);
border-radius: 0 0 2px 2px;
}
.gs-result-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
cursor: pointer;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
.gs-result-row:hover { background: var(--cell-hover); }
.gs-result-icon { width: 24px; height: 24px; image-rendering: pixelated; flex-shrink: 0; }
.gs-result-name { color: var(--white); font-size: 13px; }
.gs-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-size: 12px;
}
.gs-source-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-bottom: 1px solid #1a1610;
background: linear-gradient(180deg, #3E3529, #2A2118);
}
.gs-back-btn {
cursor: pointer;
color: var(--gold);
font-size: 16px;
font-weight: bold;
padding: 0 4px;
}
.gs-back-btn:hover { color: #FFE873; }
.gs-source-item-icon { width: 28px; height: 28px; image-rendering: pixelated; }
.gs-source-item-name {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 15px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
}
.gs-source-section { border-bottom: 1px solid rgba(0,0,0,0.2); }
.gs-source-section-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 11px;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
padding: 6px 10px 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gs-source-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 18px;
font-size: 12px;
}
.gs-source-icon { width: 20px; height: 20px; image-rendering: pixelated; flex-shrink: 0; }
.gs-source-text { color: var(--white); flex: 1; }
.gs-source-detail {
color: var(--muted);
font-size: 11px;
white-space: nowrap;
}
/* Processing chain (unprocessed → processed visual) */
.gs-chain {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 10px;
}
.gs-chain-node {
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 6px;
border-radius: 3px;
cursor: pointer;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.05);
min-width: 48px;
transition: background 0.15s;
}
.gs-chain-node:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,215,0,0.3);
}
.gs-chain-node.gs-chain-current {
background: rgba(255,152,31,0.15);
border-color: #FF981F;
box-shadow: 0 0 4px rgba(255,152,31,0.3);
cursor: default;
}
.gs-chain-icon {
width: 24px;
height: 24px;
image-rendering: pixelated;
}
.gs-chain-label {
font-size: 10px;
color: #ccc;
text-align: center;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
.gs-chain-arrow {
color: #999;
font-size: 16px;
flex-shrink: 0;
}
.gs-chain-plus {
color: #999;
font-size: 12px;
flex-shrink: 0;
}
.gs-chain-qty {
font-size: 10px;
color: #ff0;
text-shadow: 1px 1px 0 #000;
line-height: 1;
}
/* Bank tab bar */
/* bank-tab-bar, bank-tab removed — now uses rc-panel-tabs/rc-panel-tab */
.bank-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 0;
background: transparent;
flex: 1;
overflow-y: auto;
min-height: 0;
align-content: start;
}
.bank-grid.sell-mode {
background: #3E2020;
}
.bank-grid.sell-mode .bank-item:active {
background: rgba(107, 48, 48, 0.5);
}
.osrs-btn.danger.active {
background: linear-gradient(180deg, #8B4040, #6B3030);
box-shadow: inset -1px -1px 0 #8B4040, inset 1px 1px 0 #2A1414;
}
.bank-item {
background: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
min-height: 42px;
cursor: default;
}
.bank-item.equipable { cursor: pointer; }
.bank-item.equipable:hover { background: var(--cell-active); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.bank-item.bank-dragging { opacity: 0.3; }
.bank-item.bank-drag-over { background: rgba(255, 215, 0, 0.15); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.bank-item.bank-item-use-selected { outline: 2px solid white; outline-offset: -2px; filter: brightness(1.2); cursor: pointer; }
.bank-item:hover { cursor: pointer; }
.bi-qty {
position: absolute;
top: 2px;
right: 3px;
font-size: 10px;
font-weight: 700;
color: #ffff00;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
z-index: 1;
line-height: 1;
}
.bi-qty.qty-white { color: #ffffff; }
.bi-qty.qty-green { color: #00ff80; }
.bi-qty.qty-white-high { color: #ffffff; }
.bank-lock {
position: absolute;
bottom: 1px;
left: 1px;
font-size: 9px;
z-index: 2;
line-height: 1;
filter: drop-shadow(0 0 1px #000);
pointer-events: none;
opacity: 0.7;
}
.bank-tier-badge {
position: absolute;
top: 1px;
left: 1px;
z-index: 3;
pointer-events: none;
font-size: 8px;
font-weight: 700;
color: #ffd666;
background: rgba(0,0,0,0.7);
padding: 0 2px;
border-radius: 2px;
line-height: 1.2;
text-shadow: 0 1px 1px #000;
}
.bt-tier {
color: #ffd666;
font-size: 10px;
font-weight: 600;
margin-left: 4px;
}
.bank-2h-badge {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
pointer-events: none;
width: 14px;
height: 14px;
opacity: 0.85;
}
.bank-2h-badge img {
width: 14px;
height: 14px;
image-rendering: pixelated;
filter: brightness(0.7);
}
.bank-2h-x {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #ff3333;
text-shadow: 0 0 2px #000, 0 0 2px #000;
line-height: 1;
}
.bi-name { display: none; }
.bi-val { font-size: 8px; color: var(--gold-dim); }
.bi-equip { font-size: 8px; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.marketplace-tag { font-size: 9px; background: #1a6b1a; color: #7fff7f; padding: 1px 4px; border-radius: 3px; font-weight: 700; vertical-align: middle; }
.bank-empty {
grid-column: 1 / -1;
text-align: center;
padding: 30px 10px;
color: var(--muted);
font-size: 12px;
}
/* bank-foot removed — now uses rc-panel-foot */
/* Sell All Confirmation */
.sell-all-confirm {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(180deg, #3A2A1A, #1E1912);
border-top: 2px solid #ff3333;
padding: 12px 16px;
text-align: center;
z-index: 50;
}
.sell-all-warn-title {
color: #ff3333;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.sell-all-warn-text {
color: var(--light);
font-size: 12px;
margin-bottom: 4px;
}
.sell-all-buttons {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 10px;
}
.sell-all-buttons .osrs-btn {
min-width: 80px;
}
.sell-junk-presets {
display: flex;
gap: 4px;
justify-content: center;
margin: 8px 0;
flex-wrap: wrap;
}
.sell-junk-preset {
font-size: 11px !important;
padding: 3px 8px !important;
min-width: auto !important;
}
.sell-junk-input-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 8px 0;
}
.sell-junk-input {
width: 100px;
padding: 4px 8px;
background: #1a1410;
border: 1px solid #5c4a3a;
color: #ffd700;
font-family: 'RS Plain', sans-serif;
font-size: 14px;
text-align: center;
border-radius: 2px;
}
.sell-junk-input:focus {
outline: none;
border-color: #FF981F;
}
.sell-junk-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--light);
font-size: 12px;
margin: 6px 0;
cursor: pointer;
}
.sell-junk-toggle input {
accent-color: #43ac35;
cursor: pointer;
}
/* Loot Log */
/* Loot tracker stats (legacy, kept for loot detail view) */
.loot-tracker-stats {
display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 6px 10px;
font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--cell-border);
}
/* POH Max Hit Dummy */
.poh-maxhit-display {
padding: 10px 14px; margin-top: 6px;
background: var(--cell-bg); border: 1px solid var(--cell-border); border-radius: 4px;
}
.poh-maxhit-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: var(--muted); padding: 3px 0;
}
.poh-maxhit-label { font-weight: 700; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.poh-maxhit-val { font-size: 16px; font-weight: 700; color: #00ff00; text-shadow: 1px 1px 0 #000; }
.poh-maxhit-hint { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: center; }
/* =============================================
COLLECTION LOG
============================================= */
/* clog-header, clog-tabs, clog-source-row removed — now uses rl-controls/rl-row */
.clog-source-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; cursor: pointer;
border-bottom: 1px solid rgba(0,0,0,0.3);
background: var(--cell-bg); transition: background 0.1s;
}
.clog-source-row:hover { background: var(--cell-active); }
.clog-source-icon { width: 28px; height: 28px; image-rendering: pixelated; flex-shrink: 0; }
.clog-source-info { flex: 1; min-width: 0; }
.clog-source-name { font-size: 12px; font-weight: 700; text-shadow: 1px 1px 0 #000; }
.clog-source-progress { font-size: 10px; color: var(--muted); }
.clog-source-complete .clog-source-name { color: #00ff00; }
.clog-source-partial .clog-source-name { color: #ff981f; }
.clog-source-empty .clog-source-name { color: var(--white); }
.clog-detail-head {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
background: var(--iw-chrome-head);
border-bottom: 1px solid #000;
box-shadow: inset 0 1px 0 rgba(255,200,100,.07);
}
.clog-detail-icon { width: 36px; height: 36px; image-rendering: pixelated; }
.clog-detail-info { flex: 1; }
.clog-detail-name {
font-size: 14px; font-weight: 800; font-family: inherit;
background: var(--iw-text-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.clog-detail-name.clog-clickable { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,152,31,0.4); text-underline-offset: 2px; }
.clog-detail-name.clog-clickable:hover { background: none; -webkit-text-fill-color: #fff; color: #fff; text-decoration-color: #fff; }
.clog-detail-kc { font-size: 11px; color: var(--white); text-shadow: 1px 1px 0 #000; }
.clog-item-grid {
display: flex; flex-wrap: wrap; gap: 4px; padding: 8px;
justify-content: flex-start;
}
.clog-item {
width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
background: var(--iw-field); border: 1px solid var(--iw-edge); border-radius: 4px;
position: relative; cursor: pointer;
}
.clog-item img { width: 40px; height: 40px; image-rendering: pixelated; }
.clog-item.obtained { }
.clog-item.missing img { opacity: 0.3; filter: grayscale(0.5); }
.clog-item .clog-qty {
position: absolute; top: 0; left: 1px;
font-size: 9px; color: #ffff00; text-shadow: 1px 1px 0 #000;
font-weight: 700; line-height: 1;
}
.chat-line .log-clog { color: #00ff00; font-weight: 700; }
/* Collection log popup notification */
.clog-popup {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: linear-gradient(180deg, #4a4035, #332c24);
border: 2px solid #000;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.6);
z-index: 60;
animation: clogSlideIn 0.3s ease-out;
pointer-events: none;
}
.clog-popup-icon {
width: 28px;
height: 28px;
image-rendering: pixelated;
flex-shrink: 0;
}
.clog-popup-text {
display: flex;
flex-direction: column;
}
.clog-popup-title {
font-size: 11px;
font-weight: 700;
color: #00ff00;
text-shadow: 1px 1px 0 #000;
font-family: 'RS Bold', 'RS Plain', serif;
}
.clog-popup-item {
font-size: 11px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
}
.clog-popup-fade {
animation: clogFadeOut 0.5s ease-in forwards;
}
@keyframes clogSlideIn {
0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes clogFadeOut {
0% { opacity: 1; }
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
.osrs-btn {
background: linear-gradient(180deg, #442E24, #3C2A22);
border: 1px solid #000;
box-shadow: inset 1px 1px 0 #5E4438, inset -1px -1px 0 #1E1410;
color: #c4a882;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
border-radius: 3px;
transition: all 0.1s;
-webkit-tap-highlight-color: transparent;
}
.osrs-btn:active {
box-shadow: inset -1px -1px 0 var(--frame-hi), inset 1px 1px 0 var(--frame-lo);
background: linear-gradient(180deg, #3E3529, #6B5D4F);
}
.osrs-btn.danger {
background: linear-gradient(180deg, #6B3030, #3E2020);
box-shadow: inset 1px 1px 0 #8B4040, inset -1px -1px 0 #2A1414;
}
/* =============================================
SHOP (uses bank-grid layout)
============================================= */
.shop-item { cursor: pointer; }
.shop-item:hover { background: var(--cell-active); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.shop-item.poor { opacity: 0.35; }
.shop-item.owned { opacity: 0.5; cursor: default; }
.shop-item.owned:hover { background: transparent; box-shadow: none; }
.shop-item .bi-qty { color: var(--gold); }
.shop-item.out-of-stock { opacity: 0.25; pointer-events: none; }
.shop-item .shop-stock-label {
display: block; font-size: 0.65em; color: #aaa; line-height: 1.1; margin-top: 1px;
}
.shop-item .shop-stock-label.stock-low { color: #e8a735; }
.shop-item .shop-stock-label.stock-empty { color: #c44; }
/* ===== SHOP ITEM CARDS — "Reliquary Display Case" =====
Each item sits in a brass-cornered curio cabinet: stone-block frame
with filigree corner flourishes, a deeply recessed icon niche backlit
by ember + slow conic rune-rays on hover, a hammered brass name
plaque, and a gilded coin-pill cost medallion. 3:4 portrait. */
/* Reusable card color variables — themes override these for re-skinning.
The 4 corner SVG masks are kept here as variables so themes can swap
--sc-corner-color in one line and recolor every flourish at once. */
.shop-modal-body {
--sc-stone-hi: #3d3328;
--sc-stone-mid: #2a2218;
--sc-stone-lo: #1a130d;
--sc-corner-color: #c8a464;
--sc-corner-glow: rgba(255, 200, 100, 0.65);
--sc-brass-text: #d4b074;
--sc-brass-text-hi: #f5e3b8;
--sc-plaque-top: rgba(140, 105, 60, 0.42);
--sc-plaque-mid: rgba(60, 42, 22, 0.7);
--sc-plaque-bot: rgba(120, 90, 50, 0.42);
--sc-plaque-rim: rgba(220, 180, 110, 0.42);
--sc-cost-hi: #4a3220;
--sc-cost-lo: #2c1d0e;
--sc-cost-text: #ffd680;
--sc-cost-glow: rgba(255, 152, 31, 0.45);
--sc-ember-dim: rgba(255, 152, 31, 0.12);
--sc-ember-strong: rgba(255, 152, 31, 0.65);
--sc-niche-glow: rgba(255, 152, 31, 0.14);
--sc-poor: #ff8a8a;
--sc-poor-bg-hi: #4a1a1a;
--sc-poor-bg-lo: #2e0d0d;
/* White-stroked SVG masks — `mask` clips a coloured rectangle to the
flourish shape, so themes just swap --sc-corner-color. */
--sc-corner-tl: url("data:image/svg+xml;utf8,");
--sc-corner-tr: url("data:image/svg+xml;utf8,");
--sc-corner-bl: url("data:image/svg+xml;utf8,");
--sc-corner-br: url("data:image/svg+xml;utf8,");
}
.shop-modal-body .bank-grid {
grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
gap: 16px;
padding: 18px;
}
.shop-modal-body .bank-item.shop-item {
position: relative;
aspect-ratio: 3 / 4;
min-height: 0;
padding: 11px 11px 12px;
display: flex;
flex-direction: column;
align-items: stretch;
cursor: pointer;
overflow: visible;
/* Stone-block frame with grain + vignette */
background:
radial-gradient(ellipse at 50% 28%, rgba(255, 220, 160, 0.045) 0%, transparent 60%),
url("data:image/svg+xml;utf8,"),
linear-gradient(168deg, var(--sc-stone-hi) 0%, var(--sc-stone-mid) 50%, var(--sc-stone-lo) 100%);
background-blend-mode: normal, overlay, normal;
background-size: auto, 120px 120px, auto;
border: 1px solid #08060a;
border-radius: 3px;
box-shadow:
/* outer drop */
0 5px 14px rgba(0, 0, 0, 0.55),
0 2px 4px rgba(0, 0, 0, 0.5),
/* top highlight */
inset 0 1px 0 rgba(255, 220, 160, 0.14),
/* bottom trough */
inset 0 -1px 0 rgba(0, 0, 0, 0.6),
/* bevel sides */
inset 1px 0 0 rgba(255, 220, 160, 0.05),
inset -1px 0 0 rgba(0, 0, 0, 0.45);
transition:
transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.28s ease,
filter 0.28s ease;
}
.shop-modal-body .bank-item.shop-item:hover {
transform: translateY(-4px);
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.7),
0 4px 8px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 220, 160, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.6),
inset 1px 0 0 rgba(255, 220, 160, 0.1),
inset -1px 0 0 rgba(0, 0, 0, 0.45),
0 0 0 1px var(--sc-hover-ring, rgba(255, 152, 31, 0.5)),
0 0 22px var(--sc-hover-bloom, rgba(255, 152, 31, 0.3));
}
/* Four brass filigree corner flourishes — a single ::before paints a
coloured rectangle, masked into 4 corner glyphs. Themes recolor by
overriding --sc-corner-color. */
.shop-modal-body .bank-item.shop-item::before {
content: '';
position: absolute;
inset: 2px;
pointer-events: none;
z-index: 3;
background-color: var(--sc-corner-color);
-webkit-mask:
var(--sc-corner-tl) top left / 18px 18px no-repeat,
var(--sc-corner-tr) top right / 18px 18px no-repeat,
var(--sc-corner-bl) bottom left / 18px 18px no-repeat,
var(--sc-corner-br) bottom right / 18px 18px no-repeat;
mask:
var(--sc-corner-tl) top left / 18px 18px no-repeat,
var(--sc-corner-tr) top right / 18px 18px no-repeat,
var(--sc-corner-bl) bottom left / 18px 18px no-repeat,
var(--sc-corner-br) bottom right / 18px 18px no-repeat;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
opacity: 0.88;
transition: filter 0.28s ease, opacity 0.28s ease, background-color 0.28s ease;
}
.shop-modal-body .bank-item.shop-item:hover::before {
opacity: 1;
filter:
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7))
drop-shadow(0 0 5px var(--sc-corner-glow));
}
/* ── Icon niche: deeply recessed window with ember backlight ── */
.shop-card-icon {
position: relative;
flex: 1 1 58%;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 50% 55%, var(--sc-niche-glow) 0%, transparent 55%),
radial-gradient(ellipse at 50% 40%, #221a12 0%, #0c0805 78%);
border: 1px solid #08060a;
border-radius: 2px;
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.95),
inset 0 -1px 2px rgba(255, 200, 120, 0.05),
inset 2px 0 3px rgba(0, 0, 0, 0.7),
inset -2px 0 3px rgba(0, 0, 0, 0.7),
0 1px 0 rgba(255, 220, 160, 0.08);
overflow: hidden;
}
/* Subtle 8-spoke conic rune-rays — bloom and rotate on hover */
.shop-card-icon::before {
content: '';
position: absolute;
inset: -10%;
background: conic-gradient(
from 22deg,
transparent 0deg, var(--sc-ember-dim) 18deg, transparent 45deg,
var(--sc-ember-dim) 63deg, transparent 90deg,
var(--sc-ember-dim) 108deg, transparent 135deg,
var(--sc-ember-dim) 153deg, transparent 180deg,
var(--sc-ember-dim) 198deg, transparent 225deg,
var(--sc-ember-dim) 243deg, transparent 270deg,
var(--sc-ember-dim) 288deg, transparent 315deg,
var(--sc-ember-dim) 333deg, transparent 360deg
);
opacity: 0;
transform: rotate(0deg);
transform-origin: 50% 50%;
transition: opacity 0.4s ease, transform 1.6s linear;
mix-blend-mode: screen;
pointer-events: none;
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-icon::before {
opacity: 1;
transform: rotate(30deg);
}
/* Icon image — sits proud of the niche surface */
.shop-card-icon .icon-bank,
.shop-card-icon .icon {
position: relative;
z-index: 2;
width: auto !important;
height: auto !important;
max-width: 72% !important;
max-height: 80% !important;
image-rendering: pixelated;
filter:
drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.9))
drop-shadow(0 0 8px rgba(255, 152, 31, 0.22));
transition:
transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.28s ease;
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-icon .icon-bank,
.shop-modal-body .bank-item.shop-item:hover .shop-card-icon .icon {
transform: scale(1.1) translateY(-2px);
filter:
drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.95))
drop-shadow(0 0 14px var(--sc-ember-strong));
}
/* "Owned" stamp — top-left of the niche, looks like a stamped seal */
.shop-modal-body .bank-item.shop-item .shop-card-icon .bi-qty {
position: absolute;
top: 4px;
left: 4px;
right: auto;
z-index: 4;
padding: 1px 6px 2px;
font-family: 'Cinzel', 'RS Bold', serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: #d4ffc8 !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
background:
radial-gradient(ellipse at 50% 30%, rgba(150, 220, 120, 0.18), transparent 70%),
linear-gradient(180deg, #2a4022 0%, #1a2c14 100%);
border: 1px solid rgba(0, 0, 0, 0.7);
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(180, 230, 150, 0.25),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 1px 2px rgba(0, 0, 0, 0.6);
}
/* ── Info section: plaque + medallion ── */
.shop-card-info {
flex: 1 1 42%;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
padding-top: 7px;
gap: 5px;
}
/* Hammered-brass name plaque — gilt rim top + shadow trough bottom */
.shop-card-name {
position: relative;
padding: 4px 7px 5px;
margin: 0 -1px;
font-family: 'Cinzel', 'RS Bold', 'RS Plain', serif;
font-size: 11px;
font-weight: 600;
line-height: 1.15;
color: var(--sc-brass-text);
text-align: center;
letter-spacing: 0.55px;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.85),
0 0 3px rgba(255, 200, 120, 0.25);
background:
/* center-glint */
linear-gradient(90deg, transparent 0%, rgba(200, 160, 100, 0.1) 50%, transparent 100%),
/* hammered-brass vertical wash */
linear-gradient(180deg,
var(--sc-plaque-top) 0%,
var(--sc-plaque-mid) 50%,
var(--sc-plaque-bot) 100%);
border-top: 1px solid var(--sc-plaque-rim);
border-bottom: 1px solid rgba(40, 28, 14, 0.85);
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 1px 2px rgba(0, 0, 0, 0.55);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-word;
transition: color 0.22s ease, text-shadow 0.22s ease, box-shadow 0.22s ease;
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-name {
color: var(--sc-brass-text-hi);
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.85),
0 0 5px rgba(255, 220, 140, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 1px 2px rgba(0, 0, 0, 0.55);
}
/* When the cost is clickable (price-click → confirm → buy), give it a
button-y cursor and a slightly brighter hover. */
.shop-card-cost-clickable {
cursor: pointer;
}
.shop-card-cost-clickable:hover {
filter: brightness(1.15);
}
.shop-card-cost-clickable:active {
transform: translateY(0) scale(0.97);
}
/* Cost medallion — gilded coin-pill at the bottom */
.shop-card-cost {
align-self: center;
margin-top: 1px;
padding: 3px 11px 4px;
font-family: 'Cinzel', 'RS Bold', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.7px;
color: var(--sc-cost-text);
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.85),
0 0 3px var(--sc-cost-glow);
background:
radial-gradient(ellipse at 50% 28%, rgba(255, 200, 100, 0.22), transparent 75%),
linear-gradient(180deg, var(--sc-cost-hi) 0%, var(--sc-cost-lo) 100%);
border: 1px solid #100802;
border-radius: 999px;
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.35),
inset 0 -1px 1px rgba(0, 0, 0, 0.65),
0 1px 3px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(0, 0, 0, 0.35);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: box-shadow 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-cost {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.5),
inset 0 -1px 1px rgba(0, 0, 0, 0.65),
0 3px 6px rgba(0, 0, 0, 0.8),
0 0 10px var(--sc-cost-glow);
}
.shop-card-cost-poor {
color: var(--sc-poor);
background:
radial-gradient(ellipse at 50% 28%, rgba(255, 100, 100, 0.22), transparent 75%),
linear-gradient(180deg, var(--sc-poor-bg-hi) 0%, var(--sc-poor-bg-lo) 100%);
border-color: #150202;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.85),
0 0 3px rgba(255, 70, 70, 0.5);
box-shadow:
inset 0 1px 0 rgba(255, 180, 180, 0.3),
inset 0 -1px 1px rgba(0, 0, 0, 0.65),
0 1px 3px rgba(0, 0, 0, 0.75);
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-cost-poor {
box-shadow:
inset 0 1px 0 rgba(255, 180, 180, 0.45),
inset 0 -1px 1px rgba(0, 0, 0, 0.65),
0 3px 6px rgba(0, 0, 0, 0.8),
0 0 10px rgba(255, 90, 90, 0.5);
}
/* States */
.shop-modal-body .bank-item.shop-item.owned { opacity: 0.55; }
.shop-modal-body .bank-item.shop-item.owned:hover { transform: none; }
.shop-modal-body .bank-item.shop-item.poor { opacity: 0.55; }
.shop-modal-body .bank-item.shop-item.poor:hover { transform: translateY(-2px); }
.shop-modal-body .bank-item.shop-item.ironman-locked { cursor: not-allowed; }
/* Tablet */
@media (max-width: 768px) {
.shop-modal-body .bank-grid {
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap: 12px;
padding: 14px;
}
}
/* Phone */
@media (max-width: 480px) {
.shop-modal-body .bank-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
padding: 10px;
}
.shop-modal-body .bank-item.shop-item { padding: 8px 8px 9px; }
.shop-modal-body .bank-item.shop-item::before { inset: 1px; }
.shop-card-name { font-size: 10px; padding: 3px 5px 4px; letter-spacing: 0.4px; }
.shop-card-cost { font-size: 9px; padding: 2px 8px 3px; letter-spacing: 0.5px; }
}
/* ============================================================================
SHOP TILE — bank look (retires the glossy brass/conic-ray card). Overrides
the glossy rules above; themed via --iw-* tokens like the rest of item UI.
============================================================================ */
.shop-modal-body .bank-item.shop-item {
aspect-ratio: auto;
padding: 8px 6px 7px;
background: var(--iw-field);
border: 1px solid var(--iw-edge);
border-radius: 4px;
box-shadow: none;
transition: border-color .14s, box-shadow .14s;
}
.shop-modal-body .bank-item.shop-item:hover {
transform: none;
border-color: var(--iw-accent);
background: var(--iw-tile-hover);
box-shadow: 0 0 10px var(--iw-glow);
}
/* Kill the brass corner filigree + conic rune-rays */
.shop-modal-body .bank-item.shop-item::before,
.shop-modal-body .bank-item.shop-item::after,
.shop-card-icon::before,
.shop-modal-body .bank-item.shop-item:hover::before { display: none !important; }
/* Icon niche → plain centered 40px */
.shop-card-icon {
flex: 0 0 auto;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
padding: 4px 0 2px;
min-height: 0;
}
.shop-card-icon .icon-bank,
.shop-card-icon .icon {
max-width: none !important;
max-height: none !important;
width: 40px !important;
height: 40px !important;
image-rendering: pixelated;
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.7));
transform: none !important;
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-icon .icon-bank,
.shop-modal-body .bank-item.shop-item:hover .shop-card-icon .icon {
transform: none !important;
}
/* Name → clean light label */
.shop-card-name {
background: none;
border: none;
box-shadow: none;
padding: 3px 4px 1px;
font-family: inherit;
font-size: 11px; font-weight: 600;
color: var(--white);
text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-name {
color: var(--white);
text-shadow: 0 1px 1px rgba(0,0,0,.6);
box-shadow: none;
}
/* Cost → gold gradient text, no coin-pill */
.shop-card-cost {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
padding: 1px 4px 0;
font-size: 11px; font-weight: 700;
background: var(--iw-text-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.shop-modal-body .bank-item.shop-item:hover .shop-card-cost {
transform: none;
box-shadow: none;
}
.shop-card-cost-poor { color: var(--red); -webkit-text-fill-color: var(--red); background: none; border: none; box-shadow: none; }
.shop-modal-body .bank-item.shop-item.poor:hover { transform: none; }
/* Bank-style modal shell for item windows (shops, and any modal tagged .iw-window).
Themes override .rc-modal with higher specificity + !important, so under a theme
the shop shell adopts that theme's modal look; in the DEFAULT theme this gives the
carved-obsidian bank shell instead of the legacy warm-brown one. */
.rc-modal:has(.shop-modal-body),
.rc-modal.iw-window {
background: var(--iw-surface) !important;
border: 1px solid #000 !important;
border-radius: 6px !important;
padding: 0 !important;
box-shadow: inset 0 0 0 1px var(--iw-edge), 0 0 0 2px rgba(0,0,0,.8),
0 14px 40px rgba(0,0,0,.65), 0 0 24px var(--iw-glow-soft) !important;
}
.rc-modal:has(.shop-modal-body) .rc-modal-inner,
.rc-modal.iw-window .rc-modal-inner {
background: none !important; border: none !important; box-shadow: none !important;
}
.rc-modal:has(.shop-modal-body) .rc-modal-head,
.rc-modal.iw-window .rc-modal-head {
background: var(--iw-chrome-head) !important;
border-bottom: 1px solid #000 !important; border-radius: 6px 6px 0 0 !important;
}
.rc-modal:has(.shop-modal-body) .rc-modal-title,
.rc-modal.iw-window .rc-modal-title {
background: var(--iw-text-grad);
-webkit-background-clip: text; background-clip: text; color: transparent !important;
font-family: inherit !important; text-shadow: none !important;
}
.rc-modal:has(.shop-modal-body) .rc-modal-body,
.rc-modal.iw-window .rc-modal-body { background: none !important; }
.shop-restock-bar {
text-align: center; padding: 4px 8px; margin-bottom: 6px;
font-size: 0.78em; color: #ccc; background: rgba(0,0,0,0.25); border-radius: 4px;
}
.shop-restock-bar .restock-time { color: var(--gold); font-weight: 600; }
/* =============================================
EQUIPMENT (OSRS cross layout)
============================================= */
.equip-grid {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
". head . "
"cape neck ammo"
"wep body shld"
". legs . "
"glov boot ring";
gap: 4px;
padding: 10px;
justify-content: center;
background: var(--cell-bg);
background-image:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12)),
url('../img/viewport-background-texture.png');
background-size: auto, cover;
background-position: center, center;
background-repeat: repeat, no-repeat;
}
.spec-attack-wrap {
background: #221814;
background-image:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12)),
url('../img/viewport-background-texture.png');
background-size: auto, cover;
background-position: center, center;
background-repeat: repeat, no-repeat;
}
.eq-slot {
width: 50px;
height: 50px;
background: #1a1610;
border: 2px solid #494034;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.1s, border-color 0.1s;
position: relative;
}
.eq-slot:hover {
border-color: #c9a86c;
}
.eq-slot.filled {
border-color: #6a5a34;
background: #252118;
}
.eq-slot.eq-slot-auto {
border-color: #4a4a34;
background: #1e1c14;
position: relative;
opacity: 0.85;
}
.eq-slot.eq-slot-auto:hover { opacity: 1; }
.eq-auto-qty {
position: absolute;
bottom: 1px;
right: 2px;
font-size: 9px;
color: #ff0;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
pointer-events: none;
line-height: 1;
}
.icon-slot-placeholder {
width: 36px;
height: 36px;
image-rendering: pixelated;
opacity: 0.5;
}
.eq-name {
font-size: 7px;
color: var(--white);
text-align: center;
position: absolute;
bottom: 1px;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 1px 1px 0 #000;
}
.eq-section-head {
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
color: var(--gold);
background: linear-gradient(180deg, #3E3529, #2A2118);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-shadow: 1px 1px 0 #000;
}
.equip-tools {
display: flex;
gap: 4px;
padding: 10px 24px;
background: var(--cell-bg);
justify-content: center;
}
.equip-stats {
padding: 10px 12px;
background: var(--cell-bg);
border-top: 1px solid #111;
}
.eq-stat-title {
font-size: 12px;
font-weight: 700;
color: var(--gold);
margin-bottom: 6px;
text-shadow: 1px 1px 0 #000;
}
.eq-stat-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--white);
padding: 3px 0;
border-bottom: 1px solid #1a1610;
}
.eq-stat-row.muted { color: var(--muted); }
/* Loadout controls */
.loadout-controls {
padding: 8px 12px;
background: var(--cell-bg);
border-top: 1px solid #111;
}
.loadout-row {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
}
.loadout-name {
flex: 1;
color: var(--white);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.loadout-btn {
padding: 2px 8px !important;
font-size: 10px !important;
min-width: 0 !important;
}
.loadout-del {
background: linear-gradient(180deg, #8b3a3a 0%, #6b2222 100%) !important;
border-color: #4a1515 !important;
}
.loadout-del:hover {
background: linear-gradient(180deg, #a04040 0%, #802828 100%) !important;
}
.loadout-save-row {
padding: 6px 0;
text-align: center;
}
.loadout-activity-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 0;
border-top: 1px solid #333;
margin-top: 4px;
flex-wrap: wrap;
}
.loadout-activity-label {
flex: 1;
font-size: 11px;
color: var(--white);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.loadout-prompt {
display: flex;
gap: 6px;
align-items: center;
padding: 6px 0;
border-top: 1px solid #333;
margin-top: 4px;
}
.loadout-input {
flex: 1;
background: #1a1610;
border: 1px solid #494034;
color: var(--white);
padding: 4px 6px;
font-size: 12px;
font-family: inherit;
min-width: 0;
}
.loadout-input:focus {
outline: none;
border-color: var(--gold-dim);
}
/* equip-tab-row removed — now uses rc-panel-tabs */
.equip-tab-num {
font-size: 13px;
}
/* Equipment prayer row */
.equip-prayer-row {
display: flex;
gap: 3px;
padding: 6px 10px;
background: var(--cell-bg);
flex-wrap: wrap;
}
.equip-prayer-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
padding: 4px 6px;
background: #1a1610;
border: 1px solid #494034;
color: var(--white);
font-size: 10px;
font-family: inherit;
cursor: pointer;
transition: background 0.1s, border-color 0.1s;
}
.equip-prayer-btn:hover {
background: #2b271f;
border-color: #6B5D4F;
}
.equip-prayer-btn.active {
background: #2b271f;
border-color: var(--gold-dim);
color: var(--gold);
box-shadow: inset 0 0 6px rgba(255,215,0,0.1);
}
/* Equipment combat style row */
.equip-style-row {
display: flex;
gap: 3px;
padding: 6px 10px;
background: var(--cell-bg);
flex-wrap: wrap;
}
.equip-style-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 5px 4px;
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
border: 2px solid #6E5647;
color: var(--white);
font-size: 10px;
font-family: inherit;
cursor: pointer;
transition: background 0.1s, border-color 0.1s;
min-width: 0;
border-radius: 0;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
}
.equip-style-btn:hover {
border-color: #8A6A54;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.09),
0 4px 12px rgba(0,0,0,0.35);
}
.equip-style-btn.active {
border-color: var(--gold-dim);
color: var(--gold);
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
.equip-style-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Equipment action buttons */
.equip-actions {
display: flex;
gap: 4px;
padding: 6px 10px;
background: var(--cell-bg);
border-top: 1px solid #111;
}
.equip-action-btn {
flex: 1;
padding: 5px 8px;
background: linear-gradient(180deg, #4a4030, #3a3020);
border: 1px solid #5a5040;
color: var(--white);
font-size: 10px;
font-family: inherit;
cursor: pointer;
text-align: center;
}
.equip-action-btn:hover {
background: linear-gradient(180deg, #5a5040, #4a4030);
border-color: var(--gold-dim);
}
.equip-action-clear {
background: linear-gradient(180deg, #8b3a3a 0%, #6b2222 100%);
border-color: #4a1515;
}
.equip-action-clear:hover {
background: linear-gradient(180deg, #a04040 0%, #802828 100%);
}
.equip-loadout-apply {
width: calc(100% - 16px);
margin: 8px auto;
display: block;
padding: 7px 12px;
background: linear-gradient(180deg, #3a6d1e, #2a5015);
border: 1px solid #5a9a35;
color: #fff;
font-weight: 700;
font-size: 12px;
font-family: inherit;
cursor: pointer;
text-align: center;
}
.equip-loadout-apply:hover {
background: linear-gradient(180deg, #4a8028, #357020);
border-color: #7ab850;
}
/* =============================================
PRAYER TAB (OSRS-style)
============================================= */
.prayer-tab {
background: var(--panel-bg);
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.prayer-tab .bank-head {
flex-shrink: 0;
}
.prayer-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
padding: 6px 8px;
justify-items: center;
}
.prayer-cell {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
border: 1px solid transparent;
background: var(--cell-bg);
border-radius: 3px;
transition: border-color 0.1s, background 0.1s;
}
.prayer-cell:hover:not(.locked) {
background: var(--cell-hover);
border-color: rgba(200, 180, 120, 0.3);
}
.prayer-cell.active {
background: rgba(50, 45, 30, 0.9);
border-color: var(--gold-dim);
box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.15), 0 0 4px rgba(255, 215, 0, 0.1);
}
.prayer-cell.locked {
opacity: 0.2;
cursor: default;
filter: grayscale(100%);
background: transparent;
border-color: transparent;
}
.prayer-cell img {
width: 28px;
height: 28px;
image-rendering: pixelated;
position: relative;
z-index: 1;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}
.prayer-cell.active img {
filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.4));
}
/* Prayer points footer with inline bar */
.prayer-footer {
padding: 6px 10px;
font-size: 12px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
border-top: 1px solid #000;
background: linear-gradient(180deg, #3E3529, #2A2118);
flex-shrink: 0;
}
.prayer-footer-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.prayer-footer-label .prayer-pts {
font-weight: bold;
}
.prayer-footer-bar {
height: 10px;
background: #1a1a3a;
border: 1px solid #000;
border-radius: 2px;
overflow: hidden;
}
.prayer-footer-fill {
height: 100%;
background: linear-gradient(180deg, #5588ee, #3366cc, #1a3399);
transition: width 0.15s ease;
border-radius: 1px;
}
/* Active prayer summary strip */
.prayer-summary {
padding: 4px 10px;
font-size: 10px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
text-align: center;
border-top: 1px solid #000;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex-wrap: wrap;
}
.prayer-summary-icon {
width: 16px;
height: 16px;
image-rendering: pixelated;
vertical-align: middle;
}
.prayer-summary-name {
color: #c8a84e;
}
.prayer-drain-total {
color: var(--muted);
font-size: 10px;
margin-left: 4px;
}
/* Left-col bottom wrapper — flex row in rebrand to split chat + timer hub */
.left-col-bottom {
display: contents; /* no layout impact by default */
flex-shrink: 0;
}
body.rebrand .left-col-bottom {
display: block;
position: relative;
min-height: 0;
overflow: hidden;
}
body.rebrand .left-col-bottom .chatbox {
width: calc(100% - 30px);
transition: width 0.3s ease;
}
body.rebrand .left-col-bottom .chatbox.timer-expanded {
width: 75%;
}
/* Timer hub — only visible in rebrand */
.timer-hub {
display: none;
}
body.rebrand .timer-hub {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30px;
background: linear-gradient(180deg, #2a2314, #1e1a10);
border: 8px solid #494034;
border-top: 10px solid #3E3529;
border-left: none;
box-shadow: inset 0 0 0 2px #6B5D4F, 0 0 0 3px #000;
overflow: hidden;
min-width: 0;
transition: width 0.3s ease;
}
body.rebrand .timer-hub.expanded {
width: 25%;
}
.timer-hub-header {
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #5d5549, #4a4136);
border-bottom: 2px solid #000;
font-family: 'RS Bold', sans-serif;
font-size: 12px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
flex-shrink: 0;
}
.timer-hub-body {
position: absolute;
top: 30px; /* below header (28px + 2px border) */
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
padding: 4px;
display: flex;
flex-direction: column;
gap: 3px;
}
.timer-hub-empty {
color: #666;
font-size: 11px;
text-align: center;
padding: 12px 6px;
font-family: 'RS Plain', sans-serif;
}
.timer-hub-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 5px 6px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 3px;
}
.timer-hub-row.ready {
background: rgba(0,200,83,0.08);
border-color: rgba(0,200,83,0.2);
cursor: pointer;
pointer-events: auto;
}
.timer-hub-name {
font-family: 'RS Plain', sans-serif;
font-size: 11px;
color: #e8c9a0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.timer-hub-row.ready .timer-hub-name {
color: #00ff00;
}
.timer-hub-bar-wrap {
display: flex;
align-items: center;
gap: 4px;
}
.timer-hub-bar {
flex: 1;
height: 4px;
background: #1a1610;
border-radius: 2px;
overflow: hidden;
}
.timer-hub-fill {
height: 100%;
background: linear-gradient(90deg, #2980b9, #3498db);
border-radius: 2px;
transition: width 1s linear;
}
.timer-hub-row.ready .timer-hub-fill {
background: linear-gradient(90deg, #00c853, #00e676);
}
.timer-hub-time {
font-size: 10px;
color: #999;
white-space: nowrap;
font-family: 'RS Plain', sans-serif;
min-width: 36px;
text-align: right;
}
.timer-hub-row.ready .timer-hub-time {
color: #00ff00;
}
.timer-hub-icon {
width: 16px;
height: 16px;
image-rendering: pixelated;
vertical-align: middle;
margin-right: 3px;
}
/* Rebrand overrides for timer hub — match chatbox frame */
body.rebrand .timer-hub {
background: var(--chat-bg);
border: 8px solid #494034;
border-top: 10px solid #3E3529;
border-left: none;
box-shadow: inset 0 0 0 2px #6B5D4F, 0 0 0 3px #000;
}
body.rebrand .timer-hub-header {
background: linear-gradient(180deg, #442E24, #3C2A22, #302220);
border-bottom: 2px solid #221814;
}
body.rebrand .timer-hub-body {
background: linear-gradient(180deg, #221814, #1C1210);
box-shadow: inset 0 4px 8px rgba(0,0,0,0.4);
}
body.rebrand .timer-hub-icon {
image-rendering: auto;
}
/* Timer hub collapsed state (default) — vertical header, hide body */
body.rebrand .timer-hub:not(.expanded) .timer-hub-header {
writing-mode: vertical-rl;
text-orientation: mixed;
height: 100%;
width: 100%;
padding: 8px 0;
font-size: 11px;
letter-spacing: 1px;
}
body.rebrand .timer-hub:not(.expanded) .timer-hub-body {
display: none;
}
/* Hide old chatbox-tab timers in rebrand mode (moved to timer hub) */
body.rebrand #quest-timer-display,
body.rebrand #farming-patch-display {
display: none !important;
}
/* Hide timer hub on mobile */
@media (max-width: 768px) {
.left-col-bottom { display: contents !important; }
.timer-hub { display: none !important; }
}
/* =============================================
CHATBOX (OSRS parchment style)
============================================= */
.chatbox-splitter {
height: 10px;
cursor: row-resize;
background: #1a1610;
flex-shrink: 0;
position: relative;
z-index: 10;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.chatbox-splitter::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 2px;
background: #5a5040;
border-radius: 1px;
}
.chatbox-splitter:hover::after,
.chatbox-splitter:active::after {
background: #8a7a60;
}
.chatbox {
position: relative;
height: 240px;
flex-shrink: 0;
background: #d1c4a1;
display: flex;
flex-direction: column;
overflow: hidden;
border: 8px solid #494034;
border-top: 10px solid #3E3529;
box-shadow: inset 0 0 0 2px #6B5D4F, 0 0 0 3px #000;
}
/* Short desktop screens (e.g. Pixel Fold unfolded ~700px tall) */
@media (min-width: 769px) and (max-height: 800px) {
.chatbox {
height: 140px;
flex-shrink: 1;
}
}
.chatbox-inner {
flex: 1;
overflow-y: auto;
padding: 6px 12px;
background: linear-gradient(180deg, #d8cba8, #c9bc99);
box-shadow: inset 0 4px 8px rgba(0,0,0,0.4);
}
.chatbox-tabs {
display: flex;
height: 32px;
background: #2A2118;
border-top: 2px solid #000;
gap: 1px;
padding: 0 1px;
flex-shrink: 0;
}
.chatbox-tab {
padding: 0 14px;
font-size: 18px;
font-weight: 600;
color: var(--white);
background: linear-gradient(180deg, #6B5D4F 0%, #5A4E40 30%, #494034 70%, #3E3529 100%);
border: 1px solid #2A2118;
border-bottom: none;
border-top: 1px solid #6B5D4F;
cursor: pointer;
font-family: 'RS Plain', 'Times New Roman', serif;
white-space: nowrap;
text-shadow: 1px 1px 0 #000;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.chatbox-tab:hover {
background: linear-gradient(180deg, #7B6D5F, #5A4E40, #494034);
}
.chatbox-tab.active {
background: linear-gradient(180deg, #7B6D5F 0%, #6B5D4F 30%, #5A4E40 100%);
color: var(--gold);
border-top: 1px solid #8B7D6F;
}
.chatbox-tab .tab-state {
font-size: 9px;
color: #4CAF50;
display: block;
line-height: 1;
}
.pm-badge {
position: absolute;
top: -4px;
right: -4px;
background: #e33;
color: #fff;
font-size: 9px;
font-weight: 700;
min-width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
border-radius: 7px;
padding: 0 3px;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Custom tab gear icon */
.custom-tab-gear {
font-size: 12px;
opacity: 0.7;
cursor: pointer;
margin-left: 2px;
}
.custom-tab-gear:hover { opacity: 1; }
/* Custom tab config overlay */
.custom-tab-config-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: var(--z-confirm);
display: flex; align-items: center; justify-content: center;
}
.custom-tab-config-panel {
background: #3C2A22;
border: 2px solid #5E4438;
border-radius: 6px;
padding: 12px 16px;
min-width: 200px;
color: #e0d0c0;
font-family: 'Lexend', sans-serif;
font-size: 14px;
}
.custom-tab-config-title {
font-size: 16px;
font-weight: 700;
color: #FF981F;
margin-bottom: 8px;
text-align: center;
}
.custom-tab-config-row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
cursor: pointer;
}
.custom-tab-config-row:hover { color: #fff; }
.custom-tab-config-row input[type="checkbox"] {
accent-color: #FF981F;
width: 16px; height: 16px;
cursor: pointer;
}
/* Player name context menu (right-click) */
.player-ctx-menu {
position: fixed;
z-index: var(--z-menu);
background: linear-gradient(180deg, #3E3529, #2A2118);
border: 2px solid #000;
box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
border-radius: 3px;
min-width: 120px;
padding: 2px 0;
font-family: 'RS Plain', serif;
}
.player-ctx-title {
padding: 4px 10px;
color: #FF981F;
font-size: 13px;
font-weight: 700;
border-bottom: 1px solid rgba(255,255,255,0.08);
white-space: nowrap;
}
.player-ctx-item {
padding: 4px 10px;
color: #ccc;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
transition: background 0.1s, color 0.1s;
}
.player-ctx-item:hover {
background: rgba(255,152,31,0.15);
color: #FFD700;
}
[data-player] {
cursor: pointer;
}
.chat-line {
padding: 1px 0;
font-size: 22px;
font-family: 'RS Plain', 'Times New Roman', serif;
color: #ffff00;
line-height: 1.3;
}
.chat-line .log-xp { color: #3F681C; }
.chat-line .log-gold { color: #7F6A00; font-family: 'RS Bold', 'RS Plain', serif; }
.chat-line .log-item { color: #005F00; }
.chat-line .log-bad { color: #FF0000; }
.chat-line .log-level { color: #000080; font-family: 'RS Bold', 'RS Plain', serif; }
/* Celebrations are gold — red is reserved for bad news (.log-bad) */
.chat-line .log-unique { color: #FFB000; font-weight: 700; }
.chat-line .log-rare { color: #FFB000; font-weight: 700; }
.chat-line .log-chat-name { color: #66E3FF; font-family: 'RS Bold', 'RS Plain', serif; }
.chat-line .log-chat-mod { color: #FFD700; }
.chat-line .log-chat-msg { color: #E6F4FF; white-space: pre-wrap; }
.chat-line .log-clan-tag { color: #FF981F; font-size: 0.85em; font-weight: bold; }
.chat-line .log-clan-only-tag { color: #2ECC40; font-size: 0.85em; font-weight: bold; }
.chat-line .log-clan-only-msg { color: #2ECC40; }
.clan-rank-icon { font-size: 12px; margin-right: 2px; }
.chat-line .log-chat-bot { color: #1A8A1A; font-family: 'RS Bold', 'RS Plain', serif; }
.chat-line .log-chat-bot-msg { color: #1A8A1A; }
.chat-line .log-pm-label { color: #00FFFF; font-family: 'RS Bold', 'RS Plain', serif; }
.chat-line .log-pm-msg { color: #800080; }
.chat-line .log-server-msg { color: #9400D3; font-family: 'RS Bold', 'RS Plain', serif; }
.chat-mod-crown {
width: 20px; height: 20px;
vertical-align: text-bottom;
margin-right: 4px;
image-rendering: pixelated;
}
.chat-input-row {
display: flex;
padding: 2px 4px;
background: #c0b48a;
border-top: 1px solid #9e9474;
flex-shrink: 0;
}
.chat-input {
flex: 1;
font-family: 'RS Plain', 'Times New Roman', serif;
font-size: 20px;
padding: 2px 8px;
border: 1px solid #494034;
background: #e8dfc0;
color: #0000FF;
outline: none;
border-radius: 0;
}
.chat-input::placeholder { color: #888; font-size: 18px; }
.chat-input:focus { background: #f0e8d0; border-color: #3E3529; }
/* =============================================
COMBAT STYLES TAB (OSRS-style)
============================================= */
.combat-tab-head {
display: flex;
align-items: center;
gap: 8px;
}
.combat-tab-wep-icon {
width: 28px;
height: 28px;
image-rendering: pixelated;
}
.combat-tab-head-text {
display: flex;
flex-direction: column;
}
.combat-tab-wep-name {
font-size: 13px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.combat-tab-combat-lvl {
font-size: 11px;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.combat-tab-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px 40px;
background: var(--cell-bg);
}
.combat-tab-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 10px 6px;
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
border: 2px solid #6E5647;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, transform 0.15s, box-shadow 0.2s, border-color 0.15s;
border-radius: 0;
-webkit-mask: none;
mask: none;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
}
.combat-tab-btn:hover {
border-color: #8A6A54;
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.09),
0 4px 12px rgba(0,0,0,0.35);
}
.combat-tab-btn.active {
border-color: #FFD700;
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
body.rebrand .combat-tab-btn {
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
border: 2px solid #6E5647;
border-radius: 0;
-webkit-mask: none;
mask: none;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
transition: background 0.15s, transform 0.15s, box-shadow 0.2s, border-color 0.15s;
}
body.rebrand .combat-tab-btn:hover {
border-color: #8A6A54;
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.09),
0 4px 12px rgba(0,0,0,0.35);
}
body.rebrand .combat-tab-btn.active {
border-color: #FFD700;
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
.icon-combat-style {
width: 32px;
height: 32px;
image-rendering: pixelated;
}
.cs-name {
font-size: 12px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.cs-spell-info {
font-size: 9px;
color: #aaa;
text-shadow: 1px 1px 0 #000;
line-height: 1.1;
}
.combat-tab-retaliate {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 40px 8px;
padding: 8px;
background: #5a5043;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(31deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 3px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, transparent 3px),
repeating-linear-gradient(174deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 4px);
border: 1px solid rgba(180, 160, 120, 0.25);
font-size: 12px;
font-weight: 700;
color: var(--gold);
cursor: pointer;
font-family: inherit;
text-shadow: 1px 1px 0 #000;
text-align: center;
line-height: 1.3;
-webkit-mask:
radial-gradient(circle 5px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 5px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 5px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 5px at 100% 100%, transparent 98%, black) bottom right;
-webkit-mask-size: 51% 51%;
-webkit-mask-repeat: no-repeat;
mask:
radial-gradient(circle 5px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 5px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 5px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 5px at 100% 100%, transparent 98%, black) bottom right;
mask-size: 51% 51%;
mask-repeat: no-repeat;
}
.combat-tab-retaliate.active {
background: #6b2a1a;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(31deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 3px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, transparent 3px),
repeating-linear-gradient(174deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 4px);
}
.combat-tab-oh-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px 4px;
border-top: 1px solid #555;
margin-top: 2px;
}
.combat-tab-oh-label {
font-size: 13px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.combat-tab-category {
padding: 6px;
text-align: center;
font-size: 11px;
color: var(--gold);
background: #3b3024;
border-top: 1px solid #000;
text-shadow: 1px 1px 0 #000;
}
/* =============================================
FLOATING TEXT & LEVEL UP
============================================= */
.float-text {
position: absolute;
top: 8px;
right: 10px;
font-size: 14px;
font-weight: 800;
pointer-events: none;
animation: floatUp 0.9s ease-out forwards;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
z-index: 20;
}
@keyframes floatUp {
0% { opacity:1; transform: translateY(0); }
100% { opacity:0; transform: translateY(-60px); }
}
/* OSRS-style XP drops */
.xp-drop {
position: fixed; /*absolute*/
top: 280px;
right: 10px;
display: flex;
align-items: center;
gap: 3px;
pointer-events: none;
animation: xpDrop 1.5s ease-out forwards;
z-index: 115; /* Default: 50 */
white-space: nowrap;
}
.xp-drop-icon {
width: 22px;
height: 22px;
image-rendering: pixelated;
}
.xp-drop-val {
font-family: 'Runescape Small', 'Runescape UF', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
@keyframes xpDrop {
0% { opacity: 1; transform: translateY(0); }
60% { opacity: 1; }
100% { opacity: 0; transform: translateY(-230px); }
}
/* ===== Ember Level-Up Splash ===== */
.ember-levelup {
position: absolute;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
}
.ember-lu-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(212,133,74,0.10) 0%, rgba(28,22,16,0.93) 70%);
animation: ember-fade-in 0.3s ease-out both;
}
.ember-lu-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
/* Copper ring around icon */
.ember-lu-ring {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid transparent;
background:
radial-gradient(circle, transparent 55%, #201812 56%) padding-box,
conic-gradient(from 0deg, #A86030, #D4854A, #FF981F, #D4854A, #A86030, rgba(168,96,48,0.2), #A86030) border-box;
box-shadow: 0 0 30px rgba(212,133,74,0.4), 0 0 60px rgba(212,133,74,0.15), inset 0 0 20px rgba(212,133,74,0.15);
display: flex;
align-items: center;
justify-content: center;
animation: ember-ring-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both, ember-ring-sweep 3s cubic-bezier(0.2,0,0.2,1) 0.5s infinite;
position: relative;
}
/* Faint outer orbit ring */
.ember-lu-ring::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid rgba(212,133,74,0.2);
animation: ember-ring-spin 12s linear reverse infinite;
}
/* Impact flash — bright copper flare behind icon on entrance */
.ember-lu-ring::after {
content: '';
position: absolute;
inset: -30px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,133,74,0.7) 0%, rgba(255,152,31,0.3) 40%, transparent 70%);
animation: ember-flash 0.8s ease-out 0.15s both;
pointer-events: none;
}
/* Shockwave — expanding ring burst */
.ember-lu-shockwave {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid rgba(212,133,74,0.6);
box-shadow: 0 0 20px rgba(212,133,74,0.3), inset 0 0 20px rgba(212,133,74,0.1);
animation: ember-shockwave 0.8s ease-out 0.2s both;
pointer-events: none;
}
.ember-levelup.is-99 .ember-lu-shockwave {
border-color: rgba(255,152,31,0.7);
box-shadow: 0 0 30px rgba(255,152,31,0.4), inset 0 0 30px rgba(255,152,31,0.15);
}
/* 99 mastery — double ring */
.ember-levelup.is-99 .ember-lu-ring {
background:
radial-gradient(circle, transparent 55%, #201812 56%) padding-box,
conic-gradient(from 0deg, #D4854A, #FF981F, #EDE4D8, #FF981F, #D4854A, rgba(212,133,74,0.2), #D4854A) border-box;
box-shadow: 0 0 40px rgba(212,133,74,0.6), 0 0 80px rgba(255,152,31,0.2), inset 0 0 25px rgba(212,133,74,0.2);
animation: ember-ring-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both, ember-ring-sweep 2s cubic-bezier(0.2,0,0.2,1) 0.5s infinite;
}
.ember-levelup.is-99 .ember-lu-ring::before {
inset: -12px;
border-width: 2px;
border-color: #FF981F;
box-shadow: 0 0 15px rgba(255,152,31,0.3);
}
.ember-lu-icon {
display: flex;
align-items: center;
justify-content: center;
animation: ember-icon-in 0.6s cubic-bezier(0.22,1.8,0.36,1) 0.1s both;
}
.ember-lu-icon .ember-lu-img {
width: 80px;
height: 80px;
filter: drop-shadow(0 0 12px rgba(212,133,74,0.5));
animation: ember-glow-pulse 2s ease-in-out 0.6s infinite;
}
/* Title — big level number */
.ember-lu-title {
font: 700 42px/1 'Lexend', sans-serif;
color: #D4854A;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 0 0 20px rgba(212,133,74,0.5), 0 2px 4px rgba(0,0,0,0.8);
animation: ember-text-in 0.4s ease-out 0.25s both;
}
/* 99 mastery title — animated gradient */
.ember-levelup.is-99 .ember-lu-title {
background: linear-gradient(90deg, #D4854A, #FF981F, #EDE4D8, #FF981F, #D4854A);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: ember-text-in 0.4s ease-out 0.25s both, ember-title-shimmer 3s linear 0.7s infinite;
}
/* Mastery label (99 only) */
.ember-lu-mastery {
font: 600 14px/1 'Lexend', sans-serif;
color: #FF981F;
text-transform: uppercase;
letter-spacing: 6px;
text-shadow: 0 0 12px rgba(255,152,31,0.4);
animation: ember-text-in 0.4s ease-out 0.2s both;
}
.ember-lu-skill {
font: 600 20px/1 'Lexend', sans-serif;
color: #EDE4D8;
text-transform: uppercase;
letter-spacing: 2px;
animation: ember-text-in 0.4s ease-out 0.35s both;
}
.ember-lu-flavor {
font: 400 14px/1 'Lexend', sans-serif;
color: #9C8878;
animation: ember-text-in 0.4s ease-out 0.45s both;
}
/* Ember particle container */
.ember-lu-embers {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.ember-particle {
position: absolute;
border-radius: 50%;
animation: ember-particle-rise var(--dur) ease-out var(--delay) both;
opacity: 0;
}
/* Exit animation applied via JS class */
.ember-levelup.ember-exit .ember-lu-backdrop,
.ember-levelup.ember-exit .ember-lu-embers {
animation: ember-fade-out 0.6s ease-in both;
}
.ember-levelup.ember-exit .ember-lu-content {
animation: ember-scale-out 0.6s ease-in both;
}
/* Viewport shake for 99 */
.viewport.ember-shake {
animation: ember-shake 0.3s ease-out;
}
/* --- Keyframes --- */
@keyframes ember-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ember-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes ember-scale-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.85); }
}
@keyframes ember-ring-in {
0% { opacity: 0; transform: scale(0.1) rotate(-120deg); }
60% { opacity: 1; transform: scale(1.15) rotate(8deg); }
80% { transform: scale(0.95) rotate(-3deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes ember-ring-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes ember-ring-sweep {
0% { transform: rotate(0deg); }
70% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }
}
@keyframes ember-icon-in {
0% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1.25); }
75% { transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes ember-flash {
0% { opacity: 0; transform: scale(0.5); }
30% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(2); }
}
@keyframes ember-shockwave {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(4); }
}
@keyframes ember-text-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ember-glow-pulse {
0%, 100% { filter: drop-shadow(0 0 12px rgba(212,133,74,0.3)); }
50% { filter: drop-shadow(0 0 24px rgba(212,133,74,0.7)); }
}
@keyframes ember-title-shimmer {
0% { background-position: -300% center; }
100% { background-position: 300% center; }
}
@keyframes ember-particle-rise {
0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1); }
15% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0); }
}
@keyframes ember-shake {
0%, 100% { transform: translate(0, 0); }
15% { transform: translate(-2px, 1px); }
30% { transform: translate(2px, -1px); }
45% { transform: translate(-1px, -2px); }
60% { transform: translate(1px, 2px); }
75% { transform: translate(-2px, -1px); }
}
/* =============================================
MONSTER HP BAR
============================================= */
.monster-hp-wrap {
margin-bottom: 8px;
width: 260px;
position: relative;
overflow: visible;
}
.monster-hp-top-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
}
.monster-hp-label {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--muted);
flex: 1;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.monster-hp-bottom-row {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.monster-hp-bottom-row .boss-phase-checks {
margin-top: 0;
flex: 1;
}
.superior-toggle {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
font-size: 11px;
color: #e0d8c0;
user-select: none;
-webkit-user-select: none;
}
.superior-toggle:hover {
color: #fff;
}
.superior-toggle .osrs-checkbox {
width: 14px;
height: 14px;
margin-left: 0;
}
/* Boss phase checkmarks */
/* Weapon rows with inline spec counters */
.weapon-row { display:flex; align-items:center; gap:4px; flex-wrap: wrap; }
.weapon-row-spec { opacity:0.85; }
.weapon-speed-stat {
font-size: 10px;
color: rgba(200,180,140,0.75);
font-family: 'Lexend', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: 0.3px;
white-space: nowrap;
margin-left: 2px;
}
.weapon-speed-stat::before {
content: "\2694 "; /* crossed swords */
font-size: 9px;
opacity: 0.6;
}
.spec-counter-inline { display:inline-flex; align-items:center; gap:3px; margin-left:auto; }
.spec-counter-bar {
display:inline-block; width:40px; height:6px;
background:#1a1a1a; border:1px solid #555;
border-radius:2px; overflow:hidden;
}
.spec-counter-bar-slot { border-color:#7a5; }
.spec-counter-fill {
display:block; height:100%;
background:linear-gradient(to right, #ff981f, #ffcc00);
width:0%; transition:width 0.15s ease;
}
.spec-counter-fill-slot { background:linear-gradient(to right, #55aa55, #88dd55); }
.spec-counter-bar-soul { border-color:#a44; }
.spec-counter-fill-soul { background:linear-gradient(to right, #aa3333, #dd5555); }
.spec-counter-soul .spec-counter-text { color:#dd5555; }
.spec-counter-text { font-size:10px; color:#ff981f; min-width:20px; }
/* Debuff icons on monster HP bar */
#spec-debuff-icons { display:inline-flex; gap:3px; margin-left:4px; vertical-align:middle; }
.spec-debuff-icon {
display:inline-flex; align-items:center; gap:1px;
background:#2a2015; border:1px solid #4a3a2a;
border-radius:3px; padding:1px 3px; font-size:9px; color:#ff6666;
height:18px; line-height:18px; vertical-align:middle; white-space:nowrap;
}
.spec-debuff-icon.spec-debuff-buff { color:#66ff66; }
.spec-debuff-icon img { width:14px; height:14px; image-rendering:pixelated; }
/* Spec weapon info in equipment panel */
.spec-weapon-info {
display: flex;
flex-direction: column;
margin-left: 8px;
justify-content: center;
}
.spec-weapon-name {
color: #c9a86c;
font-size: 11px;
font-weight: 600;
}
.spec-weapon-desc {
color: #888;
font-size: 10px;
}
.dps-meter {
font-size: 11px;
color: #aaa;
margin-left: auto;
min-height: 14px;
min-width: 70px;
text-align: right;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.boss-phase-checks {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 4px;
}
.boss-phase-check {
width: 28px;
height: 28px;
position: relative;
border: 2px solid #3a342c;
background: rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
}
.boss-phase-check img {
width: 22px;
height: 22px;
image-rendering: pixelated;
}
.boss-phase-check.active {
border-color: #FF981F;
box-shadow: 0 0 4px rgba(255,152,31,0.5);
}
.boss-phase-check.completed {
border-color: #00cc00;
}
.boss-phase-check .phase-tick {
position: absolute;
bottom: -2px;
right: -2px;
font-size: 14px;
color: #00cc00;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
font-weight: bold;
line-height: 1;
}
/* Phase tabs in monster info */
.mi-phase-tabs {
display: flex;
gap: 2px;
margin-bottom: 6px;
border-bottom: 1px solid #1a1610;
padding-bottom: 4px;
}
.mi-phase-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 6px;
background: rgba(0,0,0,0.2);
border: 1px solid #3a342c;
color: #c0b8a8;
font-family: 'RS Plain', serif;
font-size: 12px;
text-shadow: 1px 1px 0 #000;
cursor: pointer;
}
.mi-phase-tab img {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.mi-phase-tab.active {
background: rgba(255,152,31,0.15);
border-color: #FF981F;
color: #FF981F;
}
.mi-phase-tab:hover:not(.active) {
background: rgba(255,255,255,0.05);
}
.monster-hp-bar {
height: 22px;
background: #ff0000;
overflow: hidden;
border: 1px solid #000;
}
.monster-hp-fill {
height: 100%;
background: #00cc00;
transition: width 0.15s ease;
}
/* Player HP Bar */
.player-hp-wrap {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 260px;
}
.player-hp-top-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
.player-hp-label {
font-size: 12px;
color: var(--muted);
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.player-hp-left {
display: flex;
align-items: center;
gap: 4px;
}
.player-hp-bar {
height: 18px;
background: #ff0000;
overflow: visible;
border: 1px solid #000;
position: relative;
}
.player-hitsplat {
position: absolute !important;
top: 50% !important;
transform: translate(-50%, -50%);
width: 28px !important;
height: 28px !important;
font-size: 12px !important;
}
.guthan-heal {
position: absolute !important;
top: 50% !important;
width: auto !important;
height: auto !important;
background: none !important;
color: #00cc00;
font-size: 14px !important;
font-weight: bold;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
animation: guthanFloat 0.8s ease-out forwards;
pointer-events: none;
z-index: 25;
}
@keyframes guthanFloat {
0% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
30% { transform: translate(-50%, -80%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -120%) scale(0.9); opacity: 0; }
}
.player-hp-fill {
height: 100%;
background: #00cc00;
transition: width 0.15s ease;
}
#fatigue-indicator {
color: #ff9900;
font-weight: bold;
font-size: 11px;
animation: fatiguePulse 1.5s infinite;
}
@keyframes fatiguePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.fatigued .viewport {
filter: sepia(0.2) brightness(0.9);
}
/* Player prayer bar */
.player-prayer-row {
margin-top: 4px;
}
.player-prayer-top-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
.player-prayer-label {
font-size: 12px;
color: var(--muted);
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
/* Prayer potion shanks */
.prayer-shanks-wrap {
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.prayer-shanks {
display: flex;
justify-content: center;
gap: 2px;
padding: 2px 0;
}
.prayer-shank {
width: 16px;
height: 16px;
image-rendering: pixelated;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.prayer-shank.empty {
opacity: 0.15;
filter: brightness(0.4) saturate(0);
}
.prayer-shank.partial {
filter: brightness(0.7) saturate(0.5);
}
.prayer-shanks.surplus .prayer-shank {
animation: prayerSurplusGlow 1.8s ease-in-out infinite;
}
.prayer-shanks.surplus .prayer-shank:nth-child(2) { animation-delay: 0.1s; }
.prayer-shanks.surplus .prayer-shank:nth-child(3) { animation-delay: 0.2s; }
.prayer-shanks.surplus .prayer-shank:nth-child(4) { animation-delay: 0.3s; }
.prayer-shanks.surplus .prayer-shank:nth-child(5) { animation-delay: 0.4s; }
.prayer-shanks.surplus .prayer-shank:nth-child(6) { animation-delay: 0.5s; }
.prayer-shanks.surplus .prayer-shank:nth-child(7) { animation-delay: 0.6s; }
.prayer-shanks.surplus .prayer-shank:nth-child(8) { animation-delay: 0.7s; }
.prayer-shanks.surplus .prayer-shank:nth-child(9) { animation-delay: 0.8s; }
.prayer-shanks.surplus .prayer-shank:nth-child(10) { animation-delay: 0.9s; }
@keyframes prayerSurplusGlow {
0%, 100% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
50% { filter: brightness(1.4) drop-shadow(0 0 4px #6699ff); }
}
/* Prayer shanks hover tooltip */
.prayer-shanks-tip {
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 6px;
background: var(--panel-bg);
border: 1px solid #000;
border-top-color: var(--frame-hi);
border-left-color: var(--frame-hi);
padding: 6px 8px;
z-index: 200;
white-space: nowrap;
box-shadow: 2px 3px 8px rgba(0,0,0,0.6);
}
.prayer-shanks-tip-row {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 0;
font-size: 12px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.prayer-shanks-tip-row img {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.prayer-shanks-tip-qty {
color: var(--muted);
margin-left: auto;
padding-left: 12px;
}
.prayer-shanks-tip-restore {
color: #6699ff;
font-size: 11px;
}
.prayer-shanks-tip-total {
border-top: 1px solid #555;
margin-top: 4px;
padding-top: 4px;
font-size: 11px;
color: #3366cc;
text-shadow: 1px 1px 0 #000;
}
.prayer-shanks-tip-empty {
font-size: 12px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
}
.player-prayer-bar {
height: 14px;
background: #1a1a3a;
overflow: hidden;
border: 1px solid #000;
}
.player-prayer-fill {
height: 100%;
background: #3366cc;
transition: width 0.15s ease;
}
.active-prayer-icons {
display: flex;
gap: 2px;
flex-wrap: wrap;
}
.active-prayer-icons img {
width: 18px;
height: 18px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));
}
/* Prayer + Potion icons shared row */
.prayer-potion-icons-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 3px;
}
/* Potion boost display */
.player-potion-row {
margin-left: auto;
}
.potion-tip-wrap {
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.active-potion-icons {
display: flex;
gap: 3px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
.potion-boost-icon {
position: relative;
display: inline-flex;
align-items: center;
gap: 1px;
background: rgba(0,0,0,0.35);
border-radius: 3px;
padding: 1px 4px 1px 1px;
border: 1px solid rgba(255,152,31,0.3);
}
.potion-boost-icon img {
width: 18px;
height: 18px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));
}
.potion-boost-val {
font-size: 11px;
font-weight: bold;
color: #ff8800;
text-shadow: 1px 1px 1px #000;
}
.potion-tip {
position: absolute;
bottom: 100%;
right: 0;
background: #1a1a1a;
border: 1px solid #555;
border-radius: 4px;
padding: 6px 8px;
z-index: 200;
min-width: 180px;
font-size: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.potion-tip-row {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 0;
color: #ccc;
}
.potion-tip-row img {
width: 16px;
height: 16px;
image-rendering: pixelated;
}
.potion-tip-qty {
color: #999;
margin-left: auto;
font-size: 11px;
}
.potion-tip-total {
border-top: 1px solid #444;
margin-top: 4px;
padding-top: 4px;
color: #ff8800;
font-size: 11px;
}
.potion-tip-empty {
color: #666;
font-style: italic;
}
/* Supply orbs (mobile circular indicators for food & prayer reserves) */
.supply-orb {
display: none; /* hidden on desktop — desktop uses shanks */
position: relative;
width: 32px;
height: 32px;
flex-shrink: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.supply-orb-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.supply-orb-track {
stroke: #1a1208;
opacity: 0.6;
}
.supply-orb-fill {
transition: stroke-dashoffset 0.3s ease;
stroke-linecap: round;
}
.food-orb .supply-orb-fill { stroke: #cc8800; }
.prayer-orb .supply-orb-fill { stroke: #3366cc; }
.supply-orb-bg {
position: absolute;
inset: 4px;
border-radius: 50%;
background: radial-gradient(circle at 40% 38%, #3a3025, #1a1208);
box-shadow: inset 0 1px 4px rgba(0,0,0,0.7);
}
.supply-orb-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.8));
z-index: 1;
}
.supply-orb::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #494034;
border-top-color: #6B5D4F;
border-left-color: #5A4E40;
border-right-color: #3E3529;
border-bottom-color: #2A2118;
box-shadow: 0 0 0 1px #000, 0 1px 4px rgba(0,0,0,0.6);
pointer-events: none;
}
.supply-orb.surplus.food-orb {
animation: foodOrbGlow 1.8s ease-in-out infinite;
}
.supply-orb.surplus.prayer-orb {
animation: prayerOrbGlow 1.8s ease-in-out infinite;
}
@keyframes foodOrbGlow {
0%, 100% { filter: drop-shadow(0 0 0px transparent); }
50% { filter: drop-shadow(0 0 6px #cc8800) drop-shadow(0 0 2px #ffaa22); }
}
@keyframes prayerOrbGlow {
0%, 100% { filter: drop-shadow(0 0 0px transparent); }
50% { filter: drop-shadow(0 0 6px #3366cc) drop-shadow(0 0 2px #6699ff); }
}
/* Supply orb tap tooltip */
.supply-orb-tip {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
background: var(--panel-bg);
border: 1px solid #000;
border-top-color: var(--frame-hi);
border-left-color: var(--frame-hi);
padding: 6px 8px;
z-index: 200;
white-space: nowrap;
box-shadow: 2px 3px 8px rgba(0,0,0,0.6);
}
/* Player food reserve — Minecraft hunger-bar style discrete icons */
.food-shanks-wrap {
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.food-shanks {
display: flex;
justify-content: center;
gap: 2px;
padding: 2px 0;
}
.food-shank {
width: 16px;
height: 16px;
image-rendering: pixelated;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.food-shank.empty {
opacity: 0.15;
filter: brightness(0.4) saturate(0);
}
.food-shank.partial {
filter: brightness(0.7) saturate(0.5);
}
.food-shanks.surplus .food-shank {
animation: shankSurplusGlow 1.8s ease-in-out infinite;
}
.food-shanks.surplus .food-shank:nth-child(2) { animation-delay: 0.1s; }
.food-shanks.surplus .food-shank:nth-child(3) { animation-delay: 0.2s; }
.food-shanks.surplus .food-shank:nth-child(4) { animation-delay: 0.3s; }
.food-shanks.surplus .food-shank:nth-child(5) { animation-delay: 0.4s; }
.food-shanks.surplus .food-shank:nth-child(6) { animation-delay: 0.5s; }
.food-shanks.surplus .food-shank:nth-child(7) { animation-delay: 0.6s; }
.food-shanks.surplus .food-shank:nth-child(8) { animation-delay: 0.7s; }
.food-shanks.surplus .food-shank:nth-child(9) { animation-delay: 0.8s; }
.food-shanks.surplus .food-shank:nth-child(10) { animation-delay: 0.9s; }
@keyframes shankSurplusGlow {
0%, 100% { filter: brightness(1) drop-shadow(0 0 0px transparent); }
50% { filter: brightness(1.4) drop-shadow(0 0 4px #ffaa22); }
}
/* Food shanks hover tooltip */
.food-shanks-tip {
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 6px;
background: var(--panel-bg);
border: 1px solid #000;
border-top-color: var(--frame-hi);
border-left-color: var(--frame-hi);
padding: 6px 8px;
z-index: 200;
white-space: nowrap;
box-shadow: 2px 3px 8px rgba(0,0,0,0.6);
}
.food-shanks-tip-row {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 0;
font-size: 12px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.food-shanks-tip-row img {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.food-shanks-tip-qty {
color: var(--muted);
margin-left: auto;
padding-left: 12px;
}
.food-shanks-tip-heal {
color: #00cc00;
font-size: 11px;
}
.food-shanks-tip-total {
border-top: 1px solid #555;
margin-top: 4px;
padding-top: 4px;
font-size: 11px;
color: #cc8800;
text-shadow: 1px 1px 0 #000;
}
.food-timer {
font-size: 10px;
color: #cc8800;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
line-height: 1;
}
.food-timer-mobile {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
color: #cc8800;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
line-height: 1;
pointer-events: none;
}
.prayer-timer {
font-size: 10px;
color: #cc8800;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
line-height: 1;
}
.prayer-timer-mobile {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
color: #cc8800;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
line-height: 1;
pointer-events: none;
}
.food-shanks-tip-empty {
font-size: 12px;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
}
/* =============================================
HITSPLATS (shared base for monster + player)
============================================= */
.hitsplat {
position: absolute;
width: 48px;
height: 48px;
background: url('../img/hitsplats/Red_hitsplat.png') center/contain no-repeat;
color: white;
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
z-index: 20;
pointer-events: none;
image-rendering: pixelated;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
animation: hitsplatPop 0.9s ease-out forwards;
}
.hitsplat.miss {
background-image: url('../img/hitsplats/Blue_hitsplat.png');
}
.hitsplat.max {
background-image: url('../img/hitsplats/Max_hitsplat.png');
}
body.rebrand .hitsplat {
background-image: url('../img/hitsplats/rebrand/Red_hitsplat.png');
image-rendering: auto;
width: 56px;
height: 56px;
font-size: 14px;
}
body.rebrand .hitsplat.miss {
background-image: url('../img/hitsplats/rebrand/Miss_hitsplat.png');
}
body.rebrand .hitsplat.max {
background-image: url('../img/hitsplats/rebrand/Max_hitsplat.png');
}
@keyframes hitsplatPop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
20% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
40% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -70%) scale(1); opacity: 0; }
}
/* =============================================
SCROLLBAR
============================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--frame-lo); }
::-webkit-scrollbar-thumb { background: var(--frame); }
/* =============================================
TOOLTIP (RuneLite-style)
============================================= */
.game-tooltip {
position: fixed;
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 11px;
line-height: 1.4;
z-index: var(--z-tooltip);
pointer-events: none;
white-space: nowrap;
}
.clog-kc-tooltip {
white-space: normal;
max-width: 200px;
max-height: 120px;
overflow-y: auto;
pointer-events: auto;
}
.bt-name {
color: #ff981f;
font-weight: 700;
}
.bt-price {
color: #ffff00;
}
.bt-ha {
color: #cccccc;
}
.bt-compare-divider {
display: block;
border-top: 1px solid #444;
margin: 2px 0;
}
.bt-equip {
color: #00ff80;
font-size: 10px;
}
/* =============================================
CONTEXT MENU (OSRS right-click style)
============================================= */
.ctx-menu {
position: fixed;
z-index: var(--z-menu);
min-width: 160px;
background: #3b3024;
border: 1px solid #000;
box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
font-size: 12px;
font-family: inherit;
}
.ctx-head {
padding: 4px 8px;
color: #ff981f;
font-weight: 700;
text-shadow: 1px 1px 0 #000;
background: #2A2118;
border-bottom: 1px solid #000;
white-space: nowrap;
}
.ctx-option {
padding: 4px 8px;
color: var(--white);
cursor: pointer;
white-space: nowrap;
text-shadow: 1px 1px 0 #000;
}
.ctx-option:hover {
background: #4a4035;
color: var(--gold);
}
/* =============================================
QUEST TAB (OSRS-style quest list)
============================================= */
/* quest-head, quest-filters removed — now uses rc-panel-head/rc-panel-tabs */
.quest-search-wrap {
padding: 4px 6px;
background: linear-gradient(180deg, #3E3529, #2A2118);
border-bottom: 1px solid #000;
}
.quest-search {
width: 100%;
box-sizing: border-box;
padding: 3px 6px;
font-family: 'RS Plain', serif;
font-size: 14px;
background: #1a1610;
color: var(--white);
border: 1px solid #0d0b08;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
outline: none;
}
.quest-search:focus {
border-color: var(--gold-dim);
}
.quest-search::placeholder {
color: var(--muted);
}
/* Quest detail view */
.quest-back-btn {
display: block;
width: 100%;
padding: 6px 8px;
font-size: 11px;
font-weight: 600;
color: var(--gold);
background: linear-gradient(180deg, #3E3529, #2A2118);
border: none;
border-bottom: 1px solid #000;
cursor: pointer;
font-family: inherit;
text-align: left;
text-shadow: 1px 1px 0 #000;
}
.quest-back-btn:hover { color: var(--white); }
.quest-detail-title {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
background: var(--cell-bg);
border-bottom: 1px solid #1a1610;
}
.quest-detail-name {
font-size: 14px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.quest-detail-diff {
font-size: 11px;
text-shadow: 1px 1px 0 #000;
}
.quest-detail-status {
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.quest-detail-status.complete {
background: #1a3a1a;
color: #00ff00;
border-bottom: 1px solid #000;
}
.quest-detail-status.available {
background: #3a3a1a;
color: #ffff00;
border-bottom: 1px solid #000;
}
.quest-detail-status.locked {
background: #3a1a1a;
color: #ff4444;
border-bottom: 1px solid #000;
}
.quest-detail-section {
padding: 8px 10px;
background: var(--cell-bg);
border-bottom: 1px solid #1a1610;
}
.quest-section-title {
font-size: 12px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
margin-bottom: 6px;
}
.quest-req {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
font-size: 12px;
}
.quest-req.met { color: var(--green) !important; }
.quest-req.unmet { color: var(--red) !important; }
.quest-req-icon {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.quest-req-lvl {
margin-left: auto;
font-size: 10px;
color: inherit;
opacity: 0.75;
}
.quest-reward {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
font-size: 12px;
color: var(--white);
}
.quest-complete-wrap {
padding: 10px;
background: var(--cell-bg);
}
.quest-complete-btn {
width: 100%;
padding: 8px 16px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
color: #1a1410;
background: linear-gradient(180deg, #D4854A, #B06830);
border: 1px solid #000;
box-shadow: inset 1px 1px 0 #E8A060, inset -1px -1px 0 #8A4A20;
border-radius: 3px;
cursor: pointer;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
transition: all 0.1s;
-webkit-tap-highlight-color: transparent;
}
.quest-complete-btn:hover {
background: linear-gradient(180deg, #E09558, #C07838);
}
.quest-complete-btn:active {
box-shadow: inset -1px -1px 0 #E8A060, inset 1px 1px 0 #8A4A20;
}
.quest-complete-btn.disabled {
background: linear-gradient(180deg, #442E24, #3C2A22);
box-shadow: inset 1px 1px 0 #5E4438, inset -1px -1px 0 #1E1410;
color: #6a5a4a;
cursor: not-allowed;
opacity: 0.5;
text-shadow: 1px 1px 0 #000;
}
/* Quest timer — cancel button */
.quest-cancel-btn {
background: linear-gradient(180deg, #8A3A3A, #6A2D2D) !important;
box-shadow: inset 1px 1px 0 #A04A4A, inset -1px -1px 0 #4A1A1A !important;
color: #ffcccc !important;
}
.quest-cancel-btn:hover {
background: linear-gradient(180deg, #9A4A4A, #7A3D3D) !important;
}
/* Quest detail — in-progress status */
.quest-detail-status.in-progress {
background: #1a2a3a;
color: #00ccff;
}
/* Quest lore block */
.quest-lore-block {
padding: 10px 12px;
margin: 0;
background: linear-gradient(135deg, #1a1408 0%, #2a1f10 50%, #1a1408 100%);
border-bottom: 1px solid #1a1610;
border-top: 1px solid rgba(193, 154, 80, 0.1);
}
.quest-lore-title {
font-size: 11px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
margin-bottom: 8px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.quest-lore-text {
font-size: 12px;
line-height: 1.6;
color: #c4b08a;
font-style: italic;
text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.quest-lore-toggle {
display: inline-block;
margin-top: 10px;
padding: 3px 8px;
font-size: 11px;
color: var(--gold);
background: rgba(193, 154, 80, 0.1);
border: 1px solid rgba(193, 154, 80, 0.3);
border-radius: 3px;
cursor: pointer;
transition: background 0.2s;
}
.quest-lore-toggle:hover {
background: rgba(193, 154, 80, 0.2);
}
.quest-lore-pre-hidden {
display: none;
}
.quest-lore-pre-visible {
display: block;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(193, 154, 80, 0.15);
}
/* Quest detail — timer display */
.quest-detail-timer {
text-align: center;
color: #00ccff;
font-size: 13px;
padding: 8px 0;
text-shadow: 1px 1px 0 #000;
}
.quest-timer-bar-detail {
width: 100%;
height: 6px;
background: #1a1a1a;
border-radius: 3px;
overflow: hidden;
margin-bottom: 6px;
}
.quest-timer-fill-detail {
height: 100%;
background: linear-gradient(90deg, #00aacc, #00ccff);
transition: width 1s linear;
}
/* Quest timer — footer bar (left of pause button) */
.quest-timer-display {
display: flex;
align-items: center;
gap: 4px;
padding: 0 8px;
white-space: nowrap;
}
/* When quest timer is visible, it takes the auto-margin, pause button stays flush right */
.quest-timer-display ~ .pause-btn { margin-left: 0; }
.quest-timer-display { margin-left: auto; }
.quest-timer-icon {
width: 20px;
height: 20px;
image-rendering: pixelated;
}
.quest-timer-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.quest-timer-name {
font-size: 11px;
font-weight: 700;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
.quest-timer-bar {
width: 110px;
height: 4px;
background: #1a1a1a;
border-radius: 2px;
overflow: hidden;
}
.quest-timer-fill {
height: 100%;
background: linear-gradient(90deg, #00aacc, #00ccff);
transition: width 1s linear;
}
.quest-timer-time {
font-size: 10px;
color: #cccccc;
text-shadow: 1px 1px 0 #000;
}
.quest-timer-extra {
display: flex;
align-items: center;
gap: 4px;
}
.quest-timer-divider {
width: 1px;
height: 24px;
background: #555;
margin: 0 4px;
}
/* =============================================
MOBILE NAV (hidden on desktop)
============================================= */
.mobile-nav { display: none; }
.mobile-tab-strip { display: none; }
/* =============================================
MOBILE LAYOUT — Split-screen redesign
Viewport (top) + Tab strip (middle) + Content (bottom)
No bottom sheets. No overlays. Always visible.
============================================= */
@media (max-width: 768px) {
html, body { overflow: hidden; height: 100%; }
.game {
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
background:
radial-gradient(circle at top, rgba(255, 152, 31, 0.08), transparent 40%),
linear-gradient(180deg, #18120c 0%, #0d0906 100%);
}
/* -------------------------------------------
TOP BAR — Compact (44px)
------------------------------------------- */
.topbar {
height: 44px;
min-height: 44px;
flex-shrink: 0;
flex-wrap: nowrap;
padding: 0 8px;
gap: 6px;
z-index: 120;
overflow: visible;
align-items: center;
}
.topbar::after { display: none; }
.topbar-left { gap: 6px; min-width: 0; flex-shrink: 1; }
.topbar-logo { width: 22px; height: 22px; margin-right: 0; }
.topbar-title {
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
flex: 0 1 auto;
line-height: 1;
}
.topbar-alpha { font-size: 7px; padding: 2px 4px; flex-shrink: 0; }
.topbar-online,
.topbar-roadmap,
.topbar-cloud-save { display: none !important; }
.topbar-support { margin-left: auto; padding: 1px 7px; }
.topbar-support .topbar-support-text { display: none; }
.topbar-stats { gap: 6px; margin-left: 0; flex-shrink: 0; }
.topbar-char-btn,
.topbar-stat {
min-height: 30px;
padding: 0 8px;
border-radius: 8px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.05);
display: flex;
align-items: center;
white-space: nowrap;
}
.topbar-char-btn { gap: 4px; font-size: 11px; }
.topbar-char-btn .stat-val {
max-width: clamp(36px, 8vw, 54px);
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.topbar-settings-btn {
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.05);
}
.topbar-settings-btn svg { width: 14px; height: 14px; }
/* -------------------------------------------
SECONDARY TOP BAR — Mobile (search + money + orb)
Sits directly under the main topbar. Eats viewport
space rather than overlaying — `.game` is a flex
column with overflow:hidden + 100dvh, so giving
this row a fixed height shrinks `.game-body`.
------------------------------------------- */
.topbar-secondary {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
height: 38px;
min-height: 38px;
padding: 4px 8px;
z-index: 110;
background:
linear-gradient(180deg, rgba(255,140,40,0.06), transparent 60%),
linear-gradient(180deg, #1a1410 0%, #120c08 100%);
border-bottom: 1px solid #000;
box-shadow:
inset 0 1px 0 rgba(255,170,80,0.10),
inset 0 -1px 0 rgba(0,0,0,0.6),
0 2px 6px rgba(0,0,0,0.4);
}
.topbar-secondary .global-search-wrap {
flex: 1 1 auto;
min-width: 0;
max-width: none;
}
.topbar-secondary .global-search-input {
height: 30px;
font-size: 14px;
padding: 4px 10px;
background: #0a0805;
border: 1px solid rgba(255,140,40,0.18);
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,170,80,0.04);
border-radius: 4px;
color: #ffd7a0;
}
.topbar-secondary .global-search-input::placeholder { color: #6b5840; }
.topbar-secondary .global-search-input:focus {
border-color: rgba(255,170,60,0.55);
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.7),
0 0 10px rgba(255,140,40,0.35);
outline: none;
}
.topbar-secondary .global-search-dropdown {
left: 0;
right: 0;
width: auto;
max-width: calc(100vw - 16px);
}
.topbar-secondary .topbar-stat {
flex-shrink: 0;
min-height: 30px;
padding: 0 8px;
gap: 4px;
font-size: 12px;
border-radius: 8px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,140,40,0.10);
display: flex;
align-items: center;
white-space: nowrap;
}
.topbar-secondary .topbar-coin-icon { width: 14px; height: 14px; }
.topbar-secondary .topbar-orb-icon { width: 14px; height: 14px; }
/* -------------------------------------------
GAME BODY — Vertical split layout
------------------------------------------- */
.game-body {
flex: 1;
flex-direction: column;
min-height: 0;
overflow: hidden;
position: relative;
}
/* -------------------------------------------
LEFT COL — Viewport area (top portion)
------------------------------------------- */
.left-col {
flex: 0 0 clamp(30vh, 38vh, 45vh);
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chatbox-splitter { display: none !important; }
.left-col-bottom { display: none !important; }
.game.mobile-chat-open .left-col-bottom { display: contents !important; }
.timer-hub { display: none !important; }
/* -------------------------------------------
VIEWPORT — Compact game view
------------------------------------------- */
.viewport {
flex: 1;
height: auto;
min-height: 140px;
max-height: none;
padding: 6px 10px;
overflow: hidden;
position: relative;
}
.vp-center {
gap: 4px;
width: 100%;
padding: 0 20px;
}
.action-status { top: 4px; left: 6px; font-size: 10px; }
/* Action icon — compact for split view (fluid sizing, no hard 380px breakpoint) */
.action-icon-wrap {
width: min(clamp(80px, 26vw, 110px), 110px);
height: min(clamp(80px, 26vw, 110px), 110px);
border-width: 2px;
}
.action-icon .icon-action {
width: min(clamp(44px, 14vw, 60px), 60px);
height: min(clamp(44px, 14vw, 60px), 60px);
}
.action-icon.monster .icon-action {
width: min(clamp(60px, 20vw, 90px), 90px);
height: min(clamp(60px, 20vw, 90px), 90px);
}
/* Raid hub — mobile compact layout */
.viewport:has(.raid-hub) {
overflow-y: auto !important;
overflow-x: hidden !important;
}
.raid-hub {
padding: 4px 2px 10px;
}
.raid-hub-title {
font-size: 13px;
margin-bottom: 4px;
}
.raid-hub-logo { margin-bottom: 4px; }
.raid-hub-logo .icon { width: 40px; height: 40px; }
.raid-hub-label {
font-size: 10px;
margin-bottom: 2px;
}
.raid-weapon-row {
gap: 4px;
margin-bottom: 4px;
}
.raid-weapon-slot {
min-width: 0;
flex: 1;
padding: 4px 3px;
gap: 2px;
}
.raid-weapon-icon { width: 26px; height: 26px; }
.raid-weapon-icon .icon-bank { width: 24px; height: 24px; }
.raid-weapon-name { font-size: 8px; max-width: 70px; }
.raid-weapon-style { font-size: 9px; }
.raid-weapon-count { font-size: 7px; }
.raid-boss-lineup {
gap: 2px;
margin-bottom: 2px;
}
.raid-lineup-icon { width: 28px; height: 28px; }
.raid-lineup-icon .icon { width: 26px; height: 26px; }
.raid-lineup-label { font-size: 6px; }
.raid-hub-req { font-size: 9px; margin: 2px 0; }
.raid-advanced-btn {
margin: 4px auto 0;
font-size: 10px;
padding: 3px 10px;
}
.raid-hub-footer { margin-top: 6px; gap: 4px; }
.raid-enter-btn {
padding: 6px 18px;
font-size: 12px;
}
.raid-auto-label { font-size: 11px; }
/* Raid loadout editor — mobile */
.raid-editor-panel {
width: 95vw !important;
max-height: 80vh !important;
}
.raid-advanced-panel {
width: 95vw !important;
max-height: 80vh !important;
}
/* Monster HP compact nameplate */
.monster-hp-wrap {
width: 100%;
max-width: 200px;
margin-bottom: 2px;
background: none;
border: none;
padding: 0;
}
.monster-hp-top-row { gap: 3px; margin-bottom: 1px; }
.monster-hp-label { font-size: 10px; }
.monster-hp-bar { height: 10px; }
.monster-hp-bottom-row { margin-top: 2px; gap: 3px; }
.boss-phase-check { width: 16px; height: 16px; border-width: 1px; }
.boss-phase-check img { width: 12px; height: 12px; }
.dps-meter { font-size: 9px; }
.superior-toggle { font-size: 9px; }
.superior-toggle .osrs-checkbox { width: 12px; height: 12px; }
/* Action info — compact card below icon */
.action-info {
margin-top: 2px;
max-width: 280px;
padding: 6px 10px;
background: rgba(18, 13, 9, 0.4);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.action-skill-name { font-size: 14px; }
.action-method-name { font-size: 11px; margin-top: 1px; }
.action-xp { font-size: 10px; margin-top: 1px; }
.action-cost { font-size: 10px; margin-top: 1px; }
.weapon-display { font-size: 10px; margin-top: 1px; }
.weapon-ammo-timer { font-size: 10px; }
/* Player HP — flanking vertical bars */
.player-hp-wrap {
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
transform: translateY(-50%) !important;
width: 100% !important;
pointer-events: none;
z-index: 5;
}
.player-hp-top-row { display: none !important; }
.player-prayer-top-row { display: none !important; }
.bar-with-orb {
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
pointer-events: auto;
}
.player-hp-bar {
width: 10px !important;
height: 70px !important;
background: #7a0000 !important;
border: 1px solid #000 !important;
border-radius: 3px !important;
overflow: hidden !important;
position: relative !important;
display: flex !important;
flex-direction: column-reverse !important;
}
.player-hp-fill {
width: 100% !important;
background: linear-gradient(0deg, #008800, #00cc00, #22ee22) !important;
transition: height 0.15s ease !important;
box-shadow: inset 0 0 4px rgba(0,255,0,0.2);
}
.food-orb {
display: flex !important;
margin-right: 0;
width: 26px;
height: 26px;
order: -1;
}
.supply-orb { display: none; margin-right: 0; }
.player-prayer-row { margin-top: 0 !important; }
.player-prayer-row .bar-with-orb {
position: absolute;
left: auto;
right: 4px;
top: 50%;
transform: translateY(-50%);
}
.player-prayer-bar {
width: 10px !important;
height: 70px !important;
background: #0a0a2a !important;
border: 1px solid #000 !important;
border-radius: 3px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column-reverse !important;
}
.player-prayer-fill {
width: 100% !important;
background: linear-gradient(0deg, #1a3399, #3366cc, #5588ee) !important;
transition: height 0.15s ease !important;
box-shadow: inset 0 0 4px rgba(50,100,255,0.2);
}
.prayer-orb {
display: flex !important;
margin-right: 0;
width: 26px;
height: 26px;
order: -1;
}
.active-prayer-icons {
position: absolute;
right: calc(100% + 3px);
top: 0;
flex-direction: column;
align-items: flex-end;
gap: 1px;
margin-top: 0;
}
.active-prayer-icons img { width: 14px; height: 14px; }
/* HP/Prayer bar number labels */
.player-hp-wrap .bar-with-orb::after {
content: attr(data-hp);
font-family: 'RS Plain', serif;
font-size: 9px;
color: #00cc00;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
white-space: pre-line;
text-align: center;
order: 1;
}
.player-prayer-row .bar-with-orb::after {
content: attr(data-prayer);
font-family: 'RS Plain', serif;
font-size: 9px;
color: #5588ee;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
white-space: pre-line;
text-align: center;
order: 1;
}
.food-timer-mobile, .prayer-timer-mobile { bottom: -108px !important; }
.food-shanks-wrap, .prayer-shanks-wrap { display: none !important; }
.food-timer, .prayer-timer { display: none !important; }
/* Hide action progress bar and mini indicator on mobile */
.action-progress { display: none !important; }
.hub-mini-indicator { display: none !important; }
/* Floating XP bar — keep desktop style (top-right box with icon) */
#xp-bar-float {
top: 4px !important;
right: 6px !important;
left: auto !important;
z-index: 20 !important;
padding: 4px 8px !important;
gap: 6px !important;
max-width: 180px !important;
width: auto !important;
border-radius: 3px !important;
}
.xpb-icon { width: 20px !important; height: 20px !important; display: block !important; }
.xpb-labels { font-size: 10px !important; }
.xpb-track { height: 5px !important; }
.xp-bar-wrap { max-width: 200px; margin-top: 2px; }
/* XP drops */
.xp-drop { top: 20px; right: 6px; }
.xp-drop-val { font-size: 13px; }
.xp-drop-icon { width: 14px; height: 14px; }
.float-text { font-size: 11px; top: 4px; right: 6px; }
.partyhat-overlay { top: -22px; width: 28px; height: 28px; transform: translateX(-60%) rotate(-20deg); }
.partyhat-overlay-right { transform: translateX(60%) rotate(20deg); }
.looting-bag-overlay { bottom: -12px; right: -14px; width: 40px; height: 40px; }
.looting-bag-overlay .lbag-icon { width: 26px; height: 26px; }
.quest-timer-display { padding: 0 4px; gap: 3px; }
.quest-timer-icon { width: 14px; height: 14px; }
.quest-timer-name { font-size: 9px; max-width: 70px; }
.quest-timer-bar { width: 50px; height: 3px; }
.quest-timer-time { font-size: 9px; }
/* Chat button — floating on viewport */
.mobile-chat-btn {
position: absolute;
bottom: 6px;
right: 6px;
z-index: 10;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
background: linear-gradient(180deg, #4A4030 0%, #2E261C 100%);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
padding: 5px 8px;
opacity: 0.9;
transition: all 0.15s ease;
}
.mobile-chat-btn:active {
transform: scale(0.95);
opacity: 1;
}
.mobile-chat-btn img {
width: 16px;
height: 16px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.mobile-chat-btn span {
font-size: 10px;
font-weight: 600;
color: #FFD700;
text-shadow: 1px 1px 0 #000;
}
/* Shop orbs — compact in viewport */
.shop-orbs { bottom: 6px; left: 6px; right: auto; }
.shop-hub-btn { padding: 3px 6px; gap: 3px; }
.shop-hub-btn img { width: 14px; height: 14px; }
.shop-hub-btn span { font-size: 9px; }
/* shop-hub-menu and inner now use rc-modal; tile + grid sizing
lives in the global @media (max-width: 600px) block above. */
.events-hub-btn { padding: 3px 6px; gap: 3px; bottom: 6px; left: 6px; }
.events-hub-btn img { width: 14px; height: 14px; }
.events-hub-btn span { font-size: 9px; }
.poh-hub-btn { padding: 3px 6px; gap: 3px; bottom: 36px; left: 6px; }
.poh-hub-btn img { width: 14px; height: 14px; }
.poh-hub-btn span { font-size: 9px; }
.shop-orbs { bottom: 30px; }
/* events-panel now uses rc-modal */
.events-header { padding: 8px 12px; }
.events-content { padding: 10px; }
.event-banner { padding: 12px 10px 10px; }
.event-title { font-size: 16px; }
.event-egg-row { padding: 10px; gap: 8px; }
.event-egg-icon-wrap { width: 36px; height: 36px; }
.event-egg-icon { width: 26px; height: 26px; }
.event-egg-name { font-size: 12px; }
/* -------------------------------------------
TAB STRIP — OSRS-style icon tabs between viewport and content
------------------------------------------- */
.mobile-tab-strip {
display: flex !important;
flex-shrink: 0;
height: 42px;
background: linear-gradient(180deg, #3d352b, #2c241c 50%, #201a14);
border: none;
overflow: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
gap: 0;
align-items: center;
justify-content: center;
z-index: 100;
order: 10;
position: relative;
}
.mobile-tab-strip::-webkit-scrollbar { display: none; }
#mobile-tab-strip {
background: linear-gradient(180deg, #3d352b, #2c241c 50%, #201a14);
}
#mobile-tab-strip::before {
display: none;
}
#mobile-tab-strip::after {
display: none;
}
.mts-btn {
flex: 1 1 0;
min-width: 0;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: transparent;
transition: transform 0.1s ease;
z-index: 1;
}
.mts-btn:active {
transform: scale(0.88);
}
.mts-btn.active::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: #FF981F;
box-shadow: 0 0 6px 2px rgba(255,152,31,0.5);
}
.mts-btn img {
width: 28px;
height: 28px;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.7));
opacity: 0.45;
transition: opacity 0.15s, filter 0.15s, transform 0.15s;
}
.mts-btn.active img {
opacity: 1;
filter: drop-shadow(0 0 5px rgba(255,152,31,0.45)) drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
transform: scale(1.12);
}
/* --- Center Bank button — same size as other buttons --- */
.mts-btn.mts-center {
flex: 1 1 0;
min-width: 0;
height: 42px;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
z-index: 1;
position: relative;
padding: 0;
}
.mts-btn.mts-center:active {
transform: scale(0.88);
}
.mts-btn.mts-center img {
width: 28px;
height: 28px;
opacity: 0.7;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.mts-btn.mts-center.active img {
opacity: 1;
filter: drop-shadow(0 0 8px rgba(255,152,31,0.5)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
transform: scale(1.12);
}
.mts-btn.mts-center.active::after {
bottom: 2px;
width: 5px;
height: 5px;
box-shadow: 0 0 8px 3px rgba(255,152,31,0.6);
}
/* Tab group separator */
.mts-sep {
width: 1px;
margin: 12px 2px;
background: rgba(255,255,255,0.06);
flex-shrink: 0;
}
/* Top tab strip — above viewport */
.mobile-tab-strip-top {
order: -1;
border-top: none;
border-bottom: 2px solid #0a0804;
height: 38px;
background: linear-gradient(180deg, #3a3228, #28201a) !important;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 0;
align-items: center;
}
.mobile-tab-strip-top .mts-btn {
min-width: 38px;
height: 38px;
border-top: none;
border-bottom: 3px solid transparent;
}
.mobile-tab-strip-top .mts-btn.active {
border-top-color: transparent;
border-bottom-color: #FF981F;
}
.mobile-tab-strip-top .mts-btn img {
width: 24px;
height: 24px;
}
/* Emoji icons in tab strip */
.mts-emoji {
font-size: 16px;
line-height: 1;
}
/* -------------------------------------------
SIDEBAR — Always-visible content panel (bottom portion)
NOT a bottom sheet. Normal flex child.
------------------------------------------- */
.sidebar {
flex: 1 !important;
min-height: 0;
width: auto !important;
max-height: none;
position: relative !important;
border: none !important;
background: transparent;
box-shadow: none;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
overflow: hidden;
}
.sidebar::before, .sidebar::after { display: none; }
/* Collapsed mode — tap active tab to collapse sidebar, viewport fills */
.game.mobile-hub-focus .left-col {
flex: 1 !important;
}
.game.mobile-hub-focus .sidebar {
flex: 0 0 0px !important;
min-height: 0 !important;
overflow: hidden !important;
}
.sidebar-inner {
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 0;
border: none;
background: linear-gradient(180deg, rgba(58,48,36,0.98), rgba(30,24,18,0.99));
}
/* Hide desktop tab strips — replaced by mobile tab strip */
.sidebar-top-tabs { display: none !important; }
.sidebar-tabs { display: none !important; }
.sidebar-splitter { display: none !important; }
/* Content sections — toggle via JS classes */
.sidebar-upper {
flex: 1;
min-height: 0;
overflow: hidden;
display: none; /* shown by .mobile-show-upper */
}
.sidebar-body {
flex: 1;
overflow-y: auto;
min-height: 0;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.sidebar-skills {
border-top: none;
margin-top: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
flex: 1;
min-height: 0;
display: none; /* shown by .mobile-show-lower */
}
/* Content visibility — controlled by JS */
.game.mobile-show-upper .sidebar-upper {
display: flex;
flex-direction: column;
}
.game.mobile-show-upper .sidebar-skills { display: none; }
.game.mobile-show-lower .sidebar-upper { display: none; }
.game.mobile-show-lower .sidebar-skills { display: block; }
.sidebar-bottom-bar {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 10px;
border-top: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.08);
flex-shrink: 0;
}
.sidebar-bottom-bar:empty { display: none; }
/* Old mobile nav — hidden (replaced by tab strip) */
.mobile-nav { display: none !important; }
/* Old workspace elements — hidden */
.mobile-workspace-header { display: none !important; }
.mobile-workspace-nav { display: none !important; }
.mobile-panel-scrim { display: none !important; }
/* -------------------------------------------
CHATBOX — hidden by default on mobile, shown inline or as overlay
------------------------------------------- */
.chatbox { display: none !important; }
/* Inline chat in sidebar (chat tab) */
.mobile-chat-inline .chatbox {
display: flex !important;
flex-direction: column;
position: relative !important;
height: 100%;
max-height: none;
border-radius: 0;
border: none;
box-shadow: none;
background: var(--chat-bg, #1a1510);
inset: auto;
left: auto;
right: auto;
bottom: auto;
top: auto;
z-index: auto;
}
.mobile-chat-inline .chatbox-inner {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.mobile-chat-inline .chat-input-row {
display: flex !important;
flex-shrink: 0;
}
.mobile-chat-inline .chatbox-tabs {
display: flex !important;
flex-shrink: 0;
}
.mobile-chat-inline {
display: flex !important;
flex-direction: column;
height: 100%;
min-height: 0;
flex: 1;
}
.game.mobile-chat-open .chatbox {
display: flex !important;
flex-direction: column;
position: fixed !important;
top: auto;
left: 6px;
right: 6px;
bottom: 6px;
height: 55vh;
max-height: calc(100dvh - 60px);
z-index: 200;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
overflow: hidden;
background: var(--chat-bg);
}
.game.mobile-chat-open .chatbox-inner {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.chatbox-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 6px;
}
.chatbox-tab {
min-height: 32px;
border-radius: 6px;
font-size: 10px;
}
/* -------------------------------------------
GRIDS — Optimized for mobile
------------------------------------------- */
.skill-grid { gap: 5px; padding: 6px; }
.skill-cell { padding: 4px 6px; border-radius: 8px; }
body.rebrand .sk-icon { width: 50px; height: 50px; }
.method-list { gap: 4px; padding: 6px; }
.method-row { padding: 6px 8px; border-radius: 8px; }
.bank-grid { grid-template-columns: repeat(5, 1fr); }
.prayer-grid { grid-template-columns: repeat(5, 1fr); }
.equip-grid { padding: 10px 14px; }
.eq-slot { width: 48px; height: 48px; }
.combat-tab-grid { padding: 8px 14px; gap: 8px; }
.combat-tab-retaliate { margin: 0 14px 6px; }
/* -------------------------------------------
MOBILE COMBAT HEADER
------------------------------------------- */
.mobile-combat-header {
cursor: pointer;
margin: 6px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
gap: 8px;
}
.mobile-combat-header:active { background: rgba(0,0,0,0.3); }
#mobile-combat-panel {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
max-height: 60vh;
}
.mcb-icon { width: 22px; height: 22px; image-rendering: pixelated; }
.mcb-style { flex: 1; font-size: 12px; color: var(--gold); font-weight: 700; text-shadow: 1px 1px 0 #000; }
.mcb-level { font-size: 10px; color: var(--muted); text-shadow: 1px 1px 0 #000; }
/* -------------------------------------------
MOBILE MENU PANEL — in content area
------------------------------------------- */
.mobile-menu-panel {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
}
.mobile-menu-section {
background: rgba(0,0,0,0.14);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 10px;
}
.mobile-menu-section-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: #ffd38b;
margin-bottom: 8px;
text-shadow: 1px 1px 0 #000;
}
.mobile-menu-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.mobile-menu-btn {
min-height: 38px;
padding: 0 10px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26));
color: #f5ead3;
font-family: 'RS Plain', serif;
font-size: 12px;
cursor: pointer;
text-align: left;
}
.mobile-menu-btn:active {
background: rgba(255,152,31,0.15);
}
#xp-tracker-panel {
z-index: 200;
left: 4px;
right: 4px;
bottom: 80px;
width: auto !important;
max-width: 300px;
}
/* -------------------------------------------
RL BAR — Hidden on mobile
------------------------------------------- */
.rl-bar, .rl-panel { display: none !important; }
/* -------------------------------------------
MODALS — mobile overrides
Most modals now use rc-overlay/rc-modal with mobile rules
at the top of the file. Only charselect + marketplace
still need explicit mobile rules here.
------------------------------------------- */
.charselect-overlay,
.marketplace-create-overlay {
position: fixed !important;
inset: 0;
z-index: var(--z-modal);
align-items: center;
padding: env(safe-area-inset-top, 8px) 0 env(safe-area-inset-bottom, 8px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: rgba(0,0,0,0.6) !important;
}
.sell-all-confirm {
position: fixed !important;
z-index: var(--z-confirm);
bottom: 0; left: 0; right: 0;
padding-bottom: calc(12px + 52px + env(safe-area-inset-bottom, 0px));
}
.charselect-panel {
width: 96% !important;
max-width: 96% !important;
max-height: 85vh;
max-height: 85dvh;
border-radius: 6px;
overflow-y: auto;
}
.charselect-inner { max-height: none; overflow-y: auto; }
.shop-modal-body .bank-grid { grid-template-columns: repeat(4, 1fr); }
.shop-modal-body .armoury-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; }
.charselect-close,
.clue-close-x,
.poh-close,
.events-close {
width: 32px !important;
height: 32px !important;
font-size: 18px !important;
line-height: 32px;
}
/* Inner wrapper mobile scroll — handled by rc-modal-inner mobile rules */
.monster-info-panel-left {
position: fixed;
left: 4px;
top: 40px;
max-width: calc(100vw - 8px);
min-width: 0;
max-height: 70vh;
overflow-y: auto;
z-index: 201;
}
/* -------------------------------------------
TOOLTIP & CONTEXT MENU
------------------------------------------- */
.game-tooltip:not(.mobile-active) { display: none !important; }
.ctx-menu { max-width: 90vw; }
/* -------------------------------------------
LEVEL UP SPLASH
------------------------------------------- */
.ember-lu-ring { width: 84px; height: 84px; }
.ember-lu-icon .ember-lu-img { width: 56px; height: 56px; }
.ember-lu-title { font-size: 28px; letter-spacing: 2px; }
.ember-lu-skill { font-size: 16px; }
.ember-lu-content { gap: 10px; }
.ember-lu-mastery { font-size: 11px; letter-spacing: 4px; }
/* -------------------------------------------
SETTINGS adjustments
------------------------------------------- */
.settings-row { flex-wrap: wrap; gap: 6px; height: auto; min-height: 28px; }
.settings-broadcast-name { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; }
.settings-eat-slider { flex: 1; width: auto !important; min-width: 60px !important; }
.settings-bg-current { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* bg-browser-overlay: mobile fix now in MODALS block above */
/* -------------------------------------------
REBRAND overrides for mobile
------------------------------------------- */
body.rebrand .vp-center { margin: auto 0 !important; gap: 4px !important; transform: none !important; }
body.rebrand .action-icon-wrap {
width: min(28vw, 110px) !important;
height: min(28vw, 110px) !important;
background: none !important;
box-shadow: none !important;
}
body.rebrand .action-icon-wrap:active { box-shadow: none !important; }
body.rebrand .action-icon .icon-action { width: min(16vw, 60px) !important; height: min(16vw, 60px) !important; }
body.rebrand .action-icon.monster .icon-action { width: min(22vw, 90px) !important; height: min(22vw, 90px) !important; }
body.rebrand .monster-hp-wrap { width: 100% !important; max-width: 200px !important; }
body.rebrand .player-hp-wrap { width: 100% !important; }
body.rebrand .action-skill-name { font-size: 14px !important; }
body.rebrand .action-method-name { font-size: 11px !important; }
body.rebrand .action-xp { font-size: 10px !important; }
body.rebrand .action-cost { font-size: 10px !important; }
body.rebrand .weapon-display { font-size: 10px !important; }
/* ── Expanded viewport when sidebar collapsed (tap active tab) ── */
.game.mobile-hub-focus .viewport {
justify-content: center;
}
.game.mobile-hub-focus .action-icon-wrap {
width: min(48vw, 200px) !important;
height: min(48vw, 200px) !important;
}
.game.mobile-hub-focus .action-icon .icon-action {
width: min(28vw, 120px) !important;
height: min(28vw, 120px) !important;
}
.game.mobile-hub-focus .action-icon.monster .icon-action {
width: min(40vw, 180px) !important;
height: min(40vw, 180px) !important;
}
.game.mobile-hub-focus #monster-hp-wrap {
max-width: 320px !important;
}
.game.mobile-hub-focus #action-title {
font-size: 18px !important;
}
.game.mobile-hub-focus #xp-rate {
font-size: 13px !important;
}
}
/* Very small phones — fluid sizing now handles this range, no hard breakpoint needed */
/* =============================================
XP TRACKER
============================================= */
#xp-tracker-panel {
position: absolute;
bottom: 48px;
right: calc(50% + 138px);
z-index: 20;
width: 280px;
background: #1a1610;
border: 2px solid #000;
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
max-height: 60vh;
overflow-y: auto;
}
.xpt-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px;
background: linear-gradient(180deg, #3E3529, #2A2118);
border-bottom: 1px solid #000;
font-size: 12px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.xpt-reset-all {
background: linear-gradient(180deg, #6B3030, #3E2020);
border: 1px solid #000;
box-shadow: inset 1px 1px 0 #8B4040, inset -1px -1px 0 #2A1414;
color: var(--white);
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.xpt-empty {
padding: 16px;
text-align: center;
color: var(--muted);
font-size: 12px;
}
.xpt-list {
display: flex;
flex-direction: column;
gap: 3px;
padding: 3px;
}
.xpt-row {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 6px;
background: #5a5043;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(31deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 3px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, transparent 3px),
repeating-linear-gradient(174deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 4px);
border: 1px solid rgba(180, 160, 120, 0.25);
-webkit-mask:
radial-gradient(circle 4px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 4px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 4px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 4px at 100% 100%, transparent 98%, black) bottom right;
-webkit-mask-size: 51% 51%;
-webkit-mask-repeat: no-repeat;
mask:
radial-gradient(circle 4px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 4px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 4px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 4px at 100% 100%, transparent 98%, black) bottom right;
mask-size: 51% 51%;
mask-repeat: no-repeat;
}
.xpt-icon {
width: 20px;
height: 20px;
image-rendering: pixelated;
flex-shrink: 0;
}
.xpt-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.xpt-name {
font-size: 11px;
font-weight: 700;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.xpt-detail {
font-size: 10px;
color: var(--muted);
}
.xpt-rate {
color: var(--gold);
}
.xpt-remaining {
font-size: 10px;
color: #8b8b8b;
}
.xpt-ttl, .rl-ttl {
color: #5cb85c;
font-weight: 600;
}
.xpt-canvas-label {
flex-shrink: 0;
cursor: pointer;
display: flex;
align-items: center;
}
.xpt-canvas-label input {
cursor: pointer;
accent-color: var(--gold);
}
.xpt-reset {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--muted);
font-size: 16px;
cursor: pointer;
padding: 0;
line-height: 1;
font-family: inherit;
}
.xpt-reset:hover { color: #ff4444; }
.xpt-click-row {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 6px;
margin: 3px;
background: #4a4538;
border: 1px solid rgba(180, 160, 120, 0.25);
border-radius: 3px;
}
/* Canvas overlays (persistent on viewport) */
#xp-canvas-overlays {
position: absolute;
bottom: 8px;
right: 10px;
z-index: 15;
display: flex;
flex-direction: column;
gap: 4px;
pointer-events: none;
align-items: flex-end;
}
.xp-canvas-item {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 4px;
background: rgba(26, 22, 16, 0.8);
border: 1px solid rgba(180, 160, 120, 0.2);
border-radius: 3px;
}
.xp-canvas-icon {
width: 18px;
height: 18px;
image-rendering: pixelated;
}
.xp-canvas-gained {
font-size: 12px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.xp-canvas-rate {
font-size: 13px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
.xp-canvas-ttl {
font-size: 11px;
font-weight: 600;
color: #5cb85c;
text-shadow: 1px 1px 0 #000;
}
/* =============================================
FLOATING XP BAR (RuneLite-style)
============================================= */
#xp-bar-float {
position: absolute;
top: 6px;
right: 8px;
z-index: 18;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(26, 22, 16, 0.92);
border: 1px solid rgba(180, 160, 120, 0.3);
border-radius: 3px;
transition: opacity 0.6s;
}
#xp-bar-float.xp-bar-fadeout {
opacity: 0;
}
.xpb-icon {
width: 28px;
height: 28px;
image-rendering: pixelated;
flex-shrink: 0;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.xpb-info {
display: flex;
flex-direction: column;
gap: 3px;
width: 180px;
}
.xpb-labels {
display: flex;
justify-content: space-between;
font-size: 11px;
}
.xpb-labels #xpb-name {
color: var(--white);
font-weight: 700;
text-shadow: 1px 1px 0 #000;
}
.xpb-labels #xpb-xp {
color: var(--muted);
text-shadow: 1px 1px 0 #000;
}
.xpb-track {
height: 8px;
background: #111;
border: 1px solid rgba(180, 160, 120, 0.2);
overflow: hidden;
border-radius: 1px;
}
.xpb-fill {
height: 100%;
background: linear-gradient(180deg, #55DD55, #00AA00, #008800);
transition: width 0.3s;
}
/* clue structural removed — now uses rc-modal */
/* clue-scroll-header kept as content class for title styling */
.clue-scroll-header {
text-align: center;
font-weight: 700;
color: #ff981f;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
letter-spacing: 0.8px;
}
/* Close X button */
.clue-close-x {
position: absolute;
top: 9px;
right: 12px;
width: 20px;
height: 20px;
cursor: pointer;
background: none;
border: none;
color: #999;
font-size: 14px;
font-family: 'RS Bold', serif;
font-weight: bold;
line-height: 20px;
text-align: center;
text-shadow: 1px 1px 0 #000;
transition: color 0.15s;
}
.clue-close-x:hover { color: #fff; }
/* Sell All button */
.clue-sell-all {
display: block;
margin: 6px auto;
padding: 4px 14px;
background: linear-gradient(180deg, #5a4d3a, #3e3529);
border: 1px solid #6B5D4F;
border-radius: 3px;
color: #ffd700;
font-family: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
text-shadow: 1px 1px 0 #000;
}
.clue-sell-all:hover {
background: linear-gradient(180deg, #6a5d4a, #4e4539);
border-color: #8a7a6a;
}
/* Item grid — OSRS inventory style 4 columns */
.clue-scroll-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
padding: 8px 4px 4px;
background: #1a1610;
}
/* Each loot slot */
.clue-reward-item {
display: flex;
align-items: center;
justify-content: center;
background: #3b3226;
position: relative;
width: 100%;
aspect-ratio: 1;
border: 1px solid #2a2218;
}
.clue-reward-item:hover {
background: #4a4030;
border-color: #6B5D4F;
}
/* Quantity overlay (top-left, OSRS-style) */
.clue-reward-item .bi-qty {
position: absolute;
top: 1px;
left: 2px;
font-size: 10px;
font-weight: 700;
color: #ffff00;
text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
z-index: 2;
}
/* Item name tooltip (hidden by default, show on hover) */
.clue-item-name {
display: none;
}
/* Footer value bar */
.clue-scroll-value {
text-align: center;
font-size: 11px;
padding: 5px 8px;
background: linear-gradient(180deg, #494034, #3E3529);
border-top: 2px solid #000;
color: var(--muted);
text-shadow: 1px 1px 0 #000;
}
/* Hide old OK button — use X instead */
.clue-scroll-close {
display: none;
}
/* Item name tooltip on hover — shown below to avoid clipping by modal overflow */
.clue-reward-item .clue-item-tooltip {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
background: #1a1610;
border: 1px solid #6B5D4F;
padding: 3px 6px;
font-size: 10px;
color: #ff981f;
white-space: nowrap;
text-shadow: 1px 1px 0 #000;
z-index: 10;
pointer-events: none;
}
.clue-reward-item:hover .clue-item-tooltip { display: block; }
/* Bank clue scroll highlight */
.bank-item.clue-scroll {
border: 1px solid #ff981f;
cursor: pointer;
}
/* === BELL WARDEN === */
.bell-warden-bells {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
z-index: 15;
pointer-events: none;
}
.resonant-bell-icon {
width: 120px;
height: 120px;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(255, 152, 31, 0.5));
animation: bell-pulse 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
.bell-warden-bells {
left: 5%;
}
.resonant-bell-icon {
width: 20vw;
height: 20vw;
}
}
@keyframes bell-pulse {
0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 152, 31, 0.3)); }
50% { filter: drop-shadow(0 0 18px rgba(255, 152, 31, 0.8)); }
}
@keyframes stun-flash {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
.spec-debuff-warn {
color: #ff6666 !important;
border-color: #ff3333 !important;
}
/* Scurrius' spine choice menu */
.spine-choices {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
padding: 0 4px;
}
.spine-choice {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: var(--cell-bg);
border: 1px solid #1a1610;
cursor: pointer;
transition: background 0.15s;
}
.spine-choice:hover {
background: var(--cell-active);
border-color: var(--gold-dim);
}
.spine-choice-info {
display: flex;
flex-direction: column;
font-size: 11px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.spine-choice-xp {
font-size: 10px;
color: #4CAF50;
}
/* autocast structural removed — now uses rc-modal */
.autocast-picker-title {
color: #FF981F;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
text-align: center;
padding: 9px 14px 8px;
background: linear-gradient(180deg, #4a4238 0%, #3d3630 100%);
border-bottom: 1px solid #2A2420;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.8px;
margin: -10px -10px 10px;
}
.autocast-picker-close {
position: absolute;
top: 9px;
right: 12px;
width: 20px;
height: 20px;
background: none;
border: none;
color: #999;
font-size: 14px;
font-family: 'RS Bold', serif;
font-weight: bold;
cursor: pointer;
text-shadow: 1px 1px 0 #000;
text-align: center;
z-index: 1;
}
.autocast-picker-close:hover { color: #fff; }
.autocast-spell-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.autocast-spell-btn {
display: flex;
align-items: center;
justify-content: center;
background: #2b2218;
border: 1px solid #5c513a;
border-radius: 3px;
padding: 6px;
cursor: pointer;
transition: background 0.15s;
}
.autocast-spell-btn:hover {
background: #4a3f30;
}
.autocast-spell-btn.active {
background: #6b2a1a;
border-color: #FF981F;
}
.autocast-spell-btn.locked {
opacity: 0.3;
filter: grayscale(100%);
cursor: default;
}
.autocast-spell-btn .icon-spell {
width: 28px;
height: 28px;
image-rendering: pixelated;
}
/* Weapon mismatch picker */
.weapon-picker-grid {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 300px;
overflow-y: auto;
}
.weapon-picker-btn {
display: flex;
align-items: center;
gap: 8px;
background: #2b2218;
border: 1px solid #5c513a;
border-radius: 3px;
padding: 6px 10px;
cursor: pointer;
transition: background 0.15s;
text-align: left;
width: 100%;
}
.weapon-picker-btn:hover {
background: #4a3f30;
border-color: #FF981F;
}
.weapon-picker-name {
color: #FF981F;
font-family: 'RS_Bold', sans-serif;
font-size: 12px;
text-shadow: 1px 1px 0 #000;
}
/* Autocast info panel in combat tab */
.autocast-info-panel {
grid-column: 1 / -1;
background: #2b2218;
border: 1px solid #5c513a;
border-radius: 3px;
padding: 6px 10px;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
}
.autocast-info-panel .ac-element {
font-size: 10px;
text-transform: capitalize;
padding: 1px 6px;
border-radius: 3px;
font-weight: bold;
}
.ac-element-air { background: #4a6a8a; color: #cde; }
.ac-element-water { background: #2a4a7a; color: #9cf; }
.ac-element-earth { background: #5a4a2a; color: #dc9; }
.ac-element-fire { background: #7a2a1a; color: #fca; }
.ac-element-smoke { background: #5a4a3a; color: #dca; }
.ac-element-shadow { background: #3a2a4a; color: #c9d; }
.ac-element-blood { background: #6a1a1a; color: #faa; }
.ac-element-ice { background: #1a4a6a; color: #adf; }
.ac-multi {
display: inline-block;
background: #ff981f;
color: #000;
font-size: 9px;
font-weight: bold;
padding: 0 3px;
border-radius: 2px;
vertical-align: middle;
margin-left: 2px;
}
.autocast-no-spells {
color: #ff4444;
text-align: center;
padding: 16px;
font-size: 12px;
}
/* Burst mode stacked monster icons */
.action-icon { position: relative; }
.burst-stack-icon {
position: absolute;
width: 100%;
height: 100%;
top: 0;
image-rendering: pixelated;
opacity: 0.5;
filter: brightness(0.7);
pointer-events: none;
}
.burst-stack-left { left: -12px; z-index: -1; }
.burst-stack-right { right: -12px; left: auto; z-index: -1; }
/* Autocast combat tab button styling */
.combat-tab-btn.autocast-btn {
border: 1px dashed #5c513a;
}
.combat-tab-btn.autocast-btn.active {
border: 1px solid #FF981F;
background: #3a1a5a;
background-image: none;
}
/* === SPELLBOOK VISUAL GUIDE === */
.spellbook-section-label {
color: #FF981F;
font-family: 'RS_Bold', sans-serif;
font-size: 12px;
padding: 8px 10px 4px;
text-shadow: 1px 1px 0 #000;
}
.spellbook-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 4px 10px 10px;
}
.spellbook-spell {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 3px;
cursor: pointer;
transition: background 0.15s;
}
.spellbook-spell:hover {
background: rgba(255,255,255,0.08);
}
.spellbook-spell.locked {
opacity: 0.25;
filter: grayscale(100%);
}
.spellbook-spell .icon-spell {
width: 24px;
height: 24px;
image-rendering: pixelated;
}
/* Spell tooltip */
.spell-tooltip {
position: absolute;
background: #2b2218;
border: 1px solid #5c513a;
border-radius: 4px;
padding: 8px 10px;
z-index: var(--z-tooltip);
font-size: 11px;
color: var(--white);
text-shadow: 1px 1px 0 #000;
pointer-events: none;
max-width: 200px;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.spell-tooltip .st-name {
color: #FF981F;
font-family: 'RS_Bold', sans-serif;
font-size: 12px;
}
.spell-tooltip .st-info {
color: #aaa;
margin-top: 2px;
}
/* === METHOD LIST SUBHEADER === */
.method-list-subhead {
color: #FF981F;
font-family: 'RS_Bold', sans-serif;
font-size: 11px;
padding: 8px 10px 4px;
text-shadow: 1px 1px 0 #000;
border-top: 1px solid #5c513a;
}
/* === IRON MAN MODE === */
.chat-ironman-badge,
.chat-mode-badge {
width: 11px;
height: 11px;
image-rendering: pixelated;
vertical-align: middle;
margin-right: 2px;
}
.shop-orb.ironman-disabled {
opacity: 0.35;
filter: grayscale(0.8);
}
.shop-item.ironman-locked {
opacity: 0.3;
pointer-events: none;
filter: grayscale(0.6);
}
.shop-ironman-banner {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(180deg, #2c2418 0%, #231c12 100%);
border: 1px solid #3a3020;
border-bottom-color: #1a1610;
padding: 7px 12px;
margin-bottom: 8px;
color: #a09080;
font-family: 'RS Plain', serif;
font-size: 11px;
text-shadow: 1px 1px 0 #000;
line-height: 1.4;
}
.shop-ironman-banner small {
color: #9a7a50;
font-style: italic;
font-size: 10px;
}
.ironman-banner-icon {
width: 18px;
height: 18px;
image-rendering: pixelated;
flex-shrink: 0;
opacity: 0.8;
}
/* Character creation ironman toggle */
.charslot-ironman-row {
flex-direction: column;
gap: 4px;
}
.charslot-ironman-toggle {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 6px 10px;
border: 1px solid #5c513a;
border-radius: 4px;
background: rgba(0,0,0,0.3);
user-select: none;
}
.charslot-ironman-toggle:hover {
border-color: #7a6a4a;
background: rgba(0,0,0,0.4);
}
.charslot-ironman-icon {
width: 16px;
height: 16px;
image-rendering: pixelated;
}
.charslot-ironman-toggle span {
color: #ccc;
font-size: 12px;
flex: 1;
}
.charslot-ironman-check {
width: 14px;
height: 14px;
border: 1px solid #5c513a;
border-radius: 2px;
background: #1a1a1a;
}
.charslot-ironman-check.checked {
background: #3a7a3a;
border-color: #5a9a5a;
box-shadow: inset 0 0 4px rgba(100,200,100,0.4);
}
.charslot-ironman-check.checked::after {
content: '';
display: block;
width: 4px;
height: 8px;
margin: 1px auto 0;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.charslot-ironman-warn {
padding: 4px 10px;
color: #ff8844;
font-style: italic;
line-height: 1.4;
}
/* Ironman toggle on character creation */
.charslot-iron-toggle {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 12px;
margin: 4px 0 0;
background: linear-gradient(180deg, #5a4e40 0%, #3E3529 60%, #2A2118 100%);
border: 1px solid #1a1610;
border-radius: 4px;
color: #c0c0c0;
font-family: 'RS Plain', serif;
font-size: 13px;
user-select: none;
width: 100%;
box-sizing: border-box;
}
.charslot-iron-toggle:hover { color: #fff; }
.charslot-iron-toggle .mode-card-toggle { margin-left: auto; }
/* Advanced Modes — collapsed recess on the create form */
.charslot-adv {
width: 100%;
box-sizing: border-box;
background: rgba(0,0,0,0.18);
border: 1px solid #1a1610;
border-radius: 4px;
overflow: hidden;
}
.charslot-adv-header {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
cursor: pointer;
user-select: none;
font-family: 'RS Plain', serif;
font-size: 13px;
color: #b0a48a;
}
.charslot-adv-header:hover { color: #e0d5b8; }
.charslot-adv-chev {
display: inline-block;
font-size: 11px;
color: #8a7d5f;
transition: transform 0.2s ease;
}
.charslot-adv.open .charslot-adv-chev { transform: rotate(90deg); }
.charslot-adv-label {
letter-spacing: 0.5px;
}
.charslot-adv-hint {
margin-left: auto;
font-size: 11px;
color: #6a6050;
transition: opacity 0.2s ease;
}
.charslot-adv.open .charslot-adv-hint { opacity: 0; }
.charslot-adv-active { color: #5bc420; }
.charslot-adv-body {
max-height: 0;
opacity: 0;
padding: 0 10px;
transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.charslot-adv.open .charslot-adv-body {
max-height: 400px;
opacity: 1;
padding: 0 10px 10px;
}
.charslot-mode-desc {
font-family: 'RS Plain', serif;
font-size: 11px;
line-height: 1.4;
color: #9a8f7a;
padding: 4px 4px 2px;
}
.charslot-perm-warn {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
font-family: 'RS Plain', serif;
font-size: 11px;
text-align: center;
color: #cc7a4a;
text-shadow: 1px 1px 0 #000;
}
/* Mode select & badges */
.charslot-customize {
background: linear-gradient(180deg, #5a4e40 0%, #3E3529 60%, #2A2118 100%) !important;
color: #FF981F !important;
border-color: #1a1610 !important;
width: 100%;
padding: 6px 12px;
}
.charslot-customize:hover { color: #fff !important; }
.mode-badges-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.mode-badge {
font-family: 'RS Plain', serif;
font-size: 10px;
padding: 2px 6px;
border-radius: 2px;
text-shadow: 1px 1px 0 #000;
}
.mode-badge-iron { background: #4a3a2a; color: #c0c0c0; }
.mode-badge-nomile { background: #3a2020; color: #ff6666; }
.mode-badge-manual { background: #2a3a20; color: #88cc66; }
.mode-badge-auto { background: #20303a; color: #66aacc; }
.mode-badge-nobonuses { background: #3a3020; color: #ccaa66; }
.mode-section-label {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
color: #8a7b64;
text-shadow: 1px 1px 0 #000;
text-transform: uppercase;
letter-spacing: 1px;
margin: 8px 0 4px;
}
.mode-section-label:first-of-type { margin-top: 0; }
.mode-select-list {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.mode-card {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(180deg, #2a2419 0%, #221e16 100%);
border: 1px solid #332d22;
padding: 10px 12px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.mode-card:hover {
background: linear-gradient(180deg, #332c20 0%, #2a2419 100%);
border-color: #4a4030;
}
.mode-card-active {
border-color: #8a6a20;
background: linear-gradient(180deg, #302818 0%, #28200f 100%);
box-shadow: inset 0 0 12px rgba(255,152,31,0.06);
}
.mode-card-icon {
width: 24px;
height: 24px;
image-rendering: pixelated;
flex-shrink: 0;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.mode-card-info { flex: 1; min-width: 0; }
.mode-card-name {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 13px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
margin-bottom: 2px;
}
.mode-card-active .mode-card-name { color: #ffb040; }
.mode-card-desc {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #8a7b64;
text-shadow: 1px 1px 0 #000;
line-height: 1.35;
}
.mode-card-active .mode-card-desc { color: #a09080; }
.mode-card-toggle {
width: 28px;
height: 16px;
border: 1px solid #3a3226;
background: #1a1610;
flex-shrink: 0;
position: relative;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.mode-card-toggle::after {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 10px;
height: 10px;
background: #5a4f3e;
transition: left 0.15s, background 0.15s;
}
.mode-card-toggle.checked {
background: #264a15;
border-color: #3b7a20;
}
.mode-card-toggle.checked::after {
left: 14px;
background: #5bc420;
}
/* Legacy checkbox fallback */
.mode-card-check {
width: 14px;
height: 14px;
border: 2px solid #5a4f3e;
border-radius: 2px;
background: #1a1610;
flex-shrink: 0;
position: relative;
}
.mode-card-check.checked {
background: #3b9420;
border-color: #2d7a18;
}
.mode-card-check.checked::after {
content: '';
position: absolute;
left: 2px; top: -1px;
width: 5px; height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ── Hiscores ── */
.hiscores-panel {
width: 620px;
}
.hiscores-controls {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-bottom: 1px solid #1a1610;
flex-wrap: wrap;
}
.hiscores-select {
background: #2a2520;
color: #ccc;
border: 1px solid #555;
padding: 4px 6px;
font-family: 'RS Plain', serif;
font-size: 13px;
border-radius: 2px;
cursor: pointer;
}
.hiscores-select:focus { outline: 1px solid #FF981F; }
.hiscores-search {
background: #2a2520;
color: #ccc;
border: 1px solid #555;
padding: 4px 8px;
font-family: 'RS Plain', serif;
font-size: 13px;
border-radius: 2px;
width: 130px;
margin-left: auto;
}
.hiscores-search::placeholder { color: #777; }
.hiscores-search:focus { outline: 1px solid #FF981F; }
.hiscores-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.hiscores-filter-label {
color: #aaa;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 2px;
}
.hiscores-filter-label:hover { color: #ddd; }
.hiscores-filter-cb {
accent-color: #FF981F;
cursor: pointer;
}
.hiscores-body {
overflow-y: auto;
max-height: 400px;
padding: 0;
}
.hiscores-loading {
text-align: center;
padding: 30px;
color: #999;
font-size: 13px;
}
.hiscores-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.hiscores-table thead th {
position: sticky;
top: 0;
background: #3a342c;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
font-weight: normal;
padding: 6px 8px;
text-align: left;
border-bottom: 1px solid #555;
}
.hiscores-table tbody tr {
border-bottom: 1px solid #2a2520;
}
.hiscores-table tbody tr:hover {
background: rgba(255, 152, 31, 0.08);
}
.hiscores-table td {
padding: 5px 8px;
color: #ccc;
}
.hiscores-rank {
color: #FF981F;
font-weight: bold;
width: 40px;
text-align: center;
}
.hiscores-name {
font-family: 'RS Bold', 'RS Plain', serif;
color: #fff;
}
.hiscores-iron-badge {
width: 10px;
height: 10px;
vertical-align: middle;
image-rendering: pixelated;
}
.hiscores-level {
text-align: center;
width: 45px;
}
.hiscores-value {
text-align: right;
color: #7fff7f;
font-family: monospace;
width: 90px;
}
.hiscores-modes {
color: #999;
font-size: 10px;
width: 80px;
}
.hiscores-me {
background: rgba(255, 152, 31, 0.15) !important;
}
.hiscores-me .hiscores-name {
color: #FF981F;
}
.hiscores-locked {
background: rgba(255, 215, 0, 0.1) !important;
}
.hiscores-locked .hiscores-name-link {
color: #ffd700;
}
.hiscores-locked .hiscores-rank {
color: #ffd700;
}
.hiscores-show-more {
display: block;
width: 100%;
padding: 8px;
margin-top: 4px;
background: #2a2520;
border: 1px solid #3a3226;
color: #FF981F;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 12px;
cursor: pointer;
text-align: center;
}
.hiscores-show-more:hover {
background: #3a3226;
border-color: #5a4f3e;
}
/* Clickable names in hiscores */
.hiscores-name-link {
cursor: pointer;
color: #ccc;
transition: color 0.15s;
}
.hiscores-name-link:hover {
color: #FF981F;
text-decoration: underline;
}
/* --- FRIENDS LIST PANEL --- */
.friends-panel-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
}
.friends-panel {
background: linear-gradient(180deg, #3E3529, #2A2118);
border: 3px solid #000;
box-shadow: 0 0 0 2px #6B5D4F, 0 8px 40px rgba(0,0,0,0.8);
border-radius: 6px;
width: 320px;
max-height: 500px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.friends-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: linear-gradient(180deg, #4A4030, #3E3529);
border-bottom: 2px solid #000;
font-family: 'RS Bold', 'RS Plain', serif;
color: #FF981F;
font-size: 16px;
}
.friends-panel-close {
cursor: pointer;
font-size: 20px;
color: #999;
line-height: 1;
}
.friends-panel-close:hover { color: #fff; }
.friends-tab-bar {
display: flex;
border-bottom: 1px solid #000;
}
.friends-tab {
flex: 1;
padding: 6px;
background: linear-gradient(180deg, #3E3529, #2A2118);
border: none;
color: #9B8B6B;
font-family: 'RS Plain', serif;
font-size: 12px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.friends-tab.active {
color: #FFD700;
border-bottom-color: #FF981F;
background: linear-gradient(180deg, #4A4030, #3E3529);
}
.friends-priv-row {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-bottom: 1px solid #1a1610;
}
.friends-priv-label {
color: #9B8B6B;
font-size: 11px;
font-family: 'RS Plain', serif;
}
.friends-priv-btn {
padding: 2px 8px;
background: #2A2118;
border: 1px solid #555;
color: #9B8B6B;
font-size: 11px;
font-family: 'RS Plain', serif;
cursor: pointer;
border-radius: 2px;
}
.friends-priv-btn.active {
background: #4A4030;
color: #FFD700;
border-color: #FF981F;
}
.friends-panel-body {
flex: 1;
overflow-y: auto;
padding: 4px 0;
min-height: 100px;
max-height: 300px;
}
.friends-empty {
padding: 20px;
text-align: center;
color: #777;
font-size: 13px;
font-family: 'RS Plain', serif;
}
.friends-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
cursor: pointer;
transition: background 0.1s;
}
.friends-row:hover { background: rgba(255,255,255,0.05); }
.friends-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #555;
flex-shrink: 0;
}
.friends-status-dot.online { background: #0f0; box-shadow: 0 0 4px #0f0; }
.friends-name {
color: #CC0000;
font-family: 'RS Plain', serif;
font-size: 13px;
flex: 1;
}
.friends-name.online { color: #00FF00; }
.friends-remove-btn {
background: none;
border: none;
color: #666;
font-size: 16px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.friends-remove-btn:hover { color: #f44; }
.friends-add-row {
display: flex;
gap: 6px;
padding: 8px 10px;
border-top: 1px solid #1a1610;
}
.friends-add-input {
flex: 1;
background: #2a2520;
color: #ccc;
border: 1px solid #555;
padding: 4px 8px;
font-family: 'RS Plain', serif;
font-size: 12px;
border-radius: 2px;
}
.friends-add-input::placeholder { color: #777; }
.friends-add-input:focus { outline: 1px solid #FF981F; }
.friends-add-btn {
padding: 4px 12px;
background: linear-gradient(180deg, #4A4030, #3E3529);
border: 1px solid #000;
color: #FFD700;
font-family: 'RS Plain', serif;
font-size: 12px;
cursor: pointer;
border-radius: 2px;
}
.friends-add-btn:hover { background: linear-gradient(180deg, #5A5040, #4A4030); }
.friends-btn-icon {
width: 14px;
height: 14px;
image-rendering: pixelated;
vertical-align: middle;
}
/* --- PLAYER PROFILE --- */
.profile-back-btn {
background: none;
border: none;
color: #FF981F;
font-family: 'RS Plain', serif;
font-size: 13px;
cursor: pointer;
padding: 10px 12px;
display: block;
}
.profile-back-btn:hover { text-decoration: underline; }
.profile-view {
padding: 12px 16px 16px;
max-width: 520px;
margin: 0 auto;
}
.profile-showcase {
display: flex;
justify-content: center;
gap: 20px;
padding: 12px 0 10px;
border-bottom: 1px solid #3a342c;
margin-bottom: 10px;
}
.profile-showcase-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.profile-showcase-item img {
width: 40px;
height: 40px;
image-rendering: pixelated;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}
.profile-showcase-item span {
font-size: 11px;
color: #FFD700;
text-shadow: 1px 1px 0 #000;
font-family: 'RS Plain', serif;
}
.profile-header {
text-align: center;
padding: 8px 0;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 20px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
}
.profile-player-name {
color: #FF981F;
}
.profile-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 10px 0;
border-bottom: 1px solid #3a342c;
margin-bottom: 10px;
}
.profile-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 4px;
background: rgba(0,0,0,0.15);
border: 1px solid rgba(180,160,120,0.15);
border-radius: 3px;
}
.profile-stat-label {
font-size: 10px;
color: #999;
font-family: 'RS Plain', serif;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-stat-value {
font-size: 15px;
color: #ffff00;
text-shadow: 1px 1px 0 #000;
font-family: 'RS Bold', 'RS Plain', serif;
}
.profile-modes {
text-align: center;
font-size: 11px;
color: #aaa;
padding: 0 0 10px;
font-family: 'RS Plain', serif;
}
.profile-skill-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
padding: 4px;
background: #1a1610;
border: 1px solid rgba(180,160,120,0.2);
margin: 0 auto;
max-width: 360px;
}
.profile-skill-cell {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 6px 5px 8px;
background: #5a5043;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(31deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 3px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,255,255,0.02) 1px, transparent 3px),
repeating-linear-gradient(174deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 4px);
border: 1px solid rgba(180, 160, 120, 0.25);
cursor: default;
aspect-ratio: 2 / 1;
-webkit-mask:
radial-gradient(circle 5px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 5px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 5px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 5px at 100% 100%, transparent 98%, black) bottom right;
-webkit-mask-size: 51% 51%;
-webkit-mask-repeat: no-repeat;
mask:
radial-gradient(circle 5px at 0 0, transparent 98%, black) top left,
radial-gradient(circle 5px at 100% 0, transparent 98%, black) top right,
radial-gradient(circle 5px at 0 100%, transparent 98%, black) bottom left,
radial-gradient(circle 5px at 100% 100%, transparent 98%, black) bottom right;
mask-size: 51% 51%;
mask-repeat: no-repeat;
}
.profile-skill-cell.profile-skill-maxed {
background-color: #4a5a3a;
border-color: #5a6a4a;
}
.profile-sk-icon {
width: 36px;
height: 28px;
image-rendering: pixelated;
flex-shrink: 0;
}
.profile-sk-levels {
position: relative;
margin-left: auto;
width: 38px;
height: 28px;
flex-shrink: 0;
}
.profile-sk-levels .sk-hi,
.profile-sk-levels .sk-lo,
.profile-sk-levels .sk-slash {
position: absolute;
font-weight: 700;
line-height: 1;
}
.profile-sk-levels .sk-hi,
.profile-sk-levels .sk-lo {
color: #ffff00;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
}
.profile-sk-levels .sk-hi {
top: -8px;
left: -3px;
font-size: 14px;
}
.profile-sk-levels .sk-lo {
bottom: -2px;
right: 0;
font-size: 14px;
}
.profile-sk-levels .sk-slash {
top: 50%;
left: 50%;
transform: translate(-50%, -55%) rotate(45deg);
color: transparent;
font-size: 0;
width: 1px;
height: 55px;
background: #000;
}
.profile-total-cell {
grid-column: 1 / -1;
text-align: center;
background: #5a5043;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px);
font-size: 14px;
color: #ccc;
padding: 8px;
border: 1px solid rgba(180, 160, 120, 0.25);
font-family: 'RS Bold', 'RS Plain', serif;
}
.profile-total-cell .total-num {
color: #ffff00;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
font-size: 16px;
}
.profile-info {
display: flex;
justify-content: center;
gap: 20px;
padding: 10px 0 0;
font-size: 11px;
color: #777;
font-family: 'RS Plain', serif;
}
/* === PLAYER OWNED HOUSE === */
.poh-hub-btn {
position: absolute;
bottom: 58px;
left: 8px;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
background: var(--cell-bg);
border: 3px solid #494034;
border-top-color: #6B5D4F;
border-left-color: #5A4E40;
border-right-color: #3E3529;
border-bottom-color: #2A2118;
box-shadow: 0 0 0 1px #000, inset 0 0 6px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.6);
padding: 6px 14px 6px 10px;
border-radius: 6px;
opacity: 0.9;
transition: opacity 0.15s, background 0.15s;
}
.poh-hub-btn:hover { opacity: 1; background: var(--cell-hover); }
.poh-hub-btn img {
width: 24px;
height: 24px;
image-rendering: pixelated;
filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.6));
}
.poh-hub-btn span {
font-size: 13px;
font-weight: 700;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.5px;
}
/* poh structural removed — now uses rc-modal */
.poh-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px; color: #FF981F;
text-shadow: 1px 1px 0 #000; letter-spacing: 0.8px;
}
.poh-gold-display {
font-family: 'RS Plain', serif; font-size: 12px; color: #ffd700;
display: flex; align-items: center; gap: 3px;
}
.poh-coin-icon { width: 14px; height: 14px; image-rendering: pixelated; }
.poh-close {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
cursor: pointer; color: #aaa; font-weight: bold; font-size: 14px;
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
border-radius: 3px; background: rgba(0,0,0,0.2);
}
.poh-close:hover { color: #fff; background: rgba(255,0,0,0.3); }
.poh-body { overflow-y: auto; padding: 8px; }
.poh-info { padding: 4px 8px; font-size: 12px; color: var(--muted); font-family: 'RS Plain', serif; }
.poh-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px;
}
.poh-cell {
aspect-ratio: 1; background: #2a2520; border: 2px solid #1a1610;
cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
border-radius: 4px; transition: border-color 0.15s, background 0.15s;
padding: 4px; text-align: center; min-height: 90px;
}
.poh-cell:hover { background: #3a342c; border-color: #FF981F; }
.poh-cell-empty { opacity: 0.6; }
.poh-cell-empty:hover { opacity: 1; }
.poh-cell-plus { font-size: 28px; color: #555; }
.poh-cell-label { font-size: 11px; color: #666; font-family: 'RS Plain', serif; }
.poh-cell-emoji { font-size: 24px; line-height: 1.2; }
.poh-cell-name { font-family: 'RS Bold', serif; font-size: 12px; color: #FF981F; text-shadow: 1px 1px 0 #000; }
.poh-cell-tier { font-size: 10px; color: #999; font-family: 'RS Plain', serif; }
.poh-cell-modules { font-size: 9px; color: #777; font-family: 'RS Plain', serif; }
.poh-back {
cursor: pointer; color: #aaa; font-size: 12px; font-family: 'RS Plain', serif;
padding: 4px 8px; margin-bottom: 6px;
}
.poh-back:hover { color: #FF981F; }
.poh-section-title {
font-family: 'RS Bold', serif; font-size: 14px; color: #FF981F;
text-shadow: 1px 1px 0 #000; padding: 6px 8px 4px;
}
.poh-room-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 4px;
}
.poh-room-card {
background: #2a2520; border: 2px solid #1a1610; padding: 10px;
border-radius: 4px; text-align: center; transition: border-color 0.15s;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.poh-room-card:hover { border-color: #FF981F; }
.poh-room-card.disabled { opacity: 0.4; cursor: not-allowed; }
.poh-room-card.disabled:hover { border-color: #1a1610; }
.poh-room-card-emoji { font-size: 28px; }
.poh-room-card-name { font-family: 'RS Bold', serif; font-size: 13px; color: #FF981F; text-shadow: 1px 1px 0 #000; }
.poh-room-card-desc { font-size: 11px; color: #aaa; font-family: 'RS Plain', serif; }
.poh-room-card-max { font-size: 10px; color: #ff4444; font-family: 'RS Plain', serif; margin-top: 4px; }
.poh-room-card-req { font-size: 9px; color: #ff6666; font-family: 'RS Plain', serif; margin-top: 2px; }
.poh-build-btn {
margin-top: 6px; padding: 5px 12px;
background: linear-gradient(180deg, #D4854A, #B06830);
border: 1px solid #000;
box-shadow: inset 1px 1px 0 #E8A060, inset -1px -1px 0 #8A4A20;
color: #1a1410; font-weight: 600;
cursor: pointer; font-family: inherit; font-size: 11px;
border-radius: 3px; transition: all 0.15s;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
-webkit-tap-highlight-color: transparent;
}
.poh-build-btn:hover:not(.disabled) { background: linear-gradient(180deg, #E09558, #C07838); }
.poh-build-btn:active:not(.disabled) { box-shadow: inset -1px -1px 0 #E8A060, inset 1px 1px 0 #8A4A20; }
.poh-build-btn.disabled { opacity: 0.35; cursor: not-allowed; }
.poh-module-pick-card.disabled { opacity: 0.5; }
.poh-tier-select { display: flex; gap: 4px; margin-top: 6px; justify-content: center; }
.poh-tier-btn {
padding: 4px 8px; background: #3a342c; border: 1px solid #555; color: #ccc;
cursor: pointer; font-family: 'RS Plain', serif; font-size: 11px; border-radius: 3px;
transition: all 0.15s;
}
.poh-tier-btn:hover:not(.locked):not(.poor) { border-color: #FF981F; color: #FF981F; background: #4a4238; }
.poh-tier-btn.locked { opacity: 0.3; cursor: not-allowed; }
.poh-tier-btn.poor { color: #ff4444; border-color: #663333; }
.poh-room-header {
display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px;
background: #2a2520; border-radius: 4px; border: 1px solid #1a1610;
}
.poh-room-header-emoji { font-size: 32px; }
.poh-room-header-info { display: flex; flex-direction: column; }
.poh-room-header-name { font-family: 'RS Bold', serif; font-size: 15px; color: #FF981F; text-shadow: 1px 1px 0 #000; }
.poh-room-header-tier { font-size: 11px; color: #aaa; font-family: 'RS Plain', serif; }
.poh-room-header-base { font-size: 10px; color: #0f0; font-family: 'RS Plain', serif; margin-top: 2px; }
.poh-action-btn {
background: linear-gradient(180deg, #D4854A, #B06830);
border: 1px solid #000;
box-shadow: inset 1px 1px 0 #E8A060, inset -1px -1px 0 #8A4A20;
color: #1a1410; padding: 8px 12px;
margin: 4px 8px; border-radius: 3px; cursor: pointer; text-align: center;
font-family: inherit; font-size: 12px; font-weight: 600;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.poh-action-btn:hover:not(.disabled) { background: linear-gradient(180deg, #E09558, #C07838); }
.poh-action-btn:active:not(.disabled) { box-shadow: inset -1px -1px 0 #E8A060, inset 1px 1px 0 #8A4A20; }
.poh-action-btn.disabled { opacity: 0.35; cursor: not-allowed; }
.poh-cost { color: #ffd700; }
.poh-req { color: #999; font-size: 10px; }
.poh-module-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 4px;
}
.poh-module-slot {
background: #1a1610; border: 2px dashed #444; min-height: 80px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
cursor: pointer; border-radius: 4px; padding: 8px; text-align: center;
transition: border-color 0.15s;
}
.poh-module-slot:hover { border-color: #FF981F; }
.poh-module-slot.filled { border-style: solid; border-color: #4a4238; cursor: default; }
.poh-module-slot.filled:hover { border-color: #6a6258; }
.poh-module-plus { font-size: 24px; color: #444; }
.poh-module-label { font-size: 10px; color: #555; font-family: 'RS Plain', serif; }
.poh-module-emoji { font-size: 20px; }
.poh-module-name { font-family: 'RS Bold', serif; font-size: 11px; color: #FF981F; text-shadow: 1px 1px 0 #000; }
.poh-module-desc { font-size: 10px; color: #aaa; font-family: 'RS Plain', serif; margin: 2px 0; }
.poh-module-upgrade {
font-size: 10px; color: #4a7a4a; cursor: pointer; margin-top: 4px;
padding: 2px 6px; border: 1px solid #3a5a3a; border-radius: 3px;
font-family: 'RS Plain', serif; transition: all 0.15s;
}
.poh-module-upgrade:hover:not(.disabled) { color: #6aba6a; border-color: #4a7a4a; }
.poh-module-upgrade.disabled { opacity: 0.4; cursor: not-allowed; }
.poh-module-remove {
font-size: 9px; color: #884444; cursor: pointer; margin-top: 3px;
font-family: 'RS Plain', serif;
}
.poh-module-remove:hover { color: #ff4444; }
.poh-module-pick-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 4px;
}
.poh-module-pick-card {
background: #2a2520; border: 2px solid #1a1610; padding: 10px;
border-radius: 4px; text-align: center; display: flex; flex-direction: column;
align-items: center; gap: 4px; transition: border-color 0.15s;
}
.poh-module-pick-card:hover { border-color: #555; }
.poh-module-pick-emoji { font-size: 24px; }
.poh-module-pick-name { font-family: 'RS Bold', serif; font-size: 12px; color: #FF981F; text-shadow: 1px 1px 0 #000; }
.poh-module-pick-desc { font-size: 10px; color: #aaa; font-family: 'RS Plain', serif; }
.poh-bonus-wrap {
margin-top: 8px; padding: 8px; background: #1a1610; border-radius: 4px;
border: 1px solid #2a2520;
}
.poh-bonus-title {
font-family: 'RS Bold', serif; font-size: 12px; color: #00ff00;
text-shadow: 1px 1px 0 #000; margin-bottom: 4px;
}
.poh-bonus-item {
display: inline-block; margin: 2px 8px 2px 0; font-size: 10px;
color: #0f0; font-family: 'RS Plain', serif;
}
.poh-demolish-btn {
margin: 12px 8px 4px; padding: 6px 12px; background: #3a2020; border: 1px solid #5a3030;
color: #aa6666; cursor: pointer; text-align: center; border-radius: 4px;
font-family: 'RS Plain', serif; font-size: 11px; transition: all 0.15s;
}
.poh-demolish-btn:hover { background: #4a2020; color: #ff6666; }
.poh-demolish-btn.confirm { background: #5a1010; color: #ff3333; border-color: #ff3333; }
@media (max-width: 600px) {
.poh-grid { gap: 4px; padding: 2px; }
.poh-cell { min-height: 70px; }
.poh-room-grid, .poh-module-grid, .poh-module-pick-grid { grid-template-columns: 1fr; }
}
/* ===== REBRAND TOGGLE (bank search easter egg) ===== */
.rebrand-toggle-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0 4px;
}
.rebrand-toggle-label {
display: flex;
align-items: center;
gap: 10px;
font: 12px 'RS Plain', serif;
color: var(--gold);
cursor: pointer;
user-select: none;
}
.rebrand-switch {
width: 36px;
height: 20px;
background: #555;
border-radius: 10px;
position: relative;
cursor: pointer;
transition: background 0.2s;
}
.rebrand-switch.on {
background: #4a8;
}
.rebrand-switch-knob {
width: 16px;
height: 16px;
background: #ddd;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: left 0.2s;
}
.rebrand-switch.on .rebrand-switch-knob {
left: 18px;
}
.theme-btn.active {
background: rgba(255, 215, 0, 0.3) !important;
border-color: rgba(255, 215, 0, 0.5) !important;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
.rebrand-font-picker {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
justify-content: center;
}
.rebrand-font-label {
font: 12px 'RS Plain', serif;
color: var(--muted);
}
.rebrand-font-select {
background: var(--darkest, #1A1610);
color: var(--white, #F5F0E0);
border: 1px solid var(--frame, #494034);
border-radius: 3px;
padding: 3px 6px;
font-size: 11px;
cursor: pointer;
}
.rebrand-font-select:focus {
border-color: var(--gold);
outline: none;
}
/* ── RL Hiscores (rebrand sidebar) ── */
.rl-hs { display: flex; flex-direction: column; height: 100%; }
.rl-hs-body { flex: 1; overflow-y: auto; padding: 0; }
.rl-hs-loading { text-align: center; padding: 30px; color: #6a5a4a; font-size: 13px; }
/* Rows */
.rl-hs-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 10px; border-bottom: 1px solid rgba(0,0,0,0.15);
transition: background 0.1s;
}
.rl-hs-row:hover { background: rgba(212,133,74,0.06); }
.rl-hs-avatar { width: 24px; height: 24px; border-radius: 4px; background-size: cover; background-position: center; flex-shrink: 0; background-color: rgba(255,255,255,0.04); }
.rl-hs-profile-avatar { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; margin: 0 auto 8px; display: block; border: 2px solid #4a3a20; }
.rl-hs-me { background: rgba(212,133,74,0.12) !important; }
.rl-hs-me .rl-hs-name { color: #D4854A !important; }
.rl-hs-locked { background: rgba(255,215,0,0.06) !important; }
.rl-hs-locked .rl-hs-name { color: #ffd700 !important; }
.rl-hs-locked .rl-hs-rank { color: #ffd700; }
.rl-hs-discontinued { opacity: 0.55; }
.rl-hs-disc-badge {
font-size: 9px; font-weight: 700; color: #888; background: rgba(255,255,255,0.08);
padding: 1px 4px; border-radius: 3px; margin-left: 4px; flex-shrink: 0;
text-transform: uppercase; letter-spacing: 0.3px;
}
.rl-hs-rank {
min-width: 28px; text-align: right; font-size: 11px; font-weight: 700;
color: #D4854A; opacity: 0.7; font-variant-numeric: tabular-nums;
}
.rl-hs-info { flex: 1; min-width: 0; }
.rl-hs-name-row { display: flex; align-items: center; gap: 4px; }
.rl-hs-iron { width: 10px; height: 10px; image-rendering: pixelated; flex-shrink: 0; }
.rl-hs-name {
font-size: 12px; font-weight: 600; color: #c4a882; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color 0.15s;
}
.rl-hs-name:hover { color: #D4854A; }
.rl-hs-modes { font-size: 9px; color: #5a4a3a; margin-left: 4px; white-space: nowrap; flex-shrink: 0; }
.rl-hs-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rl-hs-lvl {
font-size: 11px; color: #c4a882; font-weight: 600; min-width: 22px; text-align: center;
background: rgba(0,0,0,0.2); padding: 1px 4px; border-radius: 3px;
}
.rl-hs-xp {
font-size: 11px; color: #8AB844; font-variant-numeric: tabular-nums;
min-width: 40px; text-align: right;
}
/* Show more */
.rl-hs-more {
display: block; width: 100%; padding: 8px; margin-top: 2px;
background: #1a1410; border: 1px solid #2a2218; color: #D4854A;
font-size: 11px; cursor: pointer; text-align: center; font-family: inherit;
border-radius: 0;
}
.rl-hs-more:hover { background: #2a2218; }
/* Back button */
.rl-hs-back {
background: none; border: none; color: #D4854A; font-size: 12px;
cursor: pointer; padding: 8px 10px; display: block; font-family: inherit;
}
.rl-hs-back:hover { text-decoration: underline; }
/* Profile card */
.rl-hs-profile {
padding: 10px 14px 14px;
max-width: 280px;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 8px;
}
.rl-hs-profile-particles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
border-radius: 8px;
}
.rl-hs-profile > *:not(.ph-particles) { position: relative; z-index: 1; }
/* Showcase (partyhats, max cape) */
.rl-hs-showcase {
display: flex; justify-content: center; gap: 16px; padding: 6px 0 8px;
border-bottom: 1px solid rgba(212,133,74,0.15); margin-bottom: 8px;
}
.rl-hs-showcase-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rl-hs-showcase-item img { width: 28px; height: 28px; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255,215,0,0.3)); }
.rl-hs-showcase-item span { font-size: 9px; color: #ffd700; }
/* Player name */
.rl-hs-profile-name {
text-align: center; padding: 4px 0 2px; font-size: 16px; font-weight: 700; color: #D4854A;
}
/* Mode badges */
.rl-hs-profile-modes { display: flex; justify-content: center; gap: 4px; padding: 2px 0 8px; flex-wrap: wrap; }
.rl-hs-mode-badge {
background: rgba(212,133,74,0.15); color: #D4854A; padding: 1px 8px;
border-radius: 10px; font-size: 10px; border: 1px solid rgba(212,133,74,0.2);
}
/* Stats grid — 2 columns for readability */
.rl-hs-profile-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
padding: 0 0 8px; border-bottom: 1px solid rgba(212,133,74,0.1); margin-bottom: 8px;
}
.rl-hs-stat-cell {
display: flex; align-items: center; gap: 5px; padding: 4px 8px;
background: rgba(0,0,0,0.18); border-radius: 4px;
}
.rl-hs-stat-cell img { width: 14px; height: 14px; image-rendering: pixelated; flex-shrink: 0; }
.rl-hs-stat-cell div { display: flex; flex-direction: column; min-width: 0; }
.rl-hs-stat-val { font-size: 11px; font-weight: 700; color: #D4854A; line-height: 1.2; }
.rl-hs-stat-lbl { font-size: 9px; color: #6a5a4a; line-height: 1.1; }
/* Skill grid — compact 3 columns */
.rl-hs-skill-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0;
}
.rl-hs-sk {
display: flex; align-items: center; gap: 4px;
padding: 3px 6px; background: rgba(0,0,0,0.18); border-radius: 3px;
border: 1px solid transparent;
}
.rl-hs-sk img { width: 16px; height: 16px; image-rendering: pixelated; flex-shrink: 0; }
.rl-hs-sk span { font-size: 11px; color: #c4a882; font-weight: 600; line-height: 1; }
.rl-hs-sk-max { background: rgba(138,184,68,0.12); border-color: rgba(138,184,68,0.2); }
.rl-hs-sk-max span { color: #8AB844; }
.rl-hs-sk-total {
grid-column: 1 / -1; text-align: center; padding: 4px;
background: rgba(0,0,0,0.18); border-radius: 3px; font-size: 11px; color: #6a5a4a;
margin-top: 2px;
}
.rl-hs-sk-total span { color: #D4854A; font-weight: 700; }
/* Account info */
.rl-hs-account-info {
display: flex; justify-content: center; gap: 12px; padding: 8px 0 0;
font-size: 10px; color: #5a4a3a;
}
/* ── RL Friends (rebrand sidebar) ── */
.rl-fr { display: flex; flex-direction: column; height: 100%; }
.rl-fr-tabs { display: flex; border-bottom: 1px solid rgba(0,0,0,0.3); flex-shrink: 0; }
.rl-fr-tab {
flex: 1; padding: 7px; background: transparent; border: none;
color: #6a5a4a; font-size: 12px; cursor: pointer; font-family: inherit;
border-bottom: 2px solid transparent; transition: all 0.15s;
}
.rl-fr-tab:hover { color: #a09080; }
.rl-fr-tab.active { color: #D4854A; border-bottom-color: #D4854A; }
.rl-fr-priv {
display: flex; align-items: center; gap: 6px; padding: 6px 10px;
border-bottom: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;
}
.rl-fr-priv-label { font-size: 10px; color: #5a4a3a; margin-right: auto; }
.rl-fr-priv-pill {
font-size: 10px; font-weight: 600; color: #9C8878;
background: var(--cell-bg); border: 1px solid #000; border-radius: 12px;
padding: 4px 12px; cursor: pointer;
font-family: inherit; -webkit-tap-highlight-color: transparent;
transition: all 0.15s;
}
.rl-fr-priv-pill:hover { color: #c4a882; background: #302220; }
.rl-fr-priv-pill.active {
color: #D4854A; background: linear-gradient(180deg, #3E302A, #302220);
box-shadow: 0 0 6px rgba(212,133,74,0.15);
}
.rl-fr-body { flex: 1; overflow-y: auto; padding: 2px 0; }
.rl-fr-empty { text-align: center; padding: 30px 10px; color: #5a4a3a; font-size: 12px; }
.rl-fr-row {
display: flex; align-items: center; gap: 8px; padding: 5px 10px;
border-bottom: 1px solid rgba(0,0,0,0.1); transition: background 0.1s;
}
.rl-fr-row:hover { background: rgba(212,133,74,0.06); }
.rl-fr-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
background: #3a2e24; border: 1px solid #2a2218;
transition: all 0.3s;
}
.rl-fr-dot.online {
background: #8AB844; border-color: #8AB844;
box-shadow: 0 0 6px rgba(138,184,68,0.5);
}
.rl-fr-name {
flex: 1; font-size: 12px; color: #6a4a3a; cursor: default;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color 0.15s;
}
.rl-fr-name.online { color: #8AB844; cursor: pointer; }
.rl-fr-name.online:hover { color: #a0d060; }
.rl-fr-remove {
background: none; border: none; color: #3a2e24; font-size: 14px;
cursor: pointer; padding: 0 4px; line-height: 1; opacity: 0;
transition: all 0.15s;
}
.rl-fr-row:hover .rl-fr-remove { opacity: 1; }
.rl-fr-remove:hover { color: #D4854A; }
.rl-fr-add {
display: flex; gap: 6px; padding: 8px 10px;
border-top: 1px solid rgba(0,0,0,0.2); flex-shrink: 0;
}
.rl-fr-add-input {
flex: 1; background: #1a1410; color: #c4a882; border: 1px solid #3a2e24;
padding: 5px 8px; font-size: 12px; border-radius: 4px; font-family: inherit;
}
.rl-fr-add-input::placeholder { color: #4a3a2a; }
.rl-fr-add-input:focus { outline: 1px solid #D4854A; border-color: #D4854A; }
.rl-fr-add-btn {
padding: 4px 14px; background: #D4854A; border: none; color: #1a1410;
font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 4px;
font-family: inherit; transition: background 0.15s;
}
.rl-fr-add-btn:hover { background: #e09560; }
/* ===== REBRAND MODE OVERRIDES ===== */
/* "Dark Ember" — deep mahogany panels, burnished copper accents, charred warmth */
/* --- Core palette ---
Original OSRS = sandy/tan stone (#3E3529, #5A4E40) with bright yellow gold (#FFD700)
Dark Ember = deep red-brown mahogany (#2E2420, #442E24) with burnished copper (#D4854A)
The hue shifts from yellow-brown to red-brown. Deeper, richer, more dramatic. */
body.rebrand {
/* Structural — deep mahogany, red-brown undertone */
--frame: #442E24;
--frame-hi: #5E4438;
--frame-lo: #1E1410;
--panel-bg: #382A22;
--dark-bg: #2A2018;
--darkest: #201812;
/* Accent — burnished copper (warmer, redder than gold) */
--gold: #D4854A;
--gold-dim: #A86030;
/* State colors — warm-toned, organic */
--green: #8AB844;
--red: #CC4433;
/* Text */
--white: #EDE4D8;
--muted: #9C8878;
/* Chat */
--chat-bg: #1C1610;
/* Interactive surfaces */
--cell-bg: #362820;
--cell-hover: #423228;
--cell-active: #4A3A30;
--parchment-shade-base: #3C2A22;
--parchment-shade-overlay: linear-gradient(180deg, rgba(22,16,12,0.72), rgba(28,20,16,0.62));
--parchment-shade-radial: radial-gradient(ellipse at center, rgba(255,244,220,0.04) 0%, rgba(255,244,220,0.015) 32%, rgba(0,0,0,0) 68%);
--parchment-shade-image: url('../img/parchment-background-texture.png');
/* Font */
--rebrand-font: 'Lexend', sans-serif;
background: #1A1410;
}
/* --- Font swap --- */
body.rebrand,
body.rebrand *:not(input):not(textarea):not(select) {
font-family: var(--rebrand-font) !important;
}
body.rebrand input,
body.rebrand textarea,
body.rebrand select {
font-family: var(--rebrand-font);
}
/* --- Chat size adjustments (Lexend renders larger than RS fonts) --- */
body.rebrand .chatbox-tab { font-size: 14px; }
body.rebrand .chatbox-tab .tab-state { font-size: 8px; }
body.rebrand .chat-line { font-size: 16px; }
body.rebrand .chat-input { font-size: 15px; }
body.rebrand .chat-input::placeholder { font-size: 14px; }
/* ---- TOPBAR ---- */
body.rebrand .topbar {
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image);
background-size: auto, auto, cover;
background-position: center, center, center;
background-repeat: repeat, no-repeat, no-repeat;
border-bottom: 2px solid #100C08;
box-shadow: inset 0 1px 0 rgba(94,68,56,0.6), 0 2px 6px rgba(0,0,0,0.5);
}
body.rebrand .topbar-title {
color: var(--gold);
text-shadow: 1px 1px 0 #000, 0 0 10px rgba(212,133,74,0.35);
}
body.rebrand .topbar-alpha {
background: var(--gold);
color: #18100E;
font-weight: 800;
}
body.rebrand .topbar-stat { color: var(--white); }
body.rebrand .gold { color: var(--gold); }
/* Reorder topbar: left | patch notes | search | support | ... online | stats */
body.rebrand .topbar-left { order: 0; }
body.rebrand .global-search-wrap { order: 1; }
body.rebrand .topbar-support { order: 2; }
body.rebrand .topbar-online { order: 8; }
body.rebrand .topbar-stats { order: 9; margin-left: auto; }
body.rebrand #hiscores-btn { display: none; }
body.rebrand .topbar-settings-btn { display: none; }
body.rebrand .sidebar-bottom-bar { display: none; }
/* ---- SIDEBAR & PILLARS ---- */
body.rebrand .sidebar {
background: var(--panel-bg);
border-color: #100C08;
}
body.rebrand .sidebar::before,
body.rebrand .sidebar::after {
background:
linear-gradient(90deg,
#1E1410 0px,
#4A3428 1px,
#5E4438 2px,
#4A3428 4px,
#442E24 5px,
#302220 6px,
#1E1410 7px
) !important;
box-shadow: inset 0 0 4px rgba(0,0,0,0.6) !important;
}
/* ---- SIDEBAR TABS ---- */
body.rebrand .sidebar-top-tabs,
body.rebrand .sidebar-tabs {
background: #221814;
}
body.rebrand .sidebar-top-tab,
body.rebrand .sidebar-tab {
background: linear-gradient(180deg, #442E24, #302220, #221814);
border-color: #100C08;
}
body.rebrand .sidebar-top-tab:hover,
body.rebrand .sidebar-tab:hover {
background: linear-gradient(180deg, #5E4438, #3E302A, #302220);
}
body.rebrand .sidebar-top-tab.active,
body.rebrand .sidebar-tab.active {
background: linear-gradient(180deg, #5E4438, #4A3428, #442E24);
border-color: #442E24;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.rebrand .sidebar-top-tab.active::before,
body.rebrand .sidebar-tab.active::before {
background: #442E24;
}
/* ---- SIDEBAR BODY ---- */
body.rebrand .sidebar-body { background: var(--cell-bg); }
body.rebrand .sidebar-splitter { background: var(--darkest); border-color: #100C08; }
body.rebrand .sidebar-splitter::after { background: #5E4438; }
body.rebrand .sidebar-splitter:hover::after { background: #9C8878; }
/* ---- SHARED CONTENT SURFACES ---- */
body.rebrand .sidebar-body,
body.rebrand .rc-panel-body:not(#rc-panel-body-bank),
body.rebrand .rl-panel-body,
body.rebrand .friends-panel-body,
body.rebrand #marketplace-panel-body,
body.rebrand .equip-tools,
body.rebrand .equip-stats,
body.rebrand .loadout-controls,
body.rebrand .equip-prayer-row,
body.rebrand .equip-style-row,
body.rebrand .equip-actions,
body.rebrand .combat-tab-grid,
body.rebrand .prayer-tab,
body.rebrand .prayer-summary {
background-color: #221814;
background-image:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12)),
url('../img/viewport-background-texture.png');
background-size: auto, cover;
background-position: center, center;
background-repeat: repeat, no-repeat;
}
body.rebrand .rc-panel-head,
body.rebrand .rc-panel-tabs,
body.rebrand .rc-panel-search,
body.rebrand .rc-panel-foot,
body.rebrand .rc-modal,
body.rebrand .rc-modal-inner,
body.rebrand .rc-modal-head,
body.rebrand .rc-modal-body,
body.rebrand .eq-section-head,
body.rebrand .combat-tab-category,
body.rebrand .autocast-info-panel,
body.rebrand .charselect-panel,
body.rebrand .charselect-inner,
body.rebrand .charselect-header,
body.rebrand .charselect-footer,
body.rebrand .global-search-dropdown {
background-image:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12)),
url('../img/viewport-background-texture.png');
background-size: auto, cover;
background-position: center, center;
background-repeat: repeat, no-repeat;
}
body.rebrand .rl-panel-header,
body.rebrand .rl-panel-body {
background-color: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image);
background-size: auto, auto, cover;
background-position: center, center, center;
background-repeat: repeat, no-repeat, no-repeat;
}
body.rebrand .eq-section-head {
background-color: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image);
background-size: auto, auto, cover;
background-position: center, center, center;
background-repeat: repeat, no-repeat, no-repeat;
border: 2px solid #6E5647;
border-radius: 0;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
}
body.rebrand [data-panel="equipment"] .rc-panel-head {
background-color: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image);
background-size: auto, auto, cover;
background-position: center, center, center;
background-repeat: repeat, no-repeat, no-repeat;
border: 2px solid #6E5647;
border-radius: 0;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
}
body.rebrand [data-panel="equipment"] .rc-panel-tabs,
body.rebrand [data-panel="equipment"] .rc-panel-tab {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #3C2A22, #2E1E18);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
}
body.rebrand [data-panel="equipment"] .rc-panel-tabs,
body.rebrand [data-panel="equipment"] .rc-panel-tab:hover,
body.rebrand [data-panel="equipment"] .rc-panel-tab.active {
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #3C2A22, #2E1E18);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
}
body.rebrand [data-panel="equipment"] .rc-panel-tab:hover {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #4A3428, #3C2A22);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
}
body.rebrand [data-panel="equipment"] .rc-panel-tab.active {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #503C30, #442E24);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
}
body.rebrand [data-panel="equipment"] .rl-tabs--raised .rl-tab {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #442E24, #362A1C);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
color: var(--gold);
text-shadow: 1px 1px 0 #000;
}
body.rebrand [data-panel="equipment"] .rl-tabs--raised .rl-tab:hover {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #4A3428, #3C2A22);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
color: var(--gold);
}
body.rebrand [data-panel="equipment"] .rl-tabs--raised .rl-tab.active {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #5C4A30, #483820);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
color: var(--gold);
}
/* ---- SKILL GRID ---- */
body.rebrand .skill-grid {
background: var(--darkest);
gap: 5px;
padding: 5px;
}
body.rebrand .skill-cell {
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
border: 2px solid #6E5647;
border-radius: 0;
position: relative;
-webkit-mask: none;
mask: none;
transition: transform 0.15s, box-shadow 0.2s, background 0.15s;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
}
/* XP progress bar at bottom of cell */
body.rebrand .skill-cell::after {
content: '';
position: absolute;
bottom: 3px;
left: 8%;
width: 84%;
height: 2px;
background: rgba(0, 0, 0, 0.3);
border-radius: 2px;
}
body.rebrand .skill-cell .sk-xp-bar {
position: absolute;
bottom: 3px;
left: 8%;
width: calc(84% * var(--progress, 0));
height: 2px;
background: #8AB844;
border-radius: 2px;
z-index: 1;
transition: width 0.3s ease;
}
/* Maxed skill */
body.rebrand .skill-cell.maxed {
border-color: rgba(212, 133, 74, 0.5);
box-shadow: 0 0 8px rgba(212, 133, 74, 0.12);
}
body.rebrand .skill-cell.maxed::after { display: none; }
body.rebrand .skill-cell.maxed .sk-xp-bar {
background: var(--gold);
width: 84%;
}
/* Hover */
body.rebrand .skill-cell:hover {
border-color: #8A6A54;
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.09),
0 4px 12px rgba(0, 0, 0, 0.35);
}
/* Active */
body.rebrand .skill-cell.active {
border-color: var(--gold);
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
/* Level number — back to right side */
body.rebrand .sk-levels {
margin-left: auto;
}
body.rebrand .sk-hi, body.rebrand .sk-lo {
color: #E8C060;
}
body.rebrand .total-level-cell {
background: #4A3428;
color: var(--gold);
border-radius: 8px;
}
body.rebrand .total-level-cell .total-num { color: var(--gold); }
/* ---- COMBAT TAB (Dark Ember) ---- */
body.rebrand .combat-tab-grid {
background: var(--darkest);
gap: 6px;
padding: 8px;
}
body.rebrand .combat-tab-btn {
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
border: 2px solid #6E5647;
border-radius: 0;
-webkit-mask: none;
mask: none;
padding: 12px 8px;
transition: background 0.15s, transform 0.15s, box-shadow 0.2s, border-color 0.15s;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
}
body.rebrand .combat-tab-btn:hover {
border-color: #8A6A54;
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.09),
0 4px 12px rgba(0,0,0,0.35);
}
body.rebrand .combat-tab-btn.active {
border-color: #FFD700;
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
body.rebrand .combat-tab-btn.active:hover {
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
body.rebrand .combat-tab-retaliate {
background: #4A3428;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
border: 1px solid #5E4438;
border-radius: 10px;
margin: 0 8px 8px;
-webkit-mask: none;
mask: none;
transition: background 0.15s;
}
body.rebrand .combat-tab-retaliate.active {
background-color: #5A4438;
border-color: var(--gold);
box-shadow: inset 0 0 8px rgba(212,133,74,0.12);
}
body.rebrand .combat-tab-category {
background: var(--darkest);
border-top-color: #100C08;
color: #A86030;
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
body.rebrand .autocast-info-panel {
background: #2E1E18;
border: 1px solid #5E4438;
border-radius: 8px;
}
body.rebrand .cs-xp-label {
font-size: 9px;
color: #A08060;
font-weight: 400;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.3px;
}
/* ---- METHOD LIST ---- */
body.rebrand .meth-xp { color: var(--green); }
body.rebrand .meth-gp { color: var(--gold); }
body.rebrand .method-detail-btn {
background: linear-gradient(180deg, #5a3a28, #4a2a1a);
border-color: rgba(212,133,74,0.4);
}
body.rebrand .method-detail-btn:hover {
background: linear-gradient(180deg, #6a4a38, #5a3a28);
border-color: rgba(212,133,74,0.6);
}
/* ---- RL PANEL / SIDEBAR method-rows — ds-unified overrides ---- */
/* ---- BANK ---- */
body.rebrand .prayer-tab {
background: #2A1E1A;
}
body.rebrand .prayer-cell {
background: #2A1E1A;
}
body.rebrand .prayer-cell:hover:not(.locked) {
background: #3A2A22;
border-color: rgba(180, 120, 80, 0.3);
}
body.rebrand .prayer-cell.active {
background: rgba(60, 35, 25, 0.9);
border-color: #8B5A2B;
box-shadow: inset 0 0 8px rgba(180, 120, 60, 0.2), 0 0 4px rgba(180, 120, 60, 0.1);
}
body.rebrand .prayer-cell.active img {
filter: drop-shadow(0 0 3px rgba(180, 120, 60, 0.5));
}
body.rebrand .prayer-footer {
background: linear-gradient(180deg, #302220, #221814);
}
body.rebrand .prayer-summary {
background: #221814;
}
body.rebrand .bank-grid {
background: transparent;
}
/* ---- ACTION PANEL (viewport) ---- */
/* Scale up viewport center elements — anchor bottom, grow upward */
body.rebrand .vp-center {
margin: auto 0;
/* Circle grew 50px (260→310) + text ~10px bigger = ~60px taller total.
Shift up by half so the bottom stays put and growth goes upward. */
transform: translateY(-30px);
gap: 12px;
}
body.rebrand .action-icon-wrap {
width: 310px;
height: 310px;
background: radial-gradient(circle, rgba(212,133,74,0.05) 0%, transparent 70%),
rgba(16,12,8,0.2);
border-color: var(--frame);
box-shadow: 0 0 24px rgba(0,0,0,0.6), inset 0 0 50px rgba(0,0,0,0.5);
}
body.rebrand .action-icon-wrap:active {
border-color: var(--gold);
box-shadow: 0 0 30px rgba(212,133,74,0.18), inset 0 0 15px rgba(0,0,0,0.4);
}
body.rebrand .action-icon-wrap.clog-complete {
border-color: var(--green);
}
body.rebrand .action-icon .icon-action { width: 152px; height: 152px; }
body.rebrand .action-icon.monster .icon-action { width: 236px; height: 236px; }
body.rebrand .monster-hp-wrap { width: 310px; }
body.rebrand .action-skill-name { color: var(--gold); font-size: 22px; }
body.rebrand .action-method-name { font-size: 16px; }
body.rebrand .action-xp { font-size: 15px; }
body.rebrand .action-cost { font-size: 14px; }
body.rebrand .weapon-display { font-size: 13px; }
body.rebrand .player-hp-wrap { width: 310px; }
body.rebrand .action-progress-fill {
background: linear-gradient(90deg, #6E9830, var(--green));
box-shadow: 0 0 6px rgba(138,184,68,0.3);
}
body.rebrand .action-status.training { color: var(--green); }
/* (settings rebrand overrides removed — now uses rc-modal rebrand) */
/* ---- CHATBOX ---- */
body.rebrand .chatbox {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
var(--chat-bg);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
}
body.rebrand .chatbox-inner {
background:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
linear-gradient(180deg, #d8cba8, #c9bc99);
background-size: auto, auto, cover, auto;
background-position: center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat;
}
body.rebrand .chatbox-tabs { background: #221814; border-color: #100C08; }
body.rebrand .chatbox-tab {
background: linear-gradient(180deg, #442E24, #3C2A22, #302220);
border-color: #221814;
color: var(--white);
}
body.rebrand .chatbox-tab:hover {
background: linear-gradient(180deg, #5E4438, #442E24, #3C2A22);
}
body.rebrand .chatbox-tab.active {
background: linear-gradient(180deg, #5E4438, #4A3428, #442E24);
border-bottom-color: #442E24;
}
body.rebrand .chat-input-row { background: #302220; border-top-color: #442E24; }
body.rebrand .chat-input {
background: #221814;
border-color: #442E24;
color: var(--white);
}
/* ---- CHARACTER SELECT ---- */
body.rebrand .charselect-title {
color: var(--gold);
text-shadow: 1px 1px 0 #000, 0 0 12px rgba(212,133,74,0.3);
}
body.rebrand .charselect-panel {
background: #442E24;
background-image: linear-gradient(180deg, #4A3428 0%, #442E24 8%, #3C2A22 92%, #302220 100%);
border-color: #100C08;
box-shadow:
inset 1px 1px 0 #5E4438,
inset -1px -1px 0 #1E1410,
0 6px 24px rgba(0,0,0,0.8);
}
body.rebrand .charselect-inner {
background: #302220;
background-image: linear-gradient(180deg, #362820 0%, #382A22 15%, #382A22 85%, #302220 100%);
border-color: #18100E;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 #5E4438;
}
body.rebrand .charselect-header {
background: linear-gradient(180deg, #3E302A, #302220);
border-bottom-color: #1E1410;
}
body.rebrand .charselect-footer {
background: linear-gradient(180deg, #302220, #3E302A);
border-top-color: #1E1410;
}
body.rebrand .charslot {
background: var(--cell-bg);
border-color: #18100E;
}
body.rebrand .charslot:hover {
background: #302220;
border-color: #5E4438;
}
body.rebrand .charslot-active {
background: #3C2A22;
border-color: var(--gold);
}
/* ---- GLOBAL SEARCH DROPDOWN ---- */
body.rebrand .global-search-dropdown {
background: #302220;
background-image: linear-gradient(180deg, #362820, #382A22, #302220);
border-color: #100C08;
box-shadow: inset 1px 1px 0 #5E4438, 0 6px 24px rgba(0,0,0,0.8);
}
body.rebrand .gs-result-row:hover { background: var(--cell-hover); }
/* ---- MISC ---- */
body.rebrand .osrs-btn {
background: linear-gradient(180deg, #442E24, #3C2A22);
border-color: #1E1410;
color: var(--white);
}
body.rebrand .osrs-btn:hover {
background: linear-gradient(180deg, #5E4438, #442E24);
}
body.rebrand .quest-section-title {
background: linear-gradient(180deg, #302220, #221814);
border-bottom-color: #100C08;
}
/* ---- GAME BODY ---- */
body.rebrand .game-body { background: #100C08; }
/* ---- CHECKBOXES & SLIDERS — copper accent ---- */
body.rebrand .osrs-checkbox .checkmark { color: var(--green); }
body.rebrand .settings-slider-segment.filled {
background: linear-gradient(180deg, #D4854A, #B06830, #A86030);
border-color: #804820;
}
/* ---- REBRAND: Custom skill icons ---- */
body.rebrand .sk-icon {
image-rendering: auto;
width: 40px;
height: 40px;
object-fit: contain;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.6));
flex-shrink: 0;
}
body.rebrand .icon-tab,
body.rebrand .sidebar-top-tab img,
body.rebrand .sidebar-tab img,
body.rebrand .events-hub-btn img {
image-rendering: auto;
width: 34px;
height: 34px;
object-fit: contain;
}
body.rebrand .xp-drop-icon,
body.rebrand .quest-req-icon,
body.rebrand .xpt-icon,
body.rebrand .xp-canvas-icon {
image-rendering: auto;
}
body.rebrand img[src*="oldschool.runescape.wiki/images/Hitpoints_icon"],
body.rebrand img[src*="oldschool.runescape.wiki/images/Prayer_icon"] {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
}
/* Ironman chat badge — bigger in rebrand since watercolor icons need more space */
body.rebrand .chat-mode-badge {
width: 18px;
height: 18px;
image-rendering: auto;
}
.no-bonus-badge {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 2px;
flex-shrink: 0;
display: inline-block;
}
body.rebrand .hiscores-iron-badge {
width: 16px;
height: 16px;
image-rendering: auto;
}
.resource-timer {
font-size: 10px;
color: #9B8B6B;
text-align: center;
margin-top: 2px;
}
.method-row.method-hidden {
opacity: 0.4;
}
.method-hidden-toggle {
text-align: center;
font-size: 11px;
color: #9B8B6B;
padding: 4px 0;
cursor: pointer;
}
.method-hidden-toggle:hover {
color: #F5F0E0;
}
.chatbox-tab-add {
min-width: 24px;
padding: 0 6px;
font-size: 14px;
font-weight: bold;
opacity: 0.5;
}
.chatbox-tab-add:hover {
opacity: 1;
}
/* ============================================================
THE MARKETPLACE — Trade Post
Stone-panel heritage, weathered medieval aesthetic
============================================================ */
/* --- Header --- */
.marketplace-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: linear-gradient(180deg, #3a342c 0%, #2e2922 100%);
border-bottom: 2px solid #1a1610;
position: relative;
}
.marketplace-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 152, 31, 0.25), transparent);
}
.marketplace-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
color: #FF981F;
text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255, 152, 31, 0.2);
letter-spacing: 0.5px;
}
.marketplace-gold {
font-family: 'RS Plain', serif;
font-size: 13px;
color: #FFD700;
display: flex;
align-items: center;
gap: 5px;
text-shadow: 1px 1px 0 #000;
}
.marketplace-coin-icon {
width: 18px;
height: 18px;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
.marketplace-ironman-msg {
padding: 40px 20px;
text-align: center;
color: #8B7D6B;
font-size: 14px;
font-family: 'RS Plain', serif;
}
/* --- Primary Action Buttons (Buy/Sell) --- */
.marketplace-actions {
display: flex;
gap: 8px;
padding: 10px;
align-items: center;
}
.marketplace-action-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 8px;
border-radius: 4px;
border: 2px solid;
cursor: pointer;
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 15px;
text-shadow: 1px 1px 0 #000;
transition: all 0.15s;
}
.marketplace-action-btn:active { transform: translateY(1px); }
.marketplace-action-buy {
background: linear-gradient(180deg, #1e5a25, #143a18);
border-color: #2a7a3a;
color: #4ae04a;
}
.marketplace-action-buy:hover {
background: linear-gradient(180deg, #2a6a30, #1e4a22);
box-shadow: 0 0 12px rgba(51, 204, 51, 0.15);
}
.marketplace-action-sell {
background: linear-gradient(180deg, #5a1e1e, #3a1414);
border-color: #7a2a2a;
color: #e04a4a;
}
.marketplace-action-sell:hover {
background: linear-gradient(180deg, #6a2a2a, #4a1e1e);
box-shadow: 0 0 12px rgba(204, 51, 51, 0.15);
}
.marketplace-action-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.marketplace-action-icon { font-size: 18px; line-height: 1; }
.marketplace-slots-count {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #6B5D4F;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
min-width: 70px;
text-align: center;
}
/* --- Collect All Banner --- */
.marketplace-collect-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
margin: 0 10px 6px;
background: linear-gradient(180deg, #1a3a5a, #122840);
border: 1px solid #2a5a8a;
border-radius: 4px;
animation: marketplace-collect-pulse 2s ease-in-out infinite;
}
.marketplace-collect-banner-text {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #5af;
text-shadow: 1px 1px 0 #000;
}
/* --- Empty State --- */
.marketplace-empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 20px;
text-align: center;
}
.marketplace-empty-icon img { width: 40px; height: 40px; opacity: 0.3; filter: grayscale(0.5); }
.marketplace-empty-text {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 14px;
color: #6B5D4F;
margin-top: 10px;
text-shadow: 1px 1px 0 #000;
}
.marketplace-empty-hint {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #4a4035;
margin-top: 4px;
max-width: 240px;
}
/* --- Offer List --- */
.marketplace-offer-list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 10px 10px;
}
.marketplace-offer-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: linear-gradient(180deg, #302a24 0%, #252017 100%);
border: 1px solid #494034;
border-radius: 4px;
transition: border-color 0.15s;
}
.marketplace-offer-row:hover { border-color: #6B5D4F; }
.marketplace-offer-buy { border-left: 3px solid #2a6a35; }
.marketplace-offer-sell { border-left: 3px solid #6a2a2a; }
.marketplace-offer-complete { border-color: #5a5030; }
.marketplace-offer-collectable { border-color: #2a5a8a; }
.marketplace-offer-type-badge {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 2px;
text-shadow: 1px 1px 0 #000;
flex-shrink: 0;
}
.marketplace-badge-buy { background: rgba(51, 204, 51, 0.15); color: #4ae04a; border: 1px solid rgba(51, 204, 51, 0.2); }
.marketplace-badge-sell { background: rgba(204, 51, 51, 0.15); color: #e04a4a; border: 1px solid rgba(204, 51, 51, 0.2); }
.marketplace-offer-icon {
width: 32px; height: 32px; object-fit: contain;
background: rgba(0,0,0,0.25); border: 1px solid #3a342c; border-radius: 3px; padding: 2px; flex-shrink: 0;
}
.marketplace-offer-info { flex: 1; min-width: 0; }
.marketplace-offer-name {
font-size: 12px; color: #FF981F; font-family: 'RS Plain', serif;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000;
}
.marketplace-offer-detail { font-size: 10px; color: #8B7D6B; font-family: 'RS Plain', serif; margin-top: 2px; }
.marketplace-offer-progress {
height: 4px; background: #1a1610; border-radius: 2px; overflow: hidden; margin-top: 4px; border: 1px solid #2a2520;
}
.marketplace-offer-progress-fill { height: 100%; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 1px; }
.marketplace-offer-progress-fill.marketplace-fill-buy { background: linear-gradient(90deg, #2a8a2a, #4ae04a); }
.marketplace-offer-progress-fill.marketplace-fill-sell { background: linear-gradient(90deg, #8a2a2a, #e04a4a); }
.marketplace-offer-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* --- Buttons (bevel style, matches p-bv-btn) --- */
.marketplace-btn {
padding: 6px 14px;
border: 1px solid #000;
border-radius: 3px;
background: linear-gradient(180deg, #442E24, #3C2A22);
box-shadow: inset 1px 1px 0 #5E4438, inset -1px -1px 0 #1E1410;
color: #c4a882;
font-size: 11px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
text-shadow: 1px 1px 0 #000;
transition: all 0.1s;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.marketplace-btn:hover {
background: linear-gradient(180deg, #5E4438, #4A3830);
color: #EDE4D8;
}
.marketplace-btn:active {
box-shadow: inset -1px -1px 0 #5E4438, inset 1px 1px 0 #1E1410;
transform: translateY(1px);
}
.marketplace-btn-buy {
background: linear-gradient(180deg, #1e5a25, #143a18);
box-shadow: inset 1px 1px 0 #2a7a3a, inset -1px -1px 0 #0a2a0a;
border-color: #000;
color: #4ae04a;
}
.marketplace-btn-buy:hover {
background: linear-gradient(180deg, #2a6a30, #1e4a22);
color: #5ff05f;
}
.marketplace-btn-sell {
background: linear-gradient(180deg, #5a1e1e, #3a1414);
box-shadow: inset 1px 1px 0 #7a3a3a, inset -1px -1px 0 #2a0a0a;
border-color: #000;
color: #e04a4a;
}
.marketplace-btn-sell:hover {
background: linear-gradient(180deg, #6a2a2a, #4a1e1e);
color: #f05f5f;
}
.marketplace-btn-collect {
background: linear-gradient(180deg, #1a3a5a, #122840);
box-shadow: inset 1px 1px 0 #2a5a8a, inset -1px -1px 0 #0a1a2a;
border-color: #000;
color: #5af;
animation: marketplace-collect-pulse 2s ease-in-out infinite;
}
@keyframes marketplace-collect-pulse {
0%, 100% { box-shadow: inset 1px 1px 0 #2a5a8a, inset -1px -1px 0 #0a1a2a, 0 0 0 0 rgba(85, 170, 255, 0); }
50% { box-shadow: inset 1px 1px 0 #2a5a8a, inset -1px -1px 0 #0a1a2a, 0 0 8px 2px rgba(85, 170, 255, 0.25); }
}
.marketplace-btn-collect:hover {
background: linear-gradient(180deg, #2a4a6a, #1a3a50);
animation: none;
box-shadow: inset 1px 1px 0 #2a5a8a, inset -1px -1px 0 #0a1a2a, 0 0 8px 2px rgba(85, 170, 255, 0.3);
}
.marketplace-btn-cancel {
background: linear-gradient(180deg, #3a2e24, #2a2018);
box-shadow: inset 1px 1px 0 #4a3a2e, inset -1px -1px 0 #1a1410;
color: #8B7D6B;
}
.marketplace-btn-cancel:hover {
background: linear-gradient(180deg, #4a3e34, #3a3028);
color: #c8b89a;
}
.marketplace-btn-confirm {
width: 100%;
padding: 10px;
margin-top: 10px;
background: linear-gradient(180deg, #D4854A, #B06830);
border: 1px solid #000;
box-shadow: inset 1px 1px 0 #E8A060, inset -1px -1px 0 #8A4A20;
border-radius: 3px;
color: #1a1410;
font-size: 13px;
font-weight: 700;
font-family: inherit;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
letter-spacing: 0.5px;
transition: all 0.15s;
}
.marketplace-btn-confirm:hover {
background: linear-gradient(180deg, #E09558, #C07838);
box-shadow: inset 1px 1px 0 #E8A060, inset -1px -1px 0 #8A4A20, 0 0 12px rgba(212,133,74,0.3);
}
.marketplace-btn-confirm:active {
box-shadow: inset -1px -1px 0 #E8A060, inset 1px 1px 0 #8A4A20;
transform: translateY(1px);
}
.marketplace-btn-confirm.marketplace-btn-confirm-sell {
background: linear-gradient(180deg, #8A3A3A, #6A2D2D);
box-shadow: inset 1px 1px 0 #A04A4A, inset -1px -1px 0 #4A1A1A;
color: #ffcccc;
text-shadow: 1px 1px 0 #000;
}
.marketplace-btn-confirm.marketplace-btn-confirm-sell:hover {
background: linear-gradient(180deg, #9A4A4A, #7A3D3D);
box-shadow: inset 1px 1px 0 #A04A4A, inset -1px -1px 0 #4A1A1A, 0 0 12px rgba(204, 51, 51, 0.2);
}
/* --- Create Offer Overlay --- */
.marketplace-create-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
animation: panel-fade 0.2s ease-out;
}
/* --- Create Offer Panel (stone frame) --- */
.marketplace-create-panel {
background: #5d5549;
background-image:
linear-gradient(180deg, #706358 0%, #5d5549 8%, #524940 92%, #3d3630 100%);
border: 2px solid #000;
width: 360px;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow:
inset 1px 1px 0 #8B7D6B,
inset -1px -1px 0 #2A2420,
0 6px 24px rgba(0,0,0,0.7);
animation: panel-slide 0.25s ease-out;
}
.marketplace-create-panel-inner {
background: #3a342c;
background-image:
linear-gradient(180deg, #332e27 0%, #3a342c 15%, #3a342c 85%, #2e2922 100%);
margin: 4px;
border-radius: 3px;
border: 1px solid #1a1610;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 1px 0 #6B6256;
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1;
min-height: 0;
}
.marketplace-create-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 14px 8px;
border-bottom: 1px solid #2A2420;
background: linear-gradient(180deg, #4a4238 0%, #3d3630 100%);
flex-shrink: 0;
}
.marketplace-create-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 16px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.8px;
}
.marketplace-create-close {
background: none;
border: none;
color: #8B7D6B;
font-size: 22px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color 0.1s;
font-family: 'RS Bold', serif;
text-shadow: 1px 1px 0 #000;
}
.marketplace-create-close:hover { color: #FF981F; }
.marketplace-create-body {
padding: 12px 14px;
overflow-y: auto;
flex: 1;
min-height: 0;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* --- Search --- */
.marketplace-search-wrap {
margin-bottom: 8px;
}
.marketplace-search-input {
width: 100%;
padding: 8px 10px;
background: #1a1610;
border: 1px solid #494034;
border-radius: 4px;
color: var(--white);
font-size: 13px;
font-family: 'RS Plain', serif;
box-sizing: border-box;
transition: border-color 0.15s;
}
.marketplace-search-input::placeholder {
color: #6B5D4F;
font-style: italic;
}
.marketplace-search-input:focus {
outline: none;
border-color: #FF981F;
box-shadow: 0 0 8px rgba(255, 152, 31, 0.15);
}
.marketplace-search-results {
max-height: 280px;
overflow-y: auto;
margin-top: 4px;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.marketplace-search-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
cursor: pointer;
border-radius: 3px;
transition: background 0.1s;
border: 1px solid transparent;
}
.marketplace-search-row:hover {
background: rgba(255, 152, 31, 0.1);
border-color: rgba(255, 152, 31, 0.15);
}
.marketplace-search-row:active {
background: rgba(255, 152, 31, 0.18);
}
.marketplace-search-icon {
width: 26px;
height: 26px;
object-fit: contain;
background: rgba(0,0,0,0.2);
border: 1px solid #2a2520;
border-radius: 3px;
padding: 2px;
flex-shrink: 0;
}
.marketplace-search-name {
flex: 1;
font-size: 12px;
color: #c8b89a;
font-family: 'RS Plain', serif;
}
.marketplace-search-price {
font-size: 11px;
color: #FFD700;
font-family: 'RS Plain', serif;
text-shadow: 1px 1px 0 #000;
}
.marketplace-search-qty {
font-size: 11px;
color: #8B7D6B;
font-family: 'RS Plain', serif;
}
.marketplace-search-empty {
text-align: center;
color: #6B5D4F;
font-family: 'RS Plain', serif;
font-size: 12px;
padding: 16px 8px;
font-style: italic;
}
/* --- Selected Item --- */
.marketplace-selected-info {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
padding: 8px 10px;
background: linear-gradient(180deg, #302a24, #282320);
border: 1px solid #494034;
border-radius: 4px;
}
.marketplace-selected-icon {
width: 36px;
height: 36px;
object-fit: contain;
background: rgba(0,0,0,0.3);
border: 1px solid #3a342c;
border-radius: 3px;
padding: 3px;
flex-shrink: 0;
}
.marketplace-selected-name {
flex: 1;
font-size: 14px;
font-family: 'RS Bold', 'RS Plain', serif;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
}
.marketplace-btn-change {
background: linear-gradient(180deg, #4a4035, #3a3020);
border: 1px solid #5c4a3a;
border-radius: 3px;
color: #8B7D6B;
font-size: 11px;
padding: 3px 10px;
cursor: pointer;
font-family: 'RS Plain', serif;
text-shadow: 1px 1px 0 #000;
transition: all 0.1s;
}
.marketplace-btn-change:hover {
color: #FF981F;
border-color: #FF981F;
background: linear-gradient(180deg, #5a4a3a, #4a3a2a);
}
/* --- Price Guide --- */
.marketplace-price-guide {
margin-bottom: 10px;
font-size: 12px;
background: linear-gradient(180deg, #252017, #1e1a16);
border: 1px solid #3a342c;
border-radius: 4px;
padding: 8px 10px;
overflow: hidden;
}
.marketplace-price-guide-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 11px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.marketplace-guide-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
color: #6B5D4F;
font-family: 'RS Plain', serif;
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.marketplace-guide-row:last-child { border-bottom: none; }
.marketplace-guide-row span:last-child {
color: #c8b89a;
font-family: 'RS Plain', serif;
}
.marketplace-guide-val-gold {
color: #FFD700 !important;
text-shadow: 1px 1px 0 #000;
}
/* --- Create Inputs --- */
.marketplace-create-inputs {
display: flex;
flex-direction: column;
gap: 8px;
}
.marketplace-create-inputs label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: #8B7D6B;
font-family: 'RS Plain', serif;
}
.marketplace-input-group {
display: flex;
align-items: center;
gap: 4px;
}
.marketplace-input {
width: 110px;
padding: 6px 8px;
background: #1a1610;
border: 1px solid #494034;
border-radius: 3px;
color: var(--white);
font-size: 14px;
font-family: 'RS Plain', serif;
text-align: right;
transition: border-color 0.15s;
}
.marketplace-input:focus {
outline: none;
border-color: #FF981F;
box-shadow: 0 0 6px rgba(255, 152, 31, 0.1);
}
.marketplace-input-suffix {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #6B5D4F;
}
.marketplace-qty-presets {
display: flex;
gap: 4px;
margin-top: 2px;
}
.marketplace-qty-preset {
flex: 1;
padding: 4px 0;
background: linear-gradient(180deg, #3a3428, #2e2922);
border: 1px solid #494034;
border-radius: 3px;
color: #8B7D6B;
font-size: 11px;
cursor: pointer;
font-family: 'RS Plain', serif;
text-shadow: 1px 1px 0 #000;
text-align: center;
transition: all 0.1s;
}
.marketplace-qty-preset:hover {
background: linear-gradient(180deg, #4a4438, #3e3832);
color: #FF981F;
border-color: #6B5D4F;
}
.marketplace-qty-preset:active { transform: translateY(1px); }
.marketplace-total-cost {
font-size: 14px;
color: #FFD700;
padding: 6px 0 2px;
font-weight: bold;
font-family: 'RS Bold', 'RS Plain', serif;
text-shadow: 1px 1px 0 #000;
text-align: center;
}
.marketplace-total-over { color: #e04a4a; }
.marketplace-cost-warning {
font-size: 11px;
color: #e04a4a;
font-weight: normal;
}
.marketplace-create-gold {
font-family: 'RS Plain', serif;
font-size: 12px;
color: #8B7D6B;
text-align: right;
padding: 0 0 8px;
text-shadow: 1px 1px 0 #000;
}
.marketplace-price-presets {
display: flex;
gap: 4px;
margin-top: 2px;
}
.marketplace-sell-filter-wrap {
margin-bottom: 4px;
}
/* === MARKETPLACE TABS === */
/* === BROWSE TAB === */
.marketplace-browse-toggle {
display: flex;
gap: 4px;
padding: 8px 10px 4px;
}
.marketplace-browse-toggle-btn {
flex: 1;
padding: 6px 10px;
font-size: 11px; font-weight: 600; color: #9C8878;
background: var(--cell-bg); border: 1px solid #000; border-radius: 12px;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all 0.15s;
text-align: center;
}
.marketplace-browse-toggle-btn:hover { color: #c4a882; background: #302220; }
.marketplace-browse-toggle-active {
color: #D4854A; background: linear-gradient(180deg, #3E302A, #302220);
box-shadow: 0 0 6px rgba(212,133,74,0.15);
}
.marketplace-browse-search-wrap {
padding: 6px 10px;
}
.marketplace-category-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px 10px 6px;
}
.marketplace-category-pill {
padding: 4px 12px;
font-size: 10px; font-weight: 600; color: #9C8878;
background: var(--cell-bg); border: 1px solid #000; border-radius: 12px;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all 0.15s;
white-space: nowrap;
}
.marketplace-category-pill:hover { color: #c4a882; background: #302220; }
.marketplace-category-pill-active {
color: #D4854A; background: linear-gradient(180deg, #3E302A, #302220);
box-shadow: 0 0 6px rgba(212,133,74,0.15);
}
.marketplace-browse-sort {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 10px 6px;
}
.marketplace-browse-sort-label {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #8B7D6B;
}
.marketplace-browse-sort-select {
background: #1a1610;
border: 1px solid #3D3426;
color: #C8B89A;
font-family: 'RS Plain', serif;
font-size: 11px;
padding: 3px 6px;
border-radius: 3px;
cursor: pointer;
}
.marketplace-browse-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-bottom: 1px solid rgba(61,52,38,0.5);
cursor: pointer;
transition: background 0.15s;
}
.marketplace-browse-row:hover { background: rgba(255,152,31,0.05); }
.marketplace-browse-icon {
width: 32px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
image-rendering: auto;
}
.marketplace-browse-info { flex: 1; min-width: 0; overflow: hidden; }
.marketplace-browse-name {
font-family: 'RS Bold', serif;
font-size: 13px;
color: #FF981F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.marketplace-browse-detail {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #8B7D6B;
margin-top: 2px;
}
/* Compact buy/sell buttons inside browse rows — override the full-width modal confirm style */
.marketplace-browse-row .marketplace-btn-confirm,
.marketplace-browse-row .marketplace-btn-confirm.marketplace-btn-confirm-sell {
width: auto;
flex-shrink: 0;
padding: 4px 12px;
margin-top: 0;
font-size: 11px;
border-width: 1px;
border-radius: 3px;
letter-spacing: 0;
}
.marketplace-browse-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 10px;
}
.marketplace-browse-page-info {
font-family: 'RS Plain', serif;
font-size: 11px;
color: #8B7D6B;
}
.marketplace-detail-listings {
max-height: 300px;
overflow-y: auto;
}
.marketplace-detail-listing-row {
cursor: default;
}
.marketplace-detail-listing-row:hover { background: rgba(255,152,31,0.03); }
/* --- Responsive --- */
@media (max-width: 600px) {
.marketplace-actions { padding: 8px; gap: 6px; }
.marketplace-action-btn { padding: 10px 6px; font-size: 14px; }
.marketplace-offer-list { padding: 0 8px 8px; }
.marketplace-offer-row { padding: 7px 8px; }
.marketplace-create-panel {
width: 96%;
max-height: 90vh;
}
.marketplace-create-body { padding: 10px 12px; }
.marketplace-header { padding: 8px 10px; }
.marketplace-empty-state { padding: 20px 16px; }
.marketplace-category-pills { gap: 3px; }
.marketplace-category-pill { font-size: 10px; padding: 2px 6px; }
}
/* ═══════════════════════════════════════════════════════════════ */
/* PROFILE HUB — Right Sidebar (Full Page) */
/* ═══════════════════════════════════════════════════════════════ */
/* Override sidebar-body bg when profile hub is active */
.sidebar-body:has(.profile-hub),
body.rebrand .sidebar-body:has(.profile-hub) {
background: #18100e !important;
}
.profile-hub {
display: flex;
flex-direction: column;
flex: 1;
background: linear-gradient(180deg, #1e1610 0%, #1a1209 30%, #18100e 100%);
position: relative;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #3a3020 transparent;
}
/* Decorative top accent */
.ph-edge {
height: 2px;
background: linear-gradient(90deg, transparent 5%, #ff981f 30%, #ffd666 50%, #ff981f 70%, transparent 95%);
opacity: 0.5;
flex-shrink: 0;
}
/* ── Hero Section — Avatar + Identity ── */
.ph-hero {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 16px 16px;
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255,152,31,0.04) 0%, transparent 70%);
}
.ph-avatar-lg {
width: 80px;
height: 80px;
border-radius: 12px;
background: #0c0806;
border: 2px solid #4a3a20;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,152,31,0.03);
margin-bottom: 10px;
}
.icon-ph-avatar-lg { width: 68px; height: 68px; }
.ph-avatar-custom { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ph-avatar-lg:hover { border-color: #ff981f; transition: border-color 0.15s; }
.ph-name {
font-size: 16px;
font-weight: 700;
color: #ff981f;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ph-clan {
font-size: 11px;
color: #7a9a7a;
margin-top: 2px;
letter-spacing: 0.5px;
}
.ph-levels {
display: flex;
gap: 8px;
margin-top: 8px;
}
.ph-lvl-pill {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: #ffd666;
background: rgba(255,152,31,0.08);
border: 1px solid #3a3020;
padding: 3px 10px;
border-radius: 12px;
font-variant-numeric: tabular-nums;
}
.ph-lvl-pill img { width: 14px; height: 14px; }
.ph-lvl-pill.ph-lvl-total {
color: #a0a0a0;
background: rgba(160,160,160,0.06);
border-color: #2a2a2a;
}
/* ── Sections ── */
.ph-section {
padding: 10px 14px;
border-top: 1px solid #2a2015;
display: flex;
flex-direction: column;
gap: 6px;
}
.ph-section-label {
font-size: 9px;
font-weight: 700;
color: #5a4a3a;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 2px;
}
/* ── Vital Bars ── */
.ph-vital {
display: flex;
align-items: center;
gap: 6px;
}
.ph-vital-icon {
width: var(--iw-icon-chip);
height: var(--iw-icon-chip);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ph-vital-icon img { width: var(--iw-icon-chip); height: var(--iw-icon-chip); }
.ph-vital-bar {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.ph-vital-track {
flex: 1;
height: 16px;
background: #0c0806;
border-radius: 2px;
overflow: hidden;
border: 1px solid #2a1a10;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.ph-vital-fill {
height: 100%;
border-radius: 1px;
transition: width 0.2s ease;
}
.ph-fill-hp {
background: linear-gradient(180deg, #44dd44 0%, #22aa22 40%, #1a7a1a 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 6px rgba(50,200,50,0.15);
}
.ph-fill-prayer {
background: linear-gradient(180deg, #55bbdd 0%, #2299bb 40%, #1a7a99 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 6px rgba(50,150,200,0.15);
}
.ph-vital-text {
font-size: 10px;
font-weight: 600;
color: #8a7a5a;
min-width: 44px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ── Supplies Row ── */
.ph-supplies-row {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 2px;
padding-left: 26px;
}
.ph-supply-item {
display: flex;
align-items: center;
gap: 4px;
}
.ph-supply-item img {
width: var(--iw-icon-chip);
height: var(--iw-icon-chip);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
flex-shrink: 0;
}
.ph-supply-item span {
font-size: 12px;
font-weight: 700;
color: #ccc;
font-variant-numeric: tabular-nums;
}
.ph-supply-item span:first-of-type {
width: 28px;
flex-shrink: 0;
}
.ph-timer {
font-size: 10px;
font-weight: 600;
color: #8a7a5a;
font-variant-numeric: tabular-nums;
text-align: right;
margin-left: auto;
}
.ph-timer:empty { display: none; }
/* ── Potion Boosts ── */
.ph-boosts {
display: flex;
gap: 4px;
flex-wrap: wrap;
padding-left: 26px;
}
.ph-boost {
display: flex;
align-items: center;
gap: 2px;
font-size: 10px;
font-weight: 700;
color: #7abb7a;
background: rgba(80,160,80,0.08);
padding: 2px 5px;
border-radius: 2px;
border: 1px solid rgba(80,160,80,0.12);
}
.ph-boost img { width: 13px; height: 13px; }
/* ── Slayer Task ── */
.ph-slayer {
display: flex;
align-items: center;
gap: 8px;
}
.ph-slayer-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ph-slayer-icon img { width: 36px; height: 36px; object-fit: contain; }
.ph-slayer-info { flex: 1; min-width: 0; }
.ph-slayer-name {
font-size: 12px;
font-weight: 700;
color: #ff981f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ph-slayer-progress {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
}
.ph-slayer-track {
flex: 1;
height: 8px;
background: #0c0806;
border-radius: 4px;
overflow: hidden;
border: 1px solid #2a2218;
}
.ph-slayer-fill {
height: 100%;
background: linear-gradient(90deg, #cc7a16, #ff981f, #ffd666);
border-radius: 4px;
transition: width 0.3s ease;
box-shadow: 0 0 4px rgba(255,152,31,0.3);
}
.ph-slayer-text {
font-size: 10px;
color: #c0a070;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ph-slayer-empty {
font-size: 11px;
color: #4a3a2a;
text-align: center;
padding: 4px 0;
}
/* noBonuses strikethrough for disabled gear stats */
.nb-struck {
position: relative;
opacity: 0.4;
}
.nb-struck::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: #e04040;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════ */
/* PROFILE HUB THEMES */
/* ═══════════════════════════════════════════════════════════════ */
/* Particle container */
.ph-particles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.ph-particle {
position: absolute;
border-radius: 50%;
opacity: 0;
animation: ember-particle-rise var(--dur) ease-out var(--delay) both;
}
/* Gear icon */
.ph-theme-gear {
position: absolute;
top: 6px;
right: 8px;
z-index: 5;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #5a4a3a;
cursor: pointer;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
user-select: none;
}
.ph-theme-gear:hover {
color: #ff981f;
background: rgba(255,152,31,0.1);
}
/* Theme picker dropdown */
.ph-theme-picker {
position: absolute;
top: 32px;
right: 8px;
z-index: 10;
background: #1a1410;
border: 1px solid #3a3020;
border-radius: 6px;
padding: 4px;
display: none;
flex-direction: column;
gap: 2px;
box-shadow: 0 4px 16px rgba(0,0,0,0.6);
min-width: 100px;
}
.ph-theme-picker.ph-picker-open {
display: flex;
}
.ph-theme-option {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: #8a7a5a;
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.ph-theme-option:hover {
background: rgba(255,152,31,0.1);
color: #ccc;
}
.ph-theme-option.ph-theme-active {
color: #ff981f;
background: rgba(255,152,31,0.08);
}
.ph-swatch {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.1);
}
.ph-sw-default { background: #3a3020; }
.ph-sw-ember { background: linear-gradient(135deg, #D4854A, #FF981F); }
.ph-sw-frost { background: linear-gradient(135deg, #70b8e8, #e0f0ff); }
/* ── EMBER THEME ── */
.ph-theme-ember {
background: linear-gradient(180deg, #2a1a10 0%, #1e1208 30%, #18100e 100%);
}
.sidebar-body:has(.ph-theme-ember),
body.rebrand .sidebar-body:has(.ph-theme-ember) {
background: #1a100a !important;
}
.ph-theme-ember .ph-edge {
opacity: 0.8;
background: linear-gradient(90deg, transparent 5%, #CC4433 20%, #FF981F 40%, #D4854A 60%, #FF981F 80%, transparent 95%);
}
.ph-theme-ember .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(212,133,74,0.1) 0%, transparent 70%);
}
/* Ember avatar — conic-gradient ring like level-up */
.ph-theme-ember .ph-avatar-lg {
border: 3px solid transparent;
background:
linear-gradient(#0c0806, #0c0806) padding-box,
conic-gradient(from 0deg, #A86030, #D4854A, #FF981F, #D4854A, #A86030, rgba(168,96,48,0.3), #A86030) border-box;
box-shadow: 0 0 20px rgba(212,133,74,0.35), 0 0 40px rgba(212,133,74,0.1), inset 0 0 12px rgba(212,133,74,0.1);
animation: ph-ember-ring-glow 3s ease-in-out infinite;
}
.ph-theme-ember .ph-avatar-lg:hover {
border-color: transparent;
box-shadow: 0 0 28px rgba(212,133,74,0.5), 0 0 50px rgba(212,133,74,0.15), inset 0 0 12px rgba(212,133,74,0.15);
}
@keyframes ph-ember-ring-glow {
0%, 100% { box-shadow: 0 0 20px rgba(212,133,74,0.35), 0 0 40px rgba(212,133,74,0.1); }
50% { box-shadow: 0 0 28px rgba(212,133,74,0.5), 0 0 50px rgba(212,133,74,0.2); }
}
/* Ember accent tweaks */
.ph-theme-ember .ph-section {
border-top-color: #3a2015;
}
.ph-theme-ember .ph-vital-track {
border-color: #3a1a10;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 4px rgba(212,133,74,0.05);
}
.ph-theme-ember .ph-slayer-fill {
box-shadow: 0 0 8px rgba(255,152,31,0.4);
}
.ph-theme-ember .ph-lvl-pill {
border-color: #4a3018;
background: rgba(212,133,74,0.1);
}
/* ── FROST THEME ── */
.ph-theme-frost {
background: linear-gradient(180deg, #0e1520 0%, #0c1218 30%, #0a1018 100%);
}
.sidebar-body:has(.ph-theme-frost),
body.rebrand .sidebar-body:has(.ph-theme-frost) {
background: #0a0e14 !important;
}
.ph-theme-frost .ph-edge {
opacity: 0.7;
background: linear-gradient(90deg, transparent 5%, #4090c0 20%, #a0d4ff 40%, #e0f0ff 50%, #a0d4ff 60%, #4090c0 80%, transparent 95%);
}
.ph-theme-frost .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(160,212,255,0.06) 0%, transparent 70%);
}
/* Frost avatar — icy glass border */
.ph-theme-frost .ph-avatar-lg {
border: 2px solid rgba(160,212,255,0.35);
background: #0a0e14;
box-shadow: 0 0 16px rgba(100,180,240,0.2), 0 0 40px rgba(100,180,240,0.06), inset 0 0 10px rgba(100,180,240,0.06);
animation: ph-frost-ring-glow 4s ease-in-out infinite;
}
.ph-theme-frost .ph-avatar-lg:hover {
border-color: rgba(160,212,255,0.6);
box-shadow: 0 0 24px rgba(100,180,240,0.35), 0 0 50px rgba(100,180,240,0.1), inset 0 0 10px rgba(100,180,240,0.1);
}
@keyframes ph-frost-ring-glow {
0%, 100% { box-shadow: 0 0 16px rgba(100,180,240,0.2), 0 0 40px rgba(100,180,240,0.06); }
50% { box-shadow: 0 0 24px rgba(100,180,240,0.3), 0 0 50px rgba(100,180,240,0.12); }
}
/* Frost color overrides */
.ph-theme-frost .ph-name {
color: #a0d4ff;
text-shadow: 0 1px 6px rgba(100,180,240,0.3);
}
.ph-theme-frost .ph-clan {
color: #6a8aa0;
}
.ph-theme-frost .ph-lvl-pill {
color: #a0d4ff;
background: rgba(100,180,240,0.08);
border-color: #1a2a3a;
}
.ph-theme-frost .ph-lvl-pill.ph-lvl-total {
color: #7a9ab0;
background: rgba(100,150,200,0.06);
border-color: #1a2030;
}
.ph-theme-frost .ph-section {
border-top-color: #152030;
}
.ph-theme-frost .ph-section-label {
color: #3a5060;
}
.ph-theme-frost .ph-vital-track {
border-color: #1a2535;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 4px rgba(100,180,240,0.05);
}
.ph-theme-frost .ph-vital-text {
color: #6a8a9a;
}
.ph-theme-frost .ph-fill-prayer {
background: linear-gradient(180deg, #70c8f0 0%, #3098cc 40%, #2080aa 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(100,180,240,0.2);
}
.ph-theme-frost .ph-slayer-name {
color: #a0d4ff;
}
.ph-theme-frost .ph-slayer-fill {
background: linear-gradient(90deg, #3090c0, #a0d4ff, #e0f0ff);
box-shadow: 0 0 6px rgba(100,180,240,0.3);
}
.ph-theme-frost .ph-slayer-track {
border-color: #1a2535;
}
.ph-theme-frost .ph-slayer-text {
color: #7a9ab0;
}
.ph-theme-frost .ph-slayer-empty {
color: #2a3a4a;
}
.ph-theme-frost .ph-supply-item span {
color: #b0c8d8;
}
.ph-theme-frost .ph-timer {
color: #6a8a9a;
}
.ph-theme-frost .ph-boost {
color: #70b8e8;
background: rgba(100,180,240,0.08);
border-color: rgba(100,180,240,0.12);
}
/* Frost theme picker gear color */
.ph-theme-frost .ph-theme-gear {
color: #3a5060;
}
.ph-theme-frost .ph-theme-gear:hover {
color: #a0d4ff;
background: rgba(100,180,240,0.1);
}
.ph-theme-frost .ph-theme-picker {
background: #0e1520;
border-color: #1a2a3a;
}
.ph-theme-frost .ph-theme-option:hover {
background: rgba(100,180,240,0.1);
}
.ph-theme-frost .ph-theme-option.ph-theme-active {
color: #a0d4ff;
background: rgba(100,180,240,0.08);
}
/* Frost particle fall animation */
.ph-theme-frost .ph-particle {
animation: ph-frost-particle-fall var(--dur) ease-out var(--delay) both;
}
@keyframes ph-frost-particle-fall {
0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1); }
15% { opacity: 0.8; }
100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0); }
}
/* ── Void: vortex spiral + wisp rise + rifts + eyes + aura + sigil ── */
@keyframes ph-vortex-spiral {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius));
}
15% { opacity: 0.7; }
50% { opacity: 0.5; }
85% { opacity: 0.3; }
100% {
opacity: 0;
transform: translate(-50%, -50%) rotate(calc(var(--angle) + 720deg)) translateX(0%) scale(0);
}
}
@keyframes ph-void-wisp-rise {
0% { opacity: 0; transform: translateY(0) scaleX(1); }
15% { opacity: 0.25; }
40% { opacity: 0.2; transform: translateY(-30%) scaleX(0.7); }
70% { opacity: 0.1; transform: translateY(-60%) scaleX(0.5); }
100% { opacity: 0; transform: translateY(-100%) scaleX(0.3); }
}
/* Void aura — pulsing edge glow */
.ph-void-aura {
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 30px rgba(144,96,208,0.15), inset 0 0 60px rgba(96,48,160,0.08);
animation: ph-void-aura-pulse 4s ease-in-out infinite;
z-index: 0;
}
@keyframes ph-void-aura-pulse {
0%, 100% { box-shadow: inset 0 0 30px rgba(144,96,208,0.12), inset 0 0 60px rgba(96,48,160,0.06); }
50% { box-shadow: inset 0 0 45px rgba(144,96,208,0.2), inset 0 0 80px rgba(96,48,160,0.1); }
}
/* Void sigil — rotating arcane circle */
.ph-void-sigil {
position: absolute;
top: 10%;
left: 50%;
width: 140px;
height: 140px;
transform: translateX(-50%);
pointer-events: none;
opacity: 0.5;
animation: ph-void-sigil-spin 30s linear infinite;
z-index: 0;
}
.ph-void-sigil-svg { width: 100%; height: 100%; }
@keyframes ph-void-sigil-spin {
0% { transform: translateX(-50%) rotate(0deg); }
100% { transform: translateX(-50%) rotate(360deg); }
}
/* Void rifts — cracks that pulse */
@keyframes ph-void-rift-pulse {
0%, 100% { opacity: 0; transform: rotate(inherit) scaleX(0.3); }
15% { opacity: 0.6; transform: rotate(inherit) scaleX(1); }
50% { opacity: 0.3; transform: rotate(inherit) scaleX(0.8); }
85% { opacity: 0.5; transform: rotate(inherit) scaleX(1); }
}
/* Void eyes — blinking watchers */
.ph-void-eye { z-index: 1; }
@keyframes ph-void-eye-blink {
0%, 100% { opacity: 0; transform: scaleY(0.1); }
10% { opacity: 0; transform: scaleY(0.1); }
15% { opacity: 0.7; transform: scaleY(1); }
40% { opacity: 0.5; transform: scaleY(1); }
45% { opacity: 0; transform: scaleY(0.1); }
48% { opacity: 0.6; transform: scaleY(1); }
70% { opacity: 0.4; transform: scaleY(1); }
75% { opacity: 0; transform: scaleY(0.1); }
}
/* ── Forest: leaves, fireflies, mist, rays, branches ── */
@keyframes ph-leaf-blow {
0% { opacity: 0; transform: translateX(0) translateY(0) rotate(0deg); }
8% { opacity: 0.8; }
25% { transform: translateX(25%) translateY(12px) rotate(calc(var(--tumble) * 0.25)); }
50% { opacity: 0.7; transform: translateX(50%) translateY(-6px) rotate(calc(var(--tumble) * 0.5)); }
75% { transform: translateX(75%) translateY(10px) rotate(calc(var(--tumble) * 0.75)); }
95% { opacity: 0.3; }
100% { opacity: 0; transform: translateX(115%) translateY(5px) rotate(var(--tumble)); }
}
/* Forest mist — ground fog */
.ph-forest-mist {
position: absolute;
bottom: 0;
left: -10%;
width: 120%;
height: 25%;
background: linear-gradient(to top, rgba(120,180,100,0.08) 0%, rgba(80,140,60,0.04) 30%, transparent 100%);
filter: blur(8px);
animation: ph-forest-mist-drift 8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.ph-forest-mist-2 {
height: 18%;
animation: ph-forest-mist-drift 10s ease-in-out 2s infinite reverse;
opacity: 0.7;
}
@keyframes ph-forest-mist-drift {
0%, 100% { transform: translateX(-3%) scaleY(1); opacity: 0.8; }
50% { transform: translateX(3%) scaleY(1.2); opacity: 1; }
}
/* Forest sunlight rays */
.ph-forest-rays {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(135deg, transparent 30%, rgba(200,220,100,0.03) 32%, rgba(200,220,100,0.06) 34%, transparent 36%),
linear-gradient(125deg, transparent 50%, rgba(180,200,80,0.02) 52%, rgba(180,200,80,0.05) 54%, transparent 56%),
linear-gradient(140deg, transparent 15%, rgba(220,240,120,0.02) 17%, rgba(220,240,120,0.04) 19%, transparent 21%);
animation: ph-forest-rays-shift 12s ease-in-out infinite;
z-index: 0;
}
@keyframes ph-forest-rays-shift {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* Forest branches — silhouette framing */
.ph-forest-branch {
position: absolute;
top: 0;
width: 30px;
height: 50%;
pointer-events: none;
z-index: 0;
}
.ph-branch-left {
left: 0;
background: linear-gradient(to right,
rgba(30,60,20,0.3) 0%, rgba(30,60,20,0.15) 40%, transparent 100%);
border-right: 1px solid rgba(74,154,58,0.06);
}
.ph-branch-right {
right: 0;
background: linear-gradient(to left,
rgba(30,60,20,0.3) 0%, rgba(30,60,20,0.15) 40%, transparent 100%);
border-left: 1px solid rgba(74,154,58,0.06);
}
/* Forest moss — edge creep overlay */
.ph-forest-moss {
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 3px 0 15px rgba(45,102,32,0.08), inset -3px 0 15px rgba(45,102,32,0.08),
inset 0 -3px 20px rgba(45,102,32,0.1);
z-index: 0;
}
/* Fireflies — drifting glow orbs */
@keyframes ph-firefly-drift {
0% { opacity: 0; transform: translate(0, 0); }
10% { opacity: 0.8; }
25% { opacity: 0.3; transform: translate(calc(var(--driftx) * 0.3), calc(var(--drifty) * 0.3)); }
40% { opacity: 0.9; }
50% { transform: translate(calc(var(--driftx) * 0.6), calc(var(--drifty) * 0.6)); }
60% { opacity: 0.2; }
75% { opacity: 0.7; transform: translate(var(--driftx), var(--drifty)); }
90% { opacity: 0.4; }
100% { opacity: 0; transform: translate(calc(var(--driftx) * 0.5), calc(var(--drifty) * 1.2)); }
}
/* ── Storm: rain streaks + lightning + clouds ── */
@keyframes ph-rain-fall {
0% { opacity: 0; transform: translateY(0) translateX(0) skewX(-2deg); }
5% { opacity: 0.6; }
90% { opacity: 0.4; }
100% { opacity: 0; transform: translateY(110vh) translateX(-10px) skewX(-2deg); }
}
@keyframes ph-lightning-flash {
0% { opacity: 0; }
5% { opacity: 0.9; }
12% { opacity: 0.2; }
18% { opacity: 0.8; }
35% { opacity: 0; }
100% { opacity: 0; }
}
/* Storm clouds — dark rolling overlay at top */
.ph-storm-clouds {
position: absolute;
top: -5%;
left: -10%;
width: 120%;
height: 30%;
background:
radial-gradient(ellipse 60% 80% at 20% 60%, rgba(30,40,60,0.4) 0%, transparent 70%),
radial-gradient(ellipse 50% 70% at 70% 50%, rgba(25,35,55,0.35) 0%, transparent 70%),
radial-gradient(ellipse 40% 60% at 45% 70%, rgba(20,30,50,0.3) 0%, transparent 70%);
animation: ph-storm-clouds-roll 10s ease-in-out infinite;
pointer-events: none;
filter: blur(4px);
z-index: 0;
}
@keyframes ph-storm-clouds-roll {
0%, 100% { transform: translateX(-2%); }
50% { transform: translateX(2%); }
}
/* ── Beach: ocean waves + sand drift + sparkle ── */
.ph-ocean-wave {
position: absolute;
bottom: 0;
left: -5%;
width: 110%;
height: 18%;
background: linear-gradient(to top, rgba(40,120,160,0.25) 0%, rgba(60,160,200,0.12) 40%, transparent 100%);
border-radius: 100% 100% 0 0;
animation: ph-wave-sway 4s ease-in-out infinite;
pointer-events: none;
}
.ph-wave-2 {
height: 14%;
background: linear-gradient(to top, rgba(50,140,180,0.18) 0%, rgba(70,170,210,0.08) 40%, transparent 100%);
animation: ph-wave-sway 5s ease-in-out 1s infinite reverse;
}
@keyframes ph-wave-sway {
0%, 100% { transform: translateX(-2%) scaleY(1); }
50% { transform: translateX(2%) scaleY(1.15); }
}
@keyframes ph-sand-drift {
0% { opacity: 0; transform: translateX(0) translateY(0); }
20% { opacity: 0.5; }
50% { transform: translateX(15px) translateY(-20px); opacity: 0.4; }
100% { opacity: 0; transform: translateX(30px) translateY(-40px); }
}
@keyframes ph-sparkle-twinkle {
0% { opacity: 0; transform: scale(0); }
30% { opacity: 1; transform: scale(1.5); }
50% { opacity: 0.5; transform: scale(0.8); }
70% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(0); }
}
/* ── Flowers: petals, butterflies, vines, blooms, pollen ── */
@keyframes ph-petal-fall {
0% { opacity: 0; transform: translateX(0) translateY(0) rotate(0deg); }
8% { opacity: 0.8; }
25% { transform: translateX(var(--sway)) translateY(25%) rotate(calc(var(--tumble) * 0.25)); }
50% { opacity: 0.6; transform: translateX(calc(var(--sway) * -0.5)) translateY(50%) rotate(calc(var(--tumble) * 0.5)); }
75% { transform: translateX(calc(var(--sway) * 0.7)) translateY(75%) rotate(calc(var(--tumble) * 0.75)); }
92% { opacity: 0.2; }
100% { opacity: 0; transform: translateX(calc(var(--sway) * -0.3)) translateY(115%) rotate(var(--tumble)); }
}
/* Flower vines — growing border tendrils */
.ph-flower-vine {
position: absolute;
top: 0;
width: 20px;
height: 100%;
pointer-events: none;
z-index: 0;
}
.ph-vine-left {
left: 0;
background:
radial-gradient(circle 3px at 8px 15%, rgba(80,160,60,0.3) 0%, transparent 100%),
radial-gradient(circle 2px at 5px 30%, rgba(80,160,60,0.2) 0%, transparent 100%),
radial-gradient(circle 3px at 10px 50%, rgba(80,160,60,0.25) 0%, transparent 100%),
radial-gradient(circle 2px at 6px 70%, rgba(80,160,60,0.2) 0%, transparent 100%),
radial-gradient(circle 3px at 9px 90%, rgba(80,160,60,0.25) 0%, transparent 100%),
linear-gradient(to right, rgba(60,120,40,0.12) 0%, transparent 100%);
animation: ph-vine-grow 3s ease-out both;
}
.ph-vine-right {
right: 0;
background:
radial-gradient(circle 3px at 12px 20%, rgba(80,160,60,0.3) 0%, transparent 100%),
radial-gradient(circle 2px at 15px 40%, rgba(80,160,60,0.2) 0%, transparent 100%),
radial-gradient(circle 3px at 10px 60%, rgba(80,160,60,0.25) 0%, transparent 100%),
radial-gradient(circle 2px at 14px 80%, rgba(80,160,60,0.2) 0%, transparent 100%),
linear-gradient(to left, rgba(60,120,40,0.12) 0%, transparent 100%);
animation: ph-vine-grow 3s ease-out 0.5s both;
}
@keyframes ph-vine-grow {
0% { opacity: 0; clip-path: inset(100% 0 0 0); }
100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* Flower glow — soft radiance at bottom */
.ph-flower-glow {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(255,112,160,0.06) 0%, transparent 70%);
pointer-events: none;
animation: ph-flower-glow-pulse 5s ease-in-out infinite;
z-index: 0;
}
@keyframes ph-flower-glow-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* Butterflies */
.ph-butterfly {
z-index: 1;
}
.ph-bf-wing {
width: 6px;
height: 8px;
border-radius: 50% 50% 20% 20%;
opacity: 0.7;
animation: ph-bf-flap 0.3s ease-in-out infinite alternate;
}
.ph-bf-wing-l { transform-origin: right center; }
.ph-bf-wing-r { transform-origin: left center; animation-delay: 0.15s; }
@keyframes ph-bf-flap {
0% { transform: rotateY(0deg) scaleX(1); }
100% { transform: rotateY(70deg) scaleX(0.3); }
}
.ph-bf-body {
width: 2px;
height: 6px;
background: rgba(60,30,40,0.6);
border-radius: 1px;
}
@keyframes ph-butterfly-fly {
0% { opacity: 0; transform: translateX(0) translateY(0); }
8% { opacity: 0.7; }
20% { transform: translateX(30%) translateY(-15px); }
35% { transform: translateX(55%) translateY(10px); }
50% { opacity: 0.8; transform: translateX(70%) translateY(-8px); }
65% { transform: translateX(85%) translateY(12px); }
80% { transform: translateX(95%) translateY(-5px); }
92% { opacity: 0.3; }
100% { opacity: 0; transform: translateX(115%) translateY(5px); }
}
/* Pollen — floating specks */
@keyframes ph-pollen-float {
0% { opacity: 0; transform: translate(0, 0); }
15% { opacity: 0.5; }
50% { opacity: 0.3; transform: translate(calc(var(--driftx) * 0.5), calc(var(--drifty) * 0.5)); }
75% { opacity: 0.5; }
100% { opacity: 0; transform: translate(var(--driftx), var(--drifty)); }
}
/* Blooming flowers */
.ph-bloom {
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.ph-bloom-petal {
position: absolute;
width: 3px;
height: 5px;
border-radius: 50% 50% 30% 30%;
opacity: 0.6;
transform-origin: center bottom;
}
.ph-bloom-center {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: #ffe080;
box-shadow: 0 0 3px rgba(255,224,128,0.5);
z-index: 1;
}
@keyframes ph-bloom-open {
0%, 100% { opacity: 0; transform: scale(0.3); }
15% { opacity: 0.7; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1); }
85% { opacity: 0.5; transform: scale(0.9); }
}
/* ── Neon: scan line ── */
.ph-neon-scan {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,255,255,0.3), rgba(255,0,255,0.3), transparent);
box-shadow: 0 0 8px rgba(0,255,255,0.2), 0 0 20px rgba(255,0,255,0.1);
animation: ph-neon-scan-move 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes ph-neon-scan-move {
0%, 100% { top: 5%; opacity: 0.4; }
50% { top: 90%; opacity: 0.7; }
}
/* Swatch colors for new themes */
.ph-sw-void { background: linear-gradient(135deg, #6030a0, #c080ff); }
.ph-sw-forest { background: linear-gradient(135deg, #2d6620, #7acc5a); }
.ph-sw-storm { background: linear-gradient(135deg, #3060a0, #a0c0e0); }
.ph-sw-beach { background: linear-gradient(135deg, #e0a850, #70c8e0); }
.ph-sw-flowers { background: linear-gradient(135deg, #e050a0, #ffb0d0); }
.ph-sw-rainbow { background: linear-gradient(135deg, #ff4444, #ffdd00, #44dd44, #4488ff, #aa44ff); }
.ph-sw-neon { background: linear-gradient(135deg, #ff00ff, #00ffff); }
/* ── VOID THEME ── */
.ph-theme-void {
background: linear-gradient(180deg, #14081e 0%, #0e0618 30%, #0a0412 100%);
overflow: hidden;
}
.sidebar-body:has(.ph-theme-void),
body.rebrand .sidebar-body:has(.ph-theme-void) {
background: #0a0412 !important;
}
.ph-theme-void .ph-edge {
opacity: 0.7;
background: linear-gradient(90deg, transparent 5%, #6030a0 20%, #9060d0 40%, #c080ff 50%, #9060d0 60%, #6030a0 80%, transparent 95%);
}
.ph-theme-void .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(144,96,208,0.1) 0%, rgba(96,48,160,0.04) 40%, transparent 70%);
z-index: 1;
}
.ph-theme-void .ph-avatar-lg {
border: 3px solid transparent;
background:
linear-gradient(#0a0412, #0a0412) padding-box,
conic-gradient(from 0deg, #6030a0, #9060d0, #c080ff, #e0c0ff, #c080ff, #9060d0, #6030a0) border-box;
box-shadow: 0 0 25px rgba(144,96,208,0.35), 0 0 60px rgba(96,48,160,0.12), inset 0 0 15px rgba(144,96,208,0.1);
animation: ph-void-glow 3s ease-in-out infinite, ph-void-ring-rotate 8s linear infinite;
}
.ph-theme-void .ph-avatar-lg:hover {
box-shadow: 0 0 35px rgba(144,96,208,0.5), 0 0 70px rgba(144,96,208,0.2), inset 0 0 15px rgba(144,96,208,0.15);
}
@keyframes ph-void-glow {
0%, 100% { box-shadow: 0 0 25px rgba(144,96,208,0.3), 0 0 60px rgba(96,48,160,0.1); }
50% { box-shadow: 0 0 35px rgba(144,96,208,0.45), 0 0 70px rgba(144,96,208,0.18); }
}
@keyframes ph-void-ring-rotate {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
.ph-theme-void .ph-name { color: #c080ff; text-shadow: 0 1px 6px rgba(144,96,208,0.4); }
.ph-theme-void .ph-clan { color: #6a5080; }
.ph-theme-void .ph-lvl-pill { color: #c080ff; background: rgba(144,96,208,0.08); border-color: #2a1840; }
.ph-theme-void .ph-lvl-pill.ph-lvl-total { color: #8a70a0; background: rgba(120,80,180,0.06); border-color: #201435; }
.ph-theme-void .ph-section { border-top-color: #1a1030; z-index: 1; position: relative; }
.ph-theme-void .ph-section-label { color: #3a2850; }
.ph-theme-void .ph-vital-track { border-color: #1a1030; }
.ph-theme-void .ph-vital-text { color: #6a5a8a; }
.ph-theme-void .ph-slayer-name { color: #c080ff; }
.ph-theme-void .ph-slayer-fill { background: linear-gradient(90deg, #6030a0, #9060d0, #c080ff); box-shadow: 0 0 6px rgba(144,96,208,0.3); }
.ph-theme-void .ph-slayer-track { border-color: #1a1030; }
.ph-theme-void .ph-slayer-text { color: #7a60a0; }
.ph-theme-void .ph-slayer-empty { color: #2a1840; }
.ph-theme-void .ph-supply-item span { color: #b0a0c8; }
.ph-theme-void .ph-timer { color: #6a5a8a; }
.ph-theme-void .ph-boost { color: #9060d0; background: rgba(144,96,208,0.08); border-color: rgba(144,96,208,0.12); }
.ph-theme-void .ph-theme-gear { color: #3a2850; }
.ph-theme-void .ph-theme-gear:hover { color: #c080ff; background: rgba(144,96,208,0.1); }
.ph-theme-void .ph-theme-picker { background: #14081e; border-color: #2a1840; }
.ph-theme-void .ph-theme-option:hover { background: rgba(144,96,208,0.1); }
.ph-theme-void .ph-theme-option.ph-theme-active { color: #c080ff; background: rgba(144,96,208,0.08); }
/* ── FOREST THEME ── */
.ph-theme-forest {
background: linear-gradient(180deg, #0e1a0a 0%, #0a140a 30%, #081008 100%);
}
.sidebar-body:has(.ph-theme-forest),
body.rebrand .sidebar-body:has(.ph-theme-forest) {
background: #081008 !important;
}
.ph-theme-forest .ph-edge {
opacity: 0.6;
background: linear-gradient(90deg, transparent 5%, #2d6620 20%, #4a9a3a 40%, #7acc5a 50%, #4a9a3a 60%, #2d6620 80%, transparent 95%);
}
.ph-theme-forest .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(74,154,58,0.06) 0%, transparent 70%);
z-index: 1;
}
.ph-theme-forest .ph-avatar-lg {
border: 3px solid transparent;
background:
linear-gradient(#081008, #081008) padding-box,
conic-gradient(from 0deg, #2d6620, #4a9a3a, #7acc5a, #a0dd70, #7acc5a, #4a9a3a, #2d6620) border-box;
box-shadow: 0 0 20px rgba(74,154,58,0.25), 0 0 45px rgba(74,154,58,0.08), inset 0 0 10px rgba(74,154,58,0.06);
animation: ph-forest-glow 4s ease-in-out infinite;
}
.ph-theme-forest .ph-avatar-lg:hover {
box-shadow: 0 0 28px rgba(74,154,58,0.4), 0 0 55px rgba(74,154,58,0.15);
}
@keyframes ph-forest-glow {
0%, 100% { box-shadow: 0 0 20px rgba(74,154,58,0.2), 0 0 45px rgba(74,154,58,0.06); }
50% { box-shadow: 0 0 28px rgba(122,204,90,0.35), 0 0 55px rgba(74,154,58,0.12); }
}
.ph-theme-forest .ph-name { color: #7acc5a; text-shadow: 0 1px 6px rgba(74,154,58,0.3); }
.ph-theme-forest .ph-clan { color: #4a6a40; }
.ph-theme-forest .ph-lvl-pill { color: #7acc5a; background: rgba(74,154,58,0.08); border-color: #1a3018; }
.ph-theme-forest .ph-lvl-pill.ph-lvl-total { color: #6a9a60; background: rgba(74,154,58,0.05); border-color: #152a14; }
.ph-theme-forest .ph-section { border-top-color: #152a14; z-index: 1; position: relative; }
.ph-theme-forest .ph-section-label { color: #2a4a25; }
.ph-theme-forest .ph-vital-track { border-color: #1a2a18; }
.ph-theme-forest .ph-vital-text { color: #5a7a50; }
.ph-theme-forest .ph-fill-hp { background: linear-gradient(180deg, #5acc4a 0%, #30aa25 40%, #209018 100%); }
.ph-theme-forest .ph-slayer-name { color: #7acc5a; }
.ph-theme-forest .ph-slayer-fill { background: linear-gradient(90deg, #2d6620, #4a9a3a, #7acc5a); box-shadow: 0 0 6px rgba(74,154,58,0.3); }
.ph-theme-forest .ph-slayer-track { border-color: #1a2a18; }
.ph-theme-forest .ph-slayer-text { color: #5a8a50; }
.ph-theme-forest .ph-slayer-empty { color: #1a3018; }
.ph-theme-forest .ph-supply-item span { color: #a0c898; }
.ph-theme-forest .ph-timer { color: #5a7a50; }
.ph-theme-forest .ph-boost { color: #5aaa4a; background: rgba(74,154,58,0.08); border-color: rgba(74,154,58,0.12); }
.ph-theme-forest .ph-theme-gear { color: #2a4a25; }
.ph-theme-forest .ph-theme-gear:hover { color: #7acc5a; background: rgba(74,154,58,0.1); }
.ph-theme-forest .ph-theme-picker { background: #0e1a0a; border-color: #1a3018; }
.ph-theme-forest .ph-theme-option:hover { background: rgba(74,154,58,0.1); }
.ph-theme-forest .ph-theme-option.ph-theme-active { color: #7acc5a; background: rgba(74,154,58,0.08); }
/* forest uses custom leaf elements, not .ph-particle */
/* ── STORM THEME ── */
.ph-theme-storm {
background: linear-gradient(180deg, #101820 0%, #0c1218 30%, #080e14 100%);
}
.sidebar-body:has(.ph-theme-storm),
body.rebrand .sidebar-body:has(.ph-theme-storm) {
background: #080e14 !important;
}
.ph-theme-storm .ph-edge {
opacity: 0.8;
background: linear-gradient(90deg, transparent 5%, #3060a0 15%, #6090cc 30%, #ffffff 50%, #6090cc 70%, #3060a0 85%, transparent 95%);
animation: ph-storm-flash 4s ease-in-out infinite;
}
@keyframes ph-storm-flash {
0%, 90%, 100% { opacity: 0.5; }
92% { opacity: 1; }
94% { opacity: 0.3; }
96% { opacity: 0.9; }
}
.ph-theme-storm .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(96,144,204,0.06) 0%, transparent 70%);
}
.ph-theme-storm .ph-avatar-lg {
border: 2px solid rgba(96,144,204,0.35);
background: #080e14;
box-shadow: 0 0 16px rgba(96,144,204,0.2), 0 0 40px rgba(96,144,204,0.06);
animation: ph-storm-ring 4s ease-in-out infinite;
}
.ph-theme-storm .ph-avatar-lg:hover {
border-color: rgba(160,192,224,0.6);
box-shadow: 0 0 24px rgba(96,144,204,0.4);
}
@keyframes ph-storm-ring {
0%, 85%, 100% { box-shadow: 0 0 16px rgba(96,144,204,0.2), 0 0 40px rgba(96,144,204,0.06); }
90% { box-shadow: 0 0 30px rgba(160,192,224,0.5), 0 0 60px rgba(96,144,204,0.2); }
93% { box-shadow: 0 0 12px rgba(96,144,204,0.15); }
95% { box-shadow: 0 0 25px rgba(160,192,224,0.4), 0 0 50px rgba(96,144,204,0.15); }
}
.ph-theme-storm .ph-name { color: #a0c0e0; text-shadow: 0 1px 6px rgba(96,144,204,0.3); }
.ph-theme-storm .ph-clan { color: #506070; }
.ph-theme-storm .ph-lvl-pill { color: #a0c0e0; background: rgba(96,144,204,0.08); border-color: #1a2535; }
.ph-theme-storm .ph-lvl-pill.ph-lvl-total { color: #7090a8; background: rgba(96,144,204,0.05); border-color: #152030; }
.ph-theme-storm .ph-section { border-top-color: #152030; }
.ph-theme-storm .ph-section-label { color: #304050; }
.ph-theme-storm .ph-vital-track { border-color: #1a2535; }
.ph-theme-storm .ph-vital-text { color: #607888; }
.ph-theme-storm .ph-slayer-name { color: #a0c0e0; }
.ph-theme-storm .ph-slayer-fill { background: linear-gradient(90deg, #3060a0, #6090cc, #a0c0e0); box-shadow: 0 0 6px rgba(96,144,204,0.3); }
.ph-theme-storm .ph-slayer-track { border-color: #1a2535; }
.ph-theme-storm .ph-slayer-text { color: #6888a0; }
.ph-theme-storm .ph-slayer-empty { color: #1a2535; }
.ph-theme-storm .ph-supply-item span { color: #b0c0d0; }
.ph-theme-storm .ph-timer { color: #607888; }
.ph-theme-storm .ph-boost { color: #6090cc; background: rgba(96,144,204,0.08); border-color: rgba(96,144,204,0.12); }
.ph-theme-storm .ph-theme-gear { color: #304050; }
.ph-theme-storm .ph-theme-gear:hover { color: #a0c0e0; background: rgba(96,144,204,0.1); }
.ph-theme-storm .ph-theme-picker { background: #101820; border-color: #1a2535; }
.ph-theme-storm .ph-theme-option:hover { background: rgba(96,144,204,0.1); }
.ph-theme-storm .ph-theme-option.ph-theme-active { color: #a0c0e0; background: rgba(96,144,204,0.08); }
/* ── BEACH THEME ── */
.ph-theme-beach {
background: linear-gradient(180deg, #1a1808 0%, #16140a 30%, #12100a 100%);
}
.sidebar-body:has(.ph-theme-beach),
body.rebrand .sidebar-body:has(.ph-theme-beach) {
background: #12100a !important;
}
.ph-theme-beach .ph-edge {
opacity: 0.7;
background: linear-gradient(90deg, transparent 5%, #e0a850 20%, #f0d080 35%, #70c8e0 50%, #f0d080 65%, #e0a850 80%, transparent 95%);
}
.ph-theme-beach .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(240,208,128,0.06) 0%, transparent 70%);
}
.ph-theme-beach .ph-avatar-lg {
border: 2px solid rgba(224,168,80,0.35);
background: #12100a;
box-shadow: 0 0 16px rgba(224,168,80,0.2), 0 0 40px rgba(224,168,80,0.06);
animation: ph-beach-glow 5s ease-in-out infinite;
}
.ph-theme-beach .ph-avatar-lg:hover {
border-color: rgba(240,208,128,0.5);
box-shadow: 0 0 24px rgba(224,168,80,0.35), 0 0 50px rgba(224,168,80,0.1);
}
@keyframes ph-beach-glow {
0%, 100% { box-shadow: 0 0 16px rgba(224,168,80,0.2), 0 0 40px rgba(224,168,80,0.06); }
50% { box-shadow: 0 0 22px rgba(112,200,224,0.25), 0 0 50px rgba(112,200,224,0.08); }
}
.ph-theme-beach .ph-name { color: #f0d080; text-shadow: 0 1px 6px rgba(224,168,80,0.3); }
.ph-theme-beach .ph-clan { color: #7a6a40; }
.ph-theme-beach .ph-lvl-pill { color: #f0d080; background: rgba(224,168,80,0.08); border-color: #2a2210; }
.ph-theme-beach .ph-lvl-pill.ph-lvl-total { color: #a09060; background: rgba(224,168,80,0.05); border-color: #221a0e; }
.ph-theme-beach .ph-section { border-top-color: #221a0e; }
.ph-theme-beach .ph-section-label { color: #4a3a20; }
.ph-theme-beach .ph-vital-track { border-color: #2a2010; }
.ph-theme-beach .ph-vital-text { color: #8a7a50; }
.ph-theme-beach .ph-slayer-name { color: #f0d080; }
.ph-theme-beach .ph-slayer-fill { background: linear-gradient(90deg, #e0a850, #f0d080, #70c8e0); box-shadow: 0 0 6px rgba(224,168,80,0.3); }
.ph-theme-beach .ph-slayer-track { border-color: #2a2010; }
.ph-theme-beach .ph-slayer-text { color: #a09060; }
.ph-theme-beach .ph-slayer-empty { color: #2a2010; }
.ph-theme-beach .ph-supply-item span { color: #d0c0a0; }
.ph-theme-beach .ph-timer { color: #8a7a50; }
.ph-theme-beach .ph-boost { color: #c0a050; background: rgba(224,168,80,0.08); border-color: rgba(224,168,80,0.12); }
.ph-theme-beach .ph-theme-gear { color: #4a3a20; }
.ph-theme-beach .ph-theme-gear:hover { color: #f0d080; background: rgba(224,168,80,0.1); }
.ph-theme-beach .ph-theme-picker { background: #1a1808; border-color: #2a2210; }
.ph-theme-beach .ph-theme-option:hover { background: rgba(224,168,80,0.1); }
.ph-theme-beach .ph-theme-option.ph-theme-active { color: #f0d080; background: rgba(224,168,80,0.08); }
/* beach uses custom wave/sand/sparkle elements, not .ph-particle */
/* ── FLOWERS THEME ── */
.ph-theme-flowers {
background: linear-gradient(180deg, #1a0c14 0%, #160a10 30%, #12080e 100%);
}
.sidebar-body:has(.ph-theme-flowers),
body.rebrand .sidebar-body:has(.ph-theme-flowers) {
background: #12080e !important;
}
.ph-theme-flowers .ph-edge {
opacity: 0.7;
background: linear-gradient(90deg, transparent 5%, #e050a0 20%, #ff70a0 35%, #ffb0d0 50%, #ff70a0 65%, #e050a0 80%, transparent 95%);
}
.ph-theme-flowers .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255,112,160,0.08) 0%, transparent 70%);
z-index: 1;
}
.ph-theme-flowers .ph-avatar-lg {
border: 3px solid transparent;
background:
linear-gradient(#12080e, #12080e) padding-box,
conic-gradient(from 0deg, #e050a0, #ff70a0, #ffb0d0, #ffa0cc, #ff70a0, #e050a0) border-box;
box-shadow: 0 0 20px rgba(255,112,160,0.25), 0 0 45px rgba(255,112,160,0.08), inset 0 0 10px rgba(255,112,160,0.06);
animation: ph-flowers-glow 4s ease-in-out infinite;
}
.ph-theme-flowers .ph-avatar-lg:hover {
box-shadow: 0 0 28px rgba(255,112,160,0.4), 0 0 55px rgba(255,112,160,0.15);
}
@keyframes ph-flowers-glow {
0%, 100% { box-shadow: 0 0 20px rgba(255,112,160,0.2), 0 0 45px rgba(255,112,160,0.06); }
50% { box-shadow: 0 0 28px rgba(255,176,208,0.35), 0 0 55px rgba(255,112,160,0.12); }
}
.ph-theme-flowers .ph-name { color: #ff90c0; text-shadow: 0 1px 6px rgba(255,112,160,0.3); }
.ph-theme-flowers .ph-clan { color: #7a4060; }
.ph-theme-flowers .ph-lvl-pill { color: #ff90c0; background: rgba(255,112,160,0.08); border-color: #2a1020; }
.ph-theme-flowers .ph-lvl-pill.ph-lvl-total { color: #a0708a; background: rgba(255,112,160,0.05); border-color: #220e1a; }
.ph-theme-flowers .ph-section { border-top-color: #220e1a; z-index: 1; position: relative; }
.ph-theme-flowers .ph-section-label { color: #4a2040; }
.ph-theme-flowers .ph-vital-track { border-color: #2a1020; }
.ph-theme-flowers .ph-vital-text { color: #8a5a70; }
.ph-theme-flowers .ph-fill-prayer { background: linear-gradient(180deg, #cc70b0 0%, #aa4088 40%, #882870 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 8px rgba(255,112,160,0.15); }
.ph-theme-flowers .ph-slayer-name { color: #ff90c0; }
.ph-theme-flowers .ph-slayer-fill { background: linear-gradient(90deg, #e050a0, #ff70a0, #ffb0d0); box-shadow: 0 0 6px rgba(255,112,160,0.3); }
.ph-theme-flowers .ph-slayer-track { border-color: #2a1020; }
.ph-theme-flowers .ph-slayer-text { color: #a06080; }
.ph-theme-flowers .ph-slayer-empty { color: #2a1020; }
.ph-theme-flowers .ph-supply-item span { color: #d0a8c0; }
.ph-theme-flowers .ph-timer { color: #8a5a70; }
.ph-theme-flowers .ph-boost { color: #dd60a0; background: rgba(255,112,160,0.08); border-color: rgba(255,112,160,0.12); }
.ph-theme-flowers .ph-theme-gear { color: #4a2040; }
.ph-theme-flowers .ph-theme-gear:hover { color: #ff90c0; background: rgba(255,112,160,0.1); }
.ph-theme-flowers .ph-theme-picker { background: #1a0c14; border-color: #2a1020; }
.ph-theme-flowers .ph-theme-option:hover { background: rgba(255,112,160,0.1); }
.ph-theme-flowers .ph-theme-option.ph-theme-active { color: #ff90c0; background: rgba(255,112,160,0.08); }
/* flowers uses custom petal elements, not .ph-particle */
/* ── RAINBOW THEME ── */
.ph-theme-rainbow {
background: linear-gradient(180deg, #141218 0%, #100e14 30%, #0c0a10 100%);
}
.sidebar-body:has(.ph-theme-rainbow),
body.rebrand .sidebar-body:has(.ph-theme-rainbow) {
background: #0c0a10 !important;
}
.ph-theme-rainbow .ph-edge {
opacity: 0.8;
background: linear-gradient(90deg, transparent 3%, #ff4444 12%, #ff8800 25%, #ffdd00 38%, #44dd44 50%, #4488ff 62%, #aa44ff 75%, #ff4444 88%, transparent 97%);
animation: ph-rainbow-scroll 4s linear infinite;
background-size: 200% 100%;
}
@keyframes ph-rainbow-scroll {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.ph-theme-rainbow .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(170,68,255,0.04) 0%, transparent 70%);
}
.ph-theme-rainbow .ph-avatar-lg {
border: 3px solid transparent;
background:
linear-gradient(#0c0a10, #0c0a10) padding-box,
conic-gradient(from 0deg, #ff4444, #ff8800, #ffdd00, #44dd44, #4488ff, #aa44ff, #ff4444) border-box;
box-shadow: 0 0 16px rgba(170,68,255,0.2), 0 0 40px rgba(68,136,255,0.06);
animation: ph-rainbow-ring-spin 6s linear infinite;
}
@keyframes ph-rainbow-ring-spin {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
.ph-theme-rainbow .ph-avatar-lg:hover {
box-shadow: 0 0 28px rgba(170,68,255,0.35), 0 0 50px rgba(68,136,255,0.12);
}
.ph-theme-rainbow .ph-name { color: #e0c0ff; text-shadow: 0 1px 6px rgba(170,68,255,0.3); }
.ph-theme-rainbow .ph-clan { color: #6a5a80; }
.ph-theme-rainbow .ph-lvl-pill { color: #d0b0ff; background: rgba(170,68,255,0.08); border-color: #201830; }
.ph-theme-rainbow .ph-lvl-pill.ph-lvl-total { color: #8a7aa0; background: rgba(170,68,255,0.05); border-color: #1a1428; }
.ph-theme-rainbow .ph-section { border-top-color: #1a1428; }
.ph-theme-rainbow .ph-section-label { color: #3a2a50; }
.ph-theme-rainbow .ph-vital-track { border-color: #1a1428; }
.ph-theme-rainbow .ph-vital-text { color: #7a6a90; }
.ph-theme-rainbow .ph-slayer-name { color: #d0b0ff; }
.ph-theme-rainbow .ph-slayer-fill { background: linear-gradient(90deg, #ff4444, #ff8800, #ffdd00, #44dd44, #4488ff, #aa44ff); box-shadow: 0 0 6px rgba(170,68,255,0.3); }
.ph-theme-rainbow .ph-slayer-track { border-color: #1a1428; }
.ph-theme-rainbow .ph-slayer-text { color: #8a7aa0; }
.ph-theme-rainbow .ph-slayer-empty { color: #201830; }
.ph-theme-rainbow .ph-supply-item span { color: #c0b0d8; }
.ph-theme-rainbow .ph-timer { color: #7a6a90; }
.ph-theme-rainbow .ph-boost { color: #aa70dd; background: rgba(170,68,255,0.08); border-color: rgba(170,68,255,0.12); }
.ph-theme-rainbow .ph-theme-gear { color: #3a2a50; }
.ph-theme-rainbow .ph-theme-gear:hover { color: #d0b0ff; background: rgba(170,68,255,0.1); }
.ph-theme-rainbow .ph-theme-picker { background: #141218; border-color: #201830; }
.ph-theme-rainbow .ph-theme-option:hover { background: rgba(170,68,255,0.1); }
.ph-theme-rainbow .ph-theme-option.ph-theme-active { color: #d0b0ff; background: rgba(170,68,255,0.08); }
/* ── NEON THEME ── */
.ph-theme-neon {
background: linear-gradient(180deg, #0a0a14 0%, #080810 30%, #06060c 100%);
}
.sidebar-body:has(.ph-theme-neon),
body.rebrand .sidebar-body:has(.ph-theme-neon) {
background: #06060c !important;
}
.ph-theme-neon .ph-edge {
opacity: 0.9;
background: linear-gradient(90deg, transparent 5%, #ff00ff 15%, #00ffff 35%, #ff0088 50%, #00ff88 65%, #ffff00 85%, transparent 95%);
animation: ph-neon-flicker 0.1s step-end infinite alternate;
}
@keyframes ph-neon-flicker {
0% { opacity: 0.85; }
50% { opacity: 0.95; }
100% { opacity: 0.9; }
}
.ph-theme-neon .ph-hero {
background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255,0,255,0.04) 0%, transparent 70%);
}
.ph-theme-neon .ph-avatar-lg {
border: 2px solid rgba(0,255,255,0.5);
background: #06060c;
box-shadow: 0 0 12px rgba(0,255,255,0.3), 0 0 30px rgba(255,0,255,0.15), inset 0 0 8px rgba(0,255,255,0.05);
animation: ph-neon-glow 2s ease-in-out infinite;
}
.ph-theme-neon .ph-avatar-lg:hover {
border-color: rgba(255,0,255,0.6);
box-shadow: 0 0 20px rgba(255,0,255,0.4), 0 0 40px rgba(0,255,255,0.2);
}
@keyframes ph-neon-glow {
0%, 100% { box-shadow: 0 0 12px rgba(0,255,255,0.3), 0 0 30px rgba(255,0,255,0.15); border-color: rgba(0,255,255,0.5); }
50% { box-shadow: 0 0 16px rgba(255,0,255,0.35), 0 0 35px rgba(0,255,255,0.2); border-color: rgba(255,0,255,0.5); }
}
.ph-theme-neon .ph-name { color: #00ffff; text-shadow: 0 0 8px rgba(0,255,255,0.5); }
.ph-theme-neon .ph-clan { color: #407080; }
.ph-theme-neon .ph-lvl-pill { color: #00ffff; background: rgba(0,255,255,0.06); border-color: #102030; }
.ph-theme-neon .ph-lvl-pill.ph-lvl-total { color: #60a0b0; background: rgba(0,255,255,0.04); border-color: #0e1a25; }
.ph-theme-neon .ph-section { border-top-color: #101020; }
.ph-theme-neon .ph-section-label { color: #303050; }
.ph-theme-neon .ph-vital-track { border-color: #101020; }
.ph-theme-neon .ph-vital-text { color: #5a5a8a; }
.ph-theme-neon .ph-fill-hp { background: linear-gradient(180deg, #00ff88 0%, #00cc66 40%, #00aa55 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,255,136,0.2); }
.ph-theme-neon .ph-fill-prayer { background: linear-gradient(180deg, #ff00ff 0%, #cc00cc 40%, #aa00aa 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(255,0,255,0.2); }
.ph-theme-neon .ph-slayer-name { color: #ff00ff; text-shadow: 0 0 6px rgba(255,0,255,0.3); }
.ph-theme-neon .ph-slayer-fill { background: linear-gradient(90deg, #ff00ff, #00ffff, #ff0088); box-shadow: 0 0 8px rgba(255,0,255,0.3); }
.ph-theme-neon .ph-slayer-track { border-color: #101020; }
.ph-theme-neon .ph-slayer-text { color: #6a6a90; }
.ph-theme-neon .ph-slayer-empty { color: #181830; }
.ph-theme-neon .ph-supply-item span { color: #b0b0d0; }
.ph-theme-neon .ph-timer { color: #5a5a8a; }
.ph-theme-neon .ph-boost { color: #00ffcc; background: rgba(0,255,255,0.06); border-color: rgba(0,255,255,0.1); }
.ph-theme-neon .ph-theme-gear { color: #303050; }
.ph-theme-neon .ph-theme-gear:hover { color: #00ffff; background: rgba(0,255,255,0.08); }
.ph-theme-neon .ph-theme-picker { background: #0a0a14; border-color: #181830; }
.ph-theme-neon .ph-theme-option:hover { background: rgba(0,255,255,0.08); }
.ph-theme-neon .ph-theme-option.ph-theme-active { color: #00ffff; background: rgba(0,255,255,0.06); }
/* ═══════════════════════════════════════════════════════════════ */
/* SLAYER HUB — Full Viewport */
/* ═══════════════════════════════════════════════════════════════ */
.slayer-hub {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: transparent;
position: relative;
}
.slayer-hub-header,
.slayer-tab-bar,
.slayer-hub-content {
background-color: #18100E;
}
.slayer-hub-content:has(.sc-arena) {
background-color: transparent;
}
/* ── Hub Header ── */
.slayer-hub-header {
padding: 10px 12px 8px;
background: linear-gradient(180deg, rgba(30,22,10,0.95) 0%, rgba(20,15,8,0.85) 100%);
border-bottom: 1px solid #3a3020;
flex-shrink: 0;
}
.slayer-hub-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.slayer-hub-stats {
display: flex;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
}
.slayer-stat-box {
text-align: center;
padding: 4px 10px;
background: rgba(255,152,31,0.08);
border: 1px solid #3a3020;
border-radius: 6px;
min-width: 50px;
}
.slayer-stat-val {
font-size: 16px;
font-weight: 700;
color: #ffd666;
line-height: 1.1;
}
.slayer-stat-label {
font-size: 9px;
color: #8a7a5a;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Active Task Card (in header) ── */
.slayer-active-task {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 8px 10px;
background: rgba(255,152,31,0.06);
border: 1px solid rgba(255,152,31,0.25);
border-radius: 6px;
}
.slayer-task-icon { flex-shrink: 0; }
.slayer-task-icon img, .icon-slayer-task { width: 44px; height: 44px; }
.slayer-task-info { flex: 1; min-width: 0; }
.slayer-task-name {
font-size: 14px;
font-weight: 700;
color: #ff981f;
}
.slayer-task-count { font-size: 12px; color: #c0a070; margin: 1px 0; }
.slayer-task-meta { font-size: 10px; color: #6a5a4a; margin-top: 2px; }
.slayer-task-meta b { color: #a09070; }
.slayer-task-bar-wrap {
width: 100%;
height: 6px;
background: #0a0a06;
border-radius: 3px;
overflow: hidden;
border: 1px solid #3a3020;
margin: 3px 0;
}
.slayer-task-bar {
height: 100%;
background: linear-gradient(90deg, #ff981f, #ffd666);
border-radius: 3px;
transition: width 0.3s ease;
box-shadow: 0 0 6px rgba(255,152,31,0.4);
}
.slayer-task-btns {
display: flex;
flex-direction: column;
gap: 4px;
flex-shrink: 0;
}
/* ── No Task ── */
.slayer-no-task {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 8px;
padding: 10px;
border: 1px dashed #3a3020;
border-radius: 6px;
}
.slayer-no-task-text { font-size: 13px; color: #6a5a4a; }
/* ── Slayer Buttons ── */
.slayer-btn {
font-size: 11px;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #5c4a2a;
background: #2a1f10;
color: #c0a070;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
text-align: center;
}
.slayer-btn:hover { background: #3a2f18; border-color: #ff981f; color: #ffd666; }
.slayer-btn-sub { display: block; font-size: 9px; color: #8a7a5a; font-weight: 400; }
.slayer-btn-primary {
background: linear-gradient(180deg, #ff981f 0%, #cc7a16 100%);
color: #1a1209;
border-color: #ff981f;
font-weight: 700;
padding: 8px 22px;
font-size: 13px;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.slayer-btn-primary:hover { background: linear-gradient(180deg, #ffb040 0%, #ff981f 100%); }
.slayer-btn-skip { color: #c09060; }
.slayer-btn-block { color: #8060a0; border-color: #5a3a6a; }
.slayer-btn-block:hover { border-color: #9060c0; color: #b080e0; }
.slayer-btn-block:disabled { opacity: 0.4; cursor: not-allowed; }
.slayer-btn-block:disabled:hover { border-color: #5a3a6a; color: #8060a0; }
.slayer-btn-reset { color: #a05050; border-color: #6a3030; }
.slayer-btn-reset:hover { border-color: #ff4444; color: #ff6666; }
/* ── Tab Bar ── */
.slayer-tab-bar {
display: flex;
background: #151008;
border-bottom: 1px solid #3a3020;
flex-shrink: 0;
}
.slayer-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 0;
font-size: 12px;
font-weight: 600;
color: #8a7a5a;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.15s;
}
.slayer-tab img { width: 16px; height: 16px; opacity: 0.6; }
.slayer-tab:hover { color: #c0a070; background: rgba(255,152,31,0.04); }
.slayer-tab.active {
color: #ff981f;
border-bottom-color: #ff981f;
background: rgba(255,152,31,0.06);
}
.slayer-tab.active img { opacity: 1; }
/* ── Hub Content (scrollable area) ── */
.slayer-hub-content {
flex: 1;
overflow-y: auto;
padding: 8px;
scrollbar-width: thin;
scrollbar-color: #3a3020 transparent;
}
/* ═══ TASK TAB — Focused task display ═══ */
/* No task empty state */
.slayer-empty-task {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
gap: 10px;
}
.icon-slayer-empty { width: 64px; height: 64px; opacity: 0.3; }
.slayer-empty-title { font-size: 16px; font-weight: 700; color: #6a5a4a; }
.slayer-empty-hint { font-size: 12px; color: #4a3a2a; margin-bottom: 8px; }
/* Task focus card */
.slayer-task-focus {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 12px;
gap: 12px;
}
/* Big monster icon + name */
.st-monster { text-align: center; }
.st-monster-icon { margin-bottom: 4px; }
.icon-slayer-focus { width: 80px; height: 80px; filter: drop-shadow(0 2px 8px rgba(255,152,31,0.3)); }
.st-monster-name {
font-size: 18px;
font-weight: 700;
color: #ff981f;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Progress */
.st-progress {
width: 100%;
max-width: 320px;
text-align: center;
}
.st-progress-text {
font-size: 13px;
color: #c0a070;
margin-bottom: 4px;
}
.st-bar-wrap {
width: 100%;
height: 10px;
background: #0a0a06;
border-radius: 5px;
overflow: hidden;
border: 1px solid #3a3020;
}
.st-bar {
height: 100%;
background: linear-gradient(90deg, #cc7a16, #ff981f, #ffd666);
border-radius: 5px;
transition: width 0.3s ease;
box-shadow: 0 0 8px rgba(255,152,31,0.5);
}
.st-progress-pct {
font-size: 11px;
color: #8a7a5a;
margin-top: 2px;
}
/* Stats row */
.st-stats {
display: flex;
gap: 16px;
justify-content: center;
}
.st-stat { text-align: center; }
.st-stat-label { display: block; font-size: 9px; color: #6a5a4a; text-transform: uppercase; letter-spacing: 0.5px; }
.st-stat-val { display: block; font-size: 14px; font-weight: 700; color: #ddd; }
/* Notable drops */
.st-drops {
width: 100%;
max-width: 320px;
}
.st-drops-label {
font-size: 10px;
color: #6a5a4a;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
text-align: center;
}
.st-drops-grid {
display: flex;
justify-content: center;
gap: 4px;
flex-wrap: wrap;
}
.st-drop {
width: 32px;
height: 32px;
background: rgba(255,255,255,0.03);
border: 1px solid #2a2218;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
.st-drop:hover { border-color: #5c4a2a; background: rgba(255,152,31,0.06); }
.icon-drop { width: 24px; height: 24px; }
/* Superior info */
.st-superior {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(255,68,68,0.06);
border: 1px solid rgba(255,68,68,0.15);
border-radius: 6px;
width: 100%;
max-width: 320px;
}
.icon-sup { width: 28px; height: 28px; }
.st-sup-info { flex: 1; }
.st-sup-name { font-size: 12px; font-weight: 600; color: #ff6666; display: block; }
.st-sup-detail { font-size: 10px; color: #8a6060; }
.st-sup-locked { color: #ff4444; }
/* ═══ SLAYER BATTLE ARENA ═══ */
/* Arena container — fills the tab content */
.sc-arena {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 300px;
overflow: hidden;
background: transparent;
}
/* ═══ CHIAROSCURO DUNGEON — light from below ═══ */
/* Environment container — holds all light/atmosphere, sits behind the stage */
.sc-environ {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
/* The light pool: the one true light source.
A bright ellipse on the "floor", perspective-crushed flat.
Three concentric rings: scorching core, warm mid, ambient edge.
This is the sun of our little universe. Everything else reacts to it. */
.sc-light-pool {
position: absolute;
bottom: 2%;
left: 50%;
width: 500px;
height: 200px;
transform: translateX(-50%) scaleY(0.45);
transform-origin: center bottom;
background:
radial-gradient(ellipse 30% 40% at 50% 50%, rgba(255,200,80,0.40) 0%, transparent 100%),
radial-gradient(ellipse 55% 60% at 50% 50%, rgba(255,152,31,0.22) 0%, transparent 100%),
radial-gradient(ellipse 90% 85% at 50% 50%, rgba(255,100,20,0.10) 0%, transparent 100%);
filter: blur(10px);
animation: sc-torch 3.5s ease-in-out infinite;
}
/* Torch flicker — irregular, not a clean sine wave */
@keyframes sc-torch {
0% { opacity: 1; transform: translateX(-50%) scaleY(0.22) scaleX(1); }
18% { opacity: 0.88; transform: translateX(-50%) scaleY(0.21) scaleX(0.98); }
40% { opacity: 0.95; transform: translateX(-50%) scaleY(0.225) scaleX(1.01); }
62% { opacity: 0.82; transform: translateX(-50%) scaleY(0.215) scaleX(0.97); }
80% { opacity: 0.97; transform: translateX(-50%) scaleY(0.22) scaleX(1); }
100% { opacity: 1; transform: translateX(-50%) scaleY(0.22) scaleX(1); }
}
/* Light rays — the light doesn't just pool, it climbs.
Two soft cones of light projecting upward from the pool,
fading into the dark. Creates the feeling of volume in the air. */
.sc-light-rays {
position: absolute;
bottom: 8%;
left: 50%;
width: 300px;
height: 70%;
transform: translateX(-50%);
background:
linear-gradient(175deg, transparent 40%, rgba(255,170,70,0.03) 60%, rgba(255,140,40,0.06) 80%, transparent 95%),
linear-gradient(185deg, transparent 40%, rgba(255,170,70,0.025) 60%, rgba(255,140,40,0.05) 80%, transparent 95%);
filter: blur(15px);
opacity: 0.7;
animation: sc-rays-breathe 5s ease-in-out infinite alternate;
}
@keyframes sc-rays-breathe {
0% { opacity: 0.6; }
100% { opacity: 0.8; }
}
/* Motes — particles of dust catching the uplight.
Only visible near the bottom (where light is strongest).
They drift upward slowly, dimming as they leave the light. */
.sc-motes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.sc-mote {
position: absolute;
border-radius: 50%;
background: rgba(255,190,100,0.7);
animation: sc-mote-rise linear infinite;
opacity: 0;
}
@keyframes sc-mote-rise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
8% { opacity: 0.5; }
40% { opacity: 0.25; transform: translateY(-40px) translateX(8px); }
80% { opacity: 0.08; }
100% { transform: translateY(-90px) translateX(-5px); opacity: 0; }
}
/* ═══ SUPERIOR — red light source ═══ */
.sc-arena.sc-superior .sc-light-pool {
background:
radial-gradient(circle, rgba(255,60,30,0.55) 0%, rgba(255,30,20,0.25) 12%, transparent 30%),
radial-gradient(circle, rgba(200,30,20,0.18) 0%, rgba(150,20,10,0.06) 35%, transparent 55%),
radial-gradient(circle, rgba(120,20,10,0.06) 0%, transparent 70%);
}
.sc-arena.sc-superior .sc-light-rays {
background:
linear-gradient(175deg, transparent 40%, rgba(255,50,30,0.03) 60%, rgba(255,30,20,0.06) 80%, transparent 95%),
linear-gradient(185deg, transparent 40%, rgba(255,50,30,0.025) 60%, rgba(200,20,15,0.05) 80%, transparent 95%);
}
.sc-arena.sc-superior .sc-mote {
background: rgba(255,100,60,0.7);
}
/* ═══ STAGE — positions the monster ═══ */
.sc-stage {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 8px;
position: relative;
z-index: 2;
min-height: 120px;
}
/* Secondary glow — sits directly under monster, tighter than light-pool.
Sells the contact between monster and ground. */
.sc-glow {
position: absolute;
width: 280px;
height: 60px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: radial-gradient(ellipse, rgba(255,180,70,0.25) 0%, rgba(255,130,40,0.08) 40%, transparent 70%);
filter: blur(12px);
pointer-events: none;
animation: sc-torch 3.5s ease-in-out infinite;
}
/* ═══ MONSTER ═══ */
.sc-monster-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
/* The sprite: lit from below.
Dark shadow cast upward (the "ceiling" side is dark).
Warm light kissing the underside via upward drop-shadow. */
.sc-monster-sprite {
position: relative;
z-index: 2;
filter:
drop-shadow(0 6px 20px rgba(0,0,0,0.95))
drop-shadow(0 -4px 12px rgba(255,152,31,0.08));
}
/* Contact shadow — dark ellipse where monster meets ground.
Sharper and darker than ambient shadows. Grounds the sprite. */
.sc-monster-sprite::after {
content: '';
position: absolute;
bottom: -8px;
left: 20%;
width: 60%;
height: 16px;
background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 50%, transparent 75%);
filter: blur(4px);
z-index: -1;
}
.icon-sc-monster { width: 320px; height: 320px; image-rendering: pixelated; }
/* Superior badge */
.sc-sup-badge {
font-size: 8px;
font-weight: 800;
color: #ff2222;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 8px rgba(255,30,30,0.6);
animation: sc-sup-pulse 2s ease-in-out infinite;
}
@keyframes sc-sup-pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; text-shadow: 0 0 12px rgba(255,30,30,0.8); }
}
/* Hitsplat area — overlaid directly on the monster sprite */
.sc-hitsplat-area {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
}
/* Hitsplats inside arena reuse the game's .hitsplat class (with sprite images) */
.sc-hitsplat-area .hitsplat {
transform: translate(-50%, -50%);
}
/* ── Combat HUD ── */
.sc-hud {
position: relative;
z-index: 3;
padding: 0 16px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.sc-name {
font-size: 14px;
font-weight: 700;
color: #ff981f;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
text-align: center;
}
.sc-bars {
width: 100%;
max-width: 300px;
display: flex;
flex-direction: column;
gap: 3px;
}
.sc-bar-group {
display: flex;
align-items: center;
gap: 6px;
}
.sc-bar-label {
font-size: 9px;
font-weight: 700;
color: #6a8a6a;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 22px;
text-align: right;
}
.sc-bar-atk .sc-bar-label { color: #8a8a6a; }
.sc-bar-val {
font-size: 10px;
color: #88cc88;
white-space: nowrap;
min-width: 50px;
font-variant-numeric: tabular-nums;
}
/* HP bar */
.sc-hp-track {
flex: 1;
height: 12px;
background: #1a0a0a;
border-radius: 2px;
overflow: hidden;
border: 1px solid #2a1a1a;
}
.sc-hp-fill {
height: 100%;
background: linear-gradient(180deg, #33bb33 0%, #228822 50%, #1a6a1a 100%);
transition: width 0.15s ease;
border-radius: 1px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
/* Attack timer bar */
.sc-atk-track {
flex: 1;
height: 4px;
background: #1a1a12;
border-radius: 2px;
overflow: hidden;
}
.sc-atk-fill {
height: 100%;
background: linear-gradient(90deg, #8a8a5a, #bbbb77);
border-radius: 2px;
transition: width 0.08s linear;
}
/* ── Bottom bar ── */
.sc-tracker {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
padding: 8px 12px;
background: rgba(12,8,6,0.8);
border-top: 1px solid #2a2218;
flex-shrink: 0;
}
.sc-stop-btn {
font-size: 11px;
font-weight: 600;
padding: 6px 24px;
border-radius: 4px;
border: 1px solid #4a2020;
background: rgba(80,20,20,0.3);
color: #bb6666;
cursor: pointer;
transition: all 0.12s;
}
.sc-stop-btn:hover { border-color: #ff4444; color: #ff6666; background: rgba(120,30,30,0.3); }
/* ═══ Mobile ═══ */
@media (max-width: 480px) {
.icon-sc-monster { width: 200px; height: 200px; }
.sc-bars { max-width: 260px; }
.sc-tracker { padding: 6px 8px; }
.sc-tracker-count { font-size: 12px; }
}
/* Fight button */
.slayer-fight-btn {
width: 100%;
max-width: 320px;
padding: 12px;
font-size: 15px;
font-weight: 700;
background: linear-gradient(180deg, #4a3a1a, #2a2010);
border: 2px solid #ff981f;
color: #ff981f;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
text-transform: uppercase;
letter-spacing: 1px;
}
.slayer-fight-btn:hover {
background: linear-gradient(180deg, #5a4a20, #3a3018);
box-shadow: 0 0 12px rgba(255,152,31,0.3);
}
/* ═══ MASTERS TAB ═══ */
/* ═══ SLAYER MASTERS — ROOM VIEW ═══ */
.slayer-room {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 24px 12px 32px;
background: #1a1209;
background-image:
radial-gradient(ellipse at 50% 40%, rgba(80,60,30,0.18) 0%, transparent 70%),
repeating-linear-gradient(180deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, transparent 4px);
min-height: 100%;
}
.slayer-master-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: calc(100% - 16px);
padding: 16px 12px 14px;
background: #221a10;
border: 1px solid rgba(180,160,120,0.12);
border-radius: 12px;
cursor: default;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.slayer-master-card:hover:not(.locked) {
border-color: rgba(255,152,31,0.3);
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 15px rgba(255,152,31,0.06);
}
.slayer-master-card.locked {
opacity: 0.45;
}
.smc-portrait {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #7a6a4a;
box-shadow: 0 0 14px rgba(255,152,31,0.2), inset 0 0 10px rgba(0,0,0,0.5);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #18100a;
transition: box-shadow 0.25s, border-color 0.25s;
}
.slayer-master-card:hover:not(.locked) .smc-portrait {
border-color: #ff981f;
box-shadow: 0 0 22px rgba(255,152,31,0.35), inset 0 0 10px rgba(0,0,0,0.5);
}
.smc-img {
width: 64px;
height: 64px;
object-fit: contain;
}
.slayer-master-card.locked .smc-portrait {
filter: grayscale(0.8) brightness(0.5);
border-color: #444;
}
.smc-lock {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: rgba(0,0,0,0.35);
}
.smc-name {
color: #ff981f;
font-size: 1.05em;
font-weight: 700;
text-shadow: 1px 1px 2px #000;
text-align: center;
}
.slayer-master-card.locked .smc-name { color: #6a5a4a; }
.smc-flavor {
color: #706050;
font-size: 0.78em;
font-style: italic;
text-align: center;
line-height: 1.3;
max-width: 92%;
}
.smc-meta {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.smc-pts {
font-size: 0.75em;
color: #ffd666;
}
.smc-pts-warn { color: #a06040; }
.smc-req {
font-size: 0.72em;
color: #6a5a4a;
background: rgba(0,0,0,0.2);
padding: 2px 8px;
border-radius: 8px;
}
.smc-req-locked { color: #c05040; }
.smc-btn {
margin-top: 4px;
padding: 6px 28px;
background: linear-gradient(180deg, #5a4a2a, #3a3018);
border: 1px solid rgba(255,152,31,0.25);
border-radius: 8px;
color: #ff981f;
font-size: 0.85em;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
text-shadow: 1px 1px 1px #000;
}
.smc-btn:hover {
background: linear-gradient(180deg, #6a5a3a, #4a4028);
border-color: rgba(255,152,31,0.5);
transform: translateY(-1px);
}
.smc-btn:active { transform: translateY(0); }
.smc-auto-btn {
margin-top: 4px;
padding: 3px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,152,31,0.15);
border-radius: 6px;
color: #8a7a6a;
font-size: 0.7em;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.smc-auto-btn:hover { background: rgba(255,152,31,0.1); color: #bba060; }
.smc-auto-btn.active {
background: rgba(255,152,31,0.15);
border-color: rgba(255,152,31,0.4);
color: #ff981f;
font-weight: 600;
}
.smc-auto-warn {
font-size: 0.6em;
color: #ff6644;
margin-top: 1px;
opacity: 0.8;
}
.smc-busy {
font-size: 0.72em;
color: #6a5a4a;
margin-top: 2px;
font-style: italic;
}
/* ═══ TASK CHOICE SCREEN ═══ */
.slayer-choices {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
/* Master dialogue */
.slayer-dialogue {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #1a1209;
border: 1px solid rgba(255,152,31,0.15);
border-radius: 8px;
margin-bottom: 4px;
}
.slayer-dialogue-portrait { flex-shrink: 0; }
.slayer-dialogue-portrait .smc-img { width: 48px; height: 48px; }
.slayer-dialogue-name {
font-size: 13px;
font-weight: 700;
color: #ff981f;
}
.slayer-dialogue-line {
font-size: 12px;
color: #b0a080;
font-style: italic;
margin-top: 2px;
}
/* Choice cards */
.slayer-choice-card {
background: #221a10;
border: 1px solid rgba(180,160,120,0.12);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
cursor: pointer;
}
.slayer-choice-card:hover:not(.locked):not(.empty) {
border-color: rgba(255,152,31,0.3);
}
.slayer-choice-card.expanded {
border-color: rgba(255,152,31,0.4);
box-shadow: 0 0 12px rgba(255,152,31,0.08);
}
.slayer-choice-card.locked {
opacity: 0.4;
cursor: default;
}
.slayer-choice-card.empty {
opacity: 0.15;
cursor: default;
padding: 16px;
text-align: center;
}
.slayer-choice-empty {
font-size: 18px;
color: #6a5a4a;
}
.slayer-choice-main {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
.slayer-choice-icon img, .icon-slayer-choice { width: 36px; height: 36px; }
.slayer-choice-info { flex: 1; }
.slayer-choice-name {
font-size: 13px;
font-weight: 600;
color: #e0d0b0;
}
.slayer-choice-range {
font-size: 11px;
color: #7a6a5a;
margin-top: 2px;
}
.slayer-choice-stats {
display: flex;
gap: 8px;
margin-top: 3px;
}
.sc-stat {
font-size: 10px;
color: #a89880;
background: rgba(0,0,0,0.15);
padding: 1px 5px;
border-radius: 3px;
}
.slayer-choice-lock {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: #6a5a4a;
flex-shrink: 0;
}
.slayer-choice-lock span { font-style: italic; }
/* Length picker (inline, expanded) */
.slayer-length-picker {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 12px 10px;
background: rgba(0,0,0,0.2);
border-top: 1px solid rgba(180,160,120,0.08);
}
.slayer-length-label {
font-size: 11px;
color: #8a7a6a;
margin-bottom: 2px;
}
.slayer-length-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: linear-gradient(180deg, #3a3018, #2a2010);
border: 1px solid rgba(255,152,31,0.15);
border-radius: 6px;
color: #e0d0b0;
font-size: 12px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.slayer-length-btn:hover:not(.disabled) {
background: linear-gradient(180deg, #4a4028, #3a3018);
border-color: rgba(255,152,31,0.35);
}
.slayer-length-btn.disabled {
opacity: 0.4;
cursor: default;
}
.slayer-length-title {
font-weight: 600;
min-width: 52px;
}
.slayer-length-range {
color: #8a7a6a;
font-size: 11px;
flex: 1;
}
.slayer-length-lock {
font-size: 10px;
color: #6a5040;
font-style: italic;
margin-left: auto;
}
/* Cancel button */
.slayer-choices-cancel {
margin-top: 4px;
padding: 8px;
background: none;
border: 1px solid rgba(180,160,120,0.1);
border-radius: 6px;
color: #6a5a4a;
font-size: 11px;
cursor: pointer;
transition: color 0.12s, border-color 0.12s;
}
.slayer-choices-cancel:hover {
color: #a09080;
border-color: rgba(180,160,120,0.25);
}
/* Locked prerequisite in reward shop */
.sr-item.sr-locked {
opacity: 0.35;
pointer-events: none;
}
/* ═══ REWARDS TAB ═══ */
.slayer-rewards-list {
display: flex;
flex-direction: column;
}
.slayer-shop-cat {
font-size: 11px;
font-weight: 700;
color: #ff981f;
padding: 8px 0 4px;
border-bottom: 1px solid #2a2218;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sr-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border: 1px solid transparent;
border-radius: 5px;
cursor: pointer;
transition: all 0.12s;
}
.sr-item:hover { background: rgba(255,152,31,0.06); border-color: #3a3020; }
.sr-item.owned { opacity: 0.4; cursor: default; }
.sr-item.poor { opacity: 0.65; }
.sr-icon img, .icon-shop { width: 28px; height: 28px; }
.sr-body { flex: 1; min-width: 0; }
.sr-name {
font-size: 12px;
font-weight: 600;
color: #ddd;
display: flex;
align-items: center;
gap: 6px;
}
.sr-owned {
font-size: 9px;
color: #5a8a5a;
background: rgba(90,138,90,0.15);
padding: 1px 5px;
border-radius: 3px;
}
.sr-count {
font-size: 9px;
color: #a09070;
background: rgba(160,144,112,0.15);
padding: 1px 5px;
border-radius: 3px;
}
.sr-desc { font-size: 10px; color: #6a5a4a; margin-top: 1px; }
.sr-cost {
font-size: 12px;
font-weight: 600;
color: #ffd666;
flex-shrink: 0;
white-space: nowrap;
}
.sr-toggle { flex-shrink: 0; margin-right: 6px; cursor: pointer; }
.sr-toggle-btn { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; }
.sr-toggle-on { background: #2d5a1e; color: #7fff50; }
.sr-toggle-off { background: #5a1e1e; color: #ff6050; }
.sr-inferno-controls { display: flex; gap: 4px; flex-direction: column; }
/* ── Block List ── */
.slayer-block-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px;
border-bottom: 1px solid #1a1209;
font-size: 12px;
color: #c08080;
}
.slayer-unblock-btn {
font-size: 10px;
padding: 2px 8px;
border-radius: 3px;
border: 1px solid #6a3030;
background: #2a1010;
color: #ff6666;
cursor: pointer;
}
.slayer-unblock-btn:hover { background: #3a1818; border-color: #ff4444; }
.slayer-block-empty {
font-size: 11px;
color: #5a4a3a;
padding: 12px;
text-align: center;
}
/* ── Slayer Task Header (viewport overlay) ── */
.viewport.has-slayer-header #monster-hp-wrap {
padding-top: 68px;
}
.slayer-task-overlay {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 50;
pointer-events: none;
}
.sto-header {
pointer-events: auto;
background: linear-gradient(180deg, rgba(20,15,8,0.95) 0%, rgba(20,15,8,0.85) 100%);
border-bottom: 1px solid rgba(255,152,31,0.35);
backdrop-filter: blur(6px);
padding: 6px 10px 5px;
}
.sto-task-row {
display: flex;
align-items: center;
gap: 8px;
}
.sto-task-icon { flex-shrink: 0; }
.sto-task-icon img, .sto-task-icon .icon-sto-task { width: 32px; height: 32px; filter: drop-shadow(0 0 4px rgba(255,152,31,0.5)); }
.sto-task-info { flex: 1; min-width: 0; }
.sto-task-name {
font-size: 13px;
font-weight: 700;
color: #ff981f;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sto-task-count {
font-size: 11px;
font-weight: 600;
color: #ffd666;
}
.sto-task-meta {
font-size: 10px;
color: #8a8070;
white-space: nowrap;
}
.sto-task-meta b { color: #c4b89a; }
.sto-progress { margin-top: 4px; }
.sto-bar {
width: 100%;
height: 5px;
background: #1a1209;
border-radius: 3px;
overflow: hidden;
}
.sto-fill {
height: 100%;
background: linear-gradient(90deg, #ff981f, #ffd666);
border-radius: 3px;
transition: width 0.3s;
}
.sto-actions {
display: flex;
gap: 4px;
margin-top: 5px;
justify-content: flex-end;
}
.sto-action-btn {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 3px;
border: 1px solid rgba(255,152,31,0.4);
background: rgba(255,152,31,0.1);
color: #c4b89a;
cursor: pointer;
transition: all 0.12s;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
}
.sto-action-btn:hover { background: rgba(255,152,31,0.25); border-color: #ff981f; color: #ffd666; }
.sto-action-btn:disabled { opacity: 0.4; cursor: default; }
.sto-btn-sub { font-size: 8px; font-weight: 600; color: #6a6050; }
.sto-skip-btn:hover { border-color: #ff981f; }
.sto-cancel-btn { border-color: rgba(255,60,60,0.35); }
.sto-cancel-btn:hover { background: rgba(255,60,60,0.2); border-color: #ff4444; color: #ff6666; }
.sto-block-btn { border-color: rgba(255,60,60,0.35); }
.sto-block-btn:hover { background: rgba(255,60,60,0.2); border-color: #ff4444; color: #ff6666; }
/* ── On-Task Badge (sidebar monster list fallback) ── */
.slayer-on-task-badge {
display: inline-block;
font-size: 9px;
font-weight: 700;
background: #ff981f;
color: #1a1209;
padding: 1px 5px;
border-radius: 3px;
margin-left: 6px;
vertical-align: middle;
}
.method-row.slayer-task-target {
border-left: 3px solid #ff981f;
background: rgba(255,152,31,0.06);
}
/* ═══ Mobile ═══ */
@media (max-width: 600px) {
.slayer-hub-title-row { flex-wrap: wrap; gap: 6px; }
.slayer-hub-stats { gap: 4px; }
.slayer-stat-box { padding: 3px 6px; min-width: 40px; }
.slayer-stat-val { font-size: 13px; }
.slayer-active-task { flex-wrap: wrap; }
.slayer-task-btns { flex-direction: row; }
.slayer-task-icon img, .icon-slayer-task { width: 36px; height: 36px; }
.smc-portrait { width: 64px; height: 64px; }
.smc-img { width: 48px; height: 48px; }
.slayer-master-card { padding: 12px 10px 10px; }
.slayer-room { padding: 16px 8px 24px; gap: 8px; }
}
/* === PRESTIGE SYSTEM === */
/* ═══════════════════════════════════════════════ */
/* PRESTIGE UI */
/* ═══════════════════════════════════════════════ */
/* ── Fullscreen overlay — mirrors .skill-hub ── */
.p-fullscreen {
position: absolute;
inset: 0;
z-index: 40;
display: flex;
flex-direction: column;
background: #18100E;
background-image:
radial-gradient(ellipse 800px 400px at 50% 0%, rgba(255,107,43,0.04) 0%, transparent 100%),
radial-gradient(ellipse 600px 300px at 50% 100%, rgba(255,107,43,0.02) 0%, transparent 100%);
overflow: hidden;
animation: p-fadeIn 0.15s ease-out;
}
@keyframes p-fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ── Prestige Hub (slayer-hub pattern) ── */
.ph-hub {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: transparent;
position: relative;
}
.ph-header,
.ph-hub .slayer-tab-bar,
.ph-content {
background-color: #18100E;
background-image:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12)),
url('../img/viewport-background-texture.png');
background-size: auto, cover;
background-position: center, center;
background-repeat: repeat, no-repeat;
}
.ph-header {
padding: 10px 12px 8px;
background-image:
linear-gradient(180deg, rgba(30,22,10,0.95) 0%, rgba(20,15,8,0.85) 100%),
url('../img/viewport-background-texture.png');
background-size: auto, cover;
background-position: center, center;
background-repeat: repeat, no-repeat;
border-bottom: 1px solid #3a3020;
flex-shrink: 0;
}
.ph-tier-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #ff981f 0%, #cc7a16 100%);
color: #1a1209;
font-weight: 800;
font-size: 14px;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
box-shadow: 0 0 10px rgba(255,152,31,0.3);
}
.ph-currency-val { color: #ff981f !important; }
.ph-active-task {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 8px 10px;
background: rgba(255,152,31,0.06);
border: 1px solid rgba(255,152,31,0.25);
border-radius: 6px;
}
.ph-task-info { flex: 1; min-width: 0; }
.ph-task-name { font-size: 14px; font-weight: 700; color: #ff981f; }
.ph-task-count { font-size: 12px; color: #c0a070; margin: 1px 0; }
.ph-no-task {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 8px;
padding: 10px;
border: 1px dashed #3a3020;
border-radius: 6px;
}
.ph-no-task-text { font-size: 13px; color: #6a5a4a; }
.ph-frozen-warn {
margin-top: 8px;
padding: 6px 10px;
background: rgba(255,60,60,0.08);
border: 1px solid rgba(255,60,60,0.2);
border-radius: 6px;
font-size: 11px;
color: #ff8080;
text-align: center;
}
.ph-content {
flex: 1;
overflow-y: auto;
padding: 8px;
scrollbar-width: thin;
scrollbar-color: #3a3020 transparent;
}
.ph-close {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background: rgba(255,152,31,0.08);
border: 1px solid rgba(255,152,31,0.2);
border-radius: 6px;
color: #ff981f;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
z-index: 5;
}
.ph-close:hover { background: rgba(255,152,31,0.15); border-color: #ff981f; }
.ph-boost-emoji {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 18px;
line-height: 1;
}
.ph-tile-id {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 10px;
font-weight: 700;
color: #ff981f;
background: rgba(255,152,31,0.1);
border: 1px solid rgba(255,152,31,0.2);
border-radius: 4px;
}
.ph-vault-header {
padding: 12px 14px 8px;
}
.ph-vault-title {
font-size: 15px;
font-weight: 700;
color: #ffd700;
margin-bottom: 4px;
}
.ph-vault-desc {
font-size: 11px;
color: #9a8866;
line-height: 1.4;
}
.ph-vault-empty {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 18px;
color: #555;
border: 1px dashed #444;
border-radius: 4px;
}
.ph-vault-slot.owned {
opacity: 1;
border-color: rgba(255,215,0,0.25);
background: rgba(255,215,0,0.04);
}
@media (max-width: 600px) {
.ph-header .slayer-hub-title-row { flex-wrap: wrap; gap: 6px; }
.ph-header .slayer-hub-stats { gap: 4px; }
}
.p-fullscreen::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, #FF981F, transparent);
opacity: 0.4;
z-index: 1;
}
/* ── Header — mirrors .hub-header ── */
.p-fs-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 16px;
background: linear-gradient(180deg, #2E1E18 0%, #221814 100%);
border-bottom: 1px solid #100C08;
flex-shrink: 0;
position: relative;
}
.p-fs-title {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 18px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.5px;
}
.p-fs-close {
width: 36px;
height: 36px;
background: rgba(255,152,31,0.08);
border: 1px solid rgba(255,152,31,0.2);
border-radius: 8px;
color: #FF981F;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.p-fs-close:hover {
background: rgba(255,152,31,0.15);
border-color: #FF981F;
box-shadow: 0 0 8px rgba(255,152,31,0.15);
}
.p-fs-close:active { color: #F5F0E0; }
/* ── Inline header stats (tier, prestiges, currency) ── */
.p-header-stats {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
margin-right: 10px;
font-size: 11px;
}
.p-hs-stat {
display: flex;
align-items: center;
gap: 3px;
}
.p-hs-label {
color: #9B8B6B;
font-weight: 500;
}
.p-hs-val {
color: #FFD700;
font-weight: 600;
}
.p-hs-currency {
color: #FF981F;
}
.p-hs-dim {
color: #9B8B6B;
font-weight: 400;
font-size: 10px;
}
.p-hs-sep {
color: #5E4438;
margin: 0 2px;
}
.p-fixed-header { flex-shrink: 0; }
/* ── Scrollable body ── */
.p-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #3C2A22 transparent;
}
.p-body::-webkit-scrollbar { width: 6px; }
.p-body::-webkit-scrollbar-track { background: transparent; }
.p-body::-webkit-scrollbar-thumb { background: #3C2A22; border-radius: 3px; }
.p-body::-webkit-scrollbar-thumb:hover { background: #5E4438; }
/* ── Badge — topbar prestige tier ── */
.prestige-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,152,31,0.08);
border: 1px solid rgba(255,152,31,0.25);
border-radius: 6px;
padding: 2px 8px;
cursor: pointer;
font-family: 'Lexend', sans-serif;
font-size: 11px;
font-weight: 700;
color: #FF981F;
margin-left: 4px;
transition: all 0.15s;
}
.prestige-badge:hover {
background: rgba(255,152,31,0.15);
border-color: #FF981F;
box-shadow: 0 0 8px rgba(255,152,31,0.15);
}
/* ── Tab bar — mirrors .hub-tabs / .hub-tab ── */
.p-tabs {
display: flex;
gap: 0;
padding: 0 12px;
background: #221814;
border-bottom: 1px solid #100C08;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.p-tabs::-webkit-scrollbar { display: none; }
.p-tab {
padding: 8px 14px;
font-family: 'Lexend', sans-serif;
font-size: 12px;
font-weight: 600;
color: #9B8B6B;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.p-tab:hover {
color: #F5F0E0;
background: rgba(255,255,255,0.02);
}
.p-tab.active {
color: #FF981F;
border-bottom-color: #FF981F;
}
/* p-header-info removed — stats now inline in header bar */
/* ── Stone panel → flattened (hub has no stone panels) ── */
.p-stone {
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
margin: 0;
}
.p-stone-head {
background: none;
border-bottom: 1px solid rgba(94,68,56,0.3);
box-shadow: none;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.p-stone-title {
font-size: 10px;
font-weight: 700;
color: #9B8B6B;
text-shadow: none;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.p-stone-body { padding: 10px 12px; }
/* ── Buttons — mirrors .mc-play / hub button style ── */
.p-bv-btn {
font-family: 'Lexend', sans-serif;
font-size: 11px;
font-weight: 600;
color: #FF981F;
background: linear-gradient(180deg, #5a3a28, #4a2a1a);
border: 1px solid rgba(212,133,74,0.3);
border-radius: 6px;
padding: 6px 14px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all 0.15s;
}
.p-bv-btn:hover {
background: linear-gradient(180deg, #6a4a38, #5a3a28);
border-color: #FF981F;
box-shadow: 0 0 8px rgba(255,152,31,0.15);
color: #F5F0E0;
}
.p-bv-btn:active {
transform: translateY(1px);
}
.p-bv-btn.primary {
background: linear-gradient(180deg, #FF981F, #D4854A);
color: #18100E;
border-color: rgba(255,152,31,0.5);
font-weight: 700;
}
.p-bv-btn.primary:hover {
background: linear-gradient(180deg, #FFB040, #FF981F);
box-shadow: 0 0 12px rgba(255,152,31,0.25);
}
.p-bv-btn.disabled {
opacity: 0.35;
pointer-events: none;
}
.p-bv-btn.danger {
background: linear-gradient(180deg, #5a2020, #3E1818);
color: #FF3333;
border-color: rgba(255,60,60,0.3);
}
.p-bv-btn.danger:hover {
background: linear-gradient(180deg, #6a3a2a, #5a2a1a);
border-color: #FF3333;
box-shadow: 0 0 10px rgba(255,60,60,0.15);
color: #ff6666;
}
.p-bv-btn.glow {
box-shadow: 0 0 12px rgba(255,152,31,0.3), 0 0 24px rgba(255,152,31,0.1);
animation: p-pulseGlow 2s ease-in-out infinite;
}
@keyframes p-pulseGlow {
0%, 100% { box-shadow: 0 0 8px rgba(255,152,31,0.2); }
50% { box-shadow: 0 0 16px rgba(255,152,31,0.4), 0 0 30px rgba(255,152,31,0.15); }
}
/* ── Progress bars — mirrors .hub-xp-bar / .forge-bar ── */
.p-prog-bar {
height: 8px;
background: #100C08;
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(94,68,56,0.3);
}
.p-prog-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #8B4513, #D4854A, #FF981F);
transition: width 0.4s ease;
box-shadow: 0 0 6px rgba(255,152,31,0.2);
}
.p-prog-fill.green {
background: linear-gradient(90deg, #6E9830, #00FF00);
box-shadow: 0 0 4px rgba(138,184,68,0.3);
}
/* ═══════════════════════════════════════ */
/* BINGO CARD */
/* ═══════════════════════════════════════ */
.p-bingo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 10px 0;
}
.p-bingo-grid.grid-4col {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.p-bingo-tile.ext-tile {
border-color: rgba(217,119,6,0.35);
}
.p-bingo-grid.grid-4col .p-bingo-tile {
min-height: 80px;
font-size: 11px;
padding: 6px;
}
.p-bingo-grid.grid-5col {
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.p-bingo-grid.grid-5col .p-bingo-tile {
min-height: 70px;
font-size: 10px;
padding: 5px;
}
/* ── Bingo tile — mirrors .method-card ── */
.p-bingo-tile {
aspect-ratio: 1;
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
border: 2px solid #6E5647;
border-radius: 0;
padding: 8px 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, transform 0.15s, box-shadow 0.2s, border-color 0.15s;
position: relative;
overflow: hidden;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.35);
}
.p-bingo-tile:hover {
border-color: #8A6A54;
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.09),
0 4px 12px rgba(0,0,0,0.4);
}
.p-bingo-tile:active {
transform: scale(0.97);
}
/* Active tile — mirrors .method-card.active (gold border + left bar) */
.p-bingo-tile.active {
border-color: #FFD700;
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
.p-bingo-tile.reroll-target {
border-color: #e05050;
box-shadow: 0 0 10px rgba(224,80,80,0.25);
cursor: pointer;
animation: reroll-pulse 1.2s ease-in-out infinite;
}
.p-bingo-tile.reroll-target:active {
transform: scale(0.95);
}
@keyframes reroll-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(224,80,80,0.2); }
50% { box-shadow: 0 0 14px rgba(224,80,80,0.4); }
}
.p-bingo-tile.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #FF981F;
border-radius: 10px 0 0 10px;
}
/* Complete tile — green accent like a "done" method */
.p-bingo-tile.complete {
border-color: rgba(0,255,0,0.25);
background-image:
linear-gradient(180deg, rgba(110,152,48,0.14), rgba(110,152,48,0.05)),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
}
.p-bingo-tile.complete::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #00FF00;
border-radius: 10px 0 0 10px;
}
.p-bingo-tile.complete .p-bt-check { display: flex; }
/* In-line tile — orange glow */
.p-bingo-tile.in-line {
border-color: rgba(255,152,31,0.3);
box-shadow: 0 0 8px rgba(255,152,31,0.08);
}
.p-bingo-tile.complete.in-line {
border-color: rgba(0,255,0,0.35);
box-shadow: 0 0 10px rgba(0,255,0,0.1);
}
/* Empty slot */
.p-bingo-tile.empty-slot {
border-style: dashed;
border-color: rgba(255,152,31,0.15);
background: rgba(34,24,20,0.72);
cursor: default;
justify-content: center;
align-items: center;
gap: 6px;
}
.p-bingo-tile.empty-slot.locked {
border-color: rgba(120,90,60,0.35);
background: rgba(20,14,10,0.85);
opacity: 0.6;
}
.p-bingo-tile.empty-slot.locked .p-empty-name {
color: #7a6a5a;
font-style: italic;
}
/* Tile inner elements */
.p-bt-top { display: flex; align-items: center; justify-content: space-between; }
.p-bt-id {
font-size: 9px;
font-weight: 700;
color: #FF981F;
background: rgba(255,152,31,0.1);
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 0.3px;
}
.p-bingo-tile.complete .p-bt-id {
color: #00FF00;
background: rgba(0,255,0,0.1);
}
.p-bt-check {
display: none;
width: 16px;
height: 16px;
background: #00FF00;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 9px;
color: #18100E;
font-weight: 800;
box-shadow: 0 0 6px rgba(0,255,0,0.4);
}
.p-bt-obj {
font-size: 10px;
font-weight: 500;
color: #F5F0E0;
line-height: 1.3;
margin-top: 4px;
flex: 1;
display: flex;
align-items: center;
}
.p-bingo-tile.complete .p-bt-obj { color: #00FF00; opacity: 0.7; }
.p-bt-bottom { margin-top: auto; }
.p-bt-prog-text {
font-size: 8px;
font-weight: 600;
color: #9B8B6B;
text-align: right;
margin-bottom: 3px;
}
.p-bingo-tile.complete .p-bt-prog-text { color: #00FF00; }
.p-bt-prog { height: 4px; border: none; }
.p-bt-prog .p-prog-fill { height: 4px; }
.p-empty-name {
font-size: 10px;
color: #9B8B6B;
font-weight: 500;
opacity: 0.5;
}
.p-pick-btn {
font-family: 'Lexend', sans-serif;
font-size: 9px;
font-weight: 600;
color: #FF981F;
background: rgba(255,152,31,0.08);
border: 1px solid rgba(255,152,31,0.2);
border-radius: 6px;
padding: 4px 10px;
cursor: pointer;
transition: all 0.15s;
}
.p-pick-btn:hover {
background: rgba(255,152,31,0.15);
border-color: #FF981F;
box-shadow: 0 0 8px rgba(255,152,31,0.15);
}
.p-reroll-btn {
position: absolute;
top: 2px;
right: 2px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,152,31,0.4);
border-radius: 4px;
font-size: 10px;
line-height: 1;
padding: 2px 3px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.15s;
z-index: 2;
}
.p-reroll-btn:hover {
opacity: 1;
border-color: #FF981F;
background: rgba(255,152,31,0.2);
}
/* ── Bingo line indicators ── */
.p-bingo-lines {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-top: 8px;
margin-bottom: 4px;
}
.p-bingo-line {
font-size: 9px;
font-weight: 600;
padding: 3px 8px;
border-radius: 6px;
border: 1px solid transparent;
}
.p-bingo-line.done {
background: rgba(0,255,0,0.08);
color: #00FF00;
border-color: rgba(0,255,0,0.15);
}
.p-bingo-line.pending {
background: #302220;
color: #9B8B6B;
border-color: rgba(94,68,56,0.25);
}
/* ── Bingo footer ── */
.p-bingo-footer {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.p-bingo-footer .p-bv-btn {
flex: 1;
text-align: center;
font-size: 12px;
padding: 10px;
}
.p-reroll-banner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: rgba(224,80,80,0.1);
border: 1px solid rgba(224,80,80,0.3);
border-radius: 8px;
font-size: 13px;
}
/* ── Frozen warning ── */
.p-frozen-warn {
background: rgba(255,152,31,0.06);
border: 1px solid rgba(255,152,31,0.15);
border-radius: 8px;
padding: 8px 12px;
color: #FF981F;
font-size: 10px;
text-align: center;
margin: 8px 12px 0;
}
/* ═══════════════════════════════════════ */
/* TILE DETAIL */
/* ═══════════════════════════════════════ */
.p-detail-section { padding: 12px; }
.p-detail-section + .p-detail-section { border-top: 1px solid #100C08; }
.p-detail-label {
font-size: 9px;
font-weight: 700;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.p-detail-obj {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 15px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
margin-bottom: 10px;
}
.p-boss-checklist {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
max-height: 280px;
overflow-y: auto;
}
.p-boss-check-row {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 5px;
border-radius: 3px;
background: rgba(0,0,0,0.2);
opacity: 0.45;
}
.p-boss-check-row.killed { opacity: 1; background: rgba(0,80,0,0.2); }
.p-boss-check-icon { font-size: 11px; width: 14px; text-align: center; }
.p-boss-check-row.killed .p-boss-check-icon { color: #0f0; }
.p-boss-check-row:not(.killed) .p-boss-check-icon { color: #f44; }
.p-boss-check-img { width: 18px; height: 18px; object-fit: contain; }
.p-boss-check-name { flex: 1; font-size: 11px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-boss-check-kc { font-size: 10px; color: #9B8B6B; white-space: nowrap; }
.p-monster-group-label { font-size: 11px; color: #FF981F; font-weight: bold; margin: 6px 0 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.p-monster-group-label:first-child { margin-top: 0; }
.p-detail-prog-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.p-detail-prog-row .p-prog-bar { flex: 1; }
.p-detail-prog-num {
font-size: 11px;
font-weight: 600;
color: #FFD700;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Reward box — like .supply-output */
.p-reward-box {
background: rgba(255,152,31,0.06);
border: 1px solid rgba(255,152,31,0.15);
border-radius: 8px;
padding: 10px 12px;
}
.p-reward-name {
font-size: 13px;
font-weight: 700;
color: #FF981F;
margin-bottom: 4px;
}
.p-reward-desc {
font-size: 11px;
color: #9B8B6B;
line-height: 1.5;
}
/* ── Upgrade tiers — like method cards ── */
.p-upgrade-tiers { display: flex; flex-direction: column; gap: 6px; }
.p-upgrade-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #4A3428;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
border: 1px solid #5E4438;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
}
.p-upgrade-row:hover {
background-color: #5A4438;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.p-upgrade-row.locked { opacity: 0.35; pointer-events: none; }
.p-upgrade-row.owned {
border-color: rgba(0,255,0,0.2);
position: relative;
}
.p-upgrade-row.owned::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #00FF00;
border-radius: 10px 0 0 10px;
}
.p-upgrade-tier-badge {
font-size: 9px;
font-weight: 700;
color: #18100E;
background: #FF981F;
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
}
.p-upgrade-row.owned .p-upgrade-tier-badge { background: #00FF00; }
.p-upgrade-info { flex: 1; min-width: 0; }
.p-upgrade-text { font-size: 11px; color: #F5F0E0; line-height: 1.4; }
.p-upgrade-cost {
font-size: 10px;
font-weight: 600;
color: #9B8B6B;
flex-shrink: 0;
}
.p-upgrade-row.owned .p-upgrade-cost { color: #00FF00; opacity: 0.6; }
/* ── Detail footer ── */
.p-detail-footer {
padding: 10px 12px;
border-top: 1px solid #100C08;
background: linear-gradient(180deg, rgba(24,16,14,0.6) 0%, #221814 100%);
}
.p-detail-footer .p-bv-btn { width: 100%; text-align: center; }
/* ═══════════════════════════════════════ */
/* TILE POOL PICKER */
/* ═══════════════════════════════════════ */
.p-pool-scroll {
max-height: 340px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #3C2A22 transparent;
}
.p-pool-scroll::-webkit-scrollbar { width: 6px; }
.p-pool-scroll::-webkit-scrollbar-track { background: transparent; }
.p-pool-scroll::-webkit-scrollbar-thumb { background: #3C2A22; border-radius: 3px; }
.p-pool-cat {
font-size: 9px;
font-weight: 700;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 10px 12px 4px;
display: flex;
align-items: center;
gap: 6px;
}
.p-pool-cat-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
/* Pool row — like .method-card */
.p-pool-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin: 0 8px 6px;
background: #4A3428;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
border: 1px solid #5E4438;
border-radius: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
}
.p-pool-row:hover {
background-color: #5A4438;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.p-pool-row:active { background-color: #5A4438; }
.p-pool-row-id {
font-size: 9px;
font-weight: 700;
color: #18100E;
background: #FF981F;
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
}
.p-pool-row-info { flex: 1; min-width: 0; }
.p-pool-row-obj {
font-size: 12px;
font-weight: 600;
color: #F5F0E0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.p-pool-row-reward {
font-size: 10px;
color: #9B8B6B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ═══════════════════════════════════════ */
/* BOOSTS TAB */
/* ═══════════════════════════════════════ */
.p-boosts-section { padding: 10px 12px; }
.p-boosts-desc {
font-size: 10px;
color: #9B8B6B;
margin-bottom: 10px;
line-height: 1.5;
}
/* Boost row — mirrors .method-card */
.p-boost-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #4A3428;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
border: 1px solid #5E4438;
border-radius: 10px;
margin-bottom: 6px;
transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
}
.p-boost-row:hover {
background-color: #5A4438;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.p-boost-icon {
font-size: 16px;
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.p-boost-info { flex: 1; min-width: 0; }
.p-boost-label {
font-size: 12px;
font-weight: 600;
color: #F5F0E0;
}
.p-boost-level {
font-size: 10px;
color: #00FF00;
margin-top: 1px;
}
.p-boost-bar {
height: 4px;
background: #100C08;
border-radius: 2px;
margin-top: 4px;
overflow: hidden;
border: 1px solid rgba(94,68,56,0.2);
}
.p-boost-bar-fill {
height: 100%;
background: linear-gradient(90deg, #6E9830, #00FF00);
border-radius: 2px;
transition: width 0.3s;
box-shadow: 0 0 4px rgba(0,255,0,0.2);
}
.p-boost-buy { flex-shrink: 0; }
.p-boosts-cat {
font-size: 9px;
font-weight: 700;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 10px 0 4px;
margin-top: 4px;
}
/* ═══════════════════════════════════════ */
/* COMPLETED TILES TAB */
/* ═══════════════════════════════════════ */
.p-completed-section {
max-height: 400px;
overflow-y: auto;
padding: 10px 12px;
scrollbar-width: thin;
scrollbar-color: #3C2A22 transparent;
}
.p-completed-section::-webkit-scrollbar { width: 6px; }
.p-completed-section::-webkit-scrollbar-track { background: transparent; }
.p-completed-section::-webkit-scrollbar-thumb { background: #3C2A22; border-radius: 3px; }
.p-completed-empty {
text-align: center;
color: #9B8B6B;
padding: 40px 20px;
font-size: 13px;
opacity: 0.5;
}
/* Completed tile — like .method-card with green left bar */
.p-completed-tile {
background: #4A3428;
background-image:
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
border: 1px solid #5E4438;
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 6px;
position: relative;
overflow: hidden;
}
.p-completed-tile::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #00FF00;
border-radius: 10px 0 0 10px;
}
.p-completed-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.p-completed-name {
font-size: 13px;
font-weight: 600;
color: #F5F0E0;
}
.p-completed-upgrade-badge {
font-size: 9px;
font-weight: 700;
color: #18100E;
background: #FF981F;
padding: 2px 6px;
border-radius: 4px;
}
.p-completed-upgrade-badge.max {
background: #00FF00;
}
.p-completed-reward {
font-size: 10px;
color: #9B8B6B;
line-height: 1.4;
margin-bottom: 6px;
}
.p-completed-upgrade-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #100C08;
}
.p-completed-upgrade-info {
font-size: 10px;
color: #9B8B6B;
}
.p-completed-upgrade-info b { color: #FFD700; }
/* ═══════════════════════════════════════ */
/* PRESTIGE CONFIRMATION SCREEN */
/* ═══════════════════════════════════════ */
.p-prestige-view { padding: 0; }
/* Hero section — big tier display */
.p-prest-hero {
text-align: center;
padding: 28px 16px 20px;
background: linear-gradient(180deg, rgba(255,107,43,0.06) 0%, transparent 100%);
position: relative;
}
.p-prest-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,152,31,0.3), transparent);
}
.p-prest-label {
font-size: 9px;
font-weight: 700;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 4px;
}
.p-prest-tier {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 28px;
color: #FF981F;
text-shadow: 0 2px 12px rgba(255,152,31,0.3), 1px 1px 0 #000;
line-height: 1.1;
}
.p-prest-tier-num { font-size: 44px; color: #FFD700; }
/* Sections — lose/keep/earn */
.p-prest-section { padding: 14px 16px; }
.p-prest-section + .p-prest-section { border-top: 1px solid #100C08; }
.p-prest-section-title {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.p-prest-section-title.lose { color: #FF3333; }
.p-prest-section-title.keep { color: #00FF00; }
.p-prest-section-title.earn { color: #FF981F; }
.p-prest-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.p-prest-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: #302220;
border: 1px solid rgba(94,68,56,0.25);
border-radius: 8px;
font-size: 11px;
font-weight: 500;
}
.p-prest-item.lose { color: #ff8080; }
.p-prest-item.lose .p-pi-icon { color: #FF3333; }
.p-prest-item.keep { color: #80ff80; }
.p-prest-item.keep .p-pi-icon { color: #00FF00; }
.p-pi-icon { font-size: 12px; flex-shrink: 0; }
/* Currency earned display */
.p-prest-currency {
text-align: center;
padding: 16px;
background: rgba(255,152,31,0.06);
border: 1px solid rgba(255,152,31,0.15);
border-radius: 10px;
}
.p-prest-currency-num {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 28px;
color: #FFD700;
text-shadow: 0 2px 8px rgba(255,215,0,0.2);
}
.p-prest-currency-label {
font-size: 10px;
color: #9B8B6B;
margin-top: 2px;
}
.p-prest-currency-calc {
font-size: 9px;
color: #9B8B6B;
opacity: 0.5;
margin-top: 4px;
}
/* Confirm footer */
.p-prest-confirm {
padding: 14px 16px;
border-top: 1px solid #100C08;
background: linear-gradient(180deg, rgba(24,16,14,0.6) 0%, #221814 100%);
text-align: center;
}
.p-prest-warn {
font-size: 9px;
color: #FF3333;
margin-bottom: 8px;
opacity: 0.6;
}
.p-prest-confirm .p-bv-btn {
width: 100%;
text-align: center;
font-size: 13px;
padding: 12px;
}
/* ═══════════════════════════════════════ */
/* TIER NAVIGATOR — mirrors .tier-strip */
/* ═══════════════════════════════════════ */
.p-tier-bar {
display: flex;
align-items: center;
gap: 0;
background: #221814;
border: none;
border-radius: 0;
box-shadow: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.p-tier-bar::-webkit-scrollbar { display: none; }
.p-tier-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex: 1;
padding: 8px 6px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 8px;
-webkit-tap-highlight-color: transparent;
transition: all 0.2s;
position: relative;
min-width: 48px;
}
.p-tier-node:hover {
background: rgba(255,107,43,0.06);
border-color: rgba(94,68,56,0.3);
}
.p-tier-node:last-child { border-right: none; }
.p-tier-node.locked {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
.p-tier-node.current {
background: rgba(255,107,43,0.1);
border-color: #FF981F;
box-shadow: 0 0 12px rgba(255,107,43,0.1);
}
.p-tier-node.current::after {
display: none;
}
.p-tier-num {
font-size: 14px;
font-weight: 700;
color: #9B8B6B;
line-height: 1;
}
.p-tier-node.unlocked .p-tier-num { color: #9B8B6B; }
.p-tier-node.current .p-tier-num { color: #FF981F; }
.p-tier-label {
font-size: 8px;
font-weight: 600;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 1px;
}
.p-tier-node.current .p-tier-label { color: #FF981F; }
/* Tier stats */
.p-tier-stats {
font-size: 11px;
color: #9B8B6B;
line-height: 1.6;
padding: 8px 12px;
}
.p-tier-stat-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #100C08;
}
.p-tier-stat-row:last-child { border-bottom: none; }
.p-tier-stat-val {
color: #FFD700;
font-weight: 600;
}
.p-tier-stat-val.active {
color: #00FF00;
}
/* ═══════════════════════════════════════ */
/* PRESTIGE COMPLETE CELEBRATION */
/* ═══════════════════════════════════════ */
.p-complete-modal {
text-align: center;
padding: 24px 16px;
}
.p-complete-modal h2 {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 24px;
color: #FFD700;
text-shadow: 0 2px 12px rgba(255,215,0,0.3), 1px 1px 0 #000;
margin-bottom: 16px;
}
.p-complete-stat {
display: flex;
justify-content: space-between;
padding: 8px 12px;
background: #302220;
border: 1px solid rgba(94,68,56,0.25);
border-radius: 8px;
margin-bottom: 6px;
font-size: 12px;
color: #9B8B6B;
}
.p-complete-stat span { color: #FFD700; font-weight: 700; }
/* ── Reset board button ── */
.p-board-reset-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
margin: 8px 12px;
background: #302220;
border: 1px solid rgba(94,68,56,0.25);
border-radius: 8px;
}
.p-board-reset-info {
font-size: 10px;
color: #9B8B6B;
}
.p-board-reset-info b { color: #FFD700; }
/* ═══════════════════════════════════════ */
/* PRESTIGE — TABLET / WIDE SCREENS */
/* ═══════════════════════════════════════ */
@media (min-width: 500px) {
.p-body {
max-width: 480px;
margin: 0 auto;
}
/* Bingo grid — drop aspect-ratio on wide */
.p-bingo-grid { gap: 8px; }
.p-bingo-tile {
aspect-ratio: auto;
min-height: 110px;
padding: 10px 10px;
}
.p-bt-id { font-size: 10px; }
.p-bt-check { width: 18px; height: 18px; font-size: 10px; }
.p-bt-obj { font-size: 12px; margin-top: 6px; }
.p-bt-prog-text { font-size: 9px; }
.p-bt-prog { height: 5px; }
.p-bt-prog .p-prog-fill { height: 5px; }
.p-empty-name { font-size: 11px; }
.p-pick-btn { font-size: 10px; padding: 4px 12px; }
.p-bingo-lines { gap: 5px; margin-top: 10px; }
.p-bingo-line { font-size: 10px; padding: 4px 10px; }
.p-bingo-footer { gap: 10px; margin-top: 8px; }
.p-bingo-footer .p-bv-btn { font-size: 13px; padding: 12px; }
/* Detail */
.p-detail-label { font-size: 10px; }
.p-detail-obj { font-size: 16px; }
.p-detail-section { padding: 14px; }
.p-detail-prog-num { font-size: 12px; }
.p-reward-box { padding: 12px 14px; }
.p-reward-name { font-size: 14px; }
.p-reward-desc { font-size: 12px; }
/* Upgrades */
.p-upgrade-row { padding: 12px 14px; }
.p-upgrade-tier-badge { font-size: 10px; padding: 3px 8px; }
.p-upgrade-text { font-size: 12px; }
.p-upgrade-cost { font-size: 11px; }
/* Pool picker */
.p-pool-scroll { max-height: 420px; }
.p-pool-cat { font-size: 10px; padding: 10px 12px 5px; }
.p-pool-row { padding: 12px 14px; }
.p-pool-row-id { font-size: 10px; padding: 3px 8px; }
.p-pool-row-obj { font-size: 13px; }
.p-pool-row-reward { font-size: 10px; }
/* Boosts */
.p-boosts-desc { font-size: 11px; }
.p-boost-row { padding: 12px 14px; }
.p-boost-icon { font-size: 18px; }
.p-boost-label { font-size: 13px; }
.p-boost-level { font-size: 11px; }
.p-boost-bar { height: 5px; }
/* Completed */
.p-completed-section { max-height: 480px; padding: 12px; }
.p-completed-empty { font-size: 13px; }
.p-completed-tile { padding: 12px 14px; }
.p-completed-name { font-size: 14px; }
.p-completed-upgrade-badge { font-size: 10px; padding: 3px 8px; }
.p-completed-reward { font-size: 11px; }
.p-completed-upgrade-info { font-size: 11px; }
/* Prestige confirmation */
.p-prest-hero { padding: 32px 20px 24px; }
.p-prest-tier { font-size: 32px; }
.p-prest-tier-num { font-size: 48px; }
.p-prest-section { padding: 16px; }
.p-prest-section-title { font-size: 10px; }
.p-prest-item { padding: 8px 12px; font-size: 12px; }
.p-prest-currency { padding: 20px; }
.p-prest-currency-num { font-size: 32px; }
.p-prest-currency-label { font-size: 11px; }
.p-prest-confirm .p-bv-btn { font-size: 14px; padding: 14px; }
/* Tier nav */
.p-tier-node { padding: 10px 8px; }
.p-tier-stats { padding: 10px 14px; }
.p-tier-stat-row { font-size: 12px; padding: 8px 0; }
/* Board reset */
.p-board-reset-row { padding: 10px 14px; margin: 0 12px 10px; }
.p-board-reset-info { font-size: 11px; }
/* General */
.p-bv-btn { font-size: 12px; padding: 8px 16px; }
.p-detail-footer { padding: 12px 14px; }
.p-frozen-warn { font-size: 11px; margin: 10px 12px 0; }
}
/* ═══════════════════════════════════════ */
/* PRESTIGE — DASHBOARD (PC / iPad) */
/* ═══════════════════════════════════════ */
@media (min-width: 600px) {
.p-body { max-width: none; }
.p-tabs { display: none; }
}
.p-dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
height: 100%;
min-height: 0;
}
.p-dash-left,
.p-dash-right {
overflow-y: auto;
padding: 12px;
scrollbar-width: thin;
scrollbar-color: #3C2A22 transparent;
min-height: 0;
}
.p-dash-left::-webkit-scrollbar,
.p-dash-right::-webkit-scrollbar { width: 6px; }
.p-dash-left::-webkit-scrollbar-track,
.p-dash-right::-webkit-scrollbar-track { background: transparent; }
.p-dash-left::-webkit-scrollbar-thumb,
.p-dash-right::-webkit-scrollbar-thumb { background: #3C2A22; border-radius: 3px; }
.p-dash-right {
border-left: 1px solid #100C08;
}
.p-dash-footer {
grid-column: 1 / -1;
padding: 10px 14px;
border-top: 1px solid #100C08;
background: linear-gradient(180deg, rgba(24,16,14,0.6) 0%, #221814 100%);
}
/* Dashboard pills — mirrors .hub-tab inline style */
.p-dash-pills {
display: flex;
gap: 0;
margin-bottom: 10px;
background: #221814;
border-radius: 8px;
border: 1px solid rgba(94,68,56,0.25);
overflow: hidden;
}
.p-dash-pill {
font-family: 'Lexend', sans-serif;
font-size: 11px;
font-weight: 600;
color: #9B8B6B;
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 6px 14px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all 0.15s;
flex: 1;
text-align: center;
}
.p-dash-pill:hover {
color: #F5F0E0;
background: rgba(255,255,255,0.02);
}
.p-dash-pill.active {
color: #FF981F;
border-bottom-color: #FF981F;
}
.p-dash-sep {
height: 1px;
background: #100C08;
margin: 10px -12px;
}
/* Dashboard labels */
.p-dash-label {
font-family: 'Lexend', sans-serif;
font-size: 10px;
font-weight: 700;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0 2px 8px;
margin-bottom: 6px;
border-bottom: 1px solid rgba(94,68,56,0.3);
}
.p-dash-label-sub {
font-weight: 500;
font-size: 10px;
color: #FFD700;
margin-left: 6px;
text-transform: none;
letter-spacing: 0;
}
.p-dash-label-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 2px 8px;
background: none;
border: none;
border-bottom: 1px solid rgba(94,68,56,0.3);
box-shadow: none;
}
.p-dash-label-bar .p-stone-title {
font-size: 10px;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =============================================
SKILL HUB OVERLAY
============================================= */
/* Viewport overrides when hub is open — remove padding, contain overflow */
.viewport.hub-active {
padding: 0;
overflow: hidden;
}
.skill-hub {
width: 100%;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: url('../img/viewport-background-texture.png') center/cover no-repeat #18100E;
background-image:
url('../img/viewport-background-texture.png'),
radial-gradient(ellipse 800px 400px at 50% 0%, rgba(255,107,43,0.04) 0%, transparent 100%),
radial-gradient(ellipse 600px 300px at 50% 100%, rgba(255,107,43,0.02) 0%, transparent 100%);
background-position: center, center, center;
background-size: cover, auto, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
overflow: hidden;
position: relative;
}
.skill-hub::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, #FF981F, transparent);
opacity: 0.4;
z-index: 1;
}
/* HEADER */
.hub-header {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: linear-gradient(180deg, #2E1E18 0%, #221814 100%);
border-bottom: 1px solid #100C08;
flex-shrink: 0;
position: relative;
}
.hub-swap {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,152,31,0.08);
border: 1px solid rgba(255,152,31,0.2);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.hub-swap:hover {
background: rgba(255,152,31,0.15);
border-color: #FF981F;
box-shadow: 0 0 8px rgba(255,152,31,0.15);
}
.hub-swap img { width: 24px; height: 24px; }
/* Floating chest icon in hub header */
.hub-chest {
position: relative;
width: 78px;
height: 78px;
margin-left: auto;
margin-right: 6px;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s, filter 0.15s;
overflow: visible;
}
.hub-chest:hover {
transform: scale(1.08);
filter: brightness(1.2) drop-shadow(0 0 6px rgba(168,85,247,0.4));
}
.hub-chest:active { transform: scale(0.95); }
.hub-chest img { width: 78px; height: 78px; display: block; object-fit: contain; }
.hub-chest-count {
position: absolute;
top: -4px;
right: -6px;
background: #a855f7;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 1px 5px;
border-radius: 8px;
line-height: 16px;
min-width: 16px;
text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* ── Skilling Chest Panel ── */
#skilling-chest-panel .modal-body { position: relative; overflow: hidden; }
/* Particle backdrop */
.sc-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sc-particle {
position: absolute;
bottom: -4px;
width: 3px; height: 3px;
background: rgba(168,85,247,0.5);
border-radius: 50%;
animation: scParticleFloat 3s ease-in infinite;
}
@keyframes scParticleFloat {
0% { transform: translateY(0) scale(1); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.3; }
100% { transform: translateY(-180px) scale(0); opacity: 0; }
}
/* Chest stage */
.sc-chest-stage {
position: relative;
text-align: center;
padding: 18px 0 6px;
z-index: 1;
}
.sc-chest-hero {
width: 96px; height: 96px;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(168,85,247,0.4));
animation: scChestBob 2.5s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes scChestBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.sc-chest-glow {
position: absolute;
left: 50%; top: 50%;
width: 120px; height: 120px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%);
z-index: 1;
}
/* Shake on open */
.sc-shake {
animation: scChestShake 0.4s ease-in-out !important;
}
@keyframes scChestShake {
0%, 100% { transform: translateX(0) rotate(0); }
10% { transform: translateX(-6px) rotate(-3deg); }
20% { transform: translateX(6px) rotate(3deg); }
30% { transform: translateX(-8px) rotate(-4deg); }
40% { transform: translateX(8px) rotate(4deg); }
50% { transform: translateX(-6px) rotate(-2deg); }
60% { transform: translateX(6px) rotate(2deg); }
70% { transform: translateX(-3px) rotate(-1deg); }
80% { transform: translateX(3px) rotate(1deg); }
}
/* Burst glow on open click */
.sc-burst {
animation: scGlowBurst 0.5s ease-out forwards !important;
background: radial-gradient(circle, rgba(250,204,21,0.5) 0%, rgba(168,85,247,0.3) 40%, transparent 70%) !important;
}
@keyframes scGlowBurst {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
/* Opened chest pop-in */
.sc-pop-in {
animation: scPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes scPopIn {
0% { transform: scale(0.3); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sc-chest-stage.opened .sc-chest-hero {
filter: drop-shadow(0 4px 16px rgba(250,204,21,0.5));
}
.sc-reveal-glow {
background: radial-gradient(circle, rgba(250,204,21,0.2) 0%, rgba(168,85,247,0.08) 50%, transparent 70%) !important;
animation: scRevealPulse 1.5s ease-in-out infinite !important;
}
.sc-gold-glow {
background: radial-gradient(circle, rgba(250,204,21,0.35) 0%, rgba(255,152,31,0.15) 40%, transparent 70%) !important;
}
@keyframes scRevealPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
/* Loot burst flash */
.sc-loot-burst {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none; z-index: 0;
animation: scLootFlash 0.3s ease-out forwards;
}
@keyframes scLootFlash {
0% { background: rgba(168,85,247,0.2); }
100% { background: transparent; }
}
.sc-unique-burst { animation-name: scUniqueFlash !important; }
@keyframes scUniqueFlash {
0% { background: rgba(250,204,21,0.3); }
100% { background: transparent; }
}
/* Loot grid */
.sc-loot-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 8px 12px 4px;
position: relative;
z-index: 1;
}
/* Loot item — staggered pop-in */
.sc-loot-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
width: 72px;
padding: 8px 4px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
opacity: 0;
transform: translateY(12px) scale(0.7);
animation: scItemReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes scItemReveal {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.sc-loot-icon-wrap {
position: relative;
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.sc-loot-icon-wrap img { width: 32px; height: 32px; }
.sc-loot-label {
font-size: 10px;
color: #ccc;
text-align: center;
line-height: 1.2;
max-width: 68px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-loot-qty { color: #facc15; font-weight: 600; }
.sc-qty-overlay {
position: absolute;
top: 0;
left: 0;
font-size: 10px;
font-weight: 700;
color: #ffff00;
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;
z-index: 2;
line-height: 1;
pointer-events: none;
}
.sc-qty-overlay.qty-white,
.sc-qty-overlay.qty-white-high { color: #ffffff; }
.sc-qty-overlay.qty-green { color: #00ff80; }
/* Unique item treatment */
.sc-unique-item {
border-color: rgba(250,204,21,0.4);
background: rgba(250,204,21,0.06);
box-shadow: 0 0 12px rgba(250,204,21,0.15);
animation-duration: 0.5s;
}
.sc-unique-item .sc-loot-label { color: #facc15; font-weight: 600; }
.sc-unique-ring {
position: absolute;
inset: -4px;
border: 2px solid rgba(250,204,21,0.4);
border-radius: 50%;
animation: scUniqueRing 1.5s ease-in-out infinite;
}
@keyframes scUniqueRing {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 1; }
}
/* Loot value */
.sc-loot-value {
text-align: center;
font-size: 12px;
color: #9B8B6B;
padding: 6px 0 8px;
position: relative;
z-index: 1;
}
/* Key info */
.sc-key-info {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 0 8px;
position: relative;
z-index: 1;
}
.sc-key-icon { width: 20px; height: 20px; }
.sc-key-count { font-size: 14px; font-weight: 600; color: #d8b4fe; }
.sc-key-count.empty { color: #666; }
/* Buttons */
.sc-open-btn {
display: block;
width: calc(100% - 32px);
margin: 0 auto 12px;
padding: 12px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #7c3aed, #a855f7);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
position: relative;
z-index: 1;
letter-spacing: 0.3px;
}
.sc-open-btn:hover {
background: linear-gradient(135deg, #8b5cf6, #c084fc);
box-shadow: 0 0 16px rgba(168,85,247,0.4);
transform: translateY(-1px);
}
.sc-open-btn:active { transform: translateY(1px); }
.sc-open-btn.disabled {
background: #333;
color: #666;
cursor: default;
box-shadow: none;
transform: none;
}
.sc-open-btn.close {
background: rgba(255,255,255,0.06);
color: #aaa;
font-weight: 500;
}
.sc-open-btn.close:hover {
background: rgba(255,255,255,0.1);
box-shadow: none;
transform: none;
}
.sc-btn-row {
display: flex;
gap: 8px;
padding: 0 16px 12px;
position: relative;
z-index: 1;
}
.sc-btn-row .sc-open-btn { flex: 1; margin: 0; }
/* Open row (ready state) */
.sc-open-row {
display: flex;
gap: 8px;
padding: 0 16px 12px;
position: relative;
z-index: 1;
}
.sc-open-row .sc-open-btn { flex: 1; margin: 0; }
.sc-open-btn.sc-open-all {
background: linear-gradient(135deg, #b45309, #d97706);
}
.sc-open-btn.sc-open-all:hover {
background: linear-gradient(135deg, #d97706, #f59e0b);
box-shadow: 0 0 16px rgba(217,119,6,0.4);
}
/* Bulk open: smaller chest, scrollable grid */
.sc-chest-stage.sc-bulk { margin-bottom: 0; }
.sc-chest-stage.sc-bulk .sc-chest-hero { width: 48px; height: 48px; }
.sc-bulk-header {
text-align: center;
font-size: 13px;
font-weight: 600;
color: #d97706;
padding: 2px 0 6px;
position: relative;
z-index: 1;
}
.sc-loot-grid.sc-bulk-grid {
max-height: 220px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.15) transparent;
}
/* Skilling upgrades modal */
.skilling-upgrades-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
}
.skilling-upgrade-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
}
.skilling-upgrade-row.active {
border-color: rgba(74,222,128,0.3);
background: rgba(74,222,128,0.05);
}
.skilling-upgrade-row.available {
border-color: rgba(168,85,247,0.4);
background: rgba(168,85,247,0.08);
}
.skilling-upgrade-row.available:hover {
background: rgba(168,85,247,0.15);
border-color: #a855f7;
}
.su-icon { width: 32px; height: 32px; flex-shrink: 0; }
.su-icon img { width: 32px; height: 32px; }
.su-info { flex: 1; min-width: 0; }
.su-name { font-weight: 600; color: #e0d0b0; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.su-skill-icon { width: 14px; height: 14px; vertical-align: middle; }
.su-desc { font-size: 11px; color: #aaa; margin-top: 2px; }
.su-status { font-size: 11px; margin-top: 3px; display: inline-block; }
.su-status.active { color: #4ade80; }
.su-status.available { color: #a855f7; font-weight: 600; }
.su-status.locked { color: #666; }
.hub-skill-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #4A3428;
border: 1px solid #5E4438;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hub-skill-icon img { width: 28px; height: 28px; }
.hub-title-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hub-skill-name {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 18px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
letter-spacing: 0.5px;
}
.hub-level-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.hub-level {
color: #FFD700;
font-weight: 600;
}
.hub-xp-bar-wrap {
flex: 1;
max-width: 200px;
height: 8px;
background: rgba(0,0,0,0.4);
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(94,68,56,0.3);
}
.hub-xp-bar-fill {
height: 100%;
background: linear-gradient(90deg, #6E9830, #00FF00);
border-radius: 3px;
transition: width 0.3s ease;
box-shadow: 0 0 4px rgba(138,184,68,0.3);
}
.hub-stats {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #B8A88A;
margin-top: 1px;
}
.hub-stat-sep {
color: #5E4438;
margin: 0 2px;
}
.hub-xp-text {
color: #9B8B6B;
font-size: 11px;
white-space: nowrap;
}
/* TIER STRIP */
.tier-strip {
display: flex;
align-items: center;
gap: 0;
padding: 8px 12px;
background: #221814;
border-bottom: 1px solid #100C08;
flex-shrink: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tier-strip::-webkit-scrollbar { display: none; }
.tier-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 6px 10px;
cursor: pointer;
border-radius: 8px;
border: 1px solid transparent;
transition: all 0.2s;
flex-shrink: 0;
position: relative;
min-width: 64px;
}
.tier-node:hover {
background: rgba(255,107,43,0.06);
border-color: rgba(94,68,56,0.3);
}
.tier-node.active {
background: rgba(255,107,43,0.1);
border-color: #FF981F;
box-shadow: 0 0 12px rgba(255,107,43,0.1);
}
.tier-node.locked {
opacity: 0.35;
cursor: default;
}
.tier-node.locked:hover {
background: transparent;
border-color: transparent;
}
.tier-icon-wrap {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.tier-icon-wrap img { width: 28px; height: 28px; }
.tier-name {
font-size: 10px;
font-weight: 600;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tier-node.active .tier-name { color: #FF981F; }
.tier-lvl {
font-size: 9px;
color: #9B8B6B;
opacity: 0.6;
}
.tier-connector {
width: 20px;
height: 2px;
background: #3C2A22;
flex-shrink: 0;
position: relative;
}
.tier-connector.unlocked {
background: linear-gradient(90deg, rgba(255,152,31,0.3), rgba(255,152,31,0.1));
}
.tier-node.special-tier .tier-name { color: #FFD700; }
.tier-node.special-tier.active {
background: rgba(255,215,0,0.08);
border-color: #FFD700;
box-shadow: 0 0 12px rgba(255,215,0,0.1);
}
.tier-node.special-tier.active .tier-name { color: #FFD700; }
/* SUPPLY CHAIN */
.supply-chain {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
min-height: 50px;
background: linear-gradient(180deg, #100C08 0%, rgba(24,16,14,0.6) 100%);
border-bottom: 1px solid #100C08;
flex-shrink: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.supply-chain::-webkit-scrollbar { display: none; }
.supply-node {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: #302220;
border: 1px solid rgba(94,68,56,0.3);
border-radius: 8px;
flex-shrink: 0;
}
.supply-node img, .supply-output img { width: 22px; height: 22px; object-fit: contain; }
.supply-node-info {
display: flex;
flex-direction: column;
gap: 1px;
}
.supply-node-name {
font-size: 11px;
color: #F5F0E0;
font-weight: 500;
}
.supply-node-qty {
font-size: 10px;
font-weight: 600;
}
.supply-node-qty.has { color: #00FF00; }
.supply-node-qty.empty { color: #FF3333; opacity: 0.6; }
.supply-arrow {
color: #9B8B6B;
font-size: 14px;
flex-shrink: 0;
opacity: 0.4;
}
.supply-output {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(255,152,31,0.06);
border: 1px solid rgba(255,152,31,0.15);
border-radius: 8px;
flex-shrink: 0;
}
.supply-output img { width: 22px; height: 22px; object-fit: contain; }
.supply-output-name {
font-size: 11px;
color: #FF981F;
font-weight: 600;
}
.supply-output-qty {
font-size: 10px;
color: #9B8B6B;
}
.supply-yields {
color: #9B8B6B;
font-size: 10px;
margin-left: 4px;
opacity: 0.6;
white-space: nowrap;
}
/* FORGE PROGRESS */
.forge-progress {
flex-shrink: 0;
background: linear-gradient(180deg, #1E1410 0%, #221814 50%, #1E1410 100%);
border-bottom: 1px solid #100C08;
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
}
.forge-progress::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 300px 80px at 50% 100%, rgba(255,107,43,0.06) 0%, transparent 100%),
radial-gradient(ellipse 200px 60px at 50% 0%, rgba(255,152,31,0.04) 0%, transparent 100%);
pointer-events: none;
}
.forge-top {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.forge-icon-wrap {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #4A3428;
border: 1px solid #5E4438;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.forge-icon-wrap img {
max-width: 36px;
max-height: 36px;
object-fit: contain;
position: relative;
z-index: 1;
}
.forge-progress.running .forge-icon-wrap::after {
content: '';
position: absolute;
inset: -4px;
background: radial-gradient(circle, rgba(255,107,43,0.25) 0%, transparent 70%);
animation: forge-icon-pulse 2s ease-in-out infinite;
z-index: 0;
}
@keyframes forge-icon-pulse {
0%, 100% { opacity: 0.3; transform: scale(0.9); }
50% { opacity: 0.7; transform: scale(1.1); }
}
.forge-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.forge-item-name {
font-family: 'RS Bold', 'RS Plain', serif;
font-size: 15px;
color: #FF981F;
text-shadow: 1px 1px 0 #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.forge-item-detail {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #9B8B6B;
flex-wrap: wrap;
}
.forge-input-chip {
display: inline-flex;
align-items: center;
gap: 3px;
}
.forge-input-chip img { width: 14px; height: 14px; }
.forge-arrow {
color: #9B8B6B;
opacity: 0.4;
font-size: 10px;
}
.forge-output-chip {
display: inline-flex;
align-items: center;
gap: 3px;
color: #FF981F;
font-weight: 600;
}
.forge-output-chip img { width: 14px; height: 14px; }
.forge-stats {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.forge-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.forge-stat-val {
font-size: 13px;
font-weight: 700;
}
.forge-stat-val.xp { color: #00FF00; }
.forge-stat-val.count { color: #FFD700; }
.forge-stat-label {
font-size: 9px;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.forge-stop {
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #5a2a1a, #4a1a0a);
border: 1px solid rgba(255,60,60,0.3);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
color: #FF3333;
}
.forge-stop:hover {
background: linear-gradient(180deg, #6a3a2a, #5a2a1a);
border-color: #FF3333;
box-shadow: 0 0 10px rgba(255,60,60,0.15);
}
.forge-stop svg { width: 14px; height: 14px; fill: currentColor; }
/* Progress bar row */
.forge-bar-row {
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
}
.forge-bar-wrap {
flex: 1;
height: 14px;
background: #100C08;
border-radius: 7px;
overflow: hidden;
border: 1px solid rgba(94,68,56,0.3);
position: relative;
}
.forge-bar-fill {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #8B4513, #D4854A, #FF981F);
position: relative;
box-shadow: 0 0 8px rgba(255,152,31,0.3);
}
.forge-progress.running .forge-bar-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,200,0.15) 30%,
rgba(255,255,200,0.25) 50%,
rgba(255,255,200,0.15) 70%,
transparent 100%
);
border-radius: 6px 6px 0 0;
animation: forge-shimmer 1.5s ease-in-out infinite;
}
@keyframes forge-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
.forge-bar-time {
font-size: 11px;
font-weight: 600;
color: #9B8B6B;
min-width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Session stats */
.forge-session {
display: flex;
align-items: center;
gap: 14px;
font-size: 11px;
color: #9B8B6B;
position: relative;
z-index: 1;
}
.forge-session-stat {
display: flex;
align-items: center;
gap: 4px;
}
.forge-session-stat img { width: 14px; height: 14px; }
.forge-session-val {
font-weight: 600;
color: #F5F0E0;
}
.forge-session-val.xp { color: #00FF00; }
/* Idle state */
.forge-progress.idle .forge-top { opacity: 0.4; }
.forge-progress.idle .forge-bar-fill { width: 0 !important; }
.forge-progress.idle .forge-bar-fill::after { display: none; }
/* Skilling key glow on progress bar */
.key-glow {
background: linear-gradient(90deg, #6b21a8, #a855f7, #d8b4fe, #a855f7) !important;
box-shadow: 0 0 12px rgba(168,85,247,0.6), 0 0 24px rgba(168,85,247,0.3), inset 0 0 8px rgba(216,180,254,0.2) !important;
animation: keyGlowPulse 1s ease-in-out infinite !important;
}
@keyframes keyGlowPulse {
0%, 100% { box-shadow: 0 0 12px rgba(168,85,247,0.6), 0 0 24px rgba(168,85,247,0.3); }
50% { box-shadow: 0 0 18px rgba(168,85,247,0.8), 0 0 36px rgba(168,85,247,0.5), 0 0 4px rgba(250,204,21,0.3); }
}
/* Key drop float (appears on action completion when key is found) */
.key-drop-float {
position: absolute;
top: 280px;
left: 10px;
display: flex;
align-items: center;
gap: 5px;
pointer-events: none;
animation: keyDropFloat 1.8s ease-out forwards;
z-index: 50;
white-space: nowrap;
}
.key-drop-icon {
width: 24px;
height: 24px;
}
.key-drop-text {
font-family: 'Runescape Small', 'Runescape UF', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #d8b4fe;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 8px rgba(168,85,247,0.6);
}
@keyframes keyDropFloat {
0% { opacity: 1; transform: translateY(0) scale(1.2); }
15% { transform: translateY(-5px) scale(1); }
60% { opacity: 1; }
100% { opacity: 0; transform: translateY(-200px); }
}
.forge-progress.idle .forge-icon-wrap::after { display: none; }
.forge-progress.idle::before { opacity: 0; }
.forge-idle-msg {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
font-size: 12px;
color: #9B8B6B;
opacity: 0.5;
letter-spacing: 0.3px;
z-index: 2;
}
/* MAIN CONTENT */
.hub-main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
/* Category tabs */
.hub-tabs {
display: flex;
gap: 0;
padding: 0 12px;
background: #221814;
border-bottom: 1px solid #100C08;
flex-shrink: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab {
padding: 8px 14px;
font-family: 'Lexend', sans-serif;
font-size: 12px;
font-weight: 600;
color: #9B8B6B;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.hub-tab:hover {
color: #F5F0E0;
background: rgba(255,255,255,0.02);
}
.hub-tab.active {
color: #FF981F;
border-bottom-color: #FF981F;
}
.hub-tab .tab-count {
font-size: 10px;
color: #9B8B6B;
opacity: 0.5;
margin-left: 4px;
}
/* METHOD GRID */
.hub-grid-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 12px;
scrollbar-width: thin;
scrollbar-color: #3C2A22 transparent;
}
.hub-grid-scroll::-webkit-scrollbar { width: 6px; }
.hub-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.hub-grid-scroll::-webkit-scrollbar-thumb { background: #3C2A22; border-radius: 3px; }
.hub-grid-scroll::-webkit-scrollbar-thumb:hover { background: #5E4438; }
.hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px;
}
/* METHOD CARD — mirrors .skill-cell chrome (parchment, squared, bordered) */
.method-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--parchment-shade-base);
background-image:
var(--parchment-shade-overlay),
var(--parchment-shade-radial),
var(--parchment-shade-image),
repeating-linear-gradient(137deg, transparent, transparent 1px, rgba(0,0,0,0.04) 1px, transparent 2px),
repeating-linear-gradient(82deg, transparent, transparent 1px, rgba(255,220,180,0.02) 1px, transparent 3px);
background-size: auto, auto, cover, auto, auto;
background-position: center, center, center, center, center;
background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
border: 2px solid #6E5647;
border-radius: 0;
position: relative;
cursor: pointer;
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.06),
0 2px 8px rgba(0,0,0,0.25);
transition: transform 0.15s, box-shadow 0.2s, border-color 0.15s, background 0.15s;
}
.method-card:hover {
border-color: #8A6A54;
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px #2A1A14,
inset 0 0 0 3px rgba(255, 196, 128, 0.09),
0 4px 12px rgba(0, 0, 0, 0.35);
}
.method-card.active {
border-color: var(--gold);
overflow: hidden;
box-shadow:
inset 0 0 0 1px #3A281D,
inset 0 0 0 3px rgba(255, 215, 0, 0.08),
0 0 12px rgba(255,152,31,0.12);
}
.method-card.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #FF981F;
border-radius: 0;
}
.method-card.locked {
opacity: 0.45;
}
.mc-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mc-icon img { max-width: 32px; max-height: 32px; object-fit: contain; }
.mc-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mc-name {
font-size: 13px;
font-weight: 600;
color: #F5F0E0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.method-card.locked .mc-name { color: #9B8B6B; }
.mc-input {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: #9B8B6B;
flex-wrap: wrap;
}
.mc-input img { width: 14px; height: 14px; }
.mc-input-qty { font-weight: 600; }
.mc-input-qty.has { color: #00FF00; }
.mc-input-qty.needs { color: #FF3333; }
.mc-input-qty.empty { color: #666; }
.mc-bank-qty { opacity: 0.7; font-size: 9px; }
.mc-can-make {
width: 100%;
font-size: 9px;
font-weight: 600;
margin-top: 1px;
}
.mc-can-make.has { color: var(--green); }
.mc-can-make.empty { color: var(--red); }
.mc-requires { font-size: 11px; margin-top: 2px; }
.mc-req-chip.has { color: var(--green); }
.mc-req-chip.needs { color: var(--red); }
.mc-stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
}
.mc-xp {
font-size: 12px;
font-weight: 600;
color: #00FF00;
}
.mc-lvl {
font-size: 10px;
color: #9B8B6B;
}
.mc-lvl.met { color: #00FF00; opacity: 0.6; }
.mc-lvl.unmet { color: #FF3333; }
.mc-time {
font-size: 10px;
color: #9B8B6B;
opacity: 0.5;
}
.mc-play {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #5a3a28, #4a2a1a);
border: 1px solid rgba(212,133,74,0.3);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
color: #FF981F;
}
.mc-play:hover {
background: linear-gradient(180deg, #6a4a38, #5a3a28);
border-color: #FF981F;
box-shadow: 0 0 8px rgba(255,152,31,0.15);
}
.mc-play svg { width: 12px; height: 12px; fill: currentColor; }
/* Info button — preview a method without starting it (card click now starts) */
.mc-info {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
color: #9B8B6B;
opacity: 0.45;
}
.method-card:hover .mc-info { opacity: 0.8; }
.mc-info:hover {
opacity: 1;
background: rgba(255,255,255,0.06);
border-color: rgba(155,139,107,0.4);
}
.mc-info svg { width: 13px; height: 13px; }
.mc-plant { color: #5aaa5a; border-color: rgba(90,170,90,0.3); }
.mc-plant:hover { border-color: #5aaa5a; box-shadow: 0 0 8px rgba(90,170,90,0.15); }
.mc-plant svg { fill: none; }
/* Active patches/birdhouses in hub grid */
.hub-patches-header {
grid-column: 1 / -1;
font-size: 10px;
font-weight: 700;
color: #ff981f;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 8px 0 4px;
border-bottom: 1px solid #2a2218;
}
.hub-patch-card {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(255,152,31,0.04);
border: 1px solid rgba(255,152,31,0.12);
border-radius: 8px;
}
.hub-patch-card.ready {
border-color: rgba(0,200,80,0.3);
background: rgba(0,200,80,0.06);
}
.hub-patch-bar {
width: 100%;
height: 4px;
background: #1a1209;
border-radius: 2px;
overflow: hidden;
margin: 3px 0;
}
.hub-patch-fill {
height: 100%;
background: linear-gradient(90deg, #ff981f, #ffd666);
border-radius: 2px;
transition: width 0.5s ease;
}
.hub-patch-fill.done {
background: linear-gradient(90deg, #00c853, #69f0ae);
}
.hub-patch-harvest, .hub-bh-harvest {
flex-shrink: 0;
padding: 6px 14px;
font-size: 11px;
font-weight: 700;
background: linear-gradient(180deg, #00c853, #009940);
color: #0a1a0a;
border: 1px solid rgba(0,200,80,0.4);
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
}
.hub-patch-harvest:hover, .hub-bh-harvest:hover {
background: linear-gradient(180deg, #00e676, #00c853);
box-shadow: 0 0 10px rgba(0,200,80,0.3);
}
/* Skill icon badge for ready patches */
.skill-ready-badge {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
background: #00c853;
border-radius: 50%;
box-shadow: 0 0 6px rgba(0,200,80,0.6);
z-index: 5;
animation: readyPulse 2s ease-in-out infinite;
}
@keyframes readyPulse {
0%, 100% { box-shadow: 0 0 4px rgba(0,200,80,0.4); }
50% { box-shadow: 0 0 10px rgba(0,200,80,0.8); }
}
.method-card.active .mc-play {
background: linear-gradient(180deg, #6a3a2a, #5a2a1a);
border-color: #FF981F;
color: #F5F0E0;
}
/* MATERIALS BAR */
.hub-materials {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: linear-gradient(180deg, rgba(24,16,14,0.6) 0%, #221814 100%);
border-top: 1px solid #100C08;
flex-shrink: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hub-materials::-webkit-scrollbar { display: none; }
.mat-label {
font-size: 10px;
font-weight: 700;
color: #9B8B6B;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-right: 4px;
flex-shrink: 0;
}
.mat-item {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: #302220;
border: 1px solid rgba(94,68,56,0.25);
border-radius: 6px;
flex-shrink: 0;
}
.mat-item img { width: 18px; height: 18px; }
.mat-item-qty {
font-size: 11px;
font-weight: 600;
}
.mat-item-qty.has { color: #00FF00; }
.mat-item-qty.empty { color: #9B8B6B; opacity: 0.5; }
/* EMPTY STATE */
.hub-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px 20px;
color: #9B8B6B;
text-align: center;
}
.hub-empty-icon { font-size: 32px; opacity: 0.3; }
.hub-empty-text { font-size: 13px; }
/* Mini action indicator — disabled */
.hub-mini-indicator {
display: none !important;
position: absolute;
top: 8px;
right: 8px;
z-index: 25;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(24,16,14,0.92);
border: 1px solid #5E4438;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s;
backdrop-filter: blur(4px);
}
.hub-mini-indicator:hover {
border-color: #FF981F;
background: rgba(34,24,20,0.95);
box-shadow: 0 0 10px rgba(255,152,31,0.12);
}
.hub-mini-indicator img {
width: 22px;
height: 22px;
object-fit: contain;
}
.hub-mini-name {
font-size: 11px;
font-weight: 600;
color: #F5F0E0;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hub-mini-bar {
width: 60px;
height: 6px;
background: #100C08;
border-radius: 3px;
overflow: hidden;
border: 1px solid rgba(94,68,56,0.3);
}
.hub-mini-bar-fill {
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, #8B4513, #FF981F);
}
/* RESPONSIVE — MOBILE HUB */
@media (max-width: 768px) {
/* ── HIDE on mobile (per disable_on_mobile.txt) ── */
.forge-stats { display: none !important; }
.forge-session { display: none !important; }
.hub-materials { display: none !important; }
.forge-idle-msg { display: none !important; }
/* ── HEADER: compact, tighter ── */
.hub-header {
padding: 8px 12px;
gap: 8px;
border-bottom: none;
background: linear-gradient(180deg, #2E1E18 0%, #1E1410 100%);
}
.hub-skill-icon {
width: 32px;
height: 32px;
border-radius: 8px;
}
.hub-skill-icon img { width: 22px; height: 22px; }
.hub-skill-name { font-size: 14px; letter-spacing: 0; }
.hub-level { font-size: 11px; }
.hub-xp-bar-wrap { max-width: 100px; height: 6px; }
.hub-xp-text { display: none; }
.hub-stats { font-size: 10px; margin-top: 0; }
.hub-swap {
width: 30px; height: 30px; border-radius: 6px;
margin-left: 0; margin-right: 0; order: -1;
}
.hub-swap img { width: 20px; height: 20px; }
/* ── TIER STRIP: inline, minimal ── */
.tier-strip {
padding: 4px 10px;
gap: 0;
background: #1E1410;
border-bottom: none;
}
.tier-node {
min-width: 44px;
padding: 3px 5px;
gap: 2px;
border-radius: 6px;
}
.tier-icon-wrap { width: 24px; height: 24px; }
.tier-icon-wrap img { width: 20px; height: 20px; }
.tier-name { font-size: 8px; letter-spacing: 0.3px; }
.tier-lvl { display: none; }
.tier-connector { width: 10px; }
/* ── SUPPLY CHAIN: subtle utility row ── */
.supply-chain {
padding: 5px 10px;
min-height: 36px;
background: rgba(16,12,8,0.5);
border-bottom: none;
}
.supply-node {
padding: 3px 7px;
border-radius: 6px;
}
.supply-node img, .supply-output img { width: 18px; height: 18px; }
.supply-node-name { font-size: 10px; }
.supply-node-qty { font-size: 9px; }
.supply-arrow { font-size: 11px; }
.supply-output {
padding: 3px 7px;
border-radius: 6px;
}
.supply-output-name { font-size: 10px; }
/* ── FORGE: the hero section, elevated ── */
.forge-progress {
padding: 10px 12px;
margin: 6px 8px;
border-radius: 10px;
border: 1px solid rgba(255,152,31,0.1);
border-bottom: 1px solid rgba(255,152,31,0.1);
background:
linear-gradient(180deg, #261A14 0%, #1E1410 100%);
box-shadow:
0 2px 12px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,152,31,0.04);
}
.forge-progress::before { display: none; }
.forge-icon-wrap {
width: 40px;
height: 40px;
border-radius: 8px;
}
.forge-icon-wrap img { max-width: 30px; max-height: 30px; }
.forge-item-name { font-size: 13px; }
.forge-item-detail { font-size: 10px; }
.forge-bar-wrap { height: 10px; border-radius: 5px; }
.forge-bar-fill { border-radius: 4px; }
.forge-stop { width: 28px; height: 28px; border-radius: 6px; }
/* ── CATEGORY TABS: tight, underline only ── */
.hub-tabs {
padding: 0 10px;
background: transparent;
border-bottom: 1px solid rgba(94,68,56,0.15);
}
.hub-tab {
padding: 6px 10px;
font-size: 11px;
}
/* ── METHOD GRID: recede behind forge ── */
.hub-grid { grid-template-columns: 1fr; gap: 6px; }
.hub-grid-scroll { padding: 6px 8px; }
.method-card {
padding: 8px 10px;
gap: 8px;
border-radius: 0;
}
.method-card:hover {
transform: none;
}
.method-card.active {
border-color: #FF981F;
}
.mc-icon { width: 30px; height: 30px; }
.mc-icon img { max-width: 26px; max-height: 26px; }
.mc-name { font-size: 12px; }
.mc-xp { font-size: 11px; }
.mc-play { width: 26px; height: 26px; }
.mc-info { width: 26px; height: 26px; opacity: 0.6; }
/* ── TOP-LINE GLOW: suppress on mobile ── */
.skill-hub::before { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
ERA PASS — Daily Rewards
═══════════════════════════════════════════════════════════════ */
.ep-wrap {
position: absolute;
inset: 0;
background-color: var(--parchment-shade-base, #3C2A22);
background-image:
var(--parchment-shade-overlay, linear-gradient(180deg, rgba(22,16,12,0.72), rgba(28,20,16,0.62))),
var(--parchment-shade-radial, radial-gradient(ellipse at center, rgba(255,244,220,0.04) 0%, rgba(255,244,220,0.015) 32%, rgba(0,0,0,0) 68%)),
var(--parchment-shade-image, url('../img/parchment-background-texture.png'));
background-size: auto, auto, cover;
background-position: center;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 10;
}
/* ── Hero — Cinematic title banner ── */
.ep-hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px 28px;
flex-shrink: 0;
text-align: center;
background:
linear-gradient(180deg, rgba(60,42,34,0) 0%, rgba(60,42,34,0.65) 55%, rgba(60,42,34,0.95) 82%, var(--parchment-shade-base, #3C2A22) 100%),
url('../img/valley.png') center 15% / cover no-repeat;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
/* Admin edit button */
/* Notification dot on era sidebar button */
.ep-notif-dot {
position: absolute;
top: 2px; right: 2px;
width: 8px; height: 8px;
background: #e53e3e;
border-radius: 50%;
border: 1.5px solid #1a1610;
box-shadow: 0 0 6px rgba(229,62,62,0.5);
animation: epNotifPulse 2s ease-in-out infinite;
pointer-events: none;
z-index: 3;
}
@keyframes epNotifPulse {
0%, 100% { box-shadow: 0 0 4px rgba(229,62,62,0.4); }
50% { box-shadow: 0 0 10px rgba(229,62,62,0.7); }
}
.ep-hero-edit {
position: absolute;
top: 10px; left: 12px;
width: 26px; height: 26px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,200,80,0.2);
border-radius: 4px;
color: rgba(255,200,80,0.6);
font-size: 13px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 5;
transition: all 0.15s;
}
.ep-hero-edit:hover { background: rgba(0,0,0,0.5); color: #FFD700; border-color: rgba(255,200,80,0.4); }
.ep-x {
position: absolute;
top: 10px; right: 12px;
width: 26px; height: 26px;
background: none;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
color: rgba(255,255,255,0.3);
font-size: 13px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 5;
}
.ep-x:hover { background: rgba(255,255,255,0.06); color: #F5F0E0; }
/* Hero floating motes */
.ep-hero-motes {
position: absolute; inset: 0;
pointer-events: none; overflow: hidden;
}
.ep-mote {
position: absolute; bottom: 0;
width: var(--sz); height: var(--sz);
background: rgba(255,200,100,0.6);
border-radius: 50%;
box-shadow: 0 0 6px rgba(255,180,60,0.4);
animation: epMoteRise var(--d) ease-in var(--del) infinite;
}
@keyframes epMoteRise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
8% { opacity: 0.7; }
75% { opacity: 0.25; }
100% { transform: translateY(-220px) translateX(15px); opacity: 0; }
}
/* Hero title treatment */
.ep-hero-pre {
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 600;
letter-spacing: 8px;
color: rgba(255,180,80,0.45);
text-shadow: 0 0 12px rgba(255,152,31,0.15);
margin-bottom: 2px;
}
.ep-hero-title {
font-family: 'Lexend', sans-serif;
font-size: 44px; font-weight: 900;
letter-spacing: 8px;
background: linear-gradient(180deg, #FFE070 0%, #FFD700 25%, #FF981F 60%, #cc7a16 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 2px 10px rgba(255,152,31,0.25));
line-height: 1.1;
margin-bottom: 6px;
animation: epTitleBreathe 4s ease-in-out infinite;
}
@keyframes epTitleBreathe {
0%, 100% { filter: drop-shadow(0 2px 10px rgba(255,152,31,0.2)); }
50% { filter: drop-shadow(0 2px 16px rgba(255,152,31,0.35)); }
}
.ep-hero-rule {
width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,200,80,0.35), transparent);
margin: 0 auto 6px;
}
.ep-hero-sub {
font-size: 11px; font-style: italic;
color: rgba(200,180,140,0.45);
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.ep-hero-days {
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(155,139,107,0.35);
}
/* ── Reward Track ── */
.ep-track-wrap {
flex-shrink: 0;
padding: 6px 0 18px;
position: relative;
border-top: 1px solid rgba(255,200,100,0.04);
border-bottom: 1px solid rgba(255,200,100,0.04);
background: rgba(0,0,0,0.12);
}
.ep-track-scroll {
overflow-x: auto; overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(90,74,56,0.3) transparent;
-webkit-overflow-scrolling: touch;
}
.ep-track {
display: flex;
align-items: flex-start;
padding: 0 24px;
min-width: max-content;
}
.ep-ch {
display: flex;
flex-direction: column;
align-items: center;
}
.ep-ch-label {
font-family: 'Lexend', sans-serif;
font-size: 8px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(155,139,107,0.3);
margin-bottom: 6px;
white-space: nowrap;
}
.ep-ch-row {
display: flex;
align-items: center;
}
.ep-ch-gap { width: 18px; flex-shrink: 0; }
/* Track nodes */
.ep-node {
position: relative;
width: 62px; height: 62px;
border-radius: 50%;
background: rgba(0,0,0,0.3);
border: 2px solid rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.ep-node:hover { transform: scale(1.1); border-color: rgba(255,152,31,0.3); }
.ep-node-ico { display: flex; align-items: center; justify-content: center; }
.ep-node-ico img {
width: 42px; height: 42px;
object-fit: contain;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.ep-node-day {
position: absolute;
bottom: -14px; left: 50%;
transform: translateX(-50%);
font-family: 'Lexend', sans-serif;
font-size: 8px; font-weight: 600;
color: rgba(155,139,107,0.25);
white-space: nowrap;
}
.ep-node-chk {
position: absolute;
top: -4px; right: -4px;
width: 16px; height: 16px;
background: linear-gradient(135deg, #3CB043, #2d8a34);
border: 1.5px solid rgba(0,0,0,0.3);
border-radius: 50%;
font-size: 9px; font-weight: 700;
color: white;
display: flex; align-items: center; justify-content: center;
line-height: 1;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* Track connectors */
.ep-conn {
width: 10px; height: 2px;
background: rgba(255,255,255,0.05);
flex-shrink: 0;
}
.ep-conn.filled {
background: linear-gradient(90deg, rgba(255,180,60,0.45), rgba(255,200,80,0.45));
box-shadow: 0 0 6px rgba(255,152,31,0.12);
}
/* Node states */
.ep-node.claimed {
border-color: rgba(255,152,31,0.25);
box-shadow: 0 0 8px rgba(255,152,31,0.08);
background: rgba(255,152,31,0.04);
}
.ep-node.claimed .ep-node-ico img {
filter: drop-shadow(0 1px 4px rgba(255,152,31,0.25));
}
.ep-node.claimed .ep-node-day { color: rgba(255,152,31,0.35); }
.ep-node.current {
width: 70px; height: 70px;
border-color: rgba(255,200,80,0.5);
box-shadow: 0 0 16px rgba(255,152,31,0.2), 0 0 32px rgba(255,152,31,0.08);
background: rgba(255,152,31,0.06);
animation: epNodePulse 2s ease-in-out infinite;
}
.ep-node.current .ep-node-ico img { width: 48px; height: 48px; }
.ep-node.current .ep-node-day { color: rgba(255,200,80,0.6); font-size: 9px; }
@keyframes epNodePulse {
0%, 100% { box-shadow: 0 0 12px rgba(255,152,31,0.15), 0 0 24px rgba(255,152,31,0.06); border-color: rgba(255,200,80,0.4); }
50% { box-shadow: 0 0 22px rgba(255,152,31,0.3), 0 0 44px rgba(255,152,31,0.12); border-color: rgba(255,200,80,0.6); }
}
.ep-node.locked {
opacity: 0.3;
border-color: rgba(255,255,255,0.03);
}
.ep-node.locked .ep-node-ico img {
filter: grayscale(0.6) brightness(0.5) drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.ep-node.locked:hover { opacity: 0.5; }
.ep-node.milestone { border-width: 2.5px; }
.ep-node.milestone.claimed {
border-color: rgba(255,215,0,0.4);
box-shadow: 0 0 14px rgba(255,215,0,0.12), 0 0 6px rgba(255,152,31,0.08);
background: rgba(255,215,0,0.04);
}
.ep-node.milestone.current { border-color: rgba(255,215,0,0.6); }
/* ── Claim Zone — Bottom half with floating effects ── */
.ep-claim-zone {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 120px;
background: url('../img/viewport-background-texture.png') center/cover no-repeat #1a1610;
box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}
.ep-cz-vignette {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 100%);
pointer-events: none;
}
/* Claim zone particles */
.ep-cz-particles {
position: absolute; inset: 0;
overflow: hidden; pointer-events: none;
}
.ep-cz-pt {
position: absolute;
bottom: -6px;
width: 3px; height: 3px;
background: rgba(255,180,60,0.5);
border-radius: 50%;
box-shadow: 0 0 5px rgba(255,152,31,0.3);
animation: epPtRise var(--dur) ease-in var(--del) infinite;
}
@keyframes epPtRise {
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
8% { opacity: 0.6; }
75% { opacity: 0.15; }
100% { transform: translateY(-240px) translateX(var(--drift)) scale(0); opacity: 0; }
}
/* Claim zone glow orb */
.ep-cz-glow {
position: absolute;
left: 50%; top: 50%;
width: 200px; height: 200px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255,152,31,0.1) 0%, rgba(255,200,80,0.04) 40%, transparent 70%);
animation: epGlowBreathe 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes epGlowBreathe {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
/* Claim zone content */
.ep-cz-body {
position: relative; z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ep-cz-day {
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 600;
letter-spacing: 3px; text-transform: uppercase;
color: rgba(255,152,31,0.5);
margin-bottom: 12px;
}
/* Icon wrapper with floating effects */
.ep-cz-icon-wrap {
position: relative;
margin-bottom: 14px;
}
.ep-cz-icon-wrap.dim .ep-cz-icon {
animation: none;
opacity: 0.4;
}
.ep-cz-icon-wrap.dim .ep-cz-icon img {
filter: grayscale(0.5) brightness(0.6) drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.ep-cz-icon-wrap.dim .ep-cz-ring,
.ep-cz-icon-wrap.dim .ep-cz-sparkles { display: none; }
/* Orbiting sparkles */
.ep-cz-sparkles {
position: absolute;
inset: -14px;
animation: epSparkOrbit 10s linear infinite;
pointer-events: none;
}
.ep-cz-spark {
position: absolute;
width: 4px; height: 4px;
background: #FFD700;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255,215,0,0.6), 0 0 14px rgba(255,152,31,0.25);
}
.ep-cz-spark:nth-child(1) { top: -2px; left: calc(50% - 2px); animation: epSparkPulse 2s ease-in-out 0s infinite; }
.ep-cz-spark:nth-child(2) { top: calc(50% - 2px); right: -2px; animation: epSparkPulse 2s ease-in-out 0.5s infinite; }
.ep-cz-spark:nth-child(3) { bottom: -2px; left: calc(50% - 2px); animation: epSparkPulse 2s ease-in-out 1s infinite; }
.ep-cz-spark:nth-child(4) { top: calc(50% - 2px); left: -2px; animation: epSparkPulse 2s ease-in-out 1.5s infinite; }
@keyframes epSparkOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes epSparkPulse {
0%, 100% { opacity: 0.25; transform: scale(0.7); }
50% { opacity: 1; transform: scale(1.3); }
}
/* Orbiting ring */
.ep-cz-ring {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1.5px solid rgba(255,200,80,0.12);
animation: epRingBreathe 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes epRingBreathe {
0%, 100% { border-color: rgba(255,200,80,0.1); transform: scale(1); }
50% { border-color: rgba(255,200,80,0.22); transform: scale(1.04); }
}
/* Floating icon */
.ep-cz-icon {
width: 96px; height: 96px;
background: none;
border: none;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
animation: epIconBob 2.5s ease-in-out infinite;
}
.ep-cz-icon img {
width: 60px; height: 60px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
@keyframes epIconBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Reward labels */
.ep-cz-name { font-size: 18px; font-weight: 800; color: #F5F0E0; margin-bottom: 4px; }
.ep-cz-name.dim { color: rgba(155,139,107,0.4); font-size: 14px; }
.ep-cz-type {
font-size: 10px; color: rgba(155,139,107,0.5);
text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 18px;
}
/* CLAIM button */
.ep-cz-claim {
padding: 14px 48px;
font-family: 'Lexend', sans-serif;
font-size: 16px; font-weight: 800; letter-spacing: 3px;
background: linear-gradient(180deg, #FFD700, #FF981F, #cc7a16);
color: #1a1209; border: none; border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 24px rgba(255,152,31,0.35), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
transition: all 0.15s;
animation: epClaimPulse 2s ease-in-out infinite;
position: relative; overflow: hidden;
}
.ep-cz-claim::after {
content: '';
position: absolute;
top: -50%; left: -80%;
width: 60%; height: 200%;
background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
animation: epClaimSheen 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes epClaimSheen {
0%, 30% { transform: translateX(0); }
100% { transform: translateX(400%); }
}
@keyframes epClaimPulse {
0%, 100% { box-shadow: 0 4px 20px rgba(255,152,31,0.3), 0 2px 8px rgba(0,0,0,0.3); }
50% { box-shadow: 0 4px 32px rgba(255,152,31,0.5), 0 2px 8px rgba(0,0,0,0.3); }
}
.ep-cz-claim:hover {
background: linear-gradient(180deg, #ffe44d, #ffb040, #FF981F);
transform: translateY(-2px) scale(1.02);
}
.ep-cz-claim:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(255,152,31,0.2);
}
/* Claimed / timer states */
.ep-cz-done {
font-family: 'Lexend', sans-serif;
font-size: 14px; font-weight: 700;
color: rgba(255,215,0,0.55);
letter-spacing: 2px;
margin-bottom: 16px;
}
.ep-cz-timer-wrap { font-size: 11px; color: rgba(155,139,107,0.4); margin-top: 16px; }
.ep-cz-timer {
font-family: 'Lexend', sans-serif;
font-weight: 700;
color: rgba(155,139,107,0.6);
letter-spacing: 1px;
}
/* ── Claimed state — today's reward with golden treatment ── */
.ep-cz-claimed-wrap {
margin-bottom: 14px;
}
.ep-cz-claimed-halo {
position: absolute;
inset: -18px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, rgba(255,152,31,0.03) 50%, transparent 70%);
animation: epClaimedHaloPulse 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes epClaimedHaloPulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.1); opacity: 1; }
}
.ep-cz-icon-settled {
animation: epIconBob 3.5s ease-in-out infinite !important;
}
.ep-cz-icon-settled img {
filter: drop-shadow(0 2px 10px rgba(255,215,0,0.3)) drop-shadow(0 0 4px rgba(255,152,31,0.15)) !important;
}
.ep-cz-claimed-badge {
position: absolute;
top: -2px; right: -2px;
width: 26px; height: 26px;
background: linear-gradient(140deg, #4ade80, #22c55e, #16a34a);
border: 2px solid rgba(0,0,0,0.35);
border-radius: 50%;
font-size: 14px; font-weight: 800;
color: white;
display: flex; align-items: center; justify-content: center;
line-height: 1;
box-shadow: 0 2px 8px rgba(34,197,94,0.4), 0 0 12px rgba(34,197,94,0.15);
animation: epBadgeAppear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
@keyframes epBadgeAppear {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* ═══ Claim Animation — Multi-phase epic sequence ═══ */
/* Phase 1: Violent shake */
.ep-cz-anim-shake {
animation: epClaimShake 0.5s ease-in-out !important;
}
@keyframes epClaimShake {
0%, 100% { transform: translateX(0) rotate(0) scale(1); }
8% { transform: translateX(-5px) rotate(-2deg) scale(1.01); }
16% { transform: translateX(5px) rotate(2deg) scale(1.02); }
24% { transform: translateX(-7px) rotate(-4deg) scale(1.03); }
32% { transform: translateX(7px) rotate(4deg) scale(1.04); }
40% { transform: translateX(-9px) rotate(-5deg) scale(1.05); }
48% { transform: translateX(9px) rotate(5deg) scale(1.05); }
56% { transform: translateX(-10px) rotate(-6deg) scale(1.06); }
64% { transform: translateX(10px) rotate(6deg) scale(1.06); }
72% { transform: translateX(-8px) rotate(-4deg) scale(1.04); }
80% { transform: translateX(6px) rotate(3deg) scale(1.02); }
90% { transform: translateX(-3px) rotate(-1deg) scale(1.01); }
}
/* Phase 2: Button vanish */
.ep-cz-btn-vanish {
animation: epBtnVanish 0.3s ease-out forwards !important;
pointer-events: none !important;
}
@keyframes epBtnVanish {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(8px) scale(0.9); }
}
/* Phase 2: Golden burst flash — expanding ring of light */
.ep-cz-anim-burst {
position: absolute;
left: 50%; top: 50%;
width: 80px; height: 80px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(255,255,240,0.7) 0%,
rgba(255,215,0,0.5) 20%,
rgba(255,152,31,0.3) 45%,
transparent 70%);
animation: epBurstExpand 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
pointer-events: none;
z-index: 5;
}
@keyframes epBurstExpand {
0% { width: 60px; height: 60px; opacity: 1; }
40% { opacity: 0.9; }
100% { width: 500px; height: 500px; opacity: 0; }
}
/* Phase 2: Glow orb supernova */
.ep-cz-anim-glow-explode {
animation: epGlowSupernova 0.8s ease-out forwards !important;
background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, rgba(255,152,31,0.2) 35%, transparent 65%) !important;
}
@keyframes epGlowSupernova {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
30% { transform: translate(-50%, -50%) scale(1.8); opacity: 0.8; }
100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
/* Phase 2: Icon ascends + goes golden */
.ep-cz-anim-ascend {
animation: epIconAscend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes epIconAscend {
0% { transform: translateY(0) scale(1); filter: none; }
50% { transform: translateY(-14px) scale(1.15); filter: drop-shadow(0 0 24px rgba(255,215,0,0.7)) brightness(1.3); }
100% { transform: translateY(-6px) scale(1.08); filter: drop-shadow(0 0 18px rgba(255,215,0,0.5)) brightness(1.15); }
}
/* Phase 2: Starburst particles — gold shrapnel */
.ep-cz-anim-starburst {
position: absolute;
left: 50%; top: 50%;
width: var(--bsz); height: var(--bsz);
background: #FFD700;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255,215,0,0.8), 0 0 14px rgba(255,152,31,0.4);
animation: epStarburst 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
pointer-events: none;
z-index: 4;
}
@keyframes epStarburst {
0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
30% { opacity: 1; }
100% { transform: translate(var(--bx), var(--by)) scale(0); opacity: 0; }
}
/* Phase 2: Secondary ember trail */
.ep-cz-anim-ember {
position: absolute;
left: 50%; top: 50%;
width: var(--bsz); height: var(--bsz);
background: rgba(255,180,60,0.8);
border-radius: 50%;
box-shadow: 0 0 4px rgba(255,152,31,0.6);
animation: epEmberDrift 1s ease-out forwards;
pointer-events: none;
z-index: 3;
}
@keyframes epEmberDrift {
0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
100% { transform: translate(var(--bx), var(--by)) scale(0); opacity: 0; }
}
/* Phase 2: Reward name golden flash */
.ep-cz-anim-name-glow {
color: #FFD700 !important;
text-shadow: 0 0 12px rgba(255,215,0,0.5);
transition: color 0.3s, text-shadow 0.3s;
}
/* Phase 2: "Claimed" title rises in */
.ep-cz-anim-title {
font-family: 'Lexend', sans-serif;
font-size: 16px; font-weight: 800;
letter-spacing: 3px;
color: #FFD700;
text-shadow: 0 0 16px rgba(255,215,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
animation: epClaimTitleRise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
margin-top: 8px;
}
@keyframes epClaimTitleRise {
0% { opacity: 0; transform: translateY(16px) scale(0.85); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ═══ Claim Loot Window — pops out during Phase 3 ═══
Design language: parchment/stone panel with gilded frame, inner dark stone,
gold filigree ornaments, diamond rule divider, staggered item reveals with
light-shine sweep. Mirrors .ep-det-card + .ep-cz animation palette. */
.ep-cz-loot-ov {
position: fixed; inset: 0;
z-index: var(--z-takeover);
display: flex; align-items: center; justify-content: center;
background: rgba(6,4,2,0.65);
animation: epLootOvFade 0.25s ease-out;
}
@keyframes epLootOvFade {
from { opacity: 0; }
to { opacity: 1; }
}
.ep-cz-loot-card {
position: relative;
width: min(92vw, 460px);
max-height: 86vh;
overflow-y: auto;
padding: 0;
background: var(--iw-surface);
border: 1px solid #000;
border-radius: 6px;
box-shadow:
inset 0 0 0 1px var(--iw-edge),
0 0 0 2px rgba(0,0,0,.8),
0 14px 40px rgba(0,0,0,.65),
0 0 24px var(--iw-glow-soft);
animation: epLootEnter 0.25s ease-out both;
}
.ep-cz-loot-card.ep-cz-loot-leaving {
animation: epLootCollapse 0.2s ease-in forwards;
}
@keyframes epLootEnter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes epLootCollapse {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(6px); }
}
/* Corner filigree — hidden (D-style cleanup) */
.ep-cz-loot-ornament { display: none; }
/* Inner dark stone frame */
.ep-cz-loot-frame {
position: relative;
background: none;
border: none;
border-radius: 6px;
padding: 16px 16px 14px;
text-align: center;
overflow: hidden;
}
/* Subtle warmth behind content — replaces god rays */
.ep-cz-loot-beams {
position: absolute;
top: -20%; left: 10%; right: 10%;
height: 140%;
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse at 50% 20%, var(--iw-glow-soft), transparent 60%);
}
.ep-cz-loot-header {
position: relative;
z-index: 2;
margin-bottom: 16px;
}
.ep-cz-loot-eyebrow {
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: var(--iw-accent-soft); opacity: .65;
margin-bottom: 4px;
}
.ep-cz-loot-title {
font-family: inherit;
font-size: 16px; font-weight: 800;
letter-spacing: .5px;
background: var(--iw-text-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ep-cz-loot-rule {
display: flex; align-items: center; justify-content: center;
gap: 8px;
margin-top: 8px;
}
.ep-cz-loot-rule span {
flex: 0 1 90px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,162,74,0.35), transparent);
}
.ep-cz-loot-diamond {
width: 5px; height: 5px;
background: linear-gradient(135deg, #c9a24a, #8a6a2a);
transform: rotate(45deg);
opacity: 0.6;
}
.ep-cz-loot-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: 10px;
margin: 0 auto;
max-width: 400px;
}
/* Single-item loot: center it and make it more prominent */
.ep-cz-loot-grid:has(.ep-cz-loot-item:only-child) {
grid-template-columns: minmax(140px, 200px);
justify-content: center;
}
.ep-cz-loot-item {
position: relative;
background: var(--iw-field);
border: 1px solid var(--iw-edge);
border-radius: 4px;
padding: 10px 6px 8px;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ep-cz-loot-item:hover {
border-color: var(--iw-accent);
background: var(--iw-tile-hover);
box-shadow: 0 0 8px var(--iw-glow);
}
/* Shine sweep — hidden (D-style cleanup) */
.ep-cz-loot-item-shine { display: none; }
.ep-cz-loot-item-icon {
position: relative;
width: 52px; height: 52px;
margin: 0 auto 6px;
display: flex; align-items: center; justify-content: center;
}
.ep-cz-loot-item-bg { display: none; }
.ep-cz-loot-item-icon img {
position: relative; z-index: 1;
width: 40px; height: 40px; image-rendering: pixelated;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
}
.ep-cz-loot-item-qty {
position: absolute;
right: 2px; bottom: 2px;
z-index: 2;
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 700;
color: #FFD700;
padding: 0 2px;
background: none;
border: none;
border-radius: 0;
text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 1px 0 #000, 0 0 8px rgba(255,215,0,0.4);
box-shadow: none;
}
.ep-cz-loot-item-name {
font-size: 12px; font-weight: 600;
color: #F5F0E0;
line-height: 1.25;
min-height: 2.5em;
padding: 0 2px;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.ep-cz-loot-item-sub {
margin-top: 4px;
font-family: 'Lexend', sans-serif;
font-size: 9px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--iw-accent-soft);
}
.ep-cz-loot-ok {
position: relative;
z-index: 2;
margin: 16px auto 2px;
display: block;
padding: 7px 24px;
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 600;
color: #F5F0E0;
background: linear-gradient(180deg, #4a4238, #3a342c);
border: 1px solid #000;
border-radius: 3px;
box-shadow: inset 1px 1px 0 #5d5549, inset -1px -1px 0 #1a1410;
cursor: pointer;
text-shadow: 1px 1px 0 #000;
transition: background 0.1s;
}
.ep-cz-loot-ok:hover {
background: linear-gradient(180deg, #5d5549, #4a4238);
}
.ep-cz-loot-ok:active {
box-shadow: inset -1px -1px 0 #5d5549, inset 1px 1px 0 #1a1410;
}
@media (max-width: 380px) {
.ep-cz-loot-card { width: 94vw; }
.ep-cz-loot-frame { padding: 22px 14px 14px; }
.ep-cz-loot-title { font-size: 20px; letter-spacing: 3px; }
.ep-cz-loot-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.ep-cz-loot-item-icon { width: 52px; height: 52px; }
.ep-cz-loot-item-icon img { width: 38px; height: 38px; }
}
/* ── Tier filter toolbar (gear picker) ──────────────────────────────── */
.ep-cz-loot-filterbar {
position: relative;
z-index: 2;
margin: 4px auto 14px;
max-width: 440px;
padding: 9px 16px 10px;
display: flex;
align-items: center;
gap: 14px;
background: var(--iw-field);
border: 1px solid var(--iw-edge);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,215,0,0.06),
inset 0 0 0 1px rgba(0,0,0,0.35),
inset 0 0 26px rgba(0,0,0,0.35),
0 2px 10px rgba(0,0,0,0.35);
animation: epLootRuleIn 0.55s ease-out both 0.45s;
}
.ep-cz-loot-filterbar::before,
.ep-cz-loot-filterbar::after {
content: "";
position: absolute; top: 50%;
width: 7px; height: 7px;
transform: translateY(-50%) rotate(45deg);
background: var(--iw-accent);
box-shadow: 0 0 6px var(--iw-glow), inset 0 0 0 1px rgba(0,0,0,0.4);
}
.ep-cz-loot-filterbar::before { left: -4px; }
.ep-cz-loot-filterbar::after { right: -4px; }
.ep-cz-loot-filterbar-label {
display: flex; flex-direction: column; gap: 2px;
text-align: left;
flex: 0 0 auto;
min-width: 0;
}
.ep-cz-loot-filterbar-eyebrow {
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 700;
letter-spacing: 2.6px; text-transform: uppercase;
color: var(--iw-accent-soft);
line-height: 1;
}
.ep-cz-loot-filterbar-count {
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 500;
color: rgba(220,200,150,0.72);
letter-spacing: 0.4px;
line-height: 1.2;
}
.ep-cz-loot-filterbar-count b {
color: var(--iw-accent-bright);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════════
FORGE RAIL — minimum-tier slider replacing the old scrolling chips.
Chiseled rail + tick notches + brass medallion thumb with amber
ember fill behind it. Fits any width; works on desktop + mobile.
═══════════════════════════════════════════════════════════════════ */
.ep-cz-tier-rail {
--pos: 0%;
--rail-pad-x: 12px;
position: relative;
flex: 1 1 auto;
min-width: 160px;
max-width: 420px;
height: 44px;
padding: 0 var(--rail-pad-x);
margin-left: auto;
touch-action: none;
user-select: none;
outline: none;
cursor: pointer;
}
.ep-cz-tier-rail:focus-visible {
box-shadow: 0 0 0 2px rgba(255,200,90,0.55);
border-radius: 4px;
}
.ep-cz-tier-rail-track {
position: absolute;
left: var(--rail-pad-x); right: var(--rail-pad-x);
top: 50%;
height: 10px;
transform: translateY(-50%);
background:
linear-gradient(180deg, #050301 0%, #110b06 55%, #080502 100%);
border: 1px solid rgba(201,162,74,0.28);
border-radius: 2px;
box-shadow:
inset 0 1px 2px rgba(0,0,0,0.85),
inset 0 -1px 0 rgba(255,215,0,0.06),
0 1px 0 rgba(201,162,74,0.08);
overflow: hidden;
}
.ep-cz-tier-rail-track::before {
/* faint cross-weave texture inside the rail */
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(90deg, rgba(201,162,74,0.05) 0 1px, transparent 1px 4px),
repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px);
opacity: 0.55;
pointer-events: none;
}
.ep-cz-tier-rail-fill {
position: absolute;
top: 0; bottom: 0; left: 0;
width: calc(var(--pos) + 0%);
background:
linear-gradient(180deg,
rgba(255,225,130,0.9) 0%,
rgba(255,150,40,0.85) 45%,
rgba(180,60,10,0.85) 100%);
box-shadow:
inset 0 1px 0 rgba(255,245,210,0.55),
inset 0 -1px 0 rgba(80,20,0,0.55),
0 0 10px rgba(255,140,40,0.45);
transition: width 0.32s cubic-bezier(0.22, 1.25, 0.36, 1);
}
.ep-cz-tier-rail-fill::after {
/* heat shimmer on the leading edge */
content: "";
position: absolute;
top: -2px; bottom: -2px;
right: -1px; width: 4px;
background: linear-gradient(180deg, rgba(255,245,210,0.85), rgba(255,180,70,0.4));
box-shadow: 0 0 8px rgba(255,170,60,0.8), 0 0 14px rgba(255,120,40,0.55);
border-radius: 1px;
}
.ep-cz-tier-rail-emberline {
/* molten thread above the rail — dark at ends, bright in middle */
position: absolute;
left: var(--rail-pad-x); right: var(--rail-pad-x);
top: calc(50% - 9px);
height: 1px;
background: linear-gradient(90deg,
rgba(255,160,40,0) 0%,
rgba(255,180,60,0.4) 30%,
rgba(255,220,120,0.75) 50%,
rgba(255,180,60,0.4) 70%,
rgba(255,160,40,0) 100%);
filter: blur(0.4px);
opacity: 0.7;
pointer-events: none;
}
.ep-cz-tier-rail-notches {
position: absolute;
left: var(--rail-pad-x); right: var(--rail-pad-x);
top: 0; bottom: 0;
pointer-events: none;
}
.ep-cz-tier-notch {
appearance: none; -webkit-appearance: none;
position: absolute;
left: var(--pos);
top: 50%;
transform: translate(-50%, -50%);
width: 20px; height: 38px;
padding: 0; margin: 0;
background: transparent;
border: 0;
cursor: pointer;
pointer-events: auto;
outline: none;
}
.ep-cz-tier-notch-tick {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2px; height: 14px;
background: linear-gradient(180deg, rgba(201,162,74,0.9), rgba(138,106,42,0.9));
border-radius: 1px;
box-shadow:
0 0 0 1px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,245,200,0.35);
transition: background 0.18s, box-shadow 0.18s, height 0.18s;
}
.ep-cz-tier-notch-label {
position: absolute;
top: calc(50% + 11px);
left: 50%;
transform: translateX(-50%);
font-family: 'Lexend', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(201,162,74,0.52);
white-space: nowrap;
line-height: 1;
transition: color 0.18s, opacity 0.18s, transform 0.18s;
pointer-events: none;
}
.ep-cz-tier-notch:hover .ep-cz-tier-notch-tick {
background: linear-gradient(180deg, #fff2c2, #f1d98b);
height: 18px;
box-shadow:
0 0 0 1px rgba(0,0,0,0.55),
0 0 8px rgba(255,200,90,0.6);
}
.ep-cz-tier-notch:hover .ep-cz-tier-notch-label { color: #f1d98b; }
.ep-cz-tier-notch.is-active .ep-cz-tier-notch-tick {
background: linear-gradient(180deg, #fff2c2 0%, #f1d98b 42%, #c9a24a 100%);
height: 20px;
width: 3px;
box-shadow:
0 0 0 1px rgba(0,0,0,0.6),
0 0 10px rgba(255,200,80,0.85),
0 0 20px rgba(255,120,40,0.55);
}
.ep-cz-tier-notch.is-active .ep-cz-tier-notch-label {
color: #f1d98b;
text-shadow: 0 0 8px rgba(255,180,60,0.5);
}
.ep-cz-tier-rail-thumb {
position: absolute;
top: 50%;
left: var(--pos);
transform: translate(-50%, -50%);
width: 26px; height: 26px;
pointer-events: none;
transition: left 0.34s cubic-bezier(0.22, 1.4, 0.36, 1);
z-index: 2;
}
.ep-cz-tier-rail-thumb-core {
position: absolute; inset: 0;
background:
radial-gradient(circle at 35% 30%, #fff6d0 0%, #f1d98b 35%, #c9a24a 65%, #7a5a22 100%);
border: 1px solid rgba(30,20,6,0.85);
border-radius: 50%;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.65),
inset 0 -2px 3px rgba(80,40,0,0.5),
0 2px 6px rgba(0,0,0,0.75),
0 0 14px rgba(255,170,55,0.5),
0 0 26px rgba(255,110,30,0.28);
}
.ep-cz-tier-rail-thumb-core::after {
/* etched diamond rune in the centre of the medallion */
content: "";
position: absolute;
top: 50%; left: 50%;
width: 7px; height: 7px;
transform: translate(-50%, -50%) rotate(45deg);
background: linear-gradient(135deg, rgba(30,18,4,0.95), rgba(80,48,12,0.65));
box-shadow:
inset 0 1px 0 rgba(255,220,140,0.35),
inset 0 -1px 0 rgba(0,0,0,0.6);
}
.ep-cz-tier-rail-thumb-pulse {
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid rgba(255,200,100,0.45);
pointer-events: none;
animation: epRailThumbPulse 2.4s ease-in-out infinite;
}
@keyframes epRailThumbPulse {
0%,100% { opacity: 0.15; transform: scale(0.94); }
50% { opacity: 0.75; transform: scale(1.08); }
}
.ep-cz-tier-rail-thumb-badge {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 3px 8px 2px;
font-family: 'Lexend', sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #1a140d;
background: linear-gradient(180deg, #fff2c2 0%, #f1d98b 45%, #c9a24a 100%);
border: 1px solid rgba(30,20,6,0.7);
border-radius: 2px;
white-space: nowrap;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(80,40,0,0.45),
0 2px 6px rgba(0,0,0,0.55),
0 0 10px rgba(255,170,55,0.35);
text-shadow: 0 1px 0 rgba(255,245,200,0.45);
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.ep-cz-tier-rail-thumb-badge::after {
/* downward pointer — tiny flag tail */
content: "";
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #c9a24a;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
.ep-cz-tier-rail-thumb.is-igniting .ep-cz-tier-rail-thumb-core {
animation: epRailIgnite 0.5s ease-out;
}
@keyframes epRailIgnite {
0% { box-shadow:
inset 0 1px 0 rgba(255,255,255,0.65),
inset 0 -2px 3px rgba(80,40,0,0.5),
0 2px 6px rgba(0,0,0,0.75),
0 0 14px rgba(255,170,55,0.5),
0 0 26px rgba(255,110,30,0.28); }
45% { box-shadow:
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -2px 3px rgba(80,40,0,0.5),
0 2px 6px rgba(0,0,0,0.75),
0 0 26px rgba(255,210,120,0.95),
0 0 46px rgba(255,150,50,0.7); }
100% { box-shadow:
inset 0 1px 0 rgba(255,255,255,0.65),
inset 0 -2px 3px rgba(80,40,0,0.5),
0 2px 6px rgba(0,0,0,0.75),
0 0 14px rgba(255,170,55,0.5),
0 0 26px rgba(255,110,30,0.28); }
}
/* Items hidden by the tier filter */
.ep-cz-loot-item.is-tier-hidden,
.ep-cz-loot-section-label.is-tier-hidden { display: none !important; }
@media (max-width: 560px) {
.ep-cz-loot-filterbar {
flex-direction: column; align-items: stretch;
gap: 10px; padding: 9px 12px 12px;
}
.ep-cz-loot-filterbar-label {
flex-direction: row; justify-content: space-between; align-items: baseline;
}
.ep-cz-tier-rail {
max-width: none;
margin-left: 0;
height: 48px;
}
.ep-cz-tier-notch-label { font-size: 8px; letter-spacing: 1px; }
/* on narrow widths, hide labels for intermediate notches to avoid overlap
— show only first, last, and active */
.ep-cz-tier-notch:not(.is-active):not(:first-child):not(:last-child)
.ep-cz-tier-notch-label {
opacity: 0;
}
}
@media (max-width: 380px) {
.ep-cz-tier-notch:not(.is-active) .ep-cz-tier-notch-label { opacity: 0; }
}
/* ── Dense variant: many items (clue scrolls, lockboxes) ── */
.ep-cz-loot-card--dense { width: min(94vw, 560px); }
.ep-cz-loot-card--dense .ep-cz-loot-grid {
grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
max-width: 520px;
gap: 8px;
}
.ep-cz-loot-card--dense .ep-cz-loot-item { padding: 10px 6px 8px; }
.ep-cz-loot-card--dense .ep-cz-loot-item-icon { width: 48px; height: 48px; margin-bottom: 6px; }
.ep-cz-loot-card--dense .ep-cz-loot-item-icon img { width: 38px; height: 38px; }
.ep-cz-loot-card--dense .ep-cz-loot-item-name { font-size: 11px; min-height: 2.4em; line-height: 1.2; }
.ep-cz-loot-card--dense .ep-cz-loot-item-qty { font-size: 10px; }
/* ── Unique-drop accent: pulsing gold ring + elevated card ── */
.ep-cz-loot-item--unique {
border-color: rgba(201,162,74,0.25);
}
.ep-cz-loot-item--unique .ep-cz-loot-item-name {
color: #FF981F;
}
.ep-cz-loot-item--unique .ep-cz-loot-item-icon img {
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255,180,60,0.15));
}
.ep-cz-loot-item-unique-glow { display: none; }
/* ── Footer: total value line ── */
.ep-cz-loot-footer {
position: relative; z-index: 2;
margin: 14px auto 0;
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 6px 16px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(201,162,74,0.2);
border-radius: 3px;
animation: epLootOkIn 0.5s ease-out both;
animation-delay: 0.5s;
}
.ep-cz-loot-footer-lbl {
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(201,162,74,0.7);
}
.ep-cz-loot-footer-val {
font-family: 'Lexend', sans-serif;
font-size: 16px; font-weight: 700;
color: #FFD700;
text-shadow: 0 0 8px rgba(255,215,0,0.35);
}
.ep-cz-loot-footer-gp {
font-size: 10px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,215,0,0.6);
}
/* ── Wide variant: multi-section reports (offline, expedition-style) ── */
.ep-cz-loot-card--wide { width: min(94vw, 640px); }
.ep-cz-loot-card--wide .ep-cz-loot-frame { padding: 30px 26px 20px; text-align: left; }
.ep-cz-loot-card--wide .ep-cz-loot-header { text-align: center; margin-bottom: 14px; }
.ep-cz-loot-subtitle {
font-family: 'Young Serif', 'IBM Plex Serif', serif;
font-size: 11px; font-style: italic;
color: rgba(201,162,74,0.7);
margin-top: 6px;
text-align: center;
}
/* Section group inside the report frame */
.ep-cz-report { position: relative; z-index: 2; }
.ep-cz-report-sec { margin-bottom: 16px; animation: epReportSecIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ep-cz-report-sec:last-child { margin-bottom: 4px; }
.ep-cz-report-sec:nth-child(1) { animation-delay: 0.35s; }
.ep-cz-report-sec:nth-child(2) { animation-delay: 0.45s; }
.ep-cz-report-sec:nth-child(3) { animation-delay: 0.55s; }
.ep-cz-report-sec:nth-child(4) { animation-delay: 0.65s; }
.ep-cz-report-sec:nth-child(5) { animation-delay: 0.75s; }
.ep-cz-report-sec:nth-child(6) { animation-delay: 0.85s; }
.ep-cz-report-sec:nth-child(n+7) { animation-delay: 0.95s; }
@keyframes epReportSecIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.ep-cz-report-hd {
display: flex; align-items: center; gap: 10px;
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 600;
letter-spacing: 0.28em; text-transform: uppercase;
color: rgba(201,162,74,0.85);
margin-bottom: 8px;
}
.ep-cz-report-hd::before, .ep-cz-report-hd::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,162,74,0.25), transparent);
}
.ep-cz-report-hd .c {
font-size: 9px;
color: rgba(201,162,74,0.5);
letter-spacing: 0.18em;
margin-left: 4px;
}
/* Simple row: icon · label · value */
.ep-cz-report-row {
display: grid;
grid-template-columns: calc(var(--iw-icon-row) + 2px) 1fr auto;
gap: 10px; align-items: center;
padding: 5px 6px;
border-radius: 2px;
font-size: 12px;
color: #F5F0E0;
}
.ep-cz-report-row:nth-child(odd) { background: rgba(255,215,0,0.025); }
.ep-cz-report-row img { width: var(--iw-icon-row); height: var(--iw-icon-row); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.ep-cz-report-row .lbl { color: #F5F0E0; }
.ep-cz-report-row .val {
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 600;
color: #FFD38A;
letter-spacing: 0.04em;
}
.ep-cz-report-row.xp .val { color: #9fe07a; }
.ep-cz-report-row.food .val { color: #ff8080; }
.ep-cz-report-row.gold .val { color: #FFD700; }
/* Level-up: highlighted row with gold background + burst */
.ep-cz-report-lvl {
display: grid;
grid-template-columns: calc(var(--iw-icon-row) + 2px) 1fr auto;
gap: 12px; align-items: center;
padding: 8px 12px;
background:
linear-gradient(90deg, rgba(255,215,0,0.14), rgba(255,152,31,0.05) 70%, transparent),
rgba(255,215,0,0.03);
border: 1px solid rgba(255,215,0,0.22);
border-left-width: 3px;
border-left-color: rgba(255,215,0,0.65);
margin-bottom: 4px;
position: relative;
overflow: hidden;
}
.ep-cz-report-lvl::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 0% 50%, rgba(255,215,0,0.2), transparent 40%);
pointer-events: none;
}
.ep-cz-report-lvl img { width: var(--iw-icon-row); height: var(--iw-icon-row); position: relative; z-index: 1; filter: drop-shadow(0 0 4px rgba(255,215,0,0.3)); }
.ep-cz-report-lvl .lbl {
font-size: 12px; color: #FFE69A;
position: relative; z-index: 1;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.ep-cz-report-lvl .val {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 14px;
color: #FFD700;
letter-spacing: 0.04em;
position: relative; z-index: 1;
text-shadow: 0 0 10px rgba(255,215,0,0.5);
}
/* Quest + farming rows */
.ep-cz-report-quest,
.ep-cz-report-farm {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px; align-items: center;
padding: 5px 6px;
font-size: 12px;
}
.ep-cz-report-quest { color: #c8f0a8; }
.ep-cz-report-farm { color: #d0f0b4; }
.ep-cz-report-quest::before { content: '✓'; color: #9fe07a; font-weight: 700; text-shadow: 0 0 6px rgba(159,224,122,0.4); text-align: center; }
.ep-cz-report-farm::before { content: '✦'; color: #9fe07a; text-shadow: 0 0 6px rgba(159,224,122,0.4); text-align: center; }
/* Items grid in wide card: left-aligned, not centered */
.ep-cz-loot-card--wide .ep-cz-loot-grid { max-width: none; margin: 0; }
/* ── Gear picker variant: list layout, clickable rows, scrollable, no shine ── */
.ep-cz-loot-card--no-shine .ep-cz-loot-item-shine { display: none !important; }
.ep-cz-loot-card--quick { animation: epLootEnter 0.2s ease-out both !important; }
.ep-cz-loot-grid--list {
display: flex;
flex-direction: column;
gap: 6px;
max-width: none;
}
/* Equipment slot picker (PC): wide rows flow into up to 3 columns by screen
size. Cells keep their current wide/clean look — only the flow changes. */
@media (min-width: 900px) {
#equip-slot-picker .ep-cz-loot-card { width: min(92vw, 780px); }
#equip-slot-picker .ep-cz-loot-grid--list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
#equip-slot-picker .ep-cz-loot-section-label { grid-column: 1 / -1; }
}
@media (min-width: 1300px) {
#equip-slot-picker .ep-cz-loot-card { width: min(92vw, 1120px); }
#equip-slot-picker .ep-cz-loot-grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ep-cz-loot-card--dense .ep-cz-loot-grid--list { max-width: none; }
.ep-cz-loot-grid--list .ep-cz-loot-item {
display: grid;
grid-template-columns: 52px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 12px 8px 10px;
text-align: left;
min-height: 60px;
}
.ep-cz-loot-grid--list .ep-cz-loot-item-icon {
width: 52px; height: 52px;
margin: 0;
flex-shrink: 0;
}
.ep-cz-loot-grid--list .ep-cz-loot-item-icon img { width: 40px; height: 40px; }
.ep-cz-loot-grid--list .ep-cz-loot-item-name {
min-height: 0;
font-size: 13px;
line-height: 1.25;
text-align: left;
margin: 0;
white-space: normal;
align-self: center;
}
.ep-cz-loot-grid--list .ep-cz-loot-item-sub {
font-size: 10px;
color: var(--iw-accent-soft);
margin-left: 6px;
}
.ep-cz-loot-grid--list .ep-cz-loot-item-trailing {
font-size: 10px;
color: var(--iw-accent-soft); opacity: .85;
text-align: right;
letter-spacing: 0.5px;
justify-self: end;
}
/* Scrollable grid (used when maxHeight is set) */
.ep-cz-loot-grid--scroll {
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(201,162,74,0.5) rgba(0,0,0,0.3);
}
.ep-cz-loot-grid--scroll::-webkit-scrollbar { width: 8px; }
.ep-cz-loot-grid--scroll::-webkit-scrollbar-track {
background: rgba(0,0,0,0.35);
border-radius: 4px;
}
.ep-cz-loot-grid--scroll::-webkit-scrollbar-thumb {
background: var(--iw-accent);
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.4);
}
.ep-cz-loot-grid--scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(255,200,100,0.9), rgba(150,115,50,0.9));
}
/* Clickable items */
.ep-cz-loot-item[role="button"] {
cursor: pointer;
transition: transform 0.12s ease-out, border-color 0.12s ease-out, background 0.12s ease-out, box-shadow 0.12s ease-out;
}
.ep-cz-loot-item[role="button"]:hover {
border-color: rgba(255, 215, 120, 0.75);
background: linear-gradient(180deg, rgba(255,200,80,0.14), rgba(60,48,28,0.55));
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 18px rgba(255,180,60,0.18);
}
.ep-cz-loot-item[role="button"]:active {
transform: translateY(0);
filter: brightness(0.92);
}
.ep-cz-loot-item[role="button"]:focus-visible {
outline: none;
border-color: #ff981f;
box-shadow: 0 0 0 2px rgba(255,152,31,0.35);
}
/* Currently-equipped highlight */
.ep-cz-loot-item--selected {
border-color: var(--iw-accent) !important;
box-shadow: inset 0 0 0 1px var(--iw-accent), 0 0 18px var(--iw-glow);
}
.ep-cz-loot-item--selected::after {
content: 'Equipped';
position: absolute;
top: 4px; right: 6px;
font-size: 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--iw-accent-soft);
font-family: inherit; font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
z-index: 3;
pointer-events: none;
}
/* "None" / empty pseudo-item: single-line, centered, italic */
.ep-cz-loot-grid--list .ep-cz-loot-item--none {
grid-template-columns: 1fr;
justify-items: center;
min-height: 38px;
padding: 10px 12px;
background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(30,22,14,0.35));
}
.ep-cz-loot-item--none .ep-cz-loot-item-name {
color: rgba(200,180,140,0.7);
font-style: italic;
font-size: 12px;
text-align: center;
}
/* Section labels between grouped lists (Shields / Off-hand Weapons) */
.ep-cz-loot-section-label {
position: relative;
z-index: 2;
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(201,162,74,0.75);
text-align: center;
margin: 10px 0 4px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(201,162,74,0.18);
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.ep-cz-loot-section-label:first-child { margin-top: 0; }
/* Gear picker tier key — warm gold eyebrow to match slot theme */
.ep-cz-loot-ov--tier-gear-picker .ep-cz-loot-eyebrow {
color: rgba(201,162,74,0.85);
}
/* Flavor/message line (italic serif) for single-item windows like easter eggs */
.ep-cz-loot-flavor {
position: relative; z-index: 2;
font-family: 'Young Serif', 'IBM Plex Serif', serif;
font-size: 13px;
font-style: italic;
line-height: 1.5;
color: #e8dcc1;
margin: 6px auto 0;
max-width: 320px;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
animation: epLootOkIn 0.5s ease-out both 0.3s;
}
/* Meta key/value list (e.g. rare egg: Found by / Date / Source) */
.ep-cz-loot-meta {
position: relative; z-index: 2;
max-width: 280px;
margin: 14px auto 0;
animation: epLootOkIn 0.5s ease-out both 0.4s;
}
.ep-cz-loot-meta-row {
display: flex;
justify-content: space-between;
padding: 6px 2px;
border-bottom: 1px solid rgba(201,162,74,0.12);
font-size: 12px;
}
.ep-cz-loot-meta-row:last-child { border-bottom: none; }
.ep-cz-loot-meta-row .k {
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(201,162,74,0.7);
align-self: center;
}
.ep-cz-loot-meta-row .v {
color: #FFD700;
font-weight: 500;
text-shadow: 0 0 8px rgba(255,215,0,0.25);
}
/* World-first crown banner under a rare title */
.ep-cz-loot-crown {
position: relative; z-index: 2;
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 0.5em; text-transform: uppercase;
color: #ff7070;
text-shadow: 0 0 12px rgba(255,80,80,0.35), 0 1px 0 rgba(0,0,0,0.5);
margin-top: 4px;
animation: epLootOkIn 0.5s ease-out both 0.25s;
}
/* Compact centered section label — sits between two loot grids inside the
default (centered) loot-window card. Matches the eyebrow typography
so it feels like a continuation of the header, not a new heading. */
.ep-cz-loot-sec-label {
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 600;
letter-spacing: 3px; text-transform: uppercase;
color: rgba(201,162,74,0.75);
text-align: center;
margin: 14px 0 10px;
position: relative; z-index: 2;
}
.ep-cz-loot-sec-label:first-child { margin-top: 2px; }
/* Clickable variant of loot tile — used by choice/select menus (e.g. spine) */
.ep-cz-loot-item--choice {
cursor: pointer;
user-select: none;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ep-cz-loot-item--choice:hover {
transform: translateY(-2px);
border-color: rgba(255,215,0,0.55);
background:
linear-gradient(180deg, rgba(255,215,0,0.10), rgba(0,0,0,0.15)),
#22180f;
box-shadow:
inset 0 1px 0 rgba(255,235,170,0.2),
0 4px 12px rgba(0,0,0,0.55),
0 0 14px rgba(255,181,71,0.22);
}
.ep-cz-loot-item--choice:hover .ep-cz-loot-item-name { color: #FFE69A; text-shadow: 0 0 8px rgba(255,215,0,0.4); }
.ep-cz-loot-item--choice:active { transform: translateY(0); }
.ep-cz-loot-item--choice:focus-visible { outline: 1px solid var(--amber, #ffb547); outline-offset: 3px; }
/* Cap note ("train Agility for more") */
.ep-cz-report-cap-note {
margin-top: 4px;
font-size: 10px;
font-style: italic;
color: rgba(201,162,74,0.6);
text-align: center;
}
/* ── Looting bag section: combat loot teased here, claimed in-game ── */
.ep-cz-bag {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
margin-bottom: 8px;
background:
radial-gradient(circle at 12% 50%, rgba(255,152,31,0.10), transparent 55%),
linear-gradient(90deg, rgba(255,215,0,0.06), rgba(255,215,0,0.015) 70%, transparent);
border: 1px solid rgba(255,215,0,0.18);
border-left-width: 3px;
border-left-color: rgba(255,152,31,0.55);
border-radius: 2px;
}
.ep-cz-bag-icon {
position: relative;
width: calc(var(--iw-icon-tile) + 8px);
height: calc(var(--iw-icon-tile) + 8px);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.ep-cz-bag-icon::before {
content: '';
position: absolute; inset: -6px;
background: radial-gradient(circle, var(--iw-glow) 0%, transparent 65%);
animation: epBagGlow 2.6s ease-in-out infinite;
pointer-events: none;
}
.ep-cz-bag-icon img {
width: var(--iw-icon-tile); height: var(--iw-icon-tile);
position: relative;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
@keyframes epBagGlow {
0%, 100% { opacity: 0.5; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.06); }
}
.ep-cz-bag-info { flex: 1; min-width: 0; }
.ep-cz-bag-line { font-size: 12px; color: #F5F0E0; }
.ep-cz-bag-val {
margin-top: 2px;
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 600;
color: #FFD38A;
letter-spacing: 0.04em;
}
/* Rare tease: never says what — the bag keeps its secret */
.ep-cz-bag-rare {
margin: 2px 0 8px;
text-align: center;
font-style: italic;
font-size: 12px;
background: linear-gradient(100deg,
rgba(201,162,74,0.75) 42%, var(--iw-accent-bright) 50%, rgba(201,162,74,0.75) 58%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: epBagShimmer 3.2s ease-in-out infinite;
}
.ep-cz-bag-rare::before { content: '\2726\00a0\00a0'; }
.ep-cz-bag-rare::after { content: '\00a0\00a0\2726'; }
@keyframes epBagShimmer {
0% { background-position: 120% 0; }
100% { background-position: -30% 0; }
}
.ep-cz-bag-hint { margin-top: 8px; }
/* ── Tier tints: subtle eyebrow + ornament recolor per clue tier ── */
.ep-cz-loot-ov--tier-beginner .ep-cz-loot-eyebrow { color: rgba(210,210,210,0.8); }
.ep-cz-loot-ov--tier-easy .ep-cz-loot-eyebrow { color: rgba(138,229,120,0.85); }
.ep-cz-loot-ov--tier-medium .ep-cz-loot-eyebrow { color: rgba(138,168,255,0.85); }
.ep-cz-loot-ov--tier-hard .ep-cz-loot-eyebrow { color: rgba(255,152,31,0.85); }
.ep-cz-loot-ov--tier-elite .ep-cz-loot-eyebrow { color: rgba(212,116,255,0.85); }
.ep-cz-loot-ov--tier-master .ep-cz-loot-eyebrow { color: rgba(255,90,90,0.9); }
.ep-cz-loot-ov--tier-lockbox .ep-cz-loot-eyebrow { color: rgba(201,162,74,0.85); }
/* ═══ Background Editor — Image Picker ═══ */
.ep-bg-editor {
position: fixed; inset: 0;
z-index: var(--z-takeover);
background: rgba(0,0,0,0.82);
display: flex; align-items: center; justify-content: center;
animation: ep-det-fade 0.15s ease-out;
}
.ep-bg-ed-panel {
width: min(92vw, 420px);
max-height: 80vh;
background: #3C2A22;
border: 2px solid rgba(255,200,80,0.15);
border-radius: 8px;
box-shadow: 0 12px 48px rgba(0,0,0,0.6);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ep-bg-ed-header {
font-family: 'Lexend', sans-serif;
font-size: 13px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(255,200,80,0.6);
padding: 14px 16px 10px;
text-align: center;
flex-shrink: 0;
}
.ep-bg-ed-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 8px 12px 14px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(90,74,56,0.4) transparent;
}
.ep-bg-ed-thumb {
position: relative;
aspect-ratio: 16/9;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
border: 2px solid rgba(255,255,255,0.04);
transition: border-color 0.15s, transform 0.15s;
}
.ep-bg-ed-thumb:hover {
border-color: rgba(255,200,80,0.4);
transform: scale(1.04);
}
.ep-bg-ed-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ep-bg-ed-label {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 2px 4px;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
font-size: 8px; font-weight: 600;
color: rgba(255,255,255,0.7);
text-transform: capitalize;
text-align: center;
}
.ep-bg-ed-close {
position: absolute;
top: 8px; right: 10px;
background: none; border: none;
font-size: 16px; color: rgba(155,139,107,0.5);
cursor: pointer;
}
.ep-bg-ed-close:hover { color: #F5F0E0; }
/* ═══ Background Editor — Position Dragger ═══ */
.ep-bg-pos-editor {
position: fixed; inset: 0;
z-index: var(--z-takeover2);
background: rgba(0,0,0,0.88);
display: flex; align-items: center; justify-content: center;
animation: ep-det-fade 0.15s ease-out;
}
.ep-bg-pos-panel {
width: min(94vw, 500px);
background: #3C2A22;
border: 2px solid rgba(255,200,80,0.15);
border-radius: 8px;
box-shadow: 0 12px 48px rgba(0,0,0,0.6);
overflow: hidden;
}
.ep-bg-pos-header {
font-family: 'Lexend', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(255,200,80,0.6);
padding: 14px 16px 8px;
text-align: center;
}
.ep-bg-pos-preview {
padding: 0 16px 8px;
}
.ep-bg-pos-frame {
position: relative;
width: 100%;
aspect-ratio: 1.8/1;
border-radius: 6px;
overflow: hidden;
border: 2px solid rgba(255,200,80,0.2);
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.ep-bg-pos-frame:active { cursor: grabbing; }
.ep-bg-pos-img {
position: absolute; inset: 0;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
}
.ep-bg-pos-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(60,42,34,0) 0%, rgba(60,42,34,0.65) 55%, rgba(60,42,34,0.95) 82%, #3C2A22 100%);
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.ep-bg-pos-title-preview {
text-align: center;
font-family: 'Lexend', sans-serif;
color: rgba(255,200,80,0.5);
margin-top: -10px;
}
.ep-bg-pos-hint {
font-size: 10px;
color: rgba(155,139,107,0.35);
text-align: center;
padding: 6px 0 2px;
letter-spacing: 1px;
}
.ep-bg-pos-actions {
display: flex;
gap: 8px;
padding: 10px 16px 14px;
justify-content: center;
}
.ep-bg-pos-cancel, .ep-bg-pos-save {
padding: 8px 24px;
font-family: 'Lexend', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: 1px;
border: none; border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
}
.ep-bg-pos-cancel {
background: rgba(255,255,255,0.06);
color: rgba(155,139,107,0.6);
border: 1px solid rgba(255,255,255,0.06);
}
.ep-bg-pos-cancel:hover { background: rgba(255,255,255,0.1); color: #F5F0E0; }
.ep-bg-pos-save {
background: linear-gradient(180deg, #FFD700, #FF981F);
color: #1a1209;
box-shadow: 0 2px 12px rgba(255,152,31,0.3);
}
.ep-bg-pos-save:hover { background: linear-gradient(180deg, #ffe44d, #ffb040); transform: translateY(-1px); }
/* ── Detail overlay ── */
.ep-det-ov {
position: fixed;
inset: 0;
z-index: var(--z-takeover);
background: rgba(0,0,0,0.75);
display: flex;
align-items: center;
justify-content: center;
animation: ep-det-fade 0.15s ease-out;
}
@keyframes ep-det-fade { from { opacity: 0; } to { opacity: 1; } }
.ep-det-card {
width: min(90vw, 320px);
background: #5d5549;
background-image: linear-gradient(180deg, #706358 0%, #5d5549 8%, #524940 92%, #3d3630 100%);
border: 2px solid #000;
border-radius: 4px;
box-shadow: inset 1px 1px 0 #8B7D6B, inset -1px -1px 0 #2A2420, 0 8px 32px rgba(0,0,0,0.6);
padding: 5px;
position: relative;
animation: ep-det-enter 0.2s ease-out;
}
@keyframes ep-det-enter { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.ep-det-inner {
background: linear-gradient(180deg, #332e27, #2e2922);
border: 1px solid #1a1610;
border-radius: 2px;
padding: 18px 16px;
text-align: center;
}
.ep-det-close {
position: absolute;
top: 8px; right: 10px;
background: none; border: none;
font-size: 16px; color: #9B8B6B;
cursor: pointer; z-index: 5;
}
.ep-det-close:hover { color: #F5F0E0; }
.ep-det-day {
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(155,139,107,0.5);
margin-bottom: 12px;
}
.ep-det-icon {
width: 64px; height: 64px;
margin: 0 auto 12px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.ep-det-icon img { width: 42px; height: 42px; filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5)); }
.ep-det-name {
font-size: 15px; font-weight: 700; color: #F5F0E0;
margin-bottom: 6px;
}
.ep-det-type {
display: inline-block;
padding: 2px 10px;
border-radius: 3px;
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
margin-bottom: 12px;
background: rgba(255,152,31,0.08); color: #FF981F;
border: 1px solid rgba(255,152,31,0.12);
}
.ep-det-type.clue { background: rgba(138,168,255,0.08); color: #8aa8ff; border-color: rgba(138,168,255,0.12); }
.ep-det-type.key { background: rgba(60,176,67,0.08); color: #3CB043; border-color: rgba(60,176,67,0.12); }
.ep-det-type.milestone { background: rgba(255,215,0,0.08); color: #FFD700; border-color: rgba(255,215,0,0.12); }
.ep-det-type.crate { background: rgba(200,168,50,0.08); color: #c8a832; border-color: rgba(200,168,50,0.12); }
.ep-det-type.equipment { background: rgba(180,180,180,0.08); color: #b0b0b0; border-color: rgba(180,180,180,0.12); }
.ep-det-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); margin: 0 8px 12px; }
.ep-det-flavor { font-size: 11px; font-style: italic; color: #9B8B6B; line-height: 1.5; padding: 0 4px; margin-bottom: 12px; }
.ep-det-stats { display: flex; justify-content: center; gap: 20px; margin-bottom: 8px; }
.ep-det-stat { text-align: center; }
.ep-det-stat-val { font-family: 'Lexend', sans-serif; font-size: 16px; font-weight: 700; color: #FF981F; }
.ep-det-stat-lbl { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: rgba(155,139,107,0.6); margin-top: 2px; }
.ep-det-loot-hd {
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(155,139,107,0.5); margin: 10px 0 4px;
}
.ep-det-loot { width: 100%; border-collapse: collapse; font-size: 11px; }
.ep-det-loot td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.025); color: rgba(245,240,224,0.65); }
.ep-det-loot td:last-child { text-align: right; font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 10px; color: rgba(155,139,107,0.5); }
/* ── Title in profile hub ── */
.ph-title {
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 600;
color: #FFD700; letter-spacing: 1px;
margin-top: 2px;
}
/* ── Responsive ── */
@media (max-width: 380px) {
.ep-hero { padding: 28px 14px 20px; }
.ep-hero-title { font-size: 32px; letter-spacing: 5px; }
.ep-node { width: 50px; height: 50px; }
.ep-node-ico img { width: 34px; height: 34px; }
.ep-node.current { width: 58px; height: 58px; }
.ep-node.current .ep-node-ico img { width: 40px; height: 40px; }
.ep-cz-icon { width: 76px; height: 76px; }
.ep-cz-icon img { width: 52px; height: 52px; }
.ep-cz-name { font-size: 15px; }
.ep-cz-claim { padding: 12px 36px; font-size: 14px; }
}
@media (min-width: 700px) {
.ep-hero { padding: 48px 20px 32px; }
.ep-hero-title { font-size: 56px; letter-spacing: 10px; }
.ep-node { width: 70px; height: 70px; }
.ep-node-ico img { width: 48px; height: 48px; }
.ep-node.current { width: 78px; height: 78px; }
.ep-node.current .ep-node-ico img { width: 54px; height: 54px; }
.ep-cz-icon { width: 110px; height: 110px; }
.ep-cz-icon img { width: 72px; height: 72px; }
.ep-cz-name { font-size: 22px; }
.ep-cz-claim { padding: 16px 56px; font-size: 18px; }
.ep-cz-glow { width: 260px; height: 260px; }
}
/* ============================================================
ORB RITUAL — Upgrade Orb flow
Visual sibling to .ep-cz-loot-* (clue loot window) and the
combat .ember-* ignite vocabulary. The upgrade experience
is structured as a 4-act ritual:
Act I — Altar: select gear, see chance
Act II — Channel: 2.8s suspenseful build
Act III — Resolve: success / failure / jackpot
Act IV — Outcome: final card, "use another"
============================================================ */
.orb-ov {
position: fixed; inset: 0;
z-index: var(--z-takeover);
display: flex; align-items: center; justify-content: center;
padding: 16px;
background: rgba(6,4,2,0.65);
animation: orb-ov-in 0.25s ease-out both;
overflow: hidden;
}
.orb-ov.orb-ov--channeling {
background: rgba(4,2,0,0.82);
transition: background 0.6s ease-in;
}
.orb-ov.orb-ov--leaving { animation: orb-ov-out 0.2s ease-in forwards; }
@keyframes orb-ov-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes orb-ov-out {
from { opacity: 1; }
to { opacity: 0; }
}
.orb-card {
position: relative;
width: min(94vw, 460px);
max-height: 92vh;
padding: 5px;
background: #5d5549;
background-image: linear-gradient(180deg, #7a6b57 0%, #5d5549 12%, #4a4238 92%, #2f2924 100%);
border: 2px solid #000;
border-radius: 4px;
box-shadow:
inset 1px 1px 0 #a08558,
inset -1px -1px 0 #1a1410,
0 8px 32px rgba(0,0,0,0.7);
animation: epLootEnter 0.25s ease-out both;
}
.orb-card.orb-card--leaving { animation: epLootCollapse 0.2s ease-in forwards; }
/* Jackpot card — subtle warm edge */
.orb-card.is-jackpot {
box-shadow:
inset 1px 1px 0 #a08558,
inset -1px -1px 0 #1a1410,
0 8px 32px rgba(0,0,0,0.7),
0 0 40px rgba(255,120,30,0.15);
}
/* Corner filigree — hidden (D-style cleanup) */
.orb-ornament { display: none; }
.orb-frame {
position: relative;
background:
linear-gradient(180deg, rgba(53,47,39,0.35) 0%, rgba(28,22,18,0.55) 100%),
url('../img/viewport-background-texture.png') center/cover no-repeat #2a241e;
border: 1px solid #120f09;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(255,215,0,0.06), inset 0 0 60px rgba(0,0,0,0.45);
padding: 22px 18px 16px;
text-align: center;
overflow: hidden;
max-height: 88vh;
overflow-y: auto;
}
/* Faint carved cross-weave — mobile chrome rhyme */
.orb-frame::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(45deg, rgba(255,180,60,0.018) 0 2px, transparent 2px 5px),
repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 6px);
mix-blend-mode: overlay;
opacity: 0.55;
z-index: 0;
}
/* Subtle warmth behind content — replaces god rays */
.orb-beams {
position: absolute;
top: -20%; left: 10%; right: 10%;
height: 140%;
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse at 50% 20%, rgba(255,180,60,0.06), transparent 60%);
}
.orb-card.is-channeling .orb-beams { background: radial-gradient(ellipse at 50% 20%, rgba(255,180,60,0.10), transparent 60%); }
.orb-card.is-jackpot .orb-beams { background: radial-gradient(ellipse at 50% 20%, rgba(255,180,60,0.14), transparent 60%); }
/* Picker beams follow the theme (the ritual reveal above keeps its warm glow) */
.orb-card--picker .orb-beams { background: radial-gradient(ellipse at 50% 20%, var(--iw-glow-soft), transparent 60%); }
/* Header */
.orb-header {
position: relative;
z-index: 2;
margin-bottom: 14px;
}
.orb-eyebrow {
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(201,162,74,0.55);
margin-bottom: 4px;
}
.orb-title {
font-family: 'Cinzel', 'Lexend', serif;
font-size: 20px; font-weight: 700;
letter-spacing: 1.5px;
color: #c9a24a;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
line-height: 1.1;
}
.orb-rule {
display: flex; align-items: center; justify-content: center;
gap: 8px;
margin-top: 8px;
}
.orb-rule span {
flex: 0 1 90px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,162,74,0.35), transparent);
}
.orb-rule-diamond {
width: 5px; height: 5px;
background: linear-gradient(135deg, #c9a24a, #8a6a2a);
transform: rotate(45deg);
opacity: 0.6;
}
/* ---------- ALTAR ---------- */
.orb-altar-wrap {
position: relative;
z-index: 2;
margin: 8px auto 10px;
width: 100%;
height: 220px;
display: flex; align-items: flex-end; justify-content: center;
perspective: 800px;
animation: orb-altar-in 0.7s cubic-bezier(0.22, 1.3, 0.36, 1) both 0.3s;
}
@keyframes orb-altar-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
/* Plinth — carved runic disc (perspective ellipse).
Replaced the old brick-stripe pedestal. Now reads as a mystical
altar stone with an etched gold rune ring on top and a soft
stone shadow column underneath. No repeating patterns. */
.orb-altar {
position: relative;
width: 180px; height: 64px;
margin-bottom: 4px;
transform-style: preserve-3d;
}
/* Ellipse TOP — the ritual disc where gear rests.
Warm pooled light at center fades into carved stone at the rim. */
.orb-altar-slab {
position: absolute;
left: 50%; top: 22px;
transform: translateX(-50%);
width: 180px; height: 36px;
border-radius: 50%;
background:
radial-gradient(ellipse at 50% 36%,
rgba(255,210,130,0.55) 0%,
rgba(255,150,60,0.32) 18%,
rgba(160,100,50,0.14) 40%,
rgba(26,18,10,0) 62%),
radial-gradient(ellipse at 50% 50%,
#3b2d1c 0%,
#241a10 42%,
#120b06 76%,
#08050200 100%);
box-shadow:
inset 0 1px 1px rgba(255,215,130,0.35),
inset 0 -4px 10px rgba(0,0,0,0.55),
inset 0 0 28px rgba(0,0,0,0.55),
0 8px 20px rgba(0,0,0,0.75);
}
/* Etched gold rune ring around the disc perimeter (non-repeating filigree). */
.orb-altar-slab::before {
content: "";
position: absolute;
inset: 4px 10px;
border-radius: 50%;
/* Four cardinal filigree marks + subtle conic tint. */
background:
radial-gradient(ellipse at 50% 0%, rgba(255,190,80,0.85) 0, transparent 22%),
radial-gradient(ellipse at 100% 50%, rgba(255,180,70,0.6) 0, transparent 18%),
radial-gradient(ellipse at 50% 100%, rgba(255,190,80,0.85) 0, transparent 22%),
radial-gradient(ellipse at 0% 50%, rgba(255,180,70,0.6) 0, transparent 18%),
conic-gradient(from 0deg,
rgba(255,180,60,0.05) 0deg, rgba(255,180,60,0.22) 45deg,
rgba(255,180,60,0.05) 90deg, rgba(255,180,60,0.22) 135deg,
rgba(255,180,60,0.05) 180deg, rgba(255,180,60,0.22) 225deg,
rgba(255,180,60,0.05) 270deg, rgba(255,180,60,0.22) 315deg,
rgba(255,180,60,0.05) 360deg);
/* Ring-shape the whole thing so it becomes an etched perimeter, not a glow. */
mask: radial-gradient(ellipse at 50% 50%,
transparent 0 56%, #000 62% 92%, transparent 96%);
-webkit-mask: radial-gradient(ellipse at 50% 50%,
transparent 0 56%, #000 62% 92%, transparent 96%);
mix-blend-mode: screen;
opacity: 0.8;
filter: drop-shadow(0 0 3px rgba(255,150,40,0.4));
animation: orb-rune-breathe 4.6s ease-in-out infinite;
}
@keyframes orb-rune-breathe {
0%, 100% { opacity: 0.62; filter: drop-shadow(0 0 3px rgba(255,150,40,0.35)); }
50% { opacity: 0.92; filter: drop-shadow(0 0 8px rgba(255,150,40,0.7)); }
}
/* Thin highlight along the top edge of the disc. */
.orb-altar-slab::after {
content: "";
position: absolute;
left: 10%; right: 10%; top: 1px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%, rgba(255,215,150,0.6) 50%, transparent 100%);
opacity: 0.7;
pointer-events: none;
}
/* Shadow "COLUMN" underneath the disc — a soft dark pool, not a brick box.
Reads as the stone descending into gloom. */
.orb-altar-base {
position: absolute;
left: 50%; bottom: 4px;
transform: translateX(-50%);
width: 164px; height: 36px;
border-radius: 50%;
background:
radial-gradient(ellipse at 50% 20%,
rgba(120,82,44,0.28) 0%,
rgba(30,22,14,0.65) 40%,
rgba(0,0,0,0.9) 75%,
rgba(0,0,0,0.95) 100%);
filter: blur(0.6px);
box-shadow:
0 10px 26px rgba(0,0,0,0.78),
0 2px 6px rgba(0,0,0,0.6);
z-index: -1;
}
/* Subtle inner shade ring for depth — still no stripes. */
.orb-altar-base::before {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 30%,
rgba(255,170,70,0.08) 0%,
transparent 45%);
mix-blend-mode: screen;
}
/* Ember slit — leaks from the front lip of the disc, upward.
Now reads as molten light in a carved crack, not a glowing strip. */
.orb-altar-base::after {
content: "";
position: absolute;
left: 50%; top: -3px;
transform: translateX(-50%);
width: 72px; height: 5px;
background:
radial-gradient(ellipse at 50% 50%,
rgba(255,230,160,1) 0%,
rgba(255,140,40,0.85) 28%,
rgba(255,60,10,0.45) 60%,
transparent 90%);
box-shadow:
0 -6px 16px rgba(255,110,30,0.7),
0 -14px 28px rgba(255,80,20,0.35);
filter: blur(1.2px);
animation: orb-ember-pulse 2.2s ease-in-out infinite;
border-radius: 50%;
}
@keyframes orb-ember-pulse {
0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); }
50% { opacity: 1; transform: translateX(-50%) scaleX(1.18); }
}
/* Gear placed on the altar — rests on the runic disc */
.orb-gear {
position: absolute;
left: 50%; top: -46px;
transform: translateX(-50%);
width: 76px; height: 76px;
display: flex; align-items: center; justify-content: center;
z-index: 3;
filter: drop-shadow(0 8px 10px rgba(0,0,0,0.85)) drop-shadow(0 2px 2px rgba(255,170,60,0.15));
transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.orb-gear-glow {
position: absolute; inset: -18px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,200,90,0.35) 0%, rgba(255,140,30,0.1) 40%, transparent 70%);
filter: blur(6px);
animation: orb-gear-glow 3.6s ease-in-out infinite;
z-index: 0;
}
@keyframes orb-gear-glow {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.orb-gear img {
position: relative; z-index: 2;
width: 58px; height: 58px;
image-rendering: pixelated;
image-rendering: crisp-edges;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8)) drop-shadow(0 0 8px rgba(255,200,80,0.35));
transition: filter 0.35s ease, transform 0.35s ease;
}
.orb-card.is-resolving.is-success .orb-gear img { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 22px rgba(255,230,120,0.95)) brightness(1.25); }
.orb-card.is-resolving.is-jackpot .orb-gear img { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 36px rgba(255,120,40,1)) brightness(1.4); }
.orb-card.is-resolving.is-failure .orb-gear img { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.9)) grayscale(0.4) brightness(0.65); }
.orb-card.is-resolving.is-failure .orb-gear { transform: translateX(-50%) translateY(3px); }
/* Tier badge on gear — carved ingot */
.orb-gear-tier {
position: absolute;
right: -6px; bottom: -4px;
z-index: 4;
min-width: 26px;
padding: 3px 6px 2px;
font-family: 'Cinzel', 'Lexend', serif;
font-size: 12px; font-weight: 700;
letter-spacing: 1px;
color: #fff2c2;
background: linear-gradient(180deg, #3a2a14 0%, #1a1008 100%);
border: 1px solid #000;
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.35),
inset 0 -1px 0 rgba(0,0,0,0.5),
0 2px 4px rgba(0,0,0,0.6),
0 0 10px rgba(255,180,60,0.35);
text-shadow: 0 0 6px rgba(255,215,130,0.55), 0 1px 0 rgba(0,0,0,0.7);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.orb-gear-tier.is-flipping {
animation: orb-tier-flip 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes orb-tier-flip {
0% { transform: rotateX(0deg) scale(1); }
40% { transform: rotateX(180deg) scale(1.35); filter: brightness(2); }
65% { transform: rotateX(360deg) scale(1.4); filter: brightness(1.8); }
100% { transform: rotateX(360deg) scale(1); filter: brightness(1); }
}
.orb-gear-tier.is-flipping.is-jackpot {
animation: orb-tier-flip-jackpot 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes orb-tier-flip-jackpot {
0% { transform: rotateX(0deg) scale(1); }
35% { transform: rotateX(180deg) scale(1.8); filter: brightness(2.4); }
55% { transform: rotateX(360deg) scale(2); filter: brightness(2); }
80% { transform: rotateX(540deg) scale(1.5); filter: brightness(1.5); }
100% { transform: rotateX(720deg) scale(1); filter: brightness(1); }
}
/* Floating orb above gear */
.orb-float {
position: absolute;
left: 50%; top: -120px;
transform: translateX(-50%);
width: 64px; height: 64px;
z-index: 5;
pointer-events: none;
animation: orb-hover 3.5s ease-in-out infinite;
transition: top 0.85s cubic-bezier(0.22, 1.4, 0.36, 1), opacity 0.3s ease;
}
@keyframes orb-hover {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
.orb-float-inner {
position: relative;
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
.orb-float-inner img {
position: relative; z-index: 3;
width: 54px; height: 54px;
filter:
drop-shadow(0 0 12px rgba(255,170,60,0.85))
drop-shadow(0 0 24px rgba(255,110,30,0.55))
drop-shadow(0 2px 3px rgba(0,0,0,0.7));
animation: orb-breathe 2.4s ease-in-out infinite;
}
@keyframes orb-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.orb-float-halo {
position: absolute;
left: 50%; top: 50%;
width: 120%; height: 120%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255,180,70,0.45) 0%, rgba(255,120,30,0.25) 40%, transparent 70%);
filter: blur(4px);
z-index: 1;
animation: orb-halo-pulse 2s ease-in-out infinite;
}
@keyframes orb-halo-pulse {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
}
/* Orb descends during channel */
.orb-card.is-channeling .orb-float {
top: -60px;
animation: orb-hover 1.2s ease-in-out infinite;
}
.orb-card.is-channeling .orb-float-inner img {
filter:
drop-shadow(0 0 20px rgba(255,200,80,1))
drop-shadow(0 0 40px rgba(255,120,30,0.9))
drop-shadow(0 0 80px rgba(255,60,10,0.7));
animation: orb-breathe 0.7s ease-in-out infinite;
}
.orb-card.is-resolving .orb-float { opacity: 0; top: -20px; }
/* Rune circle — appears during channel */
.orb-rune-circle {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 240px; height: 240px;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.orb-card.is-channeling .orb-rune-circle {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.orb-rune-ring {
position: absolute; inset: 0;
border-radius: 50%;
border: 1px solid rgba(255,170,60,0.5);
box-shadow: 0 0 18px rgba(255,120,30,0.35), inset 0 0 18px rgba(255,120,30,0.25);
}
.orb-rune-ring--2 {
inset: 16px;
border: 1px dashed rgba(255,200,90,0.6);
animation: orb-ring-cw 6s linear infinite;
}
.orb-rune-ring--3 {
inset: 36px;
border: 1px solid rgba(255,140,40,0.55);
animation: orb-ring-ccw 4s linear infinite;
}
.orb-rune-ring--glyphs {
inset: 2px;
border: none;
background: conic-gradient(from 0deg,
transparent 0deg, rgba(255,180,60,0.7) 8deg, transparent 14deg,
transparent 75deg, rgba(255,180,60,0.7) 83deg, transparent 89deg,
transparent 150deg, rgba(255,180,60,0.7) 158deg, transparent 164deg,
transparent 225deg, rgba(255,180,60,0.7) 233deg, transparent 239deg,
transparent 300deg, rgba(255,180,60,0.7) 308deg, transparent 314deg);
mask: radial-gradient(circle, transparent 0 44%, #000 45% 49%, transparent 50%);
-webkit-mask: radial-gradient(circle, transparent 0 44%, #000 45% 49%, transparent 50%);
animation: orb-ring-cw 14s linear infinite;
filter: drop-shadow(0 0 10px rgba(255,140,30,0.6));
}
@keyframes orb-ring-cw { to { transform: rotate(360deg); } }
@keyframes orb-ring-ccw { to { transform: rotate(-360deg); } }
/* Energy beam from orb to gear during channel */
.orb-beam {
position: absolute;
left: 50%; top: 28px;
transform: translateX(-50%);
width: 4px; height: 0;
background: linear-gradient(180deg,
rgba(255,255,210,1) 0%,
rgba(255,190,90,0.95) 35%,
rgba(255,130,40,0.8) 70%,
rgba(255,60,10,0.3) 100%);
box-shadow:
0 0 12px rgba(255,170,60,0.85),
0 0 22px rgba(255,120,30,0.65);
z-index: 4;
opacity: 0;
filter: blur(0.5px);
}
.orb-card.is-channeling .orb-beam {
animation: orb-beam-grow 0.55s ease-out 0.35s both, orb-beam-flicker 0.08s linear infinite 0.9s;
}
@keyframes orb-beam-grow {
from { height: 0; opacity: 0; width: 1px; }
to { height: 80px; opacity: 1; width: 4px; }
}
@keyframes orb-beam-flicker {
0%, 100% { opacity: 0.92; width: 4px; }
50% { opacity: 1; width: 5px; }
}
/* Orbital particles */
.orb-particle {
position: absolute;
left: 50%; top: 50%;
width: 4px; height: 4px;
border-radius: 50%;
background: radial-gradient(circle, #fff6c8 0%, #ffb050 45%, rgba(255,80,20,0.4) 80%, transparent 100%);
box-shadow: 0 0 6px rgba(255,170,60,0.85), 0 0 12px rgba(255,120,30,0.55);
opacity: 0;
pointer-events: none;
z-index: 4;
}
.orb-card.is-channeling .orb-particle {
animation: orb-particle-orbit var(--dur, 1.6s) linear infinite var(--delay, 0s);
}
@keyframes orb-particle-orbit {
0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateX(var(--r, 70px)) scale(0.4); }
12% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) rotate(720deg) translateX(calc(var(--r, 70px) * 0.15)) scale(0.1); }
}
/* Shake build-up during late channel */
.orb-card.is-quaking .orb-altar-wrap {
animation: orb-quake 0.22s ease-in-out infinite;
}
@keyframes orb-quake {
0%, 100% { transform: translate(0, 0); }
20% { transform: translate(-2px, 1px); }
40% { transform: translate(2px, -1px); }
60% { transform: translate(-1px, -2px); }
80% { transform: translate(1px, 2px); }
}
/* ---------- READOUT (tier + chance) ---------- */
.orb-readout {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 4px auto 14px;
animation: orb-readout-in 0.6s ease-out both 0.45s;
}
@keyframes orb-readout-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.orb-tier-line {
display: flex; align-items: center; justify-content: center;
gap: 12px;
}
.orb-tier-chip {
position: relative;
padding: 6px 12px 5px;
font-family: 'Cinzel', 'Lexend', serif;
font-size: 14px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: #f1d98b;
background: linear-gradient(180deg, rgba(30,24,18,0.92) 0%, rgba(14,10,8,0.92) 100%);
border: 1px solid rgba(201,162,74,0.45);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.18),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 2px 4px rgba(0,0,0,0.45);
text-shadow: 0 0 6px rgba(255,200,90,0.35), 0 1px 0 rgba(0,0,0,0.7);
}
.orb-tier-chip--new {
color: #1a140d;
background: linear-gradient(180deg, #fff2c2 0%, #f1d98b 42%, #c9a24a 100%);
border-color: rgba(255,215,0,0.7);
text-shadow: 0 1px 0 rgba(255,245,200,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(80,50,10,0.45),
0 0 12px rgba(255,170,55,0.6),
0 0 26px rgba(255,110,30,0.28);
}
.orb-tier-arrow {
font-family: 'Cinzel', serif;
font-size: 18px;
color: rgba(255,180,60,0.75);
filter: drop-shadow(0 0 6px rgba(255,120,30,0.5));
animation: orb-arrow-pulse 1.6s ease-in-out infinite;
}
@keyframes orb-arrow-pulse {
0%, 100% { opacity: 0.6; transform: translateX(0); }
50% { opacity: 1; transform: translateX(3px); }
}
/* Chance % — the hype number */
.orb-chance-wrap {
display: flex; flex-direction: column; align-items: center;
gap: 2px;
}
.orb-chance-label {
font-family: 'Lexend', sans-serif;
font-size: 9.5px; font-weight: 600;
letter-spacing: 3.5px; text-transform: uppercase;
color: rgba(201,162,74,0.75);
}
.orb-chance {
font-family: 'Cinzel', serif;
font-size: 44px; font-weight: 700;
letter-spacing: 2px;
line-height: 1;
color: #c9a24a;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.orb-chance sup, .orb-chance .orb-chance-pct {
font-size: 20px;
letter-spacing: 0;
margin-left: 2px;
vertical-align: super;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0.8;
}
.orb-chance--rare {
color: #FF981F;
}
.orb-chance--jackpot {
color: #ff6a1a;
}
.orb-item-name {
font-family: 'Lexend', sans-serif;
font-size: 12px; font-weight: 500;
letter-spacing: 1.5px;
color: #f1d98b;
text-transform: uppercase;
text-shadow: 0 1px 1px rgba(0,0,0,0.7);
max-width: 280px;
line-height: 1.2;
}
.orb-warn {
margin-top: 2px;
font-family: 'Lexend', sans-serif;
font-size: 9.5px; font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(180,150,110,0.7);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
/* ---------- STAT PREVIEW: current vs awakened ---------- */
.orb-stat-preview {
width: min(340px, 92%);
margin: 2px auto 2px;
animation: orb-stat-preview-in 0.6s ease-out both 0.5s;
}
@keyframes orb-stat-preview-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.orb-stat-preview-frame {
position: relative;
padding: 10px 14px 12px;
background:
radial-gradient(ellipse at 50% 0%, rgba(201,162,74,0.10) 0%, transparent 60%),
linear-gradient(180deg, rgba(20,14,10,0.92) 0%, rgba(10,7,5,0.96) 100%);
border: 1px solid rgba(201,162,74,0.28);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.12),
inset 0 -1px 0 rgba(0,0,0,0.5),
inset 0 0 30px rgba(0,0,0,0.55),
0 2px 8px rgba(0,0,0,0.5);
}
.orb-stat-preview-frame::before {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(201,162,74,0.10);
border-radius: 2px;
pointer-events: none;
}
/* Corner gold flourishes */
.orb-stat-preview-corner {
position: absolute;
width: 9px; height: 9px;
border: 1px solid rgba(241,217,139,0.55);
pointer-events: none;
filter: drop-shadow(0 0 3px rgba(255,180,60,0.35));
}
.orb-stat-preview-corner--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.orb-stat-preview-corner--tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.orb-stat-preview-corner--bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.orb-stat-preview-corner--br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.orb-stat-preview-header {
display: flex; align-items: center; justify-content: center;
gap: 10px;
margin-bottom: 8px;
}
.orb-stat-preview-sigil {
width: 46px; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(201,162,74,0.15) 20%,
rgba(241,217,139,0.85) 50%,
rgba(201,162,74,0.15) 80%,
transparent 100%);
position: relative;
}
.orb-stat-preview-sigil::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 4px; height: 4px;
transform: translate(-50%,-50%) rotate(45deg);
background: linear-gradient(180deg, #f1d98b 0%, #c9a24a 100%);
box-shadow: 0 0 6px rgba(255,180,60,0.6);
}
.orb-stat-preview-title {
font-family: 'Cinzel', 'Lexend', serif;
font-size: 10.5px; font-weight: 700;
letter-spacing: 3px; text-transform: uppercase;
color: #c9a24a;
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
white-space: nowrap;
}
.orb-stat-preview-cols {
display: grid;
grid-template-columns: 1fr 112px 52px;
align-items: center;
padding: 0 2px 5px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(201,162,74,0.14);
}
.orb-stat-preview-col-head {
font-family: 'Lexend', sans-serif;
font-size: 8px; font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
text-align: center;
color: rgba(180,150,110,0.55);
}
.orb-stat-preview-col-head--now { grid-column: 2; text-align: center; padding-left: 0; }
.orb-stat-preview-col-head--next { grid-column: 3; text-align: right; color: rgba(255,200,90,0.75); text-shadow: 0 0 6px rgba(255,180,60,0.25); }
.orb-stat-rows {
display: flex;
flex-direction: column;
gap: 2px;
}
.orb-stat-row {
display: grid;
grid-template-columns: 1fr 112px 52px;
align-items: center;
padding: 4px 2px 3px;
position: relative;
opacity: 0;
animation: orb-stat-row-in 0.45s ease-out both var(--d, 0.5s);
}
@keyframes orb-stat-row-in {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: none; }
}
.orb-stat-row::after {
content: "";
position: absolute;
left: 6%; right: 6%; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(201,162,74,0.15) 50%, transparent 100%);
}
.orb-stat-row:last-child::after { display: none; }
.orb-stat-label {
font-family: 'Lexend', sans-serif;
font-size: 10.5px; font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(205,175,125,0.82);
text-shadow: 0 1px 0 rgba(0,0,0,0.55);
white-space: nowrap;
}
.orb-stat-values {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Cinzel', serif;
font-variant-numeric: tabular-nums;
}
.orb-stat-cur {
min-width: 28px;
text-align: right;
font-size: 13px;
font-weight: 600;
color: rgba(180,150,110,0.82);
text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}
.orb-stat-arrow {
font-family: 'Cinzel', serif;
font-size: 11px;
color: rgba(255,180,60,0.7);
filter: drop-shadow(0 0 4px rgba(255,120,30,0.45));
animation: orb-stat-arrow-pulse 2.4s ease-in-out infinite;
}
@keyframes orb-stat-arrow-pulse {
0%, 100% { opacity: 0.55; transform: translateX(0); }
50% { opacity: 1; transform: translateX(2px); }
}
.orb-stat-next {
min-width: 28px;
text-align: left;
font-size: 15px;
font-weight: 700;
background: linear-gradient(180deg, #fff2c2 0%, #f1d98b 45%, #c9a24a 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
text-shadow: 0 0 12px rgba(255,180,60,0.4);
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.7));
}
.orb-stat-delta {
justify-self: end;
min-width: 40px;
padding: 3px 7px 2px;
border-radius: 2px;
font-family: 'Lexend', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-align: center;
border: 1px solid transparent;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
font-variant-numeric: tabular-nums;
}
.orb-stat-delta.is-up {
color: #1a140d;
background: linear-gradient(180deg, #ffd88a 0%, #ff9a38 55%, #c9621a 100%);
border-color: rgba(255,170,55,0.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(80,40,10,0.45),
0 0 10px rgba(255,140,40,0.4);
text-shadow: 0 1px 0 rgba(255,240,180,0.4);
animation: orb-stat-delta-ember 2.4s ease-in-out infinite;
}
@keyframes orb-stat-delta-ember {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(80,40,10,0.45), 0 0 10px rgba(255,140,40,0.4); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(80,40,10,0.45), 0 0 18px rgba(255,140,40,0.7); }
}
.orb-stat-delta.is-down {
color: #f5c9b8;
background: linear-gradient(180deg, rgba(80,20,20,0.75) 0%, rgba(40,10,10,0.85) 100%);
border-color: rgba(200,80,60,0.45);
box-shadow:
inset 0 1px 0 rgba(255,120,90,0.18),
inset 0 -1px 0 rgba(0,0,0,0.45);
}
.orb-stat-delta.is-flat {
color: rgba(180,150,110,0.55);
background: transparent;
border-color: rgba(201,162,74,0.18);
font-size: 12px;
letter-spacing: 0;
box-shadow: inset 0 0 0 0 transparent;
}
/* Empty/no-scaling fallback variant */
.orb-stat-preview--empty .orb-stat-preview-frame {
padding: 8px 14px 9px;
}
.orb-stat-preview-empty-note {
font-family: 'Lexend', sans-serif;
font-size: 9.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
text-align: center;
color: rgba(180,150,110,0.6);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
margin-top: 2px;
}
/* Hide preview chrome during resolve so outcome gets full stage */
.orb-card.is-resolving .orb-stat-preview {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
}
/* ---------- ACTIONS ---------- */
.orb-actions {
position: relative;
z-index: 2;
display: flex; flex-direction: column; align-items: center;
gap: 10px;
margin-top: 6px;
animation: orb-readout-in 0.55s ease-out both 0.6s;
}
.orb-btn {
position: relative;
display: inline-block;
padding: 11px 36px 10px;
font-family: 'Lexend', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: 3.2px; text-transform: uppercase;
color: #1b1308;
background: linear-gradient(180deg, #f1d98b 0%, #d8b65a 45%, #a07828 100%);
border: 1px solid #000;
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
inset 0 -1px 0 rgba(0,0,0,0.25),
0 2px 0 #4a3412,
0 4px 12px rgba(0,0,0,0.55);
cursor: pointer;
text-shadow: 0 1px 0 rgba(255,240,180,0.5);
transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
user-select: none;
}
.orb-btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 0 rgba(0,0,0,0.25),
0 3px 0 #4a3412,
0 6px 16px rgba(0,0,0,0.6),
0 0 16px rgba(255,215,0,0.4);
}
.orb-btn:active {
transform: translateY(1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #4a3412, 0 2px 6px rgba(0,0,0,0.55);
}
.orb-btn--ghost {
background: linear-gradient(180deg, rgba(30,24,18,0.9) 0%, rgba(14,10,8,0.9) 100%);
color: rgba(201,162,74,0.75);
border: 1px solid rgba(201,162,74,0.25);
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.08),
inset 0 -1px 0 rgba(0,0,0,0.4);
padding: 7px 18px 6px;
font-size: 10px;
letter-spacing: 2.4px;
text-shadow: none;
}
.orb-btn--ghost:hover {
color: #f1d98b;
border-color: rgba(201,162,74,0.55);
filter: none;
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.14),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 0 10px rgba(201,162,74,0.2);
}
.orb-btn--channel {
position: relative;
overflow: hidden;
padding: 14px 40px 13px;
font-size: 14px;
letter-spacing: 4px;
}
.orb-btn--channel::before {
content: "";
position: absolute;
left: -80%;
top: 0; bottom: 0;
width: 50%;
background: linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(255,255,210,0.45) 48%, rgba(255,255,210,0.7) 50%, rgba(255,255,210,0.45) 52%,
transparent 65%, transparent 100%);
animation: orb-btn-shine 2.4s ease-in-out infinite 1s;
pointer-events: none;
}
@keyframes orb-btn-shine {
0% { left: -80%; }
100% { left: 180%; }
}
.orb-btn--channel.is-pressed {
animation: orb-btn-collapse 0.3s ease-in forwards;
}
@keyframes orb-btn-collapse {
from { transform: translateY(0) scale(1); opacity: 1; }
to { transform: translateY(3px) scale(0.92); opacity: 0.3; filter: brightness(2); }
}
/* ---------- RESOLVE: flash, shockwave, verdict ---------- */
.orb-flash {
position: absolute; inset: 0;
z-index: 10;
background: radial-gradient(circle at 50% 48%, rgba(255,250,220,0.95) 0%, rgba(255,180,60,0.5) 28%, rgba(255,90,20,0) 55%);
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
}
.orb-card.is-resolving.is-success .orb-flash { animation: orb-flash 0.6s ease-out both; }
.orb-card.is-resolving.is-jackpot .orb-flash { animation: orb-flash-jackpot 0.9s ease-out both; }
@keyframes orb-flash {
0% { opacity: 0; }
15% { opacity: 1; }
100%{ opacity: 0; }
}
@keyframes orb-flash-jackpot {
0% { opacity: 0; }
10% { opacity: 1; }
35% { opacity: 0.8; }
100%{ opacity: 0; }
}
.orb-shockwave {
position: absolute;
left: 50%; top: 28%;
width: 60px; height: 60px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
border: 2px solid rgba(255,220,150,0.85);
box-shadow: 0 0 24px rgba(255,180,60,0.85), inset 0 0 18px rgba(255,120,30,0.6);
opacity: 0;
pointer-events: none;
z-index: 6;
}
.orb-card.is-resolving.is-success .orb-shockwave { animation: orb-shock 0.9s ease-out both; }
.orb-card.is-resolving.is-jackpot .orb-shockwave {
animation: orb-shock 0.9s ease-out both, orb-shock 1.1s ease-out 0.25s both, orb-shock 1.3s ease-out 0.5s both;
border-color: rgba(255,180,50,0.9);
box-shadow: 0 0 36px rgba(255,120,30,1), inset 0 0 22px rgba(255,60,10,0.7);
}
@keyframes orb-shock {
0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(6); }
}
/* Verdict text — dropped in on resolve */
.orb-verdict {
position: relative;
z-index: 5;
font-family: 'Cinzel', 'Lexend', serif;
font-size: 32px; font-weight: 700;
letter-spacing: 5px; text-transform: uppercase;
line-height: 1;
margin: 8px 0 4px;
opacity: 0;
}
.orb-verdict--success {
background: linear-gradient(180deg, #fff8d0 0%, #ffd06a 40%, #c9811a 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
text-shadow: 0 0 20px rgba(255,190,70,0.65);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
animation: orb-verdict-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.orb-verdict--jackpot {
font-size: 38px;
background: linear-gradient(180deg, #fff2c2 0%, #ff9a38 40%, #ff2a00 90%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
text-shadow: 0 0 28px rgba(255,80,10,0.75);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
animation: orb-verdict-in-big 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both,
orb-verdict-shimmer 2.4s linear infinite 0.9s;
background-size: 300% 100%;
}
.orb-verdict--failure {
background: linear-gradient(180deg, #a89878 0%, #7a6848 50%, #4a3e28 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
text-shadow: 0 0 10px rgba(90,70,45,0.4);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
animation: orb-verdict-in 0.55s ease-out both;
font-size: 26px;
}
@keyframes orb-verdict-in {
0% { opacity: 0; transform: translateY(-14px) scale(0.85); letter-spacing: 14px; }
70% { opacity: 1; transform: translateY(2px) scale(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 5px; }
}
@keyframes orb-verdict-in-big {
0% { opacity: 0; transform: translateY(-18px) scale(0.6); letter-spacing: 18px; }
55% { opacity: 1; transform: translateY(3px) scale(1.08); }
100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 5px; }
}
@keyframes orb-verdict-shimmer {
0% { background-position: -300% center; }
100% { background-position: 300% center; }
}
.orb-verdict-sub {
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 500;
letter-spacing: 2.5px; text-transform: uppercase;
color: rgba(201,162,74,0.82);
margin-bottom: 10px;
opacity: 0;
animation: orb-fade-slide 0.5s ease-out 0.3s both;
}
.orb-verdict-sub.is-failure { color: rgba(150,120,85,0.78); }
.orb-verdict-sub.is-jackpot {
color: #ffa040;
text-shadow: 0 0 12px rgba(255,100,20,0.6);
}
@keyframes orb-fade-slide {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Spark particles on success — centered on the altar/gear area */
.orb-sparks {
position: absolute;
left: 50%; top: 28%;
width: 0; height: 0;
z-index: 6;
pointer-events: none;
}
.orb-spark {
position: absolute;
left: 0; top: 0;
width: 4px; height: 4px;
border-radius: 50%;
background: radial-gradient(circle, #fffbe0 0%, #ffcc60 50%, rgba(255,110,30,0) 100%);
box-shadow: 0 0 8px rgba(255,200,80,0.9);
opacity: 0;
--dx: 0px;
--dy: 0px;
}
.orb-card.is-resolving.is-success .orb-spark,
.orb-card.is-resolving.is-jackpot .orb-spark {
animation: orb-spark-fly var(--dur, 0.9s) ease-out var(--delay, 0s) both;
}
@keyframes orb-spark-fly {
0% { opacity: 0; transform: translate(0,0) scale(0.3); }
12% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.8); }
}
.orb-card.is-jackpot .orb-spark {
background: radial-gradient(circle, #fffbe0 0%, #ff8a20 55%, rgba(255,60,10,0) 100%);
box-shadow: 0 0 12px rgba(255,120,30,1);
}
/* Failure dust particles — centered on the altar/gear area */
.orb-dust {
position: absolute;
left: 50%; top: 28%;
width: 0; height: 0;
z-index: 6;
pointer-events: none;
}
.orb-dust-mote {
position: absolute;
left: 0; top: 0;
width: 3px; height: 3px;
border-radius: 50%;
background: radial-gradient(circle, #c4a77a 0%, rgba(90,70,45,0.3) 70%, transparent 100%);
opacity: 0;
--dx: 0px;
--dy: 40px;
}
.orb-card.is-resolving.is-failure .orb-dust-mote {
animation: orb-dust-fall var(--dur, 1.1s) ease-in var(--delay, 0s) both;
}
@keyframes orb-dust-fall {
0% { opacity: 0; transform: translate(0,0) scale(1); }
15% { opacity: 0.85; }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.5); }
}
/* Orb-shatter ring on fail */
.orb-shatter-ring {
position: absolute;
left: 50%; top: 28%;
width: 40px; height: 40px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
border: 1.5px solid rgba(180,140,90,0.7);
box-shadow: 0 0 10px rgba(120,80,40,0.4);
opacity: 0;
pointer-events: none;
z-index: 5;
}
.orb-card.is-resolving.is-failure .orb-shatter-ring {
animation: orb-shatter 0.7s ease-out both;
}
@keyframes orb-shatter {
0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); border-color: rgba(255,180,80,0.9); }
40% { opacity: 0.6; border-color: rgba(180,140,90,0.7); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}
/* Outcome meta row */
.orb-outcome-meta {
position: relative;
z-index: 3;
display: inline-flex;
align-items: center; gap: 10px;
padding: 8px 14px;
margin: 0 auto 12px;
background: linear-gradient(180deg, rgba(10,8,6,0.72) 0%, rgba(20,16,12,0.48) 100%);
border: 1px solid rgba(201,162,74,0.22);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,215,0,0.06),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 2px 8px rgba(0,0,0,0.35);
opacity: 0;
animation: orb-fade-slide 0.55s ease-out 0.55s both;
}
.orb-outcome-meta-name {
font-family: 'Cinzel', 'Lexend', serif;
font-size: 12px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: #f1d98b;
}
.orb-outcome-meta-sep {
width: 5px; height: 5px;
transform: rotate(45deg);
background: linear-gradient(135deg, #f1d98b, #8a6a2a);
box-shadow: 0 0 5px rgba(255,180,60,0.4);
}
.orb-outcome-meta-tier {
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(220,200,150,0.85);
}
.orb-outcome-meta-tier b { color: #fff2c2; }
/* Orbs-remaining chip (on outcome screen) */
.orb-remaining {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 9px 4px;
margin-top: 8px;
background: linear-gradient(180deg, rgba(30,24,18,0.9) 0%, rgba(14,10,8,0.9) 100%);
border: 1px solid rgba(201,162,74,0.28);
border-radius: 2px;
box-shadow: inset 0 1px 0 rgba(255,215,130,0.1);
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 700;
letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(201,162,74,0.85);
opacity: 0;
animation: orb-fade-slide 0.55s ease-out 0.7s both;
}
.orb-remaining img {
width: 14px; height: 14px;
filter: drop-shadow(0 0 4px rgba(255,170,60,0.8));
}
.orb-remaining b { color: #fff2c2; font-weight: 700; }
/* Mobile */
@media (max-width: 420px) {
.orb-card { width: 96vw; }
.orb-frame { padding: 22px 12px 14px; }
.orb-title { font-size: 20px; letter-spacing: 3px; }
.orb-altar-wrap { height: 200px; }
.orb-altar { width: 160px; height: 54px; }
.orb-altar-slab { width: 160px; height: 32px; top: 18px; }
.orb-altar-base { width: 144px; height: 32px; }
.orb-gear { width: 70px; height: 70px; top: -40px; }
.orb-gear img { width: 52px; height: 52px; }
.orb-float { width: 56px; height: 56px; top: -104px; }
.orb-float-inner img { width: 48px; height: 48px; }
.orb-card.is-channeling .orb-float { top: -52px; }
.orb-rune-circle { width: 200px; height: 200px; }
.orb-chance { font-size: 38px; }
.orb-chance sup { font-size: 17px; }
.orb-verdict { font-size: 26px; letter-spacing: 4px; }
.orb-verdict--jackpot { font-size: 30px; }
.orb-btn--channel { padding: 12px 32px 11px; font-size: 13px; letter-spacing: 3px; }
.orb-tier-chip { font-size: 12px; padding: 5px 10px 4px; }
.orb-picker-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.orb-picker-item { padding: 8px 6px 6px; }
.orb-picker-item-icon { width: 52px; height: 52px; }
.orb-picker-item-icon img { width: 40px; height: 40px; }
.orb-picker-footer { flex-direction: column; gap: 10px; }
}
/* ============================================================
ORB RITUAL — POLISH PASS additions
· Selection-screen orbs chip
· Try-again (failure re-roll) button variant
· Item picker modal (sibling to ritual modal)
============================================================ */
/* Selection-screen orbs-remaining chip — visible during Act I only.
Sits under the CTA row so it's always legible next to the action. */
.orb-selection-orbs {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px 5px;
margin: 6px auto 0;
background: linear-gradient(180deg, rgba(30,24,18,0.92) 0%, rgba(14,10,8,0.92) 100%);
border: 1px solid rgba(201,162,74,0.38);
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.14),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 0 12px rgba(255,140,40,0.15);
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: rgba(201,162,74,0.85);
position: relative;
z-index: 2;
animation: orb-readout-in 0.55s ease-out both 0.55s;
}
.orb-selection-orbs::before,
.orb-selection-orbs::after {
content: "";
position: absolute; top: 50%;
width: 5px; height: 5px;
transform: translateY(-50%) rotate(45deg);
background: linear-gradient(135deg, #f1d98b, #8a6a2a);
box-shadow: 0 0 5px rgba(255,180,60,0.4), inset 0 0 0 1px rgba(0,0,0,0.4);
}
.orb-selection-orbs::before { left: -3px; }
.orb-selection-orbs::after { right: -3px; }
.orb-selection-orbs img {
width: 16px; height: 16px;
filter: drop-shadow(0 0 6px rgba(255,170,60,0.85)) drop-shadow(0 0 12px rgba(255,110,30,0.55));
}
.orb-selection-orbs b {
color: #fff2c2; font-weight: 700;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 6px rgba(255,200,90,0.4);
}
.orb-card.is-channeling .orb-selection-orbs,
.orb-card.is-resolving .orb-selection-orbs {
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
}
/* Try-again button — for failure outcomes with orbs remaining.
Slightly warmer than the standard gold CTA; ember-tinged. */
.orb-btn--retry {
background: linear-gradient(180deg, #ffb870 0%, #e48c2e 45%, #8a4a12 100%);
color: #1a0e04;
text-shadow: 0 1px 0 rgba(255,220,170,0.5);
box-shadow:
inset 0 1px 0 rgba(255,240,200,0.5),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 2px 0 #401c06,
0 4px 14px rgba(0,0,0,0.6),
0 0 18px rgba(255,120,30,0.4);
}
.orb-btn--retry:hover {
filter: brightness(1.08);
box-shadow:
inset 0 1px 0 rgba(255,240,200,0.55),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 3px 0 #401c06,
0 6px 18px rgba(0,0,0,0.65),
0 0 26px rgba(255,120,30,0.6);
}
/* --- Auto-channel floating verdict text --- */
.orb-float-verdict {
position: absolute;
top: 22%;
left: 50%;
z-index: 20;
font-family: 'Cinzel', 'Lexend', serif;
font-weight: 700;
text-transform: uppercase;
pointer-events: none;
line-height: 1;
white-space: nowrap;
}
/* FAIL — slam in, hold, crumble out */
.orb-float-verdict--fail {
font-size: 20px;
letter-spacing: 6px;
background: linear-gradient(180deg, #a89878 0%, #7a6848 50%, #4a3e28 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(90,70,45,0.3));
animation: orb-fv-fail 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes orb-fv-fail {
0% { opacity: 0; transform: translateX(-50%) scale(1.4); letter-spacing: 2px; }
12% { opacity: 1; transform: translateX(-50%) scale(0.95) translateX(3px); }
20% { transform: translateX(-50%) scale(1.02) translateX(-2px); }
28% { transform: translateX(-50%) scale(1); }
65% { opacity: 0.9; transform: translateX(-50%) scale(1); }
100% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(6px); letter-spacing: 8px; }
}
/* SUCCESS — burst in with overshoot, golden glow pulse, graceful fade */
.orb-float-verdict--success {
font-size: 28px;
letter-spacing: 5px;
background: linear-gradient(180deg, #fff8d0 0%, #ffd06a 35%, #c9811a 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
animation: orb-fv-success 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.orb-float-verdict--success::after {
content: "";
position: absolute; inset: -12px -20px;
background: radial-gradient(ellipse, rgba(255,200,80,0.25) 0%, transparent 70%);
border-radius: 50%;
z-index: -1;
animation: orb-fv-success-glow 1.1s ease-out forwards;
}
@keyframes orb-fv-success {
0% { opacity: 0; transform: translateX(-50%) scale(0) translateY(10px); letter-spacing: 16px; }
30% { opacity: 1; transform: translateX(-50%) scale(1.12) translateY(-4px); }
45% { transform: translateX(-50%) scale(0.97) translateY(0); }
55% { transform: translateX(-50%) scale(1.02); letter-spacing: 5px; }
75% { opacity: 1; transform: translateX(-50%) scale(1); }
100% { opacity: 0; transform: translateX(-50%) scale(1.04) translateY(-12px); }
}
@keyframes orb-fv-success-glow {
0% { opacity: 0; transform: scale(0.3); }
30% { opacity: 1; transform: scale(1.2); }
75% { opacity: 0.6; }
100% { opacity: 0; transform: scale(1.5); }
}
/* JACKPOT — massive, fiery, shimmering */
.orb-float-verdict--jackpot {
font-size: 36px;
letter-spacing: 5px;
background: linear-gradient(90deg, #ff2a00, #ff9a38, #fff2c2, #ff9a38, #ff2a00);
background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(255,80,10,0.7));
animation:
orb-fv-jackpot 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
orb-fv-jackpot-shimmer 0.8s linear 0.3s infinite;
}
.orb-float-verdict--jackpot::before {
content: "";
position: absolute; inset: -20px -30px;
background: radial-gradient(ellipse, rgba(255,100,20,0.35) 0%, rgba(255,60,10,0.1) 40%, transparent 70%);
border-radius: 50%;
z-index: -1;
animation: orb-fv-jackpot-vignette 1.6s ease-out forwards;
}
@keyframes orb-fv-jackpot {
0% { opacity: 0; transform: translateX(-50%) scale(0) translateY(10px); letter-spacing: 20px; }
22% { opacity: 1; transform: translateX(-50%) scale(1.2) translateY(-6px); }
35% { transform: translateX(-50%) scale(0.95) translateY(0); }
45% { transform: translateX(-50%) scale(1.06); letter-spacing: 5px; }
70% { opacity: 1; transform: translateX(-50%) scale(1); }
100% { opacity: 0; transform: translateX(-50%) scale(1.08) translateY(-16px); }
}
@keyframes orb-fv-jackpot-shimmer {
0% { background-position: -300% center; }
100% { background-position: 300% center; }
}
@keyframes orb-fv-jackpot-vignette {
0% { opacity: 0; transform: scale(0.5); }
25% { opacity: 1; transform: scale(1.3); }
70% { opacity: 0.5; }
100% { opacity: 0; transform: scale(2); }
}
/* CHAIN TENSION — "the orb surges..." suspense text */
.orb-float-verdict--tension {
font-size: 14px;
letter-spacing: 3px;
font-family: 'Lexend', sans-serif;
font-weight: 600;
color: rgba(120,200,255,0.7);
text-shadow: 0 0 12px rgba(80,180,255,0.4);
animation: orb-fv-tension 1.2s ease-out forwards;
}
@keyframes orb-fv-tension {
0% { opacity: 0; transform: translateX(-50%) scale(0.9); }
15% { opacity: 0.7; transform: translateX(-50%) scale(1); }
60% { opacity: 0.9; transform: translateX(-50%) scale(1); }
85% { opacity: 0.7; }
100% { opacity: 0; transform: translateX(-50%) scale(1.02) translateY(-6px); }
}
/* Card state during chain tension — quake + glow */
.orb-card.is-chain-tension .orb-altar-wrap {
animation: orb-chain-quake 0.18s ease-in-out infinite;
}
.orb-card.is-chain-tension .orb-float-inner img {
animation: orb-chain-orb-pulse 0.6s ease-in-out infinite;
}
.orb-card.is-chain-tension .orb-gear-glow {
animation: orb-chain-gear-surge 0.5s ease-in-out infinite;
}
@keyframes orb-chain-quake {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-2px, 1px); }
50% { transform: translate(2px, -1px); }
75% { transform: translate(-1px, -1px); }
}
@keyframes orb-chain-orb-pulse {
0%, 100% { filter: drop-shadow(0 0 6px rgba(80,200,255,0.6)) brightness(1.1); transform: scale(1); }
50% { filter: drop-shadow(0 0 18px rgba(80,200,255,0.9)) brightness(1.4); transform: scale(1.12); }
}
@keyframes orb-chain-gear-surge {
0%, 100% { opacity: 0.4; box-shadow: 0 0 12px rgba(80,200,255,0.2); }
50% { opacity: 0.8; box-shadow: 0 0 28px rgba(80,200,255,0.5); }
}
/* CHAIN PAYOFF — pure visual effects, no text */
/* White-cyan flash for chain links */
@keyframes orb-chain-flash {
0% { opacity: 0; }
8% { opacity: 1; }
25% { opacity: 0.85; }
100% { opacity: 0; }
}
/* Expanding shockwave ring — cyan-tinted */
.orb-chain-shockwave {
position: absolute;
left: 50%; top: 28%;
width: 50px; height: 50px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
border: 2px solid rgba(120,220,255,0.85);
box-shadow: 0 0 20px rgba(80,200,255,0.7), inset 0 0 14px rgba(60,180,255,0.5);
opacity: 0;
pointer-events: none;
z-index: 8;
animation: orb-chain-shock var(--dur, 0.8s) ease-out both;
}
@keyframes orb-chain-shock {
0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}
/* Card-edge vignette — cyan burn */
.orb-chain-vignette {
position: absolute; inset: 0;
z-index: 9;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 60px rgba(80,200,255,0.35), inset 0 0 120px rgba(40,160,255,0.15);
animation: orb-chain-vig 0.8s ease-out both;
}
.orb-chain-vignette--extreme {
box-shadow: inset 0 0 80px rgba(80,200,255,0.5), inset 0 0 160px rgba(40,160,255,0.25);
animation: orb-chain-vig-extreme 1.0s ease-out both;
}
@keyframes orb-chain-vig {
0% { opacity: 0; }
15% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes orb-chain-vig-extreme {
0% { opacity: 0; }
10% { opacity: 1; }
40% { opacity: 0.7; }
100% { opacity: 0; }
}
/* Chain multiplier counter — grows with each chain link */
.orb-chain-multi {
position: absolute;
top: 16%; left: 50%;
transform: translateX(-50%);
z-index: 22;
font-family: 'Cinzel', 'Lexend', serif;
font-weight: 800;
letter-spacing: 3px;
line-height: 1;
pointer-events: none;
background: linear-gradient(135deg, #40e0ff 0%, #a0f0ff 25%, #f1d98b 50%, #a0f0ff 75%, #40e0ff 100%);
background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6));
animation: orb-chain-multi-shimmer 1.5s linear infinite;
}
.orb-chain-multi.is-bump {
animation:
orb-chain-multi-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
orb-chain-multi-shimmer 1.5s linear infinite;
}
@keyframes orb-chain-multi-bump {
0% { transform: translateX(-50%) scale(0.5); opacity: 0.4; }
40% { transform: translateX(-50%) scale(1.25); opacity: 1; }
70% { transform: translateX(-50%) scale(0.95); }
100% { transform: translateX(-50%) scale(1); }
}
@keyframes orb-chain-multi-shimmer {
0% { background-position: -300% center; }
100% { background-position: 300% center; }
}
.orb-chain-multi.is-fading {
animation: orb-chain-multi-out 0.6s ease-in forwards;
}
@keyframes orb-chain-multi-out {
0% { opacity: 1; transform: translateX(-50%) scale(1); }
100% { opacity: 0; transform: translateX(-50%) scale(1.15) translateY(-10px); }
}
/* Outcome screen: chain multiplier badge */
.orb-outcome-chain-badge {
font-family: 'Cinzel', 'Lexend', serif;
font-size: 42px; font-weight: 800;
letter-spacing: 2px;
line-height: 1;
margin-bottom: 4px;
background: linear-gradient(135deg, #40e0ff 0%, #f1d98b 50%, #40e0ff 100%);
background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)) drop-shadow(0 0 16px rgba(80,200,255,0.5));
opacity: 0;
animation:
orb-chain-badge-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both,
orb-chain-multi-shimmer 2s linear 0.7s infinite;
}
@keyframes orb-chain-badge-in {
0% { opacity: 0; transform: scale(0) translateY(10px); }
50% { opacity: 1; transform: scale(1.15) translateY(-3px); }
100% { opacity: 1; transform: scale(1); }
}
/* Gear glow surge during chain payoff */
.orb-gear-glow.is-chain-surge {
animation: orb-chain-gear-burst 0.6s ease-out both !important;
}
@keyframes orb-chain-gear-burst {
0% { opacity: 0.3; box-shadow: 0 0 8px rgba(80,200,255,0.3); }
20% { opacity: 1; box-shadow: 0 0 40px rgba(80,200,255,0.8), 0 0 80px rgba(60,180,255,0.4); }
100% { opacity: 0.3; box-shadow: 0 0 8px rgba(255,200,80,0.3); }
}
/* Mobile: scale down the verdict text */
@media (max-width: 420px) {
.orb-float-verdict--fail { font-size: 16px; }
.orb-float-verdict--success { font-size: 22px; }
.orb-float-verdict--chain { font-size: 24px; }
.orb-float-verdict--jackpot { font-size: 28px; }
}
/* --- Auto-channel mode pills --- */
.orb-auto-wrap {
display: flex; align-items: center; gap: 4px;
margin-top: 2px;
animation: orb-readout-in 0.45s ease-out both 0.7s;
}
.orb-auto-pill {
padding: 5px 12px 4px;
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 1.8px; text-transform: uppercase;
color: rgba(201,162,74,0.45);
background: linear-gradient(180deg, rgba(20,16,10,0.85) 0%, rgba(10,8,4,0.85) 100%);
border: 1px solid rgba(201,162,74,0.18);
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.orb-auto-pill:hover {
color: rgba(201,162,74,0.7);
border-color: rgba(201,162,74,0.35);
}
.orb-auto-pill.is-active {
color: #1a0e04;
background: linear-gradient(180deg, #f1d98b 0%, #c9a24a 100%);
border-color: rgba(0,0,0,0.3);
box-shadow: 0 0 10px rgba(255,200,80,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
text-shadow: 0 1px 0 rgba(255,240,180,0.4);
}
/* --- Targeted stop conditions (target tier / orb budget) --- */
.orb-auto-targets {
display: flex; align-items: center; gap: 6px; justify-content: center;
margin-top: 6px;
animation: orb-readout-in 0.45s ease-out both 0.78s;
}
.orb-auto-target {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 8px 3px;
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 600;
letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(201,162,74,0.55);
background: linear-gradient(180deg, rgba(20,16,10,0.85) 0%, rgba(10,8,4,0.85) 100%);
border: 1px solid rgba(201,162,74,0.18);
border-radius: 3px;
cursor: text;
}
.orb-auto-target:focus-within {
color: rgba(241,217,139,0.95);
border-color: rgba(201,162,74,0.45);
box-shadow: 0 0 6px rgba(255,200,80,0.18);
}
.orb-auto-target-pre {
opacity: 0.85;
}
.orb-auto-target-input {
width: 38px;
padding: 2px 4px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(201,162,74,0.25);
border-radius: 2px;
color: #f1d98b;
font-family: 'Lexend', sans-serif;
font-size: 11px; font-weight: 700;
text-align: center;
outline: none;
-moz-appearance: textfield;
}
.orb-auto-target-input::-webkit-outer-spin-button,
.orb-auto-target-input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.orb-auto-target-input:focus {
border-color: rgba(241,217,139,0.6);
background: rgba(0,0,0,0.7);
}
/* =================================================
ITEM PICKER — sibling modal to the ritual modal
================================================= */
/* Reuse .orb-ov as the backdrop. The picker sits in its own
.orb-card but gets a slightly wider footprint for the grid. */
.orb-card--picker {
width: min(94vw, 560px);
/* Picker only: adopt the bank-window chrome (the ritual reveal keeps its warm look) */
padding: 0;
background: var(--iw-surface);
border: 1px solid #000;
border-radius: 6px;
box-shadow: inset 0 0 0 1px var(--iw-edge), 0 0 0 2px rgba(0,0,0,.8),
0 14px 40px rgba(0,0,0,.65), 0 0 24px var(--iw-glow-soft);
}
.orb-card--picker .orb-frame {
padding: 18px 16px 14px;
background: none;
border: none;
box-shadow: none;
}
.orb-card--picker .orb-frame::before { display: none; }
.orb-card--picker .orb-title {
font-family: inherit;
font-size: 17px; font-weight: 800; letter-spacing: .5px;
background: var(--iw-text-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: none;
}
.orb-card--picker .orb-eyebrow { color: var(--iw-accent-soft); opacity: .7; }
/* Filter bar — rhymes with .ep-cz-loot-filterbar but orb-namespaced.
With the Signet Matrix replacing the scrolling chip row, the bar now
stacks: label (eyebrow + count) on top, matrix centred below — which
gives the signets the full inner width to wrap into. */
.orb-picker-filter {
position: relative;
z-index: 2;
margin: 2px auto 14px;
max-width: 520px;
padding: 9px 14px 10px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
background: linear-gradient(180deg, rgba(10,8,6,0.72) 0%, rgba(20,16,12,0.48) 100%);
border: 1px solid rgba(201,162,74,0.22);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,215,0,0.06),
inset 0 0 0 1px rgba(0,0,0,0.35),
inset 0 0 26px rgba(0,0,0,0.35),
0 2px 10px rgba(0,0,0,0.35);
animation: epLootRuleIn 0.55s ease-out both 0.4s;
}
.orb-picker-filter .orb-picker-filter-label {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
.orb-picker-filter::before,
.orb-picker-filter::after {
content: "";
position: absolute; top: 50%;
width: 7px; height: 7px;
transform: translateY(-50%) rotate(45deg);
background: linear-gradient(135deg, #f1d98b, #8a6a2a);
box-shadow: 0 0 6px rgba(255,180,60,0.4), inset 0 0 0 1px rgba(0,0,0,0.4);
}
.orb-picker-filter::before { left: -4px; }
.orb-picker-filter::after { right: -4px; }
.orb-picker-filter-label {
display: flex; flex-direction: column; gap: 1px;
text-align: left;
flex: 0 0 auto;
}
.orb-picker-filter-label-eyebrow {
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 700;
letter-spacing: 2.6px; text-transform: uppercase;
color: rgba(201,162,74,0.82);
line-height: 1;
}
.orb-picker-filter-label-count {
font-family: 'Lexend', sans-serif;
font-size: 10px; font-weight: 500;
color: rgba(220,200,150,0.72);
letter-spacing: 0.4px;
line-height: 1.2;
}
.orb-picker-filter-label-count b {
color: #f1d98b;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════════
SLOT SIGNET MATRIX — wraps naturally, no horizontal scroll. Each
signet is a carved niche with a monochrome slot-silhouette glyph
and a compact label. Active: gradient-gold ignited niche.
═══════════════════════════════════════════════════════════════════ */
.orb-sig-matrix {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 6px 6px;
flex: 1 1 auto;
min-width: 0;
padding: 3px 1px 2px;
max-width: 100%;
}
.orb-sig {
appearance: none; -webkit-appearance: none;
position: relative;
flex: 0 0 auto;
width: 58px;
padding: 5px 4px 5px;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;
border: 0;
background: transparent;
color: rgba(201,162,74,0.72);
transition: color 0.18s ease, transform 0.14s ease;
-webkit-tap-highlight-color: transparent;
}
.orb-sig-niche {
position: relative;
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px 6px 3px 3px;
background:
linear-gradient(180deg,
#201912 0%,
#141009 55%,
#0a0705 100%);
border: 1px solid rgba(201,162,74,0.28);
box-shadow:
inset 0 1px 0 rgba(255,215,0,0.06),
inset 0 -1px 0 rgba(0,0,0,0.55),
inset 0 0 10px rgba(0,0,0,0.6),
0 1px 2px rgba(0,0,0,0.55);
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
overflow: hidden;
}
.orb-sig-niche::before {
/* faint cross-weave texture inside the niche */
content: "";
position: absolute; inset: 0;
background:
repeating-linear-gradient(45deg, rgba(201,162,74,0.06) 0 1px, transparent 1px 5px),
repeating-linear-gradient(-45deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 4px);
opacity: 0.6;
pointer-events: none;
}
.orb-sig-niche::after {
/* ember leak from the bottom of the niche — stronger when active */
content: "";
position: absolute;
left: 15%; right: 15%; bottom: -3px;
height: 8px;
background: radial-gradient(ellipse at 50% 100%, rgba(255,140,40,0.5), transparent 75%);
opacity: 0.25;
transition: opacity 0.25s;
pointer-events: none;
}
.orb-sig-glyph {
position: relative;
z-index: 2;
width: 22px; height: 22px;
color: currentColor;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
transition: color 0.2s, filter 0.2s, transform 0.2s;
}
.orb-sig-spark {
position: absolute;
inset: -2px;
border-radius: 7px 7px 4px 4px;
pointer-events: none;
box-shadow: 0 0 0 0 rgba(255,200,100,0);
}
.orb-sig-spark.is-firing {
animation: orbSigSpark 0.55s ease-out;
}
@keyframes orbSigSpark {
0% { box-shadow: 0 0 0 0 rgba(255,200,100,0.9),
0 0 18px 0 rgba(255,140,40,0.8); }
100% { box-shadow: 0 0 0 8px rgba(255,200,100,0),
0 0 28px 6px rgba(255,140,40,0); }
}
.orb-sig-label {
font-family: 'Lexend', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(201,162,74,0.72);
line-height: 1;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.18s;
}
.orb-sig:hover { transform: translateY(-1px); }
.orb-sig:hover .orb-sig-niche {
border-color: rgba(201,162,74,0.55);
box-shadow:
inset 0 1px 0 rgba(255,215,0,0.14),
inset 0 -1px 0 rgba(0,0,0,0.55),
inset 0 0 10px rgba(0,0,0,0.55),
0 2px 6px rgba(0,0,0,0.55),
0 0 10px rgba(255,170,60,0.22);
}
.orb-sig:hover .orb-sig-glyph { color: #f1d98b; }
.orb-sig:hover .orb-sig-label { color: #f1d98b; }
.orb-sig:hover .orb-sig-niche::after { opacity: 0.5; }
.orb-sig:active { transform: translateY(1px); }
.orb-sig.is-active {
color: #1a140d;
}
.orb-sig.is-active .orb-sig-niche {
background: linear-gradient(180deg, #fff2c2 0%, #f1d98b 42%, #c9a24a 100%);
border-color: rgba(255,215,0,0.7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 -1px 0 rgba(80,40,0,0.45),
0 2px 6px rgba(0,0,0,0.55),
0 0 14px rgba(255,170,55,0.6),
0 0 30px rgba(255,110,30,0.28);
transform: translateY(-1px);
}
.orb-sig.is-active .orb-sig-niche::before { opacity: 0.28; }
.orb-sig.is-active .orb-sig-niche::after { opacity: 0.7; }
.orb-sig.is-active .orb-sig-glyph {
color: #1a110a;
filter:
drop-shadow(0 1px 0 rgba(255,245,200,0.6))
drop-shadow(0 0 2px rgba(255,170,55,0.4));
}
.orb-sig.is-active .orb-sig-label {
color: #f1d98b;
text-shadow: 0 0 8px rgba(255,180,60,0.5);
}
.orb-sig.is-active::after {
/* pulsing ring around active signet */
content: "";
position: absolute;
left: 50%; top: 4px;
transform: translateX(-50%);
width: 38px; height: 38px;
border-radius: 7px 7px 4px 4px;
border: 1px solid rgba(255,200,100,0.38);
pointer-events: none;
animation: orbSigActivePulse 2.4s ease-in-out infinite;
}
@keyframes orbSigActivePulse {
0%,100% { opacity: 0.15; transform: translateX(-50%) scale(0.98); }
50% { opacity: 0.7; transform: translateX(-50%) scale(1.1); }
}
@media (max-width: 560px) {
.orb-sig { width: 52px; padding: 4px 3px; }
.orb-sig-niche { width: 30px; height: 30px; }
.orb-sig-glyph { width: 20px; height: 20px; }
.orb-sig-label { font-size: 8.5px; letter-spacing: 1px; }
.orb-sig.is-active::after { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
.orb-sig { width: 48px; }
.orb-sig-niche { width: 28px; height: 28px; }
.orb-sig-glyph { width: 18px; height: 18px; }
.orb-sig-label { font-size: 8px; letter-spacing: 0.8px; }
.orb-sig.is-active::after { width: 32px; height: 32px; }
.orb-sig-matrix { gap: 5px; }
}
/* Item grid */
.orb-picker-grid-wrap {
position: relative;
z-index: 2;
max-height: 46vh;
overflow-y: auto;
padding: 2px 4px 6px;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.orb-picker-grid-wrap::-webkit-scrollbar { width: 6px; }
.orb-picker-grid-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); }
.orb-picker-grid-wrap::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(201,162,74,0.5), rgba(138,106,42,0.5));
border-radius: 3px;
}
.orb-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: 10px;
max-width: 520px;
margin: 0 auto;
}
.orb-picker-item {
position: relative;
padding: 12px 8px 10px;
background: var(--iw-field);
border: 1px solid var(--iw-edge);
border-radius: 4px;
cursor: pointer;
overflow: hidden;
text-align: center;
color: #f5f0e0;
animation: epLootItemIn 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) both;
animation-delay: calc(0.32s + var(--del, 0s));
transition: border-color 0.18s, box-shadow 0.18s;
-webkit-tap-highlight-color: transparent;
}
.orb-picker-item:hover {
border-color: var(--iw-accent);
background: var(--iw-tile-hover);
box-shadow: 0 0 14px var(--iw-glow);
}
.orb-picker-item:focus-visible {
outline: 2px solid rgba(255,200,90,0.8);
outline-offset: 2px;
}
.orb-picker-item:active { transform: translateY(0); }
.orb-picker-item.is-picked {
animation: orb-picker-pick 0.45s ease-in forwards;
}
@keyframes orb-picker-pick {
0% { transform: translateY(-2px) scale(1); filter: brightness(1.1); }
40% { transform: translateY(-6px) scale(1.08); filter: brightness(2); border-color: rgba(255,230,160,1); box-shadow: 0 0 32px rgba(255,170,60,0.8); }
100% { transform: translateY(-2px) scale(0.97); opacity: 0; filter: brightness(1.4); }
}
/* Light sweep across each card on entry (reuse pattern) */
.orb-picker-item-shine { display: none; }
.orb-picker-item-icon {
position: relative;
width: 58px; height: 58px;
margin: 0 auto 6px;
display: flex; align-items: center; justify-content: center;
}
.orb-picker-item-icon::before {
content: "";
position: absolute; inset: 0;
border-radius: 50%;
background: radial-gradient(circle, var(--iw-glow) 0%, var(--iw-glow-soft) 42%, transparent 72%);
filter: blur(2px);
}
.orb-picker-item-icon img {
position: relative; z-index: 1;
width: 40px; height: 40px; image-rendering: pixelated;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(255,200,80,0.3));
}
/* Current tier carved ingot, pinned to icon corner */
.orb-picker-item-tier-badge {
position: absolute;
right: -3px; bottom: -2px;
z-index: 2;
min-width: 22px;
padding: 2px 5px 1px;
font-family: 'Cinzel', 'Lexend', serif;
font-size: 10px; font-weight: 700;
letter-spacing: 0.6px;
color: #fff2c2;
background: linear-gradient(180deg, #3a2a14 0%, #1a1008 100%);
border: 1px solid #000;
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.35),
0 2px 4px rgba(0,0,0,0.6),
0 0 8px rgba(255,180,60,0.28);
text-shadow: 0 0 4px rgba(255,215,130,0.5);
}
/* "Worn" tag for equipped items in the orb picker */
.orb-picker-item-eq-badge {
position: absolute;
left: -3px; top: -2px;
z-index: 2;
padding: 1px 5px;
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #c4f0ff;
background: linear-gradient(180deg, #1a3040 0%, #0c1820 100%);
border: 1px solid #000;
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(150,220,255,0.3),
0 2px 4px rgba(0,0,0,0.6),
0 0 6px rgba(100,180,255,0.25);
text-shadow: 0 0 4px rgba(130,200,255,0.5);
}
.orb-picker-item-name {
font-family: 'Lexend', sans-serif;
font-size: 11.5px; font-weight: 600;
color: #f5f0e0;
line-height: 1.22;
min-height: 2.44em;
padding: 0 2px 2px;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
letter-spacing: 0.2px;
}
.orb-picker-item-meta {
display: flex; align-items: center; justify-content: center;
gap: 6px;
margin-top: 4px;
font-family: 'Lexend', sans-serif;
font-size: 9.5px; font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.orb-picker-item-step {
color: var(--iw-accent-soft);
}
.orb-picker-item-step b { color: var(--iw-accent-bright); font-weight: 700; }
.orb-picker-item-chance {
padding: 2px 6px 1px;
border-radius: 2px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(201,162,74,0.3);
color: #f1d98b;
font-variant-numeric: tabular-nums;
}
.orb-picker-item-chance.is-rare {
color: #ffcc80;
border-color: rgba(255,170,80,0.55);
box-shadow: 0 0 8px rgba(255,140,40,0.3);
}
.orb-picker-item-chance.is-jackpot {
color: #ff7a28;
border-color: rgba(255,100,30,0.7);
box-shadow: 0 0 12px rgba(255,80,20,0.55);
animation: orb-chance-rare 2.2s ease-in-out infinite;
text-shadow: 0 0 8px rgba(255,100,30,0.6);
}
.orb-picker-item.is-filtered-out { display: none; }
/* Empty state */
.orb-picker-empty {
position: relative; z-index: 2;
padding: 44px 20px 46px;
text-align: center;
animation: orb-readout-in 0.6s ease-out both 0.35s;
}
.orb-picker-empty-icon {
width: 64px; height: 64px;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,162,74,0.16) 0%, transparent 65%);
opacity: 0.8;
}
.orb-picker-empty-icon::before {
content: "\2756"; /* ornate four-pointed star */
font-size: 36px;
color: rgba(201,162,74,0.45);
filter: drop-shadow(0 0 8px rgba(255,140,40,0.35));
}
.orb-picker-empty-title {
font-family: 'Cinzel', serif;
font-size: 16px; font-weight: 700;
letter-spacing: 4px; text-transform: uppercase;
background: linear-gradient(180deg, #c9a24a 0%, #8a6a2a 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
margin-bottom: 8px;
}
.orb-picker-empty-sub {
font-family: 'Lexend', sans-serif;
font-size: 11.5px;
color: rgba(180,150,110,0.75);
letter-spacing: 0.3px;
max-width: 320px;
margin: 0 auto;
line-height: 1.5;
}
/* Footer */
.orb-picker-footer {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 12px 6px 2px;
margin-top: 10px;
border-top: 1px solid rgba(201,162,74,0.18);
animation: orb-readout-in 0.55s ease-out both 0.55s;
}
.orb-picker-footer .orb-remaining {
margin-top: 0;
animation: none; /* already faded in by footer */
opacity: 1;
}
/* ============================================================
ORB OF FORTUNE — top bar & equipment-panel inline chips
Clickable pill showing current orb count.
============================================================ */
.topbar-orb-stat {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px;
background: linear-gradient(180deg, rgba(30,24,18,0.65), rgba(14,10,8,0.65));
border: 1px solid rgba(201,162,74,0.35);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.12),
inset 0 -1px 0 rgba(0,0,0,0.4);
cursor: pointer;
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.topbar-orb-stat:hover {
filter: brightness(1.1);
transform: translateY(-1px);
border-color: rgba(255,200,90,0.6);
box-shadow:
inset 0 1px 0 rgba(255,215,130,0.2),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 0 14px rgba(255,170,60,0.35);
}
.topbar-orb-stat:active { transform: translateY(0); }
.topbar-orb-icon {
width: 18px; height: 18px;
filter: drop-shadow(0 0 4px rgba(255,170,60,0.5));
transition: filter 0.25s ease;
vertical-align: middle;
}
.topbar-orb-stat.has-orbs .topbar-orb-icon {
animation: orb-topbar-pulse 2.4s ease-in-out infinite;
}
@keyframes orb-topbar-pulse {
0%, 100% { filter: drop-shadow(0 0 4px rgba(255,170,60,0.55)); }
50% { filter: drop-shadow(0 0 10px rgba(255,120,30,0.95)); }
}
.stat-val.orb {
color: #ffb858;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 6px rgba(255,170,60,0.45);
}
.topbar-orb-stat:not(.has-orbs) {
/* Progressive chrome (UX-18): the Orb counter surfaces only once you own one,
instead of sitting in the topbar as a permanent dim "0" before first acquisition.
Driven by the existing classList.toggle('has-orbs', qty>0) in updateTopBar. */
display: none;
}
.topbar-orb-stat:not(.has-orbs) .stat-val.orb {
color: rgba(201,162,74,0.78);
text-shadow: none;
}
/* === PROGRESSIVE CHROME (UX-18) === */
/* Desktop chat stays hidden for brand-new characters until their first level-up.
The body-class + !important outranks the body.rebrand .chatbox display rules. */
body.chrome-no-chat .chatbox,
body.chrome-no-chat #chatbox-splitter { display: none !important; }
/* Entrance: a brief pop the moment a chrome item first appears (transform/opacity only,
so it composes cleanly with the persistent .chrome-new halo below). */
@keyframes chrome-reveal-pop {
0% { opacity: 0; transform: translateX(-10px) scale(0.8); }
55% { opacity: 1; transform: translateX(0) scale(1.12); }
100% { opacity: 1; transform: none; }
}
.chrome-reveal-pop { animation: chrome-reveal-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
@keyframes chrome-reveal-fade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.chrome-reveal-fade { animation: chrome-reveal-fade 0.5s ease-out both; }
/* "New — not opened yet": a slow ember halo that breathes until the player opens the
item for the first time. Theme-invariant, collision-free (no pseudo-element — the rail
tooltip already owns ::after). */
@keyframes chrome-new-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,170,60,0.16), 0 0 5px 0 rgba(255,152,31,0.26); }
50% { box-shadow: 0 0 0 1px rgba(255,185,80,0.6), 0 0 14px 2px rgba(255,140,40,0.62); }
}
.chrome-new {
animation: chrome-new-pulse 2.1s ease-in-out infinite;
border-radius: 4px;
position: relative; z-index: 1;
}
/* First-open explainer card — carved stone + ember rim, matched to the game's panels. */
.chrome-info-scrim {
position: fixed; inset: 0; z-index: var(--z-system, 800);
background: radial-gradient(ellipse at center, rgba(0,0,0,0.04), rgba(0,0,0,0.34));
animation: chrome-info-scrim-in 0.22s ease both;
}
@keyframes chrome-info-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.chrome-info-pop {
position: fixed; z-index: calc(var(--z-system, 800) + 1);
width: min(288px, calc(100vw - 28px));
filter: drop-shadow(0 14px 30px rgba(0,0,0,0.55));
animation: chrome-info-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes chrome-info-in {
from { opacity: 0; transform: translateY(8px) scale(0.93); }
to { opacity: 1; transform: none; }
}
.chrome-info-card {
position: relative; overflow: hidden;
background: linear-gradient(165deg, #3A2C22, #271B15);
border: 1px solid #000; border-radius: 9px;
box-shadow: inset 1px 1px 0 #5E4438, inset -1px -1px 0 #1E1410,
0 0 0 1px rgba(212,133,74,0.4), 0 0 26px rgba(255,150,45,0.14);
padding: 14px 16px 13px;
}
.chrome-info-card::before {
content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,175,75,0.9), transparent);
}
.chrome-info-head {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--gold, #D4854A);
text-shadow: 0 0 11px rgba(255,160,50,0.4), 0 1px 0 #000;
margin-bottom: 7px;
}
.chrome-info-icon { font-size: 13px; color: #ffce7a; filter: drop-shadow(0 0 6px rgba(255,160,50,0.8)); }
.chrome-info-body { font-size: 12.5px; line-height: 1.5; color: #d9c8ae; margin-bottom: 12px; }
.chrome-info-actions { display: flex; justify-content: flex-end; }
.chrome-info-pop .chrome-info-dismiss { padding: 6px 18px; }
.chrome-info-notch {
position: absolute; width: 12px; height: 12px;
background: linear-gradient(165deg, #3A2C22, #271B15);
box-shadow: 0 0 0 1px rgba(212,133,74,0.4);
}
@media (prefers-reduced-motion: reduce) {
.chrome-reveal-pop, .chrome-reveal-fade,
.chrome-info-pop, .chrome-info-scrim { animation: none !important; }
.chrome-new { animation: none; box-shadow: 0 0 0 1px rgba(255,185,80,0.55), 0 0 9px rgba(255,150,45,0.5); }
}
/* Equipment-panel header inline variant — smaller, button reset */
.eq-panel-orb-stat {
appearance: none;
-webkit-appearance: none;
font-family: inherit;
margin: 0;
line-height: 1;
padding: 3px 9px 3px 6px;
}
.eq-panel-orb-stat .topbar-orb-icon { width: 16px; height: 16px; }
.eq-panel-orb-stat .stat-val.orb { font-size: 12px; }
/* ==========================================================
PRESTIGE WEAPON IDENTITY — proc feedback layer
Rhymes with the orb ritual and clue-loot vocab. Each weapon
class gets a legible signature: VENOM FANG stacks, CLEAVE
slash, SHOCKWAVE stun, COLOSSUS crit, ENCHANTED sparks,
QUICKDRAW arrow stream, OVERCHARGE ember ring, SECOND WIND.
========================================================== */
/* --- CRIT hitsplat (Colossus) ----------------------------- */
/* Uses same base sprite as normal hitsplat, just scaled up with a gold glow + label */
.hitsplat.hitsplat--crit {
width: 96px;
height: 96px;
font-size: 26px;
overflow: visible;
z-index: 500;
filter: drop-shadow(0 0 8px rgba(255,170,40,0.9)) drop-shadow(0 0 16px rgba(255,100,20,0.5));
animation: crit-splat-pop 1.1s ease-out forwards;
}
body.rebrand .hitsplat.hitsplat--crit {
width: 104px;
height: 104px;
font-size: 26px;
}
.hitsplat-crit-label {
position: absolute;
top: -14px; left: 50%;
transform: translateX(-50%);
font-family: 'Lexend', sans-serif;
font-size: 9px; font-weight: 800;
letter-spacing: 3px;
color: #ffd666;
text-shadow: 0 0 6px rgba(255,180,60,0.95), 0 1px 0 rgba(0,0,0,0.8);
-webkit-text-fill-color: #ffd666;
animation: crit-label-in 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) both 0.08s;
white-space: nowrap;
}
.hitsplat-crit-halo {
position: absolute; inset: -14px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(255,170,60,0.45) 0%, rgba(255,90,20,0.2) 45%, transparent 75%);
filter: blur(4px);
animation: crit-halo-burst 0.7s ease-out both;
}
@keyframes crit-splat-pop {
0% { transform: translate(-50%,-50%) scale(0) rotate(-6deg); opacity: 1; filter: brightness(2.5) drop-shadow(0 0 8px rgba(255,170,40,0.9)) drop-shadow(0 0 16px rgba(255,100,20,0.5)); }
20% { transform: translate(-50%,-50%) scale(1.4) rotate(2deg); opacity: 1; filter: brightness(1.3) drop-shadow(0 0 8px rgba(255,170,40,0.9)) drop-shadow(0 0 16px rgba(255,100,20,0.5)); }
40% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
100% { transform: translate(-50%,-70%) scale(1) rotate(0deg); opacity: 0; filter: drop-shadow(0 0 8px rgba(255,170,40,0.9)) drop-shadow(0 0 16px rgba(255,100,20,0.5)); }
}
@keyframes crit-label-in {
from { opacity: 0; transform: translateX(-50%) translateY(6px); letter-spacing: 8px; }
to { opacity: 1; transform: translateX(-50%) translateY(0); letter-spacing: 3px; }
}
@keyframes crit-halo-burst {
0% { opacity: 0; transform: scale(0.4); }
40% { opacity: 1; transform: scale(1.15); }
100% { opacity: 0; transform: scale(1.75); }
}
/* Screen shake on crit */
.viewport.viewport-crit-shake {
animation: crit-viewport-shake 0.26s ease-out;
}
@keyframes crit-viewport-shake {
0%,100% { transform: translate(0,0); }
12% { transform: translate(-3px, 2px); }
28% { transform: translate(3px, -1px); }
45% { transform: translate(-2px, -2px); }
65% { transform: translate(2px, 1px); }
82% { transform: translate(-1px, 2px); }
}
/* --- CLEAVE hitsplat (slashMulti) — same sprite, no custom shape */
.hitsplat.hitsplat--cleave {
/* inherits base hitsplat sprite — no overrides */
}
.hitsplat-cleave-slash { display: none; }
/* --- ENCHANTED bolt hitsplat (boltTips) — same sprite, no custom shape */
.hitsplat.hitsplat--enchanted {
/* inherits base hitsplat sprite — no overrides */
}
.hitsplat-sparks { display: none; }
/* --- STUN SHOCKWAVE (crushStun) --------------------------- */
.stun-overlay {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 0; height: 0;
z-index: 300;
pointer-events: none;
}
.stun-ring {
position: absolute;
left: 50%; top: 50%;
width: 60px; height: 60px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
border: 3px solid rgba(255,230,150,0.9);
box-shadow:
0 0 22px rgba(255,170,60,0.95),
inset 0 0 14px rgba(255,120,30,0.6);
opacity: 0;
animation: stun-ring-expand 0.7s ease-out both;
}
.stun-ring--2 {
animation-delay: 0.14s;
border-color: rgba(255,180,70,0.75);
}
.stun-stamp {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0.4) rotate(-8deg);
font-family: 'Cinzel', serif;
font-size: 24px; font-weight: 700;
letter-spacing: 5px;
line-height: 1;
padding: 8px 14px;
color: transparent;
background: linear-gradient(180deg, #fff2c2 0%, #ffc86a 45%, #c96a1a 100%);
-webkit-background-clip: text; background-clip: text;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.8)) drop-shadow(0 0 12px rgba(255,160,40,0.8));
opacity: 0;
animation: stun-stamp-in 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both 0.1s;
white-space: nowrap;
}
.stun-particles {
position: absolute;
left: 50%; top: 50%;
}
.stun-particles i {
position: absolute;
left: 0; top: 0;
width: 3px; height: 3px;
border-radius: 50%;
background: radial-gradient(circle, #fff2c2 0%, #ffaa44 60%, transparent 100%);
box-shadow: 0 0 6px rgba(255,170,60,0.8);
animation: stun-particle-radiate 0.6s ease-out both;
}
.stun-particles i:nth-child(1){--a: 0deg; --d: 46px;}
.stun-particles i:nth-child(2){--a: 45deg; --d: 52px;}
.stun-particles i:nth-child(3){--a: 90deg; --d: 46px;}
.stun-particles i:nth-child(4){--a:135deg; --d: 52px;}
.stun-particles i:nth-child(5){--a:180deg; --d: 46px;}
.stun-particles i:nth-child(6){--a:225deg; --d: 52px;}
.stun-particles i:nth-child(7){--a:270deg; --d: 46px;}
.stun-particles i:nth-child(8){--a:315deg; --d: 52px;}
@keyframes stun-ring-expand {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(4.5); border-width: 1px; }
}
@keyframes stun-stamp-in {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(-12deg); letter-spacing: 14px; }
50% { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(2deg); letter-spacing: 5px; }
70% { transform: translate(-50%,-50%) scale(0.98) rotate(0deg); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.05) rotate(0deg); letter-spacing: 5px; }
}
@keyframes stun-particle-radiate {
0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(0.3); }
20% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0); }
}
.stun-icon-tilt {
animation: stun-icon-wobble 0.52s cubic-bezier(0.36, 0.0, 0.6, 1) both;
transform-origin: 50% 80%;
}
@keyframes stun-icon-wobble {
0%,100% { transform: rotate(0deg); }
20% { transform: rotate(-6deg); }
45% { transform: rotate(4deg); }
70% { transform: rotate(-2deg); }
}
/* --- VENOM FANG stack chip (stabBleed) -------------------- */
.venom-stack-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px !important;
background: linear-gradient(180deg, rgba(48,8,8,0.92), rgba(22,2,2,0.92)) !important;
border: 1px solid rgba(255,120,90,0.55) !important;
color: #ffcbb4 !important;
box-shadow:
inset 0 1px 0 rgba(255,180,120,0.2),
0 0 10px rgba(200,40,30,0.35) !important;
position: relative;
font-family: 'Lexend', sans-serif;
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.venom-stack-chip.stack-flash {
animation: venom-stack-pop 0.42s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.venom-chip-drip {
width: 10px; height: 10px;
display: inline-block;
background:
radial-gradient(ellipse 6px 8px at 50% 40%, #e8574a 0%, #9a1a1a 70%, transparent 95%);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
clip-path: polygon(50% 0, 100% 55%, 78% 100%, 22% 100%, 0 55%);
animation: venom-drip 2.4s ease-in-out infinite;
}
.venom-chip-label {
font-weight: 700;
color: #ffccbc;
text-shadow: 0 0 4px rgba(255,90,50,0.55);
}
.venom-chip-count {
min-width: 14px; padding: 0 4px;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 12px;
color: #fff2c2;
background: linear-gradient(180deg, rgba(255,160,60,0.9), rgba(180,40,10,0.9));
border-radius: 2px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
box-shadow: inset 0 1px 0 rgba(255,230,180,0.4);
}
@keyframes venom-stack-pop {
0% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,180,120,0.2), 0 0 10px rgba(200,40,30,0.35); }
40% { transform: scale(1.14); box-shadow: inset 0 1px 0 rgba(255,200,140,0.4), 0 0 24px rgba(240,60,40,0.75); }
100% { transform: scale(1); }
}
@keyframes venom-drip {
0%,100% { transform: translateY(0) scaleY(1); }
50% { transform: translateY(1px) scaleY(1.08); }
}
/* --- QUICKDRAW stack chip (arrowFlow) --------------------- */
.quickdraw-stack-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px !important;
background: linear-gradient(180deg, rgba(12,30,46,0.92), rgba(4,12,20,0.95)) !important;
border: 1px solid rgba(110,200,255,0.55) !important;
color: #c6e8ff !important;
box-shadow:
inset 0 1px 0 rgba(180,230,255,0.22),
0 0 10px rgba(60,160,255,0.35) !important;
font-family: 'Lexend', sans-serif;
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
position: relative;
}
.quickdraw-stack-chip.stack-flash {
animation: quickdraw-stack-pop 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.quickdraw-chip-bolt {
width: 10px; height: 14px;
display: inline-block;
background: linear-gradient(180deg, #d5f1ff, #5ca9e8);
clip-path: polygon(50% 0, 100% 55%, 66% 55%, 82% 100%, 18% 50%, 40% 50%, 0 0);
filter: drop-shadow(0 0 4px rgba(100,190,255,0.9));
animation: quickdraw-bolt-pulse 1.4s ease-in-out infinite;
}
.quickdraw-chip-label {
font-weight: 700;
color: #d2ecff;
text-shadow: 0 0 4px rgba(80,180,255,0.55);
}
.quickdraw-chip-count {
min-width: 14px; padding: 0 4px;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 12px;
color: #eaf6ff;
background: linear-gradient(180deg, rgba(120,200,255,0.85), rgba(20,90,180,0.9));
border-radius: 2px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
box-shadow: inset 0 1px 0 rgba(200,240,255,0.4);
}
@keyframes quickdraw-stack-pop {
0% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(180,230,255,0.22), 0 0 10px rgba(60,160,255,0.35); }
35% { transform: scale(1.16); box-shadow: inset 0 1px 0 rgba(220,240,255,0.5), 0 0 22px rgba(90,200,255,0.8); }
100% { transform: scale(1); }
}
@keyframes quickdraw-bolt-pulse {
0%,100% { filter: drop-shadow(0 0 4px rgba(100,190,255,0.7)); }
50% { filter: drop-shadow(0 0 8px rgba(140,220,255,1)); }
}
/* --- ARCANE SURGE chip (magic damage stacks) -------------- */
.arcane-stack-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px !important;
background: linear-gradient(180deg, rgba(30,10,46,0.92), rgba(12,4,22,0.95)) !important;
border: 1px solid rgba(180,100,255,0.55) !important;
color: #d8c6ff !important;
box-shadow:
inset 0 1px 0 rgba(220,180,255,0.22),
0 0 10px rgba(140,60,255,0.35) !important;
font-family: 'Lexend', sans-serif;
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
position: relative;
}
.arcane-stack-chip.stack-flash {
animation: arcane-stack-pop 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.arcane-chip-orb {
width: 12px; height: 12px;
display: inline-block;
background: radial-gradient(circle at 40% 35%, #e8d0ff, #9a50e8 50%, #5a20a0);
border-radius: 50%;
filter: drop-shadow(0 0 4px rgba(160,80,255,0.9));
animation: arcane-orb-pulse 1.4s ease-in-out infinite;
}
.arcane-chip-label {
font-weight: 700;
color: #e0d2ff;
text-shadow: 0 0 4px rgba(160,80,255,0.55);
}
.arcane-chip-count {
min-width: 14px; padding: 0 4px;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 12px;
color: #f0eaff;
background: linear-gradient(180deg, rgba(180,120,255,0.85), rgba(80,20,180,0.9));
border-radius: 2px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
box-shadow: inset 0 1px 0 rgba(230,200,255,0.4);
}
@keyframes arcane-stack-pop {
0% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(220,180,255,0.22), 0 0 10px rgba(140,60,255,0.35); }
35% { transform: scale(1.16); box-shadow: inset 0 1px 0 rgba(240,220,255,0.5), 0 0 22px rgba(180,100,255,0.8); }
100% { transform: scale(1); }
}
@keyframes arcane-orb-pulse {
0%,100% { filter: drop-shadow(0 0 4px rgba(160,80,255,0.7)); }
50% { filter: drop-shadow(0 0 8px rgba(200,140,255,1)); }
}
/* --- STUN chip (short-lived, next to monster debuffs) ----- */
.stunned-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 2px 8px !important;
background: linear-gradient(180deg, rgba(58,40,6,0.92), rgba(22,14,2,0.95)) !important;
border: 1px solid rgba(255,200,70,0.8) !important;
color: #fff2c2 !important;
box-shadow:
inset 0 1px 0 rgba(255,230,170,0.45),
0 0 14px rgba(255,160,40,0.55) !important;
font-family: 'Lexend', sans-serif;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 800;
animation: stunned-chip-pulse 0.6s ease-out;
}
.stunned-chip-star {
width: 11px; height: 11px;
background: radial-gradient(circle, #fffae2 0%, #ffb848 55%, transparent 80%);
clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
filter: drop-shadow(0 0 4px rgba(255,160,40,0.9));
animation: stunned-chip-star-spin 1.4s linear infinite;
}
.stunned-chip-label {
font-weight: 800;
text-shadow: 0 0 6px rgba(255,170,60,0.8);
}
@keyframes stunned-chip-pulse {
0% { transform: scale(0.6); opacity: 0; }
40% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes stunned-chip-star-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* --- OVERCHARGE indicator (chargedCast) ------------------- */
.autocast-btn.is-overcharged,
.combat-style-btn[data-style="magic"].is-overcharged,
#autocast-display.is-overcharged {
position: relative;
}
.autocast-btn.is-overcharged::after,
.combat-style-btn[data-style="magic"].is-overcharged::after,
#autocast-display.is-overcharged::after {
content: "";
position: absolute;
inset: -3px;
border-radius: inherit;
pointer-events: none;
background:
conic-gradient(from 0deg,
rgba(255,170,60,0.0) 0deg,
rgba(255,170,60,0.9) 45deg,
rgba(180,60,200,0.7) 90deg,
rgba(255,170,60,0.9) 135deg,
rgba(255,170,60,0.0) 180deg,
rgba(180,60,200,0.7) 225deg,
rgba(255,170,60,0.9) 270deg,
rgba(180,60,200,0.7) 315deg,
rgba(255,170,60,0.0) 360deg);
-webkit-mask: radial-gradient(circle, transparent 0 58%, #000 62% 88%, transparent 92%);
mask: radial-gradient(circle, transparent 0 58%, #000 62% 88%, transparent 92%);
filter: blur(0.4px) drop-shadow(0 0 5px rgba(255,120,30,0.65));
opacity: 0.9;
animation: overcharge-ring-spin 3.6s linear infinite;
}
@keyframes overcharge-ring-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* --- VIEWPORT BUFF HOST (player-active buff chips) -------- */
.vp-buff-host {
position: absolute;
top: 8px; left: 8px;
z-index: 120;
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: none;
max-width: 200px;
}
.vp-buff-chip {
pointer-events: auto;
}
/* --- SECOND WIND (inspiration) viewport buff chip ---------
"Verdant Breath" — carved obsidian pill with ember-weave
texture, gold filigree brackets, a rotating breath glyph
that shifts green→gold as the timer drops. On refresh, a
gold shine sweeps across the chip. Motion rhymes with
orb-card / crit-label / epLootShineSweep. */
.inspiration-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 13px 6px 10px;
position: relative;
background:
linear-gradient(180deg, rgba(22,34,14,0.95) 0%, rgba(10,18,6,0.96) 55%, rgba(4,10,2,0.98) 100%);
border: 1.5px solid rgba(0,0,0,0.6);
border-radius: 8px 8px 3px 3px; /* inverted-ledge silhouette — nav-v2 family */
box-shadow:
inset 0 1px 0 rgba(190,250,170,0.22),
inset 0 -2px 0 rgba(0,0,0,0.55),
inset 0 0 18px rgba(0,0,0,0.45),
0 0 0 1px rgba(150,200,110,0.35),
0 3px 12px rgba(0,0,0,0.55),
0 0 22px rgba(90,210,120,0.28);
font-family: 'Lexend', sans-serif;
animation: inspiration-chip-in 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
overflow: hidden;
white-space: nowrap;
min-width: 138px;
max-width: 180px;
}
/* Carved cross-weave texture — mirrors orb-frame::before */
.inspiration-chip::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(45deg, rgba(200,255,180,0.025) 0 2px, transparent 2px 5px),
repeating-linear-gradient(-45deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 6px);
mix-blend-mode: overlay;
opacity: 0.6;
z-index: 0;
}
/* Gold diamond filigree brackets — signals the chip belongs to the gold family */
.inspiration-chip::after {
content: "";
position: absolute;
top: 50%; left: -3px;
width: 5px; height: 5px;
transform: translateY(-50%) rotate(45deg);
background: linear-gradient(135deg, #f1d98b, #8a6a2a);
box-shadow: 0 0 5px rgba(255,180,60,0.45), inset 0 0 0 1px rgba(0,0,0,0.4);
z-index: 1;
}
.inspiration-chip-bracket-r {
position: absolute;
top: 50%; right: -3px;
width: 5px; height: 5px;
transform: translateY(-50%) rotate(45deg);
background: linear-gradient(135deg, #f1d98b, #8a6a2a);
box-shadow: 0 0 5px rgba(255,180,60,0.45), inset 0 0 0 1px rgba(0,0,0,0.4);
z-index: 1;
pointer-events: none;
}
.inspiration-chip.is-leaving {
animation: inspiration-chip-out 0.26s ease-in forwards;
}
/* Breath glyph — a rotating double-arc, green with a gold crescent.
Feels like wind spiraling. Sits in a recessed niche. */
.inspiration-chip-glyph {
position: relative;
width: 18px; height: 18px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 35%, rgba(140,240,130,0.45) 0%, rgba(30,60,20,0.55) 55%, rgba(5,10,2,0.7) 100%);
box-shadow:
inset 0 1px 0 rgba(200,255,180,0.4),
inset 0 -1px 0 rgba(0,0,0,0.45),
0 0 0 1px rgba(0,0,0,0.5),
0 0 10px rgba(90,210,120,0.6);
z-index: 2;
flex: 0 0 auto;
}
/* Inner breath arcs — layered conic gradients masked to a ring */
.inspiration-chip-glyph::before,
.inspiration-chip-glyph::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 50%;
pointer-events: none;
}
.inspiration-chip-glyph::before {
background: conic-gradient(from 0deg,
transparent 0deg, rgba(180,255,150,0.92) 30deg, transparent 90deg,
transparent 180deg, rgba(255,210,120,0.85) 210deg, transparent 270deg);
-webkit-mask: radial-gradient(circle, transparent 0 42%, #000 46% 88%, transparent 92%);
mask: radial-gradient(circle, transparent 0 42%, #000 46% 88%, transparent 92%);
filter: drop-shadow(0 0 3px rgba(130,230,120,0.65));
animation: inspiration-breath-spin 5.2s linear infinite;
}
.inspiration-chip-glyph::after {
inset: 4px;
background: radial-gradient(circle at 50% 50%, rgba(230,255,200,0.85) 0%, rgba(110,210,110,0.5) 45%, transparent 80%);
filter: blur(0.4px);
animation: inspiration-breath-pulse 2.4s ease-in-out infinite;
}
/* Label + countdown column */
.inspiration-chip-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
line-height: 1;
position: relative;
z-index: 2;
flex: 1 1 auto;
min-width: 0;
}
.inspiration-chip-label {
font-family: 'Cinzel', 'Lexend', serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 2.6px;
text-transform: uppercase;
/* Green → gold gradient — the metaphor: breath becoming forged power */
background: linear-gradient(180deg, #e8ffb8 0%, #b6e07a 38%, #d8a64a 72%, #8a5a18 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.7));
margin-bottom: 2px;
}
.inspiration-chip-sec {
font-family: 'Lexend', sans-serif;
font-weight: 700;
font-size: 11px;
color: #eaffd0;
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
text-shadow: 0 0 6px rgba(130,220,120,0.55), 0 1px 0 rgba(0,0,0,0.7);
}
/* Carved progress seam at the base — recessed channel + glowing fill.
Inherits the "carved-into-stone" feel rather than painted-on. */
.inspiration-chip-rail {
position: absolute;
left: 8px; right: 8px;
bottom: 2px;
height: 3px;
border-radius: 2px;
background:
linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.45));
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.7),
inset 0 -1px 0 rgba(200,255,180,0.08);
overflow: hidden;
z-index: 2;
}
.inspiration-chip-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 2px;
background: linear-gradient(90deg,
rgba(90,200,110,0.6) 0%,
rgba(170,240,130,0.95) 55%,
rgba(245,210,120,1) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,210,0.45),
0 0 6px rgba(160,240,130,0.7),
0 0 10px rgba(220,200,100,0.35);
transition: width 0.3s linear;
pointer-events: none;
}
.inspiration-chip-fill::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 40%, rgba(255,255,220,0.35) 50%, transparent 60%);
animation: inspiration-rail-shine 2.6s ease-in-out infinite;
}
/* Drifting wind motes — 3 tiny specks inside the chip, slow ambient drift */
.inspiration-chip-motes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.inspiration-chip-motes i {
position: absolute;
width: 2px; height: 2px;
border-radius: 50%;
background: radial-gradient(circle, rgba(220,255,190,0.9) 0%, rgba(140,220,120,0) 100%);
opacity: 0.75;
animation: inspiration-mote-drift 4.8s linear infinite;
}
.inspiration-chip-motes i:nth-child(1) { left: 22%; top: 78%; animation-delay: 0s; }
.inspiration-chip-motes i:nth-child(2) { left: 52%; top: 86%; animation-delay: 1.6s; }
.inspiration-chip-motes i:nth-child(3) { left: 78%; top: 72%; animation-delay: 3.2s; }
/* Refresh shine — gold band sweeps across the whole chip on gather */
.inspiration-chip-shine {
position: absolute;
top: 0; bottom: 0;
left: -40%;
width: 40%;
pointer-events: none;
background: linear-gradient(105deg,
transparent 0%, transparent 30%,
rgba(255,240,180,0.0) 40%,
rgba(255,240,180,0.55) 50%,
rgba(255,240,180,0.0) 60%,
transparent 70%, transparent 100%);
mix-blend-mode: screen;
z-index: 3;
opacity: 0;
}
.inspiration-chip.is-refresh .inspiration-chip-shine {
animation: inspiration-shine-sweep 0.85s ease-out 1;
}
.inspiration-chip.is-refresh {
animation: inspiration-chip-in 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both,
inspiration-chip-refresh-pop 0.5s ease-out 1;
}
.inspiration-chip.is-refresh .inspiration-chip-glyph {
animation: inspiration-breath-ignite 0.8s ease-out 1;
}
@keyframes inspiration-chip-in {
0% { opacity: 0; transform: translateX(-8px) scale(0.8); filter: brightness(2) blur(2px); }
50% { opacity: 1; transform: translateX(1px) scale(1.04); filter: brightness(1.2) blur(0); }
100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}
@keyframes inspiration-chip-out {
to { opacity: 0; transform: translateX(-6px) scale(0.9); filter: blur(1px); }
}
@keyframes inspiration-chip-refresh-pop {
0%,100% { box-shadow:
inset 0 1px 0 rgba(190,250,170,0.22),
inset 0 -2px 0 rgba(0,0,0,0.55),
inset 0 0 18px rgba(0,0,0,0.45),
0 0 0 1px rgba(150,200,110,0.35),
0 3px 12px rgba(0,0,0,0.55),
0 0 22px rgba(90,210,120,0.28); }
50% { box-shadow:
inset 0 1px 0 rgba(255,245,190,0.45),
inset 0 -2px 0 rgba(0,0,0,0.55),
inset 0 0 18px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,220,140,0.55),
0 3px 14px rgba(0,0,0,0.6),
0 0 32px rgba(255,200,90,0.55),
0 0 48px rgba(140,240,130,0.4); }
}
@keyframes inspiration-shine-sweep {
0% { left: -40%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 110%; opacity: 0; }
}
@keyframes inspiration-breath-spin {
to { transform: rotate(360deg); }
}
@keyframes inspiration-breath-pulse {
0%,100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
@keyframes inspiration-breath-ignite {
0% { filter: brightness(1) drop-shadow(0 0 4px rgba(140,230,130,0.6)); }
30% { filter: brightness(1.8) drop-shadow(0 0 14px rgba(255,220,130,0.9)); }
100% { filter: brightness(1) drop-shadow(0 0 4px rgba(140,230,130,0.6)); }
}
@keyframes inspiration-rail-shine {
0%,100% { opacity: 0.4; transform: translateX(-20%); }
50% { opacity: 0.9; transform: translateX(20%); }
}
@keyframes inspiration-mote-drift {
0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
15% { opacity: 0.85; }
80% { opacity: 0.4; }
100% { opacity: 0; transform: translate(-18px, -22px) scale(0.2); }
}
/* --- BLEED tick hitsplat (Venom Fang DoT) — same sprite, subtle green tint */
.hitsplat.hitsplat--bleed {
filter: hue-rotate(90deg) brightness(0.85);
overflow: visible;
}
.hitsplat-bleed-drop { display: none; }
.hitsplat-bleed-pool { display: none; }
/* --- BACKSTAB hitsplat — purple shadow glow for defence-piercing hit */
.hitsplat.hitsplat--backstab {
width: 96px;
height: 96px;
font-size: 26px;
overflow: visible;
z-index: 500;
filter: drop-shadow(0 0 8px rgba(160,80,255,0.9)) drop-shadow(0 0 16px rgba(100,40,200,0.5));
animation: crit-splat-pop 1.1s ease-out forwards;
}
/* --- WIND FURY cascade hitsplat — same sprite, no custom shape */
.hitsplat.hitsplat--windfury {
/* inherits base hitsplat sprite — no overrides */
}
.hitsplat-windfury-slash { display: none; }
.hitsplat-windfury-trail { display: none; }
/* Mobile adjustments */
@media (max-width: 480px) {
.hitsplat-crit-label { font-size: 8px; top: -12px; letter-spacing: 2.5px; }
.stun-pow { font-size: 28px !important; letter-spacing: 3px !important; }
.stun-burst { width: 90px !important; height: 78px !important; }
.stun-stars-orbit .stun-star { font-size: 12px !important; }
.stun-stars-orbit .stun-star:nth-child(1),
.stun-stars-orbit .stun-star:nth-child(2),
.stun-stars-orbit .stun-star:nth-child(3),
.stun-stars-orbit .stun-star:nth-child(4),
.stun-stars-orbit .stun-star:nth-child(5) { --stun-orbit-r: 24px; }
.inspiration-chip-label { font-size: 9px; letter-spacing: 2px; }
.inspiration-chip-sec { font-size: 10px; }
.venom-chip-count, .quickdraw-chip-count { font-size: 11px; min-width: 12px; }
.venom-chip-label, .quickdraw-chip-label { font-size: 9px; letter-spacing: 1px; }
/* bleed/windfury now inherit base hitsplat — no mobile overrides needed */
.bd-vignette { box-shadow: inset 0 0 20px rgba(160,15,8,0.45) !important; }
}
/* ==========================================================
WIND FURY — Anime slash lines through the target
3-4 bold slash lines cut through the monster area.
Odd cascades slash from right, even from left.
Final cascade (4) tips gold.
========================================================== */
.wf-gust {
position: absolute;
inset: 0;
overflow: visible;
pointer-events: none;
z-index: 80;
}
/* Each slash line — a bold bright streak at a slight angle */
.wf-line {
position: absolute;
left: 5%;
width: 90%;
height: 2px;
transform: rotate(var(--wf-angle, -15deg));
transform-origin: center center;
background: linear-gradient(90deg,
transparent 0%,
rgba(220,240,255,0.0) 8%,
rgba(240,250,255,0.9) 25%,
rgba(255,255,255,1) 50%,
rgba(220,240,255,0.9) 75%,
rgba(200,225,255,0.0) 92%,
transparent 100%);
filter:
drop-shadow(0 0 3px rgba(200,230,255,0.85))
drop-shadow(0 0 8px rgba(150,200,255,0.45));
animation: wf-slash-right 0.28s cubic-bezier(0.1, 0, 0.2, 1) both;
}
/* Residual glow trail behind each line */
.wf-line::after {
content: "";
position: absolute;
inset: -3px 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(200,230,255,0.0) 15%,
rgba(200,230,255,0.15) 40%,
rgba(200,230,255,0.15) 60%,
rgba(200,230,255,0.0) 85%,
transparent 100%);
filter: blur(2px);
animation: wf-trail-fade 0.35s ease-out 0.06s both;
}
/* Direction: from right (odd cascades) — angle as-is */
.wf-gust--from-right .wf-line {
animation-name: wf-slash-right;
}
/* Direction: from left (even cascades) — mirror the angle + reverse clip */
.wf-gust--from-left .wf-line {
transform: rotate(calc(-1 * var(--wf-angle, -15deg)));
animation-name: wf-slash-left;
}
/* Finale cascade — gold-tinted slashes */
.wf-gust--finale .wf-line {
background: linear-gradient(90deg,
transparent 0%,
rgba(255,230,150,0.0) 10%,
rgba(255,245,180,0.95) 30%,
rgba(255,255,220,1) 50%,
rgba(255,240,160,0.95) 70%,
rgba(255,220,100,0.0) 90%,
transparent 100%);
filter:
drop-shadow(0 0 5px rgba(255,220,100,1))
drop-shadow(0 0 14px rgba(255,170,50,0.65));
}
@keyframes wf-slash-right {
0% { clip-path: inset(0 0 0 100%); opacity: 0; }
15% { opacity: 1; }
50% { clip-path: inset(0 0 0 0); opacity: 1; }
100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes wf-slash-left {
0% { clip-path: inset(0 100% 0 0); opacity: 0; }
15% { opacity: 1; }
50% { clip-path: inset(0 0 0 0); opacity: 1; }
100% { clip-path: inset(0 0 0 100%); opacity: 0; }
}
@keyframes wf-trail-fade {
0% { opacity: 0; }
30% { opacity: 0.7; }
100% { opacity: 0; }
}
/* Monster icon buffet — leans away from slash direction */
.wf-buffet {
animation: wf-buffet-sway 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) both !important;
}
@keyframes wf-buffet-sway {
0% { transform: translateX(0) rotate(0deg); }
30% { transform: translateX(3px) rotate(2deg); }
60% { transform: translateX(-1px) rotate(-1deg); }
100% { transform: translateX(0) rotate(0deg); }
}
/* ==========================================================
STUN — Comic-book POW! with starburst + orbiting dizzy stars
Yellow-orange starburst explosion, bold POW! text with heavy
outline, radial impact lines, five golden stars that orbit
and spin like a cartoon knockout. Everything pops in with
elastic overshoot and fades over ~1.6s.
========================================================== */
/* White flash on impact — the initial "crack" */
.stun-flash {
position: absolute;
left: 50%; top: 50%;
width: 160px; height: 130px;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,240,180,0.6) 40%, transparent 70%);
animation: stun-flash-pop 0.3s ease-out both;
pointer-events: none;
z-index: 299;
}
@keyframes stun-flash-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
40% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.9; }
100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
/* Jagged starburst explosion shape behind POW */
.stun-burst {
position: absolute;
left: 50%; top: 50%;
width: 120px; height: 100px;
transform: translate(-50%, -50%) scale(0) rotate(-5deg);
background:
radial-gradient(circle at 45% 40%, #FFE44D 0%, #FFC107 30%, #FF9800 60%, #F57C00 85%, #E65100 100%);
clip-path: polygon(
50% 0%, 58% 16%, 80% 2%, 71% 22%, 98% 20%, 78% 35%,
100% 50%, 80% 55%, 96% 74%, 72% 66%, 82% 92%, 60% 74%,
50% 100%, 40% 76%, 18% 92%, 28% 66%, 4% 74%, 20% 55%,
0% 50%, 22% 35%, 2% 20%, 29% 22%, 20% 2%, 42% 16%
);
animation: stun-burst-pop 0.55s cubic-bezier(0.22, 1.5, 0.36, 1) both 0.02s;
z-index: 300;
pointer-events: none;
filter: drop-shadow(0 0 12px rgba(255,180,0,0.7)) drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}
/* Inner highlight on the starburst */
.stun-burst::after {
content: "";
position: absolute;
inset: 15%;
background: radial-gradient(circle at 40% 35%, rgba(255,255,220,0.75) 0%, rgba(255,230,120,0.3) 50%, transparent 80%);
pointer-events: none;
}
@keyframes stun-burst-pop {
0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); opacity: 0; }
35% { transform: translate(-50%, -50%) scale(1.2) rotate(3deg); opacity: 1; }
55% { transform: translate(-50%, -50%) scale(0.95) rotate(-1deg); }
70% { transform: translate(-50%, -50%) scale(1.02) rotate(0deg); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); opacity: 0; }
}
/* POW! text — bold comic lettering with heavy outline */
.stun-pow {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0) rotate(-6deg);
font-family: 'Cinzel', Impact, sans-serif;
font-size: 38px;
font-weight: 900;
letter-spacing: 5px;
line-height: 1;
color: #FFF;
-webkit-text-stroke: 3.5px #1a0800;
paint-order: stroke fill;
text-shadow:
0 0 18px rgba(255,200,0,0.9),
0 0 36px rgba(255,140,0,0.55),
0 4px 0 rgba(60,20,0,0.5);
z-index: 302;
pointer-events: none;
white-space: nowrap;
animation: stun-pow-slam 0.7s cubic-bezier(0.22, 1.6, 0.36, 1) both 0.05s;
}
@keyframes stun-pow-slam {
0% { transform: translate(-50%, -50%) scale(0) rotate(-14deg); opacity: 0; filter: brightness(3); }
30% { transform: translate(-50%, -50%) scale(1.35) rotate(4deg); opacity: 1; filter: brightness(1.3); }
50% { transform: translate(-50%, -50%) scale(0.92) rotate(-2deg); filter: brightness(1); }
65% { transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
80% { opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0; filter: brightness(1); }
}
/* Radial impact lines — manga-style radial zoom burst */
.stun-impact-lines {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
z-index: 299;
pointer-events: none;
}
.stun-impact-lines i {
position: absolute;
left: 0; top: 0;
width: 2px; height: 45px;
transform-origin: center bottom;
background: linear-gradient(180deg,
rgba(255,230,120,0.0) 0%,
rgba(255,220,80,0.85) 30%,
rgba(255,180,40,0.4) 70%,
transparent 100%);
border-radius: 1px;
animation: stun-impact-line-shoot 0.5s ease-out both;
filter: drop-shadow(0 0 3px rgba(255,200,60,0.6));
}
.stun-impact-lines i:nth-child(1) { transform: rotate(0deg) translateY(-55px); animation-delay: 0.04s; }
.stun-impact-lines i:nth-child(2) { transform: rotate(36deg) translateY(-50px); animation-delay: 0.06s; }
.stun-impact-lines i:nth-child(3) { transform: rotate(72deg) translateY(-58px); animation-delay: 0.03s; }
.stun-impact-lines i:nth-child(4) { transform: rotate(108deg) translateY(-52px); animation-delay: 0.08s; }
.stun-impact-lines i:nth-child(5) { transform: rotate(144deg) translateY(-56px); animation-delay: 0.02s; }
.stun-impact-lines i:nth-child(6) { transform: rotate(180deg) translateY(-54px); animation-delay: 0.07s; }
.stun-impact-lines i:nth-child(7) { transform: rotate(216deg) translateY(-50px); animation-delay: 0.05s; }
.stun-impact-lines i:nth-child(8) { transform: rotate(252deg) translateY(-57px); animation-delay: 0.03s; }
.stun-impact-lines i:nth-child(9) { transform: rotate(288deg) translateY(-53px); animation-delay: 0.06s; }
.stun-impact-lines i:nth-child(10) { transform: rotate(324deg) translateY(-55px); animation-delay: 0.04s; }
@keyframes stun-impact-line-shoot {
0% { opacity: 0; height: 0; }
25% { opacity: 1; height: 45px; }
100% { opacity: 0; height: 55px; }
}
/* Orbiting dizzy stars — cartoon knockout effect */
.stun-stars-orbit {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
z-index: 310;
pointer-events: none;
animation: stun-orbit-spin 1.6s cubic-bezier(0.1, 0, 0.3, 1) both 0.12s;
}
@keyframes stun-orbit-spin {
0% { transform: rotate(0deg); opacity: 0; }
8% { opacity: 1; }
75% { opacity: 1; }
100% { transform: rotate(840deg); opacity: 0; }
}
.stun-star {
position: absolute;
left: 0; top: 0;
line-height: 1;
color: #FFD700;
text-shadow:
0 0 8px rgba(255,215,0,0.95),
0 0 18px rgba(255,180,0,0.6),
0 0 30px rgba(255,140,0,0.3);
filter: drop-shadow(0 0 3px rgba(255,200,0,0.75));
animation: stun-star-pop 0.35s cubic-bezier(0.22, 1.4, 0.36, 1) both;
--stun-orbit-r: 32px;
}
.stun-star span {
display: block;
animation: stun-star-twinkle 0.35s linear infinite;
}
/* Position each star at even angles on the orbit circle */
.stun-star:nth-child(1) { transform: rotate(0deg) translateX(var(--stun-orbit-r)); font-size: 18px; animation-delay: 0.08s; }
.stun-star:nth-child(2) { transform: rotate(72deg) translateX(var(--stun-orbit-r)); font-size: 14px; color: #FFE082; animation-delay: 0.13s; }
.stun-star:nth-child(3) { transform: rotate(144deg) translateX(var(--stun-orbit-r)); font-size: 20px; animation-delay: 0.18s; }
.stun-star:nth-child(4) { transform: rotate(216deg) translateX(var(--stun-orbit-r)); font-size: 13px; color: #FFF176; animation-delay: 0.23s; }
.stun-star:nth-child(5) { transform: rotate(288deg) translateX(var(--stun-orbit-r)); font-size: 16px; color: #FFCC02; animation-delay: 0.28s; }
@keyframes stun-star-pop {
0% { opacity: 0; scale: 0; }
60% { opacity: 1; scale: 1.3; }
100% { opacity: 1; scale: 1; }
}
@keyframes stun-star-twinkle {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(90deg) scale(0.85); }
50% { transform: rotate(180deg) scale(1.1); }
75% { transform: rotate(270deg) scale(0.9); }
100% { transform: rotate(360deg) scale(1); }
}
/* Keep legacy stun-icon-tilt/wobble for the monster icon reaction */
.stun-icon-tilt {
animation: stun-icon-wobble 0.58s cubic-bezier(0.36, 0.0, 0.6, 1) both !important;
transform-origin: 50% 80%;
}
@keyframes stun-icon-wobble {
0%,100% { transform: rotate(0deg) scale(1); }
15% { transform: rotate(-8deg) scale(0.94); }
35% { transform: rotate(5deg) scale(1.02); }
55% { transform: rotate(-3deg); }
75% { transform: rotate(1.5deg); }
}
/* Comic ring — single thin expanding ring for impact feel */
.stun-ring--comic {
position: absolute;
left: 50%; top: 50%;
width: 50px; height: 50px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
border: 2.5px solid rgba(255,220,80,0.85);
box-shadow: 0 0 16px rgba(255,180,40,0.8), inset 0 0 10px rgba(255,140,30,0.4);
animation: stun-comic-ring 0.6s ease-out both;
z-index: 298;
pointer-events: none;
}
@keyframes stun-comic-ring {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(5); border-width: 0.5px; }
}
/* ==========================================================
BLEED — Blood drip cascade with trails, splatters, vignette
Drops fall with gravity acceleration from the upper viewport,
leaving smeared streak trails. On impact, each drop splatters.
A red vignette pulses at the viewport edges. Intensity scales
with bleed stacks — more drips, heavier vignette.
========================================================== */
/* Lives inside #monster-hp-wrap — drips fall from the HP bar downward */
.bleed-drips {
position: absolute;
top: 100%;
left: 0; right: 0;
height: 60px;
overflow: visible;
pointer-events: none;
z-index: 75;
}
/* Individual drip — loops infinitely with staggered delays for steady flow */
.bd-drip {
position: absolute;
top: 0;
width: 0; height: 0;
animation: bd-drip-fall 1.6s cubic-bezier(0.4, 0, 0.9, 0.6) infinite;
}
@keyframes bd-drip-fall {
0% { top: -2px; opacity: 0; }
5% { opacity: 0.9; }
75% { opacity: 0.7; }
100% { top: 50px; opacity: 0; }
}
/* The falling blood drop — teardrop shape, loops with parent */
.bd-drop {
position: absolute;
left: 50%;
top: 0;
width: var(--bdsz, 5px);
height: calc(var(--bdsz, 5px) * 1.5);
transform: translateX(-50%);
background:
radial-gradient(ellipse at 40% 30%, rgba(220,40,30,0.95) 0%, rgba(160,15,10,0.9) 45%, rgba(80,5,3,0.85) 100%);
clip-path: polygon(50% 0%, 90% 50%, 80% 85%, 50% 100%, 20% 85%, 10% 50%);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)) drop-shadow(0 0 3px rgba(180,20,10,0.5));
animation: bd-drop-stretch 1.6s ease-in-out infinite;
}
@keyframes bd-drop-stretch {
0% { transform: translateX(-50%) scaleY(0.7) scaleX(1.15); }
50% { transform: translateX(-50%) scaleY(1.2) scaleX(0.8); }
100% { transform: translateX(-50%) scaleY(1.3) scaleX(0.7); }
}
/* Blood streak trail — thin line above the drop */
.bd-streak {
position: absolute;
left: 50%;
top: -4px;
width: 1.5px;
height: 0;
transform: translateX(-50%);
background: linear-gradient(180deg,
rgba(180,20,10,0.7) 0%,
rgba(140,10,5,0.5) 60%,
transparent 100%);
border-radius: 1px;
animation: bd-streak-flow 1.6s ease-out infinite;
}
@keyframes bd-streak-flow {
0% { height: 0; opacity: 0; }
10% { opacity: 0.6; }
50% { height: 18px; opacity: 0.7; }
100% { height: 24px; opacity: 0; }
}
/* Splatter on landing — radial burst at the bottom */
.bd-splat {
position: absolute;
left: 50%;
bottom: -40px;
width: 0; height: 0;
transform: translateX(-50%);
pointer-events: none;
}
.bd-splat::before {
content: "";
position: absolute;
left: -8px; top: -3px;
width: 16px; height: 6px;
background: radial-gradient(ellipse at center,
rgba(160,20,10,0.9) 0%,
rgba(120,10,5,0.55) 50%,
transparent 100%);
filter: blur(0.8px);
opacity: 0;
animation: bd-splat-spread var(--bddur, 0.8s) ease-out both;
}
/* Secondary splatter droplets */
.bd-splat::after {
content: "";
position: absolute;
left: -12px; top: -6px;
width: 24px; height: 12px;
background:
radial-gradient(circle 2px at 15% 40%, rgba(180,20,10,0.85) 0%, transparent 100%),
radial-gradient(circle 1.5px at 75% 30%, rgba(160,15,8,0.75) 0%, transparent 100%),
radial-gradient(circle 1px at 45% 70%, rgba(140,12,6,0.65) 0%, transparent 100%);
opacity: 0;
animation: bd-splat-specks var(--bddur, 0.8s) ease-out both;
}
@keyframes bd-splat-spread {
0%, 75% { opacity: 0; transform: scaleX(0); }
85% { opacity: 0.9; transform: scaleX(1.2); }
100% { opacity: 0; transform: scaleX(1.6); }
}
@keyframes bd-splat-specks {
0%, 72% { opacity: 0; transform: scale(0.3); }
82% { opacity: 0.85; transform: scale(1); }
100% { opacity: 0; transform: scale(1.4) translateY(-2px); }
}
/* Red vignette pulse — blood-mist border glow */
/* Persistent vignette inside #click-zone while bleed stacks active */
.bd-vignette {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 50%;
box-shadow:
inset 0 0 18px rgba(180,20,10,0.4),
inset 0 0 36px rgba(120,10,5,0.2);
opacity: 0.7;
z-index: 10;
transition: box-shadow 0.3s ease, opacity 0.3s ease;
}
.bd-vignette--heavy {
box-shadow:
inset 0 0 24px rgba(200,25,12,0.6),
inset 0 0 48px rgba(140,15,8,0.35);
opacity: 0.85;
}
/* Flash on each bleed tick */
.bd-vignette.bd-vignette-flash {
animation: bd-vig-flash 0.4s ease-out;
}
@keyframes bd-vig-flash {
0% { opacity: 1; box-shadow: inset 0 0 30px rgba(220,30,15,0.75), inset 0 0 55px rgba(150,15,8,0.45); }
100% { opacity: 0.7; }
}
/* ==========================================================
ELEMENTAL SPELL PROC EFFECTS
Air / Earth / Water / Fire — standard spellbook procs
========================================================== */
/* --- AIR PROC: Gale Strike hitsplat — cyan/white wind aesthetic --- */
.hitsplat.hitsplat--air-proc {
filter:
drop-shadow(0 0 6px rgba(140,230,255,0.9))
drop-shadow(0 0 14px rgba(80,200,255,0.5));
animation: air-proc-splat 0.9s ease-out forwards;
}
body.rebrand .hitsplat.hitsplat--air-proc {
filter:
drop-shadow(0 0 6px rgba(140,230,255,0.9))
drop-shadow(0 0 14px rgba(80,200,255,0.5));
}
@keyframes air-proc-splat {
0% { transform: translate(-50%,-50%) scale(0) rotate(8deg); opacity: 1;
filter: brightness(2) drop-shadow(0 0 10px rgba(180,240,255,0.95)); }
15% { transform: translate(-50%,-50%) scale(1.25) rotate(-3deg); opacity: 1;
filter: brightness(1.2) drop-shadow(0 0 8px rgba(140,230,255,0.9)); }
35% { transform: translate(-50%,-50%) scale(0.95) rotate(0deg); opacity: 1; }
100% { transform: translate(-50%,-80%) scale(0.9) rotate(0deg); opacity: 0;
filter: drop-shadow(0 0 6px rgba(140,230,255,0.7)); }
}
/* --- AIR PROC: Wind gust VFX — streaks across viewport --- */
.air-proc-gust {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 80;
}
.air-proc-streak {
position: absolute;
height: 2px;
width: 120%;
left: -10%;
background: linear-gradient(90deg,
transparent 0%,
rgba(180,240,255,0.15) 15%,
rgba(200,250,255,0.7) 45%,
rgba(255,255,255,0.9) 50%,
rgba(200,250,255,0.7) 55%,
rgba(180,240,255,0.15) 85%,
transparent 100%);
filter: blur(0.5px);
opacity: 0;
animation: air-streak-slash 0.5s ease-out forwards;
}
.air-proc-streak:nth-child(1) {
top: 30%;
transform: rotate(-4deg);
animation-delay: 0s;
}
.air-proc-streak:nth-child(2) {
top: 50%;
transform: rotate(2deg);
animation-delay: 0.06s;
}
.air-proc-streak:nth-child(3) {
top: 68%;
transform: rotate(-6deg);
animation-delay: 0.12s;
height: 1.5px;
}
@keyframes air-streak-slash {
0% { opacity: 0; transform: rotate(var(--r, -4deg)) translateX(-30%); }
20% { opacity: 1; }
60% { opacity: 0.8; }
100% { opacity: 0; transform: rotate(var(--r, -4deg)) translateX(20%); }
}
/* --- EARTH STUN: Seismic ground-slam effect --- */
.earth-stun-overlay {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 0; height: 0;
z-index: 300;
pointer-events: none;
}
.earth-stun-flash {
position: absolute;
left: 50%; top: 50%;
width: 200px; height: 200px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(210,160,60,0.6) 0%,
rgba(160,100,20,0.3) 40%,
transparent 70%);
animation: earth-flash-pulse 0.5s ease-out forwards;
}
@keyframes earth-flash-pulse {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
25% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(2.5); }
}
.earth-stun-cracks {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
}
.earth-stun-cracks i {
position: absolute;
left: 0; top: 0;
width: 3px; height: 3px;
background: linear-gradient(180deg, #daa54a, #8b5e1a);
box-shadow: 0 0 5px rgba(180,120,40,0.8), 0 0 10px rgba(140,80,10,0.4);
animation: earth-crack-shoot 0.55s ease-out both;
}
.earth-stun-cracks i:nth-child(1) { --a: 0deg; --d: 55px; width: 20px; height: 2px; }
.earth-stun-cracks i:nth-child(2) { --a: 60deg; --d: 48px; width: 18px; height: 2px; animation-delay: 0.03s; }
.earth-stun-cracks i:nth-child(3) { --a:120deg; --d: 52px; width: 22px; height: 2px; animation-delay: 0.06s; }
.earth-stun-cracks i:nth-child(4) { --a:180deg; --d: 50px; width: 16px; height: 2px; animation-delay: 0.02s; }
.earth-stun-cracks i:nth-child(5) { --a:240deg; --d: 54px; width: 20px; height: 2px; animation-delay: 0.05s; }
.earth-stun-cracks i:nth-child(6) { --a:300deg; --d: 46px; width: 18px; height: 2px; animation-delay: 0.04s; }
@keyframes earth-crack-shoot {
0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(0.3); }
25% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scaleX(1); }
}
.earth-stun-pow {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0.3);
font-family: 'Cinzel', serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 5px;
line-height: 1;
color: transparent;
background: linear-gradient(180deg, #f5deb3 0%, #daa54a 40%, #8b5e1a 100%);
-webkit-background-clip: text; background-clip: text;
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.85)) drop-shadow(0 0 10px rgba(180,120,40,0.7));
opacity: 0;
animation: earth-pow-in 0.6s cubic-bezier(0.22, 1.4, 0.36, 1) both 0.08s;
white-space: nowrap;
}
@keyframes earth-pow-in {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(-8deg); letter-spacing: 12px; }
50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(1deg); letter-spacing: 5px; }
70% { transform: translate(-50%,-50%) scale(0.96) rotate(0deg); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.02) rotate(0deg); letter-spacing: 5px; }
}
.earth-stun-rocks {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
}
.earth-rock {
position: absolute;
display: block;
width: 6px; height: 6px;
background: linear-gradient(135deg, #c9a054, #7a5022, #4a2e10);
border-radius: 1px;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
animation: earth-rock-fly 0.8s ease-out both;
}
.earth-rock:nth-child(1) { --rx: -28px; --ry: -40px; --rot: 120deg; width: 7px; height: 5px; }
.earth-rock:nth-child(2) { --rx: 32px; --ry: -35px; --rot: -80deg; animation-delay: 0.04s; }
.earth-rock:nth-child(3) { --rx: -35px; --ry: -25px; --rot: 200deg; width: 5px; height: 4px; animation-delay: 0.07s; }
.earth-rock:nth-child(4) { --rx: 22px; --ry: -42px; --rot: -150deg; width: 4px; height: 4px; animation-delay: 0.03s; }
.earth-rock:nth-child(5) { --rx: -8px; --ry: -48px; --rot: 90deg; width: 5px; height: 3px; animation-delay: 0.06s; }
@keyframes earth-rock-fly {
0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
15% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--rx), var(--ry)) rotate(var(--rot)) scale(0.2); }
}
/* --- EARTH STUN: Debuff chip on monster --- */
.earth-stun-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px !important;
background: linear-gradient(180deg, rgba(60,38,12,0.92), rgba(30,18,4,0.95)) !important;
border: 1px solid rgba(210,160,60,0.55) !important;
color: #f5deb3 !important;
box-shadow:
inset 0 1px 0 rgba(240,200,120,0.2),
0 0 10px rgba(180,120,40,0.35) !important;
font-family: 'Lexend', sans-serif;
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
position: relative;
}
.earth-stun-icon {
width: 10px; height: 10px;
display: inline-block;
background: radial-gradient(circle, #daa54a 0%, #8b5e1a 70%, transparent 100%);
clip-path: polygon(50% 0, 80% 30%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0 50%, 20% 30%);
filter: drop-shadow(0 0 3px rgba(180,120,40,0.8));
animation: earth-chip-pulse 1.8s ease-in-out infinite;
}
.earth-stun-label {
font-weight: 700;
color: #f0d8a0;
text-shadow: 0 0 4px rgba(180,120,40,0.55);
}
@keyframes earth-chip-pulse {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(210,160,60,0.9)); }
}
/* --- WATER HEAL: Cyan/blue healing text --- */
.water-heal {
position: absolute !important;
top: 50% !important;
width: auto !important;
height: auto !important;
background: none !important;
color: #3de8ff;
font-size: 15px !important;
font-weight: bold;
text-shadow:
0 0 6px rgba(40,200,255,0.8),
0 0 14px rgba(20,140,220,0.4),
1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
animation: waterHealFloat 0.9s ease-out forwards;
pointer-events: none;
z-index: 25;
}
@keyframes waterHealFloat {
0% { transform: translate(-50%, -50%) scale(1.3); opacity: 1;
text-shadow: 0 0 12px rgba(40,220,255,0.95), 0 0 20px rgba(20,140,220,0.6),
1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
25% { transform: translate(-50%, -80%) scale(1.05); opacity: 1; }
100% { transform: translate(-50%, -130%) scale(0.85); opacity: 0; }
}
/* Brief blue pulse on the HP bar when water heals */
.water-heal-pulse {
animation: water-bar-pulse 0.5s ease-out;
}
@keyframes water-bar-pulse {
0% { box-shadow: inset 0 0 8px rgba(40,200,255,0.7), 0 0 12px rgba(40,200,255,0.5); }
100% { box-shadow: none; }
}
/* --- LIVING BOMB: Fiery hitsplat — deep orange with glow --- */
.hitsplat.hitsplat--living-bomb {
filter:
drop-shadow(0 0 8px rgba(255,102,0,0.95))
drop-shadow(0 0 18px rgba(255,60,0,0.5));
animation: bomb-splat-pop 0.85s ease-out forwards;
}
body.rebrand .hitsplat.hitsplat--living-bomb {
filter:
drop-shadow(0 0 8px rgba(255,102,0,0.95))
drop-shadow(0 0 18px rgba(255,60,0,0.5));
}
@keyframes bomb-splat-pop {
0% { transform: translate(-50%,-50%) scale(0); opacity: 1;
filter: brightness(2.5) drop-shadow(0 0 12px rgba(255,120,0,0.95)); }
18% { transform: translate(-50%,-50%) scale(1.35); opacity: 1;
filter: brightness(1.4) drop-shadow(0 0 10px rgba(255,102,0,0.9)); }
36% { transform: translate(-50%,-50%) scale(0.95); opacity: 1; }
100% { transform: translate(-50%,-70%) scale(0.9); opacity: 0;
filter: drop-shadow(0 0 8px rgba(255,80,0,0.7)); }
}
/* --- LIVING BOMB: Stack chip (debuff on monster) --- */
.living-bomb-chip {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px !important;
background: linear-gradient(180deg, rgba(50,16,4,0.92), rgba(28,6,0,0.95)) !important;
border: 1px solid rgba(255,120,20,0.6) !important;
color: #ffd4a8 !important;
box-shadow:
inset 0 1px 0 rgba(255,200,120,0.22),
0 0 10px rgba(255,80,0,0.4) !important;
font-family: 'Lexend', sans-serif;
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
position: relative;
}
.living-bomb-chip.stack-flash {
animation: bomb-chip-pop 0.42s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.bomb-chip-flame {
width: 10px; height: 14px;
display: inline-block;
background:
radial-gradient(ellipse 5px 8px at 50% 70%, #fff4c2 0%, #ffaa22 40%, #ff4400 80%, transparent 100%);
clip-path: polygon(50% 0, 85% 35%, 100% 70%, 78% 100%, 22% 100%, 0 70%, 15% 35%);
filter: drop-shadow(0 0 4px rgba(255,120,0,0.9));
animation: bomb-flame-dance 0.6s ease-in-out infinite alternate;
}
.bomb-chip-label {
font-weight: 700;
color: #ffe0b4;
text-shadow: 0 0 4px rgba(255,100,0,0.6);
}
.bomb-chip-count {
min-width: 14px; padding: 0 4px;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 12px;
color: #fff8e0;
background: linear-gradient(180deg, rgba(255,140,20,0.9), rgba(200,50,0,0.9));
border-radius: 2px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.6);
box-shadow: inset 0 1px 0 rgba(255,230,160,0.4);
}
@keyframes bomb-chip-pop {
0% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,200,120,0.22), 0 0 10px rgba(255,80,0,0.4); }
40% { transform: scale(1.16); box-shadow: inset 0 1px 0 rgba(255,220,140,0.45), 0 0 28px rgba(255,100,0,0.8); }
100% { transform: scale(1); }
}
@keyframes bomb-flame-dance {
0% { transform: scaleY(1) scaleX(1); filter: drop-shadow(0 0 4px rgba(255,120,0,0.9)); }
100% { transform: scaleY(1.12) scaleX(0.92); filter: drop-shadow(0 0 6px rgba(255,160,20,1)); }
}
/* --- LIVING BOMB: Explosion VFX — the payoff --- */
.living-bomb-explosion {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 0; height: 0;
z-index: 310;
pointer-events: none;
}
.bomb-flash {
position: absolute;
left: 50%; top: 50%;
width: 280px; height: 280px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(255,240,200,0.9) 0%,
rgba(255,160,40,0.7) 20%,
rgba(255,80,0,0.4) 45%,
transparent 70%);
animation: bomb-flash-expand 0.45s ease-out forwards;
}
@keyframes bomb-flash-expand {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.1); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(3); }
}
.bomb-fireball {
position: absolute;
left: 50%; top: 50%;
width: 60px; height: 60px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 40% 35%,
#fff8e0 0%,
#ffcc44 15%,
#ff8800 35%,
#e83200 55%,
#881100 75%,
transparent 100%);
box-shadow:
0 0 20px rgba(255,120,0,0.9),
0 0 40px rgba(255,60,0,0.6),
0 0 80px rgba(200,30,0,0.3);
animation: bomb-fireball-bloom 0.7s ease-out forwards;
}
@keyframes bomb-fireball-bloom {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
15% { opacity: 1; transform: translate(-50%,-50%) scale(1.4); }
40% { opacity: 0.9; transform: translate(-50%,-50%) scale(1); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(0.5);
filter: brightness(0.4); }
}
.bomb-embers {
position: absolute;
left: 50%; top: 50%;
width: 0; height: 0;
}
.bomb-embers i {
position: absolute;
left: 0; top: 0;
width: 4px; height: 4px;
border-radius: 50%;
background: radial-gradient(circle, #ffdd66 0%, #ff6600 60%, #cc2200 100%);
box-shadow: 0 0 4px rgba(255,120,0,0.9), 0 0 8px rgba(255,60,0,0.5);
animation: bomb-ember-scatter 1.2s ease-out both;
}
.bomb-embers i:nth-child(1) { --ea: 0deg; --ed: 65px; --eg: -0.6; }
.bomb-embers i:nth-child(2) { --ea: 30deg; --ed: 72px; --eg: -0.8; width: 3px; height: 3px; animation-delay: 0.03s; }
.bomb-embers i:nth-child(3) { --ea: 60deg; --ed: 58px; --eg: -0.5; animation-delay: 0.06s; }
.bomb-embers i:nth-child(4) { --ea: 90deg; --ed: 70px; --eg: -0.7; width: 5px; height: 5px; animation-delay: 0.02s; }
.bomb-embers i:nth-child(5) { --ea: 120deg; --ed: 62px; --eg: -0.4; animation-delay: 0.08s; }
.bomb-embers i:nth-child(6) { --ea: 150deg; --ed: 75px; --eg: -0.9; width: 3px; height: 3px; animation-delay: 0.04s; }
.bomb-embers i:nth-child(7) { --ea: 180deg; --ed: 55px; --eg: -0.6; animation-delay: 0.07s; }
.bomb-embers i:nth-child(8) { --ea: 210deg; --ed: 68px; --eg: -0.7; width: 4px; height: 3px; animation-delay: 0.01s; }
.bomb-embers i:nth-child(9) { --ea: 240deg; --ed: 60px; --eg: -0.5; animation-delay: 0.09s; }
.bomb-embers i:nth-child(10) { --ea: 270deg; --ed: 73px; --eg: -0.8; width: 3px; height: 3px; animation-delay: 0.05s; }
.bomb-embers i:nth-child(11) { --ea: 300deg; --ed: 56px; --eg: -0.4; animation-delay: 0.06s; }
.bomb-embers i:nth-child(12) { --ea: 330deg; --ed: 64px; --eg: -0.6; width: 5px; height: 4px; animation-delay: 0.03s; }
@keyframes bomb-ember-scatter {
0% { opacity: 0; transform: rotate(var(--ea)) translateX(0) scale(1); }
10% { opacity: 1; }
50% { opacity: 0.8; }
100% { opacity: 0; transform: rotate(var(--ea)) translate(var(--ed), calc(var(--eg) * var(--ed))) scale(0); }
}
.bomb-shockring {
position: absolute;
left: 50%; top: 50%;
width: 50px; height: 50px;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
border: 3px solid rgba(255,160,40,0.8);
box-shadow:
0 0 16px rgba(255,100,0,0.8),
inset 0 0 10px rgba(255,60,0,0.4);
animation: bomb-ring-expand 0.8s ease-out both 0.05s;
}
@keyframes bomb-ring-expand {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); border-width: 3px; }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(5); border-width: 1px; }
}
/* --- Mobile adjustments for elemental procs --- */
@media (max-width: 480px) {
.earth-stun-pow { font-size: 22px !important; letter-spacing: 3px !important; }
.bomb-chip-count, .bomb-chip-label { font-size: 9px; }
.earth-stun-label { font-size: 9px; }
.living-bomb-chip { font-size: 9px; }
.earth-stun-chip { font-size: 9px; }
.water-heal { font-size: 13px !important; }
}
/* ==========================================================
ENCHANTED BOLT PROC EFFECTS
5 distinct visual effects matching the game's VFX quality bar
========================================================== */
/* --- Shared hitsplat variants --- */
.hitsplat.hitsplat--bolt-opal { filter: hue-rotate(-20deg) saturate(2) brightness(1.3); }
.hitsplat.hitsplat--bolt-sapphire { filter: hue-rotate(180deg) saturate(1.5) brightness(1.2); }
.hitsplat.hitsplat--bolt-emerald,
.hitsplat.hitsplat--bolt-poison { filter: hue-rotate(90deg) saturate(1.8) brightness(1.1); }
.hitsplat.hitsplat--bolt-dragon { filter: hue-rotate(-30deg) saturate(2) brightness(1.3); }
.hitsplat.hitsplat--bolt-onyx { filter: drop-shadow(0 0 6px rgba(255,0,0,0.8)) brightness(1.2); animation: crit-splat-pop 1.1s ease-out forwards; }
.bolt-heal-onyx { color: #FF4444 !important; text-shadow: 0 0 6px rgba(255,0,0,0.6); }
/* ──────────────────────────────────────────────
1. OPAL — Lightning Strike
Forked lightning bolts + electric spark shower
────────────────────────────────────────────── */
.bolt-opal-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 300;
display: flex; align-items: center; justify-content: center;
}
.opal-flash {
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.7), rgba(255,215,0,0.3) 40%, transparent 70%);
animation: opal-flash-burst 0.3s ease-out forwards;
}
.opal-bolt {
position: absolute; left: 50%; top: 0;
width: 4px; height: 75%;
background: linear-gradient(180deg, #fff 0%, #FFD700 30%, #FF8C00 100%);
transform-origin: top center;
transform: translateX(-50%) rotate(var(--ob-angle, 0deg));
clip-path: polygon(0 0, 100% 0, 65% 25%, 100% 25%, 70% 50%, 100% 50%, 50% 100%, 60% 50%, 30% 50%, 55% 25%, 20% 25%);
filter: drop-shadow(0 0 6px #FFD700) drop-shadow(0 0 12px rgba(255,215,0,0.5));
animation: opal-bolt-strike 0.5s ease-out forwards;
opacity: 0;
}
.opal-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.opal-sparks i {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: #FFD700;
box-shadow: 0 0 4px #FFD700, 0 0 8px rgba(255,215,0,0.5);
animation: opal-spark-scatter 0.6s ease-out forwards;
opacity: 0;
}
.opal-label {
position: relative; z-index: 2;
font-size: 16px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase;
color: #FFD700;
text-shadow: 0 0 8px #FFD700, 0 0 20px rgba(255,215,0,0.6), 0 1px 0 #000;
animation: bolt-label-slam 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
opacity: 0;
}
@keyframes opal-flash-burst {
0% { opacity: 0; transform: scale(0.3); }
20% { opacity: 1; }
100% { opacity: 0; transform: scale(1.5); }
}
@keyframes opal-bolt-strike {
0% { opacity: 0; clip-path: polygon(45% 0, 55% 0, 55% 0, 55% 0, 55% 0, 55% 0, 50% 0, 55% 0, 55% 0, 55% 0, 45% 0); }
15% { opacity: 1; }
30% { opacity: 1; clip-path: polygon(0 0, 100% 0, 65% 25%, 100% 25%, 70% 50%, 100% 50%, 50% 100%, 60% 50%, 30% 50%, 55% 25%, 20% 25%); }
60% { opacity: 0.6; }
70% { opacity: 0.9; }
100% { opacity: 0; }
}
@keyframes opal-spark-scatter {
0% { opacity: 1; transform: rotate(var(--sp-a)) translateY(0); }
100% { opacity: 0; transform: rotate(var(--sp-a)) translateY(calc(var(--sp-d) * -1)); }
}
/* ──────────────────────────────────────────────
2. SAPPHIRE — Ice Shatter
Crystal fragments radiating outward + frost vignette
────────────────────────────────────────────── */
.bolt-sapphire-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 300;
display: flex; align-items: center; justify-content: center;
}
.sapphire-flash {
position: absolute; inset: 0;
background: radial-gradient(circle, rgba(120,180,255,0.6), rgba(68,136,255,0.2) 50%, transparent 75%);
animation: sapphire-flash-crack 0.35s ease-out forwards;
}
.sapphire-shards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sapphire-shards i {
position: absolute;
width: 4px; height: 14px;
background: linear-gradient(180deg, #E0F0FF, #4488FF 50%, #2255AA);
clip-path: polygon(50% 0, 100% 40%, 80% 100%, 20% 100%, 0 40%);
filter: drop-shadow(0 0 3px rgba(100,180,255,0.8));
animation: sapphire-shard-fly 0.8s ease-out forwards;
opacity: 0;
}
.sapphire-frost {
position: absolute; inset: 0;
box-shadow: inset 0 0 30px rgba(68,136,255,0.5), inset 0 0 60px rgba(100,180,255,0.2);
border-radius: 8px;
animation: sapphire-frost-pulse 1.2s ease-out forwards;
opacity: 0;
}
.sapphire-label {
position: relative; z-index: 2;
font-size: 14px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
color: #88BBFF;
text-shadow: 0 0 8px #4488FF, 0 0 16px rgba(68,136,255,0.5), 0 1px 0 #112244;
animation: bolt-label-slam 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
opacity: 0;
}
@keyframes sapphire-flash-crack {
0% { opacity: 0; transform: scale(0.2); }
25% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0; transform: scale(1.4); }
}
@keyframes sapphire-shard-fly {
0% { opacity: 1; transform: rotate(var(--sh-a)) translateY(0) rotate(var(--sh-r)) scale(0.3); }
20% { opacity: 1; transform: rotate(var(--sh-a)) translateY(calc(var(--sh-d) * -0.3)) rotate(var(--sh-r)) scale(1); }
100% { opacity: 0; transform: rotate(var(--sh-a)) translateY(calc(var(--sh-d) * -1)) rotate(calc(var(--sh-r) + 90deg)) scale(0.5); }
}
@keyframes sapphire-frost-pulse {
0% { opacity: 0; }
20% { opacity: 0.8; }
60% { opacity: 0.5; }
100% { opacity: 0; }
}
/* ──────────────────────────────────────────────
3. EMERALD — Poison Eruption
Toxic bubbles rising + green mist creeping upward
────────────────────────────────────────────── */
.bolt-emerald-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 300;
overflow: hidden;
}
.emerald-splash {
position: absolute; left: 50%; bottom: 10%;
width: 120px; height: 40px;
transform: translateX(-50%);
background: radial-gradient(ellipse, rgba(0,204,68,0.6), transparent 70%);
animation: emerald-splash-burst 0.3s ease-out forwards;
}
.emerald-bubbles i {
position: absolute; bottom: 5%;
width: var(--bb-sz, 6px); height: var(--bb-sz, 6px);
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(100,255,140,0.9), rgba(0,180,60,0.7));
border: 1px solid rgba(0,220,70,0.4);
animation: emerald-bubble-rise 1.0s ease-out forwards;
opacity: 0;
}
.emerald-mist {
position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
background: linear-gradient(to top, rgba(0,180,60,0.25), transparent);
animation: emerald-mist-creep 1.4s ease-out forwards;
opacity: 0;
}
.emerald-label {
position: absolute; left: 50%; top: 45%;
transform: translate(-50%, -50%);
font-size: 16px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
color: #00DD44;
text-shadow: 0 0 8px #00CC44, 0 0 16px rgba(0,204,68,0.5), 0 2px 0 #003311;
animation: bolt-label-slam 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
opacity: 0;
}
@keyframes emerald-splash-burst {
0% { opacity: 0; transform: translateX(-50%) scaleY(0.2) scaleX(0.5); }
30% { opacity: 1; transform: translateX(-50%) scaleY(1.2) scaleX(1.1); }
100% { opacity: 0; transform: translateX(-50%) scaleY(0.8) scaleX(1.5); }
}
@keyframes emerald-bubble-rise {
0% { opacity: 0.8; transform: translateY(0) translateX(0); }
50% { opacity: 0.9; transform: translateY(-60px) translateX(var(--bb-wob, 0px)); }
100% { opacity: 0; transform: translateY(-120px) translateX(calc(var(--bb-wob, 0px) * -1)); }
}
@keyframes emerald-mist-creep {
0% { opacity: 0; height: 5%; }
30% { opacity: 0.7; height: 30%; }
70% { opacity: 0.4; height: 40%; }
100% { opacity: 0; height: 45%; }
}
/* ──────────────────────────────────────────────
4. DRAGON — Fire Breath
Flame particles sweeping across + heat shimmer
────────────────────────────────────────────── */
.bolt-dragon-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 300;
overflow: hidden;
}
.dragon-flash {
position: absolute; left: -10%; top: 20%; width: 50%; height: 60%;
background: radial-gradient(ellipse at 30% 50%, rgba(255,200,50,0.7), rgba(255,100,0,0.4) 50%, transparent 80%);
animation: dragon-flash-sweep 0.4s ease-out forwards;
}
.dragon-flames i {
position: absolute; left: -5%;
width: var(--fl-sz, 8px); height: var(--fl-sz, 8px);
border-radius: 50% 50% 50% 0;
background: radial-gradient(circle, #FFD700, #FF6600 60%, #CC2200);
filter: blur(1px);
box-shadow: 0 0 4px rgba(255,100,0,0.6);
animation: dragon-flame-sweep 0.9s ease-out forwards;
opacity: 0;
transform: rotate(45deg);
}
.dragon-heat {
position: absolute; inset: 0;
box-shadow: inset 0 0 20px rgba(255,100,0,0.3), inset 0 0 50px rgba(255,60,0,0.1);
animation: dragon-heat-shimmer 1.0s ease-out forwards;
opacity: 0;
}
.dragon-label {
position: absolute; left: 50%; top: 45%;
transform: translate(-50%, -50%);
font-size: 14px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
color: #FF8800;
text-shadow: 0 0 8px #FF6600, 0 0 20px rgba(255,100,0,0.6), 0 1px 0 #441100;
animation: bolt-label-slam 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
opacity: 0; white-space: nowrap;
}
@keyframes dragon-flash-sweep {
0% { opacity: 0; transform: scaleX(0.3); }
30% { opacity: 1; transform: scaleX(1.2); }
100% { opacity: 0; transform: scaleX(2) translateX(30%); }
}
@keyframes dragon-flame-sweep {
0% { opacity: 0.9; transform: rotate(45deg) translateX(0); }
100% { opacity: 0; transform: rotate(45deg) translateX(calc(100vw * 0.8)); }
}
@keyframes dragon-heat-shimmer {
0% { opacity: 0; }
20% { opacity: 0.6; }
50% { opacity: 0.3; }
100% { opacity: 0; }
}
/* ──────────────────────────────────────────────
5. ONYX — Blood Siphon
Dark tendrils reaching outward + contracting vortex
────────────────────────────────────────────── */
.bolt-onyx-overlay {
position: absolute; inset: 0; pointer-events: none; z-index: 300;
display: flex; align-items: center; justify-content: center;
}
.onyx-flash {
position: absolute; inset: 0;
background: radial-gradient(circle, rgba(100,0,0,0.6), rgba(50,0,0,0.3) 50%, transparent 75%);
animation: onyx-flash-dark 0.4s ease-out forwards;
}
.onyx-tendrils { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.onyx-tendrils i {
position: absolute;
width: 2px; height: 50px;
background: linear-gradient(180deg, rgba(200,0,0,0.8), rgba(80,0,0,0.3));
transform-origin: center top;
transform: rotate(var(--tn-a)) translateY(0);
border-radius: 1px;
filter: drop-shadow(0 0 4px rgba(200,0,0,0.5));
animation: onyx-tendril-reach 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
opacity: 0;
}
.onyx-vortex {
position: absolute;
width: 40px; height: 40px;
border: 2px solid rgba(200,0,0,0.6);
border-radius: 50%;
box-shadow: 0 0 10px rgba(200,0,0,0.4), inset 0 0 10px rgba(150,0,0,0.3);
animation: onyx-vortex-contract 0.8s ease-in forwards;
opacity: 0;
}
.onyx-label {
position: relative; z-index: 2;
font-size: 16px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
color: #FF2222;
text-shadow: 0 0 8px rgba(200,0,0,0.8), 0 0 20px rgba(150,0,0,0.4), 0 2px 0 #220000;
animation: bolt-label-slam 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
opacity: 0;
}
@keyframes onyx-flash-dark {
0% { opacity: 0; }
20% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes onyx-tendril-reach {
0% { opacity: 0; height: 5px; }
30% { opacity: 0.9; height: 55px; }
60% { opacity: 0.7; height: 50px; }
80% { opacity: 0.3; height: 30px; }
100% { opacity: 0; height: 10px; }
}
@keyframes onyx-vortex-contract {
0% { opacity: 0; transform: scale(3) rotate(0deg); }
30% { opacity: 0.8; transform: scale(1.5) rotate(120deg); }
70% { opacity: 0.6; transform: scale(0.8) rotate(300deg); }
100% { opacity: 0; transform: scale(0.3) rotate(540deg); }
}
/* --- Shared bolt label animation --- */
@keyframes bolt-label-slam {
0% { opacity: 0; transform: scale(2) translateY(5px); }
40% { opacity: 1; transform: scale(0.95) translateY(-1px); }
60% { opacity: 1; transform: scale(1.05) translateY(0); }
100% { opacity: 0.7; transform: scale(1) translateY(0); }
}
/* --- Mobile adjustments for bolt procs --- */
@media (max-width: 480px) {
.opal-label, .sapphire-label, .emerald-label,
.dragon-label, .onyx-label { font-size: 12px; letter-spacing: 2px; }
.opal-bolt { height: 60%; }
.sapphire-shards i { height: 10px; }
}
/* ============================================================================
ITEM-WINDOW DESIGN TOKENS (--iw-*)
The shared chrome for every item/gear surface — the bank window, the gear &
orb pickers, and shop tiles. Defaults below = the carved-obsidian / ember /
gradient-gold "bank look". Each theme overrides ONLY these tokens to recolor
the whole item-UI family at once (see css/theme-*.css). Keep the bank's
appearance identical by keeping these defaults equal to the original values.
============================================================================ */
:root {
--iw-surface: linear-gradient(160deg, #1b1610 0%, #13100b 55%, #181410 100%);
--iw-chrome-head: linear-gradient(180deg, #2a2118, #1a1510);
--iw-chrome-foot: linear-gradient(180deg, #1d1710, #14100a);
--iw-edge: #3a2f1d; /* inset 1px borders, sockets, fields */
--iw-field: #0d0b08; /* search / number inputs */
--iw-accent: #c9920e; /* primary accent (borders, hover, active rim) */
--iw-accent-bright: #ffd700;
--iw-accent-soft: #d9b96a; /* dividers, sub-labels */
--iw-text-grad: linear-gradient(180deg, #ffe9a8, #ffd700 45%, #c9920e);
--iw-glow: rgba(255,120,20,.18); /* active ember glow */
--iw-glow-soft: rgba(255,120,20,.06); /* ambient window glow */
--iw-socket: linear-gradient(180deg, #221b12, #171209);
--iw-socket-active: linear-gradient(180deg, #332612, #241807);
--iw-tile-hover: var(--cell-active);
/* ── Icon size tiers (GLOBAL — themes must NOT override these) ──
Every item icon in the game uses one of three sizes:
tile = 40px interactive item grids (bank, shops, pickers)
row = 32px read-only list rows (clog, loot tracker, reports)
chip = 20px glanceable status counters (profile hub supplies)
New surfaces MUST pick a tier — no new magic-number icon sizes. */
--iw-icon-tile: 40px;
--iw-icon-row: 32px;
--iw-icon-chip: 20px;
}
/* ============================================================================
BANK 2.0 — floating OSRS-style bank window (bank-window.ts)
Carved obsidian base, ember glow accents, gradient gold. Themed via --iw-*.
============================================================================ */
.bw-root {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-window);
width: min(560px, 94vw);
height: min(660px, 88vh);
display: flex; flex-direction: column;
background: var(--iw-surface);
border: 1px solid #000; border-radius: 6px;
box-shadow: inset 0 0 0 1px var(--iw-edge), 0 0 0 2px rgba(0,0,0,.8),
0 14px 40px rgba(0,0,0,.65), 0 0 24px var(--iw-glow-soft);
animation: bw-open .14s ease-out;
}
@keyframes bw-open { from { opacity: 0; } }
.bw-head {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; cursor: grab; user-select: none;
background: var(--iw-chrome-head);
border-bottom: 1px solid #000; border-radius: 6px 6px 0 0;
box-shadow: inset 0 1px 0 rgba(255,200,100,.07);
}
.bw-head:active { cursor: grabbing; }
.bw-title { font-weight: 700; color: var(--white); letter-spacing: .4px; white-space: nowrap; font-size: 13px; }
.bw-value {
background: var(--iw-text-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-weight: 800;
}
.bw-count { color: var(--muted); font-weight: 400; font-size: 11px; }
.bw-search {
flex: 1; min-width: 60px;
background: var(--iw-field); border: 1px solid var(--iw-edge); border-radius: 3px;
color: var(--white); padding: 4px 8px; font-size: 12px; outline: none;
}
.bw-search:focus { border-color: var(--iw-accent); box-shadow: 0 0 6px var(--iw-glow); }
.bw-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; }
.bw-close:hover { color: var(--red); }
/* Tab strip — carved sockets, ember under-glow on the active tab */
.bw-tabs {
display: flex; gap: 4px; padding: 6px 8px;
background: #16120d; border-bottom: 1px solid #000;
overflow-x: auto; scrollbar-width: thin;
}
.bw-tab {
position: relative; width: 38px; height: 34px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--iw-socket);
border: 1px solid #000; border-radius: 4px; cursor: pointer; padding: 0;
box-shadow: inset 0 1px 0 rgba(255,220,150,.06), inset 0 -2px 4px rgba(0,0,0,.5);
}
.bw-tab:hover { box-shadow: inset 0 0 0 1px var(--iw-accent), inset 0 -2px 4px rgba(0,0,0,.5); }
.bw-tab.active {
background: var(--iw-socket-active);
box-shadow: inset 0 0 0 1px var(--iw-accent), inset 0 -6px 10px var(--iw-glow), 0 0 10px var(--iw-glow);
}
.bw-tab.active::after {
content: ''; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px;
background: linear-gradient(90deg, transparent, var(--iw-accent-bright), transparent);
}
.bw-tab-icon { width: 24px; height: 24px; image-rendering: pixelated; }
.bw-tab-icon-empty { opacity: .45; filter: grayscale(.6); }
.bw-tab-drop { box-shadow: inset 0 0 0 2px var(--gold) !important; background: rgba(255,215,0,.12) !important; }
.bw-tab-add { border-style: dashed; border-color: #3a2f1d; background: transparent; }
.bw-tab-add .bw-add-glyph { color: var(--gold-dim); font-size: 20px; font-weight: 700; line-height: 1; }
.bw-tab-add:hover .bw-add-glyph { color: var(--gold); }
.bw-tab-locked {
border-style: solid; border-color: rgba(201,146,14,.55);
background: linear-gradient(180deg, #241c0e, #191307);
}
.bw-lock-glyph { font-size: 13px; filter: sepia(1) saturate(3) hue-rotate(-10deg) drop-shadow(0 0 3px rgba(255,160,40,.4)); }
.bw-tab-locked:hover { box-shadow: 0 0 10px rgba(255,150,30,.35), inset 0 0 0 1px #c9920e; }
/* Sell mode — unmissable */
.bw-sellbar {
display: none; text-align: center; padding: 4px;
font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
color: #ffb3b3; text-shadow: 0 1px 0 #000;
background: linear-gradient(180deg, #5a1f1f, #3e1414);
border-bottom: 1px solid #000;
}
.bw-selling .bw-sellbar { display: block; animation: bw-sell-pulse 1.6s ease-in-out infinite; }
@keyframes bw-sell-pulse { 50% { background: linear-gradient(180deg, #6e2727, #4a1818); } }
/* Grid — 8 columns, OSRS-dense */
.bw-body { flex: 1; min-height: 0; display: flex; position: relative; }
.bw-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 0; width: 100%; padding: 4px;
background: transparent;
flex: 1; overflow-y: auto; min-height: 0; align-content: start;
}
.bw-grid.sell-mode { background: #3E2020; }
.bw-grid.sell-mode .bank-item:active { background: rgba(107, 48, 48, 0.5); }
/* OSRS insert-drag caret */
.bw-grid .bank-item.bw-ins-l::before,
.bw-grid .bank-item.bw-ins-r::after {
content: ''; position: absolute; top: 4px; bottom: 4px; width: 2px;
background: var(--gold); box-shadow: 0 0 6px rgba(255,180,40,.8); border-radius: 1px;
}
.bw-grid .bank-item.bw-ins-l::before { left: -1px; }
.bw-grid .bank-item.bw-ins-r::after { right: -1px; }
/* Pointer-drag: floating ghost that follows the finger/cursor */
.bw-drag-ghost {
position: fixed; z-index: var(--z-drag); left: 0; top: 0;
width: 44px; height: 44px; margin: -22px 0 0 -22px;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
background: radial-gradient(ellipse at 50% 45%, rgba(255,170,60,.22), transparent 70%);
filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
transform: scale(1.18); opacity: .95;
animation: bw-ghost-pop .1s ease-out;
}
.bw-drag-ghost img { width: 32px; height: 32px; image-rendering: pixelated; }
.bw-drag-ghost .bi-qty { display: none; }
@keyframes bw-ghost-pop { from { transform: scale(1); opacity: .6; } }
/* Source cell while its ghost is in flight */
.bw-grid .bank-item.bank-dragging { opacity: .3; }
/* Kill text selection / native callouts during a drag */
body.bw-dragging-active { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grabbing; }
/* All-view section dividers */
.bw-divider {
grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
padding: 6px 6px 3px; margin-top: 2px;
font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--iw-accent-soft);
border-bottom: 1px solid;
border-image: linear-gradient(90deg, var(--iw-accent), transparent 70%) 1;
}
.bw-div-icon { width: 16px; height: 16px; image-rendering: pixelated; }
.bw-div-count { color: var(--muted); font-weight: 400; margin-left: auto; }
.bw-foot {
display: flex; gap: 6px; padding: 6px 8px;
background: var(--iw-chrome-foot);
border-top: 1px solid #000; border-radius: 0 0 6px 6px;
}
/* Qty dialog + rename */
.bw-qty { display: flex; flex-direction: column; gap: 8px; }
.bw-qty-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-qty-chip { flex: 1; min-width: 54px; }
.bw-qty-row { display: flex; gap: 6px; }
.bw-qty-input, .bw-rename-input {
flex: 1; background: #0d0b08; border: 1px solid #3a2f1d; border-radius: 3px;
color: var(--white); padding: 6px 8px; font-size: 13px; outline: none;
}
.bw-qty-input:focus, .bw-rename-input:focus { border-color: var(--gold-dim); }
/* Membership card — aspirational, never naggy */
.bw-member-card {
position: relative; text-align: center; padding: 14px 10px 12px; overflow: hidden;
border: 1px solid rgba(201,146,14,.55); border-radius: 6px;
background: linear-gradient(170deg, #221a0d, #171107);
}
.bw-member-glow {
position: absolute; inset: -30%; pointer-events: none;
background: radial-gradient(ellipse at 50% 0%, rgba(255,160,40,.18), transparent 60%);
animation: bw-ember 3.5s ease-in-out infinite;
}
@keyframes bw-ember { 50% { opacity: .55; } }
.bw-member-title {
font-size: 15px; font-weight: 800; margin-bottom: 6px;
background: linear-gradient(180deg, #ffe9a8, #ffd700 45%, #c9920e);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.bw-member-text { font-size: 12px; color: var(--white); opacity: .85; line-height: 1.5; margin-bottom: 12px; }
.bw-member-cta[disabled] { opacity: .6; cursor: default; }
/* Mobile: full-screen sheet */
.bw-root.bw-mobile {
top: 0; left: 0; transform: none;
width: 100%; height: 100%; max-width: none;
border-radius: 0; z-index: 60;
}
.bw-mobile .bw-head { cursor: default; border-radius: 0; }
.bw-mobile .bw-grid { grid-template-columns: repeat(5, 1fr); }
.bw-mobile .bw-tab { width: 42px; height: 38px; }
/* Hide game topbar when bank window is open on mobile — bank has its own header */
body.bw-mobile-open .topbar,
body.bw-mobile-open .topbar-secondary { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════
MEMBERSHIP UPSELL + LOCKED-CONTENT TREATMENT (monetization)
Carved-obsidian / ember-glow / gradient-gold. Reuses --sc-* + --gold.
═══════════════════════════════════════════════════════════════════ */
.rc-modal[data-modal="membership"] { width: 460px; max-width: 94vw; }
.rc-modal[data-modal="membership"] .rc-modal-head {
position: absolute; top: 6px; right: 6px; left: auto; width: auto;
min-height: 0; padding: 0; background: transparent; border: none; z-index: 7;
}
.mem-body {
position: relative; padding: 0 0 18px; overflow: hidden;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,152,31,0.10) 0%, transparent 60%),
linear-gradient(180deg, #1a130d 0%, #120d08 100%);
}
.mem-hero {
position: relative; padding: 26px 22px 20px; text-align: center;
border-bottom: 1px solid rgba(255,200,120,0.12); overflow: hidden;
}
.mem-hero::before {
content:''; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(2px 2px at 20% 70%, rgba(255,180,90,0.5), transparent 60%),
radial-gradient(2px 2px at 70% 38%, rgba(255,150,60,0.42), transparent 60%),
radial-gradient(1.5px 1.5px at 45% 86%, rgba(255,210,140,0.45), transparent 60%),
radial-gradient(1.5px 1.5px at 85% 74%, rgba(255,160,70,0.35), transparent 60%);
animation: memEmber 6s ease-in-out infinite alternate;
}
@keyframes memEmber { from { transform: translateY(0); opacity:.55 } to { transform: translateY(-8px); opacity:.95 } }
.mem-crest { font-size: 30px; line-height:1; margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(255,152,31,0.55)); position:relative; }
.mem-title {
font-family: 'Cinzel', serif; font-weight: 800; font-size: 26px; letter-spacing: 1px; margin: 0; position:relative;
background: linear-gradient(180deg, #fff3cf 0%, #ffd700 42%, #b8860b 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ffd700;
text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.mem-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; letter-spacing:.3px; position:relative; }
.mem-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 18px 6px; }
.mem-perk {
display:flex; align-items:center; gap:10px; padding: 11px 12px; border-radius: 4px;
background: linear-gradient(168deg, var(--sc-stone-hi,#3d3328) 0%, var(--sc-stone-mid,#2a2218) 55%, var(--sc-stone-lo,#1a130d) 100%);
border: 1px solid #08060a;
box-shadow: inset 0 1px 0 rgba(255,220,160,0.10), inset 0 -1px 0 rgba(0,0,0,0.55), 0 2px 5px rgba(0,0,0,0.4);
}
.mem-perk-ico {
flex:0 0 34px; width:34px; height:34px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:18px;
background: radial-gradient(ellipse at 50% 45%, rgba(255,152,31,0.16) 0%, #0c0805 78%);
border:1px solid #08060a; box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}
.mem-perk-tx { min-width:0; }
.mem-perk-name { font-family:'Cinzel',serif; font-weight:700; font-size:12px; color: var(--sc-brass-text-hi,#f5e3b8); letter-spacing:.2px; }
.mem-perk-desc { font-size: 10px; color: var(--muted); margin-top:1px; line-height:1.25; }
.mem-foot { padding: 14px 18px 4px; text-align:center; }
.mem-price { color: var(--sc-brass-text,#d4b074); font-size:12px; margin-bottom:10px; }
.mem-price b { color: var(--white); font-size:15px; font-family:'Cinzel',serif; }
.mem-cta {
display:block; width:100%; padding: 13px 18px; cursor:pointer; border:none; border-radius:4px;
font-family:'Cinzel',serif; font-weight:800; font-size:15px; letter-spacing:.6px; color:#2a1a05;
background: linear-gradient(180deg, #ffe9a8 0%, #ffd700 38%, #d49a18 100%);
box-shadow: 0 3px 0 #8a6410, 0 6px 14px rgba(255,152,31,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
text-shadow: 0 1px 0 rgba(255,255,255,0.35);
transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.mem-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 5px 0 #8a6410, 0 10px 22px rgba(255,152,31,0.5), inset 0 1px 0 rgba(255,255,255,0.7); }
.mem-cta:active { transform: translateY(1px); box-shadow: 0 2px 0 #8a6410, 0 4px 10px rgba(255,152,31,0.3), inset 0 1px 0 rgba(255,255,255,0.5); }
.mem-fineprint { color: var(--muted); font-size:10px; margin-top:9px; opacity:.85; line-height:1.3; }
.mem-active { text-align:center; padding: 8px 0 2px; }
.mem-active .mem-badge { font-family:'Cinzel',serif; font-weight:800; font-size:16px; color: var(--gold); text-shadow:0 0 12px rgba(255,152,31,0.5); }
/* ── Reusable LOCKED / MEMBERS treatment (grid cells, tabs, etc.) ── */
.mtx-locked { position: relative; cursor: pointer !important; }
.mtx-locked > .mtx-dim { opacity:.5; filter: grayscale(0.35); transition: opacity .2s ease, filter .2s ease; }
.mtx-locked:hover > .mtx-dim { opacity:.72; filter: grayscale(0.1); }
.mtx-locked::after {
content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
box-shadow: inset 0 0 0 1px rgba(255,152,31,0.5), inset 0 0 18px rgba(255,152,31,0.18);
transition: opacity .2s ease;
}
.mtx-locked:hover::after { opacity:1; }
.mtx-lock {
position:absolute; top:4px; right:4px; z-index:6; width:18px; height:18px; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; pointer-events:none;
background: radial-gradient(circle at 40% 35%, #ffe9a8, #d49a18 70%, #8a6410); color:#2a1a05;
box-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 8px rgba(255,152,31,0.5);
}
.mtx-tag {
position:absolute; bottom:4px; left:50%; transform:translateX(-50%); z-index:6;
font-family:'Cinzel',serif; font-weight:700; font-size:8px; letter-spacing:.6px; text-transform:uppercase;
color:#2a1a05; padding:1px 7px; border-radius:8px; white-space:nowrap; pointer-events:none;
background: linear-gradient(180deg, #ffe9a8, #ffd700 50%, #d49a18); box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
@media (max-width:560px){ .mem-perks{ grid-template-columns:1fr; } .rc-modal[data-modal="membership"]{ width:94vw; } }
/* ── B.2 lock-state surfaces ("treasure behind glass") ── */
/* Locked loadout tab — gear stays visible, warmly dimmed, gold lock corner */
.rl-tab-locked { opacity: .85; position: relative; }
.rl-tab-locked .mtx-dim { opacity: .5; filter: grayscale(.35); transition: opacity .2s ease, filter .2s ease; }
.rl-tab-locked:hover .mtx-dim { opacity: .75; filter: grayscale(.1); }
.rl-tab-locked:hover { box-shadow: inset 0 0 0 1px rgba(255,152,31,.5), 0 0 10px rgba(255,150,30,.25); }
.rl-tab-lockico {
font-size: 9px; position: absolute; top: 1px; right: 2px; line-height: 1; pointer-events: none;
filter: sepia(1) saturate(3) hue-rotate(-10deg) drop-shadow(0 0 3px rgba(255,160,40,.4));
}
/* Locked character-select slot */
.charslot-locked { cursor: pointer; }
.charslot-locked .charslot-locktext {
font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; letter-spacing: .5px;
color: #2a1a05; padding: 1px 8px; border-radius: 8px;
background: linear-gradient(180deg, #ffe9a8, #ffd700 50%, #d49a18);
box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.charslot-locked:hover { box-shadow: inset 0 0 0 1px rgba(255,152,31,.45), 0 0 12px rgba(255,150,30,.2); }
/* Marketplace upsell chip (next to the slots-free count) */
.mp-upsell-chip {
cursor: pointer; display: inline-block; margin-left: 6px; vertical-align: 1px;
font-family: 'Cinzel', serif; font-weight: 700; font-size: 9px; letter-spacing: .4px;
color: #2a1a05; padding: 1px 8px; border-radius: 8px; white-space: nowrap;
background: linear-gradient(180deg, #ffe9a8, #ffd700 50%, #d49a18);
box-shadow: 0 1px 3px rgba(0,0,0,.5);
transition: transform .12s ease, box-shadow .2s ease;
}
.mp-upsell-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 10px rgba(255,152,31,.4); }
/* Crystals balance chip — warm coal socket with a live flame */
.crystals-chip {
display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 10px;
font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; color: #ffd9a0;
background: radial-gradient(ellipse at 50% 40%, rgba(255,120,20,.25), rgba(20,12,6,.9) 75%);
border: 1px solid #6b4a14;
box-shadow: inset 0 1px 0 rgba(255,200,120,.15), 0 1px 3px rgba(0,0,0,.5);
}
.crystals-chip-glint { font-size: 11px; filter: drop-shadow(0 0 4px rgba(255,140,30,.7)); }
@keyframes crystalGlint { from { filter: drop-shadow(0 0 3px rgba(255,140,30,.55)); } to { filter: drop-shadow(0 0 6px rgba(255,160,50,.9)); } }
/* ── CRYSTALS STORE ── */
.cstore-section-label {
font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--sc-brass-text, #d4b074);
padding: 14px 18px 8px; text-align: left;
}
.cstore-packs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 18px; }
.cstore-pack {
position: relative; cursor: pointer; text-align: center; padding: 12px 4px 10px; border-radius: 4px;
background: linear-gradient(168deg, var(--sc-stone-hi,#3d3328) 0%, var(--sc-stone-mid,#2a2218) 55%, var(--sc-stone-lo,#1a130d) 100%);
border: 1px solid #08060a;
box-shadow: inset 0 1px 0 rgba(255,220,160,0.10), inset 0 -1px 0 rgba(0,0,0,0.55), 0 2px 5px rgba(0,0,0,0.4);
transition: transform .14s ease, box-shadow .2s ease;
}
.cstore-pack:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,152,31,0.45), 0 6px 14px rgba(0,0,0,0.5), 0 0 14px rgba(255,152,31,0.18); }
.cstore-pack-popular { box-shadow: inset 0 0 0 1px rgba(255,215,0,0.5), 0 2px 8px rgba(0,0,0,0.5), 0 0 16px rgba(255,152,31,0.22); }
.cstore-ribbon {
position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
font-family: 'Cinzel', serif; font-weight: 800; font-size: 8px; letter-spacing: .8px;
color: #2a1a05; padding: 1px 8px; border-radius: 8px; white-space: nowrap;
background: linear-gradient(180deg, #ffe9a8, #ffd700 50%, #d49a18); box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.cstore-pack-gem { font-size: 20px; filter: drop-shadow(0 0 6px rgba(140,200,255,0.5)); }
.cstore-pack-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; color: var(--sc-brass-text-hi,#f5e3b8); margin-top: 3px; }
.cstore-pack-amount { font-family: 'Cinzel', serif; font-weight: 800; font-size: 14px; color: var(--white); margin-top: 1px; }
.cstore-pack-bonus { font-size: 9px; font-weight: 700; color: #7ddc8a; margin-top: 1px; }
.cstore-pack-bonus-none { visibility: hidden; }
.cstore-pack-price { font-size: 11px; color: var(--gold); font-weight: 700; margin-top: 4px; }
.cstore-unlocks { display: flex; flex-direction: column; gap: 8px; padding: 0 18px; }
.cstore-unlock {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px;
background: linear-gradient(168deg, var(--sc-stone-hi,#3d3328) 0%, var(--sc-stone-mid,#2a2218) 55%, var(--sc-stone-lo,#1a130d) 100%);
border: 1px solid #08060a;
box-shadow: inset 0 1px 0 rgba(255,220,160,0.10), inset 0 -1px 0 rgba(0,0,0,0.55);
}
.cstore-unlock-tx { flex: 1; min-width: 0; text-align: left; }
.cstore-buy-btn {
cursor: pointer; border: none; border-radius: 4px; padding: 8px 14px;
font-family: 'Cinzel', serif; font-weight: 800; font-size: 12px; color: #2a1a05;
background: linear-gradient(180deg, #ffe9a8 0%, #ffd700 38%, #d49a18 100%);
box-shadow: 0 2px 0 #8a6410, 0 4px 10px rgba(255,152,31,0.3);
transition: transform .12s ease, filter .2s ease;
}
.cstore-buy-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cstore-unlock-cap { font-family: 'Cinzel', serif; font-weight: 800; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.cstore-soon {
margin: 12px 18px 0; padding: 10px; border-radius: 4px; text-align: center;
font-size: 11px; color: var(--muted); border: 1px dashed rgba(255,200,120,0.25);
}
.cstore-member-line { cursor: pointer; font-size: 11.5px; color: var(--sc-brass-text,#d4b074); margin-bottom: 8px; }
.cstore-member-line:hover { color: var(--gold); }
.cstore-open-link { cursor: pointer; }
@media (max-width: 560px) { .cstore-packs { grid-template-columns: repeat(3, 1fr); row-gap: 14px; } }
/* ── FOUNDERS' HALL — obsidian monument wall ── */
.fh-hall { padding: 4px 6px 14px; }
.fh-hero { text-align: center; padding: 16px 12px 14px; position: relative; }
.fh-crest { font-size: 26px; filter: drop-shadow(0 0 10px rgba(255,152,31,0.55)); }
.fh-title {
font-family: 'Cinzel', serif; font-weight: 800; font-size: 21px; letter-spacing: 1px;
background: linear-gradient(180deg, #fff3cf 0%, #ffd700 42%, #b8860b 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.fh-sub { color: var(--muted); font-size: 11.5px; margin-top: 4px; max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.45; }
.fh-counter { margin-top: 8px; font-family: 'Cinzel', serif; font-size: 11px; color: var(--sc-brass-text,#d4b074); }
.fh-counter b { color: var(--gold); font-size: 14px; }
.fh-counter-full { color: var(--gold); }
.fh-wall { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; padding: 6px 2px 2px; }
.fh-plaque {
position: relative; text-align: center; padding: 6px 1px 5px; border-radius: 3px; min-width: 0;
background: linear-gradient(168deg, var(--sc-stone-hi,#3d3328) 0%, var(--sc-stone-mid,#2a2218) 55%, var(--sc-stone-lo,#1a130d) 100%);
border: 1px solid #08060a;
box-shadow: inset 0 1px 0 rgba(255,220,160,0.08), inset 0 -1px 0 rgba(0,0,0,0.5);
}
.fh-plaque .fh-rank { font-family: 'Cinzel', serif; font-weight: 800; font-size: 9px; color: var(--muted); }
.fh-plaque .fh-name { font-size: 8.5px; color: var(--sc-brass-text-hi,#f5e3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-plaque .fh-date { font-size: 7.5px; color: var(--muted); }
.fh-gold { box-shadow: inset 0 0 0 1px rgba(255,215,0,0.55), 0 0 10px rgba(255,152,31,0.25); }
.fh-gold .fh-rank { color: var(--gold); }
.fh-ember { box-shadow: inset 0 0 0 1px rgba(255,152,31,0.30); }
.fh-ember .fh-rank { color: #e8a04a; }
.fh-top3 { grid-column: span 2; padding: 9px 2px 8px; }
.fh-top3 .fh-rank { font-size: 13px; }
.fh-top3 .fh-name { font-size: 11px; font-family: 'Cinzel', serif; font-weight: 700; }
.fh-unclaimed { cursor: pointer; opacity: .55; }
.fh-unclaimed:hover { opacity: .9; box-shadow: inset 0 0 0 1px rgba(255,152,31,0.5), 0 0 10px rgba(255,150,30,0.25); }
.fh-name-empty { opacity: .4; }
.fh-board { margin-top: 14px; padding: 0 4px; }
.fh-board-title {
font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: .8px;
color: var(--sc-brass-text,#d4b074); padding-bottom: 6px; border-bottom: 1px solid rgba(255,200,120,0.12); margin-bottom: 6px;
}
.fh-board-empty { color: var(--muted); font-size: 11px; font-style: italic; padding: 6px 2px; }
.fh-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 3px; font-size: 12px; }
.fh-row:nth-child(even) { background: rgba(0,0,0,0.18); }
.fh-row-rank { width: 20px; text-align: right; font-family: 'Cinzel', serif; font-weight: 700; color: var(--muted); font-size: 11px; }
.fh-row-name { flex: 1; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-row-flames { font-size: 10px; letter-spacing: -2px; opacity: .55; }
.fh-row-flames.alive { opacity: 1; }
.fh-row-val { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold); font-size: 11px; white-space: nowrap; }
.fh-cta { width: auto; padding: 11px 26px; margin: 16px auto 0; display: block; }
@media (max-width: 560px) { .fh-wall { grid-template-columns: repeat(5, 1fr); } .fh-top3 { grid-column: span 2; } }
/* ── MEMBER'S RELIC ── */
.ph-relic {
position: absolute; top: 8px; left: 10px; z-index: 6; cursor: pointer;
font-size: 16px; line-height: 1; opacity: .8;
filter: drop-shadow(0 0 4px rgba(140,200,255,0.4));
transition: transform .15s ease, filter .2s ease, opacity .2s ease;
}
.ph-relic:hover { transform: scale(1.15); opacity: 1; }
.ph-relic-ready { opacity: 1; animation: relicPulse 2.2s ease-in-out infinite alternate; }
@keyframes relicPulse {
from { filter: drop-shadow(0 0 4px rgba(140,200,255,0.45)); }
to { filter: drop-shadow(0 0 10px rgba(160,215,255,0.95)) drop-shadow(0 0 18px rgba(255,200,120,0.35)); }
}
.ph-relic-active { opacity: 1; filter: drop-shadow(0 0 8px rgba(120,255,170,0.8)); animation: none; }
.relic-perks { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 4px; }
.relic-perk {
display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 4px; cursor: pointer;
background: linear-gradient(168deg, var(--sc-stone-hi,#3d3328) 0%, var(--sc-stone-mid,#2a2218) 55%, var(--sc-stone-lo,#1a130d) 100%);
border: 1px solid #08060a;
box-shadow: inset 0 1px 0 rgba(255,220,160,0.10), inset 0 -1px 0 rgba(0,0,0,0.55);
transition: transform .12s ease, box-shadow .2s ease;
}
.relic-perk:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(140,200,255,0.5), 0 0 12px rgba(140,200,255,0.18); }
.relic-perk-used { cursor: default; opacity: .45; }
.relic-perk-used:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,220,160,0.10), inset 0 -1px 0 rgba(0,0,0,0.55); }
.relic-perk-active { opacity: 1; box-shadow: inset 0 0 0 1px rgba(120,255,170,0.55), 0 0 12px rgba(120,255,170,0.2); }
.mem-cta-annual { margin-top: 8px; background: linear-gradient(180deg, #d8ecff 0%, #9fd0ff 40%, #4a86c8 100%); box-shadow: 0 3px 0 #2a5a8a, 0 6px 14px rgba(100,170,255,0.35), inset 0 1px 0 rgba(255,255,255,0.6); }
.mem-cta-annual:hover { box-shadow: 0 5px 0 #2a5a8a, 0 10px 22px rgba(100,170,255,0.5), inset 0 1px 0 rgba(255,255,255,0.7); }
/* ── Member badge (the OSRS gold star) ── */
.chat-member-badge, .hs-member-star {
font-size: 10px; margin-right: 2px; vertical-align: 1px;
filter: drop-shadow(0 0 3px rgba(255,200,60,0.6));
}
.hs-member-star { margin-left: 4px; margin-right: 0; }
.cstore-countdown { font-size: 9px; color: var(--muted); text-transform: none; letter-spacing: 0; }
/* ── Membership entry points (topbar star + nav lock hints + Members hub) ── */
.topbar-members-star { cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 7px; user-select: none;
filter: drop-shadow(0 0 3px rgba(255,200,60,0.4)); transition: transform .15s ease, filter .2s ease; }
.topbar-members-star:hover { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(255,210,80,0.9)); }
.topbar-members-star.pulse { animation: memberStarPulse 2.6s ease-in-out infinite alternate; }
@keyframes memberStarPulse { from { filter: drop-shadow(0 0 2px rgba(255,200,60,0.35)); } to { filter: drop-shadow(0 0 9px rgba(255,210,80,0.85)); } }
.nav-lock { position: absolute; top: 1px; right: 1px; font-size: 8px; line-height: 1; pointer-events: none;
filter: sepia(1) saturate(3) hue-rotate(-10deg) drop-shadow(0 0 2px rgba(255,160,40,0.5)); }
.rl-bar-btn, .mts-btn { position: relative; }
.mhub { padding: 0 0 6px; }
.mhub .mem-hero { padding: 20px 16px 14px; border-bottom: 1px solid rgba(255,200,120,0.12); }
.mhub-ctas { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 4px; }
.mhub-links { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 2px; }
.mhub-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 4px; cursor: pointer;
background: linear-gradient(168deg, var(--sc-stone-hi,#3d3328) 0%, var(--sc-stone-mid,#2a2218) 55%, var(--sc-stone-lo,#1a130d) 100%);
border: 1px solid #08060a; box-shadow: inset 0 1px 0 rgba(255,220,160,0.10), inset 0 -1px 0 rgba(0,0,0,0.55);
transition: transform .12s ease, box-shadow .2s ease; }
.mhub-link:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(255,152,31,0.45), 0 0 12px rgba(255,152,31,0.15); }
.mhub-link-locked { opacity: .75; }
.mhub-link-arrow { font-size: 18px; color: var(--muted); font-weight: 700; }
.mhub-perks { grid-template-columns: 1fr; }
@media (min-width: 900px) { .mhub-perks { grid-template-columns: 1fr 1fr; } }
/* === COMBAT QUICK BAR ====================================================
Viewport-bottom slot bar for potions + food. Carved-obsidian sockets with
ember hover glow; gold ring while a slot's effect is live; AUTO plate
pulses when automation is armed (members / pre-enforcement). */
.qbar {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 11;
display: flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
background: linear-gradient(180deg, rgba(26,22,16,0.92), rgba(14,11,8,0.96));
border: 1px solid #000;
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
inset 0 -1px 0 rgba(0,0,0,0.6),
0 4px 14px rgba(0,0,0,0.55);
}
.qbar::before { /* ember hairline along the top edge */
content: '';
position: absolute;
top: 0; left: 14px; right: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,152,31,0.45), transparent);
pointer-events: none;
}
.qbar-slots { display: flex; gap: 6px; }
.qbar-slot {
position: relative;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at 50% 38%, #2a241a 0%, #1c170f 70%, #141009 100%);
border: 1px solid #0a0805;
border-radius: 8px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.04);
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.qbar-slot img {
width: var(--iw-icon-tile); height: var(--iw-icon-tile);
image-rendering: pixelated;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7));
pointer-events: none;
}
.qbar-slot:hover {
transform: translateY(-1px);
border-color: rgba(255,152,31,0.55);
box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(255,152,31,0.25);
}
.qbar-slot-food:hover {
border-color: rgba(80,200,120,0.55);
box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(80,200,120,0.22);
}
.qbar-empty .qbar-ghost { font-size: 20px; color: rgba(255,255,255,0.18); font-weight: 700; transition: color .12s; }
.qbar-empty:hover .qbar-ghost { color: rgba(255,152,31,0.7); }
.qbar-slot-food.qbar-empty:hover .qbar-ghost { color: rgba(80,200,120,0.75); }
.qbar-depleted img { filter: grayscale(1) brightness(0.55) drop-shadow(0 2px 3px rgba(0,0,0,0.7)); }
.qbar-on { border-color: rgba(255,214,90,0.75); box-shadow: inset 0 2px 6px rgba(0,0,0,0.6), 0 0 12px rgba(255,214,90,0.3); }
.qbar-on::after {
content: '';
position: absolute; inset: 0;
border-radius: 8px;
border: 1px solid rgba(255,214,90,0.5);
animation: qbarOnPulse 2.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes qbarOnPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.qbar-count {
position: absolute; right: 2px; bottom: 1px;
font-size: 10px; font-weight: 700; color: #ffd700;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
pointer-events: none;
}
.qbar-depleted .qbar-count { color: #ff6b6b; }
.qbar-key {
position: absolute; left: 3px; top: 1px;
font-size: 9px; color: rgba(255,255,255,0.32);
text-shadow: 1px 1px 0 #000;
pointer-events: none;
}
.qbar-clear {
position: absolute; right: -5px; top: -5px;
width: 14px; height: 14px; line-height: 13px;
text-align: center; font-size: 11px;
color: #ddd; background: #3a0d0d;
border: 1px solid #000; border-radius: 50%;
opacity: 0; transition: opacity .12s;
z-index: 1;
}
.qbar-slot:hover .qbar-clear { opacity: 1; }
.qbar-clear:hover { background: #7a1c1c; color: #fff; }
.qbar-divider {
width: 5px; height: 5px;
background: rgba(255,152,31,0.4);
transform: rotate(45deg);
box-shadow: 0 0 6px rgba(255,152,31,0.35);
margin: 0 2px;
flex-shrink: 0;
}
.qbar-auto {
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 36px; height: 48px;
margin-right: 2px;
border-radius: 8px;
border: 1px solid #0a0805;
background: linear-gradient(180deg, #221c12, #15100a);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
cursor: default;
user-select: none;
}
.qbar-auto-bolt { font-size: 13px; line-height: 1; }
.qbar-auto-text { font-size: 8px; letter-spacing: 1px; font-weight: 700; margin-top: 3px; color: #777; }
.qbar-auto-on { border-color: rgba(255,152,31,0.4); }
.qbar-auto-on .qbar-auto-text { color: #ff981f; text-shadow: 0 0 6px rgba(255,152,31,0.6); }
.qbar-auto-on .qbar-auto-bolt { animation: qbarAutoPulse 2.6s ease-in-out infinite; }
@keyframes qbarAutoPulse {
0%, 100% { opacity: .65; filter: drop-shadow(0 0 2px rgba(255,152,31,0.3)); }
50% { opacity: 1; filter: drop-shadow(0 0 7px rgba(255,152,31,0.8)); }
}
.qbar-auto-locked { cursor: pointer; }
.qbar-auto-locked:hover { border-color: rgba(255,214,90,0.5); }
.qbar-flash::before {
content: '';
position: absolute; inset: -1px;
border-radius: 8px;
background: radial-gradient(circle, rgba(255,214,90,0.5) 0%, rgba(255,152,31,0.25) 55%, transparent 75%);
animation: qbarFlash .4s ease-out forwards;
pointer-events: none;
}
.qbar-flash img { animation: qbarGulp .4s ease-out; }
@keyframes qbarFlash { 0% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes qbarGulp { 0% { transform: scale(1); } 35% { transform: scale(.82); } 100% { transform: scale(1); } }
/* Quick-bar picker modal */
.qbar-picker-body { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.qbar-pick {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
background: rgba(0,0,0,0.25);
cursor: pointer;
transition: border-color .1s, background .1s;
}
.qbar-pick:hover { border-color: rgba(255,152,31,0.5); background: rgba(255,152,31,0.07); }
.qbar-pick img { width: var(--iw-icon-tile); height: var(--iw-icon-tile); image-rendering: pixelated; flex-shrink: 0; }
.qbar-pick-name { font-size: 13px; color: #f4e4c1; }
.qbar-pick-sub { font-size: 11px; color: #9a8d77; }
.qbar-pick-current { border-color: rgba(255,214,90,0.45); }
.qbar-pick-armed { margin-left: auto; font-size: 10px; color: #ffd65a; letter-spacing: .5px; text-transform: uppercase; }
.qbar-pick-clear .qbar-pick-x { width: var(--iw-icon-tile); text-align: center; font-size: 20px; color: #ff6b6b; flex-shrink: 0; }
.qbar-picker-none { padding: 14px; text-align: center; color: #9a8d77; font-size: 13px; }
@media (max-width: 768px) {
.qbar { bottom: 6px; gap: 5px; padding: 5px 7px; border-radius: 8px; }
.qbar-slot { width: 38px; height: 38px; border-radius: 6px; }
.qbar-slot img { width: var(--iw-icon-row); height: var(--iw-icon-row); }
.qbar-auto { width: 30px; height: 38px; }
.qbar-key { display: none; }
.qbar-clear { opacity: 1; } /* no hover on touch — keep the remove affordance visible */
}
/* ═══════════════ MEMBER-GATED METHODS (skilling gates) ═══════════════
Member-locked rows keep the standard locked treatment but trade the grey
padlock for a gold star — locked content is the conversion hook, so it
should read as "premium", not "disabled". */
.method-row.member-locked .meth-member-badge {
filter: drop-shadow(0 0 3px rgba(255, 184, 63, .8));
}
.method-row.member-locked .meth-name { color: #c9a86a; }
.meth-member-req {
font-family: 'Cinzel', serif; font-weight: 700; font-size: 9px; letter-spacing: .4px;
color: #2a1a05; padding: 1px 7px; border-radius: 8px; white-space: nowrap;
background: linear-gradient(180deg, #ffe9a8, #ffd700 50%, #d49a18);
box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.method-row.member-locked:hover {
border-color: rgba(255, 184, 63, .55);
box-shadow: inset 0 0 0 1px rgba(255, 152, 31, .35), 0 0 10px rgba(255, 150, 30, .18);
}
/* Slayer masters — member-locked cards glow gold instead of greying out */
.slayer-master-card.member-locked .smc-portrait {
filter: none;
border-color: rgba(255, 184, 63, .5);
}
.smc-member-lock {
background: rgba(20, 12, 0, 0.45);
text-shadow: 0 0 8px rgba(255, 184, 63, .9);
}
.smc-member-btn {
color: #2a1a05;
background: linear-gradient(180deg, #ffe9a8, #ffd700 50%, #d49a18);
border: 1px solid #b8860b;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
transition: transform .12s ease, box-shadow .2s ease;
}
.smc-member-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 10px rgba(255,152,31,.4);
}
/* Topbar Crystals counter (UX-05) — premium currency beside gold, gated by monetization visibility */
.topbar-crystals { cursor: pointer; transition: filter 0.15s; }
.topbar-crystals:hover { filter: brightness(1.25); }
.topbar-crystals .crystals-coin { font-size: 12px; margin-right: 2px; filter: drop-shadow(0 0 4px rgba(255,140,30,.6)); }
.stat-val.crystals { color: #ffd9a0; }
/* Narrow screens: the topbar already overflows (pre-existing, logged as UX-54) — the
crystals counter would render clipped/off-screen, so hide it; mobile reaches the
Crystals store via the Members hub instead. */
@media (max-width: 720px) {
.topbar-crystals { display: none !important; }
}
/* Empty-state guidance (UX-09) — Slayer-hub pattern: icon, one line, one way forward */
.idle-guide { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; text-align: center; }
.idle-guide-title { font-family: 'Cinzel', serif; font-weight: 800; font-size: 16px; color: var(--gold, #c9a24a); }
.idle-guide-hint { font-size: 12px; color: var(--muted, #9B8B6B); max-width: 300px; line-height: 1.5; }
.list-empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; }
.list-empty-title { font-family: 'Cinzel', serif; font-weight: 800; font-size: 15px; color: var(--gold, #c9a24a); }
.list-empty-hint { font-size: 12px; color: var(--muted, #9B8B6B); max-width: 280px; line-height: 1.5; }
.list-no-match { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--muted, #9B8B6B); }
/* Routine level-up toast (UX-17) — milestones (50/92/99) keep the full celebration */
.levelup-toast {
position: absolute; top: 14px; left: 50%; transform: translate(-50%, -12px);
display: flex; align-items: center; gap: 8px; padding: 8px 16px;
background: linear-gradient(180deg, rgba(40,28,16,.96), rgba(24,16,9,.96));
border: 1px solid rgba(212,133,74,0.45); border-radius: 8px;
box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,200,120,.12);
font-size: 13px; color: #EDE4D8; z-index: 40;
opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.levelup-toast.show { opacity: 1; transform: translate(-50%, 0); }
.levelup-toast b { color: #FFD700; font-family: 'Cinzel', serif; }
.levelup-toast .lu-toast-img, .levelup-toast .lu-toast-icon img { width: 20px; height: 20px; }
/* Settings section headers (UX-11) */
.settings-section-label {
font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--gold, #c9a24a); opacity: 0.85;
margin: 14px 2px 4px; padding-bottom: 3px;
border-bottom: 1px solid rgba(212,133,74,0.18);
}
.settings-section-label:first-child { margin-top: 2px; }
.settings-row-sub {
display: block; font-size: 10px; color: var(--muted, #9B8B6B); margin-top: 1px;
}