4501 lines
87 KiB
CSS
4501 lines
87 KiB
CSS
html {
|
|
overflow-y: scroll;
|
|
/* Always show scrollbar to prevent layout shift */
|
|
}
|
|
|
|
.game-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--game-bg-app);
|
|
color: var(--game-text-primary);
|
|
position: relative;
|
|
font-family: var(--game-font-main);
|
|
}
|
|
|
|
/* Death Overlay */
|
|
.death-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10000;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.death-modal {
|
|
background: linear-gradient(135deg, #2a0e0e 0%, #1a0505 100%);
|
|
border: 3px solid #ff4444;
|
|
border-radius: 20px;
|
|
padding: 3rem;
|
|
max-width: 500px;
|
|
text-align: center;
|
|
box-shadow: 0 0 50px rgba(255, 68, 68, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5);
|
|
animation: deathPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes deathPulse {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 50px rgba(255, 68, 68, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 70px rgba(255, 68, 68, 0.8), inset 0 0 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
.death-modal h1 {
|
|
color: #ff4444;
|
|
font-size: 2.5rem;
|
|
margin: 0 0 1.5rem 0;
|
|
text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
|
|
}
|
|
|
|
.death-modal p {
|
|
color: #ccc;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.death-btn {
|
|
margin-top: 2rem;
|
|
padding: 1rem 2rem;
|
|
background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
|
|
border: 2px solid #ff6666;
|
|
border-radius: 10px;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);
|
|
}
|
|
|
|
.death-btn:hover {
|
|
background: linear-gradient(135deg, #ff6666 0%, #ff0000 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(255, 68, 68, 0.6);
|
|
}
|
|
|
|
.death-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Game Header */
|
|
.game-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
height: 60px;
|
|
background-color: var(--game-bg-panel);
|
|
border-bottom: 1px solid var(--game-border-color);
|
|
backdrop-filter: blur(10px);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
box-shadow: var(--game-shadow-card);
|
|
}
|
|
|
|
.header-left h1 {
|
|
margin: 0;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: var(--game-text-highlight);
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
text-shadow: 0 0 10px rgba(234, 113, 66, 0.3);
|
|
}
|
|
|
|
/* Player Count Badge */
|
|
.player-count-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
color: #aaa;
|
|
margin-right: 12px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.player-count-badge:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
color: #ddd;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #4cd137;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 5px rgba(76, 209, 55, 0.5);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.count-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 5px rgba(76, 209, 55, 0.5);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.7;
|
|
box-shadow: 0 0 2px rgba(76, 209, 55, 0.3);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 5px rgba(76, 209, 55, 0.5);
|
|
}
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
padding: 0.5rem 1rem;
|
|
color: var(--game-text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--game-text-primary);
|
|
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-link.active {
|
|
color: var(--game-color-primary);
|
|
border-bottom: 2px solid var(--game-color-primary);
|
|
background: linear-gradient(to top, rgba(234, 113, 66, 0.1), transparent);
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.username-link {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
padding: 0.6rem 1.2rem;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.username-link:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
border-color: rgba(107, 185, 240, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.username-link.active {
|
|
background: rgba(107, 185, 240, 0.2);
|
|
border-color: #6bb9f0;
|
|
color: #6bb9f0;
|
|
}
|
|
|
|
.game-stats-bar {
|
|
display: flex;
|
|
gap: 2rem;
|
|
padding: 0.8rem 2rem;
|
|
background: var(--game-bg-dark);
|
|
border-bottom: 1px solid var(--game-border-color);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.stat-bar-container {
|
|
flex: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.stat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stat-label {
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.stat-numbers {
|
|
color: #ddd;
|
|
font-weight: 500;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 20px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border-radius: var(--game-radius-sm);
|
|
overflow: hidden;
|
|
border: 1px solid var(--game-border-color);
|
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
transition: width 0.5s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-fill.health {
|
|
background: var(--game-gradient-health);
|
|
box-shadow: 0 0 10px rgba(196, 92, 92, 0.3);
|
|
}
|
|
|
|
.progress-fill.stamina {
|
|
background: var(--game-gradient-stamina);
|
|
box-shadow: 0 0 10px rgba(226, 180, 103, 0.3);
|
|
}
|
|
|
|
/* Legacy stat styles for backwards compatibility */
|
|
.stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.stat-value {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.game-tabs {
|
|
display: flex;
|
|
background: var(--game-bg-panel);
|
|
border-bottom: 2px solid var(--game-border-color);
|
|
overflow-x: auto;
|
|
gap: 2px;
|
|
}
|
|
|
|
.tab {
|
|
flex: 1;
|
|
padding: 1rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--game-text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.tab:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--game-text-primary);
|
|
}
|
|
|
|
.tab.active {
|
|
background: linear-gradient(to top, rgba(234, 113, 66, 0.1), transparent);
|
|
color: var(--game-color-primary);
|
|
border-bottom: 3px solid var(--game-color-primary);
|
|
}
|
|
|
|
.game-main {
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Explore Tab - Desktop 3-Column Layout */
|
|
.explore-tab-desktop {
|
|
display: grid;
|
|
grid-template-columns: 380px 1fr 380px;
|
|
gap: 1.5rem;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Left Sidebar */
|
|
.left-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
overflow-y: auto;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
/* Center Content */
|
|
.center-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Right Sidebar */
|
|
.right-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
overflow-y: auto;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
/* Mobile fallback */
|
|
@media (max-width: 1200px) {
|
|
.explore-tab-desktop {
|
|
grid-template-columns: 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.left-sidebar,
|
|
.right-sidebar {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.location-info {
|
|
background: var(--game-bg-panel);
|
|
padding: 1.5rem;
|
|
border-radius: var(--game-radius-md);
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--game-border-color);
|
|
box-shadow: var(--game-shadow-card);
|
|
}
|
|
|
|
.location-info h2 {
|
|
margin: 0 0 1rem 0;
|
|
color: var(--game-text-highlight);
|
|
font-size: 1.8rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.danger-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.3rem 0.8rem;
|
|
border-radius: var(--game-radius-sm);
|
|
font-size: 0.9rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.danger-safe {
|
|
background: rgba(139, 179, 128, 0.15);
|
|
color: var(--game-danger-safe);
|
|
border-color: var(--game-danger-safe);
|
|
}
|
|
|
|
.danger-1 {
|
|
background: rgba(226, 180, 103, 0.15);
|
|
color: var(--game-danger-low);
|
|
border-color: var(--game-danger-low);
|
|
}
|
|
|
|
.danger-2 {
|
|
background: rgba(234, 113, 66, 0.15);
|
|
color: var(--game-danger-med);
|
|
border-color: var(--game-danger-med);
|
|
}
|
|
|
|
.danger-3 {
|
|
background: rgba(196, 92, 92, 0.15);
|
|
color: var(--game-danger-high);
|
|
border-color: var(--game-danger-high);
|
|
}
|
|
|
|
.danger-4 {
|
|
background: rgba(196, 92, 92, 0.25);
|
|
color: var(--game-danger-high);
|
|
border-color: var(--game-danger-high);
|
|
box-shadow: 0 0 8px rgba(196, 92, 92, 0.3);
|
|
}
|
|
|
|
.danger-5 {
|
|
background: rgba(163, 62, 62, 0.25);
|
|
color: var(--game-danger-extreme);
|
|
border-color: var(--game-danger-extreme);
|
|
box-shadow: 0 0 12px rgba(163, 62, 62, 0.4);
|
|
}
|
|
|
|
.location-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin: 0.75rem 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.location-tag {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.75rem;
|
|
background: rgba(107, 185, 240, 0.15);
|
|
border: 1px solid rgba(107, 185, 240, 0.4);
|
|
border-radius: 16px;
|
|
font-size: 0.85rem;
|
|
color: #6bb9f0;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.location-tag:hover {
|
|
background: rgba(107, 185, 240, 0.25);
|
|
border-color: rgba(107, 185, 240, 0.6);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(107, 185, 240, 0.3);
|
|
}
|
|
|
|
.location-tag.tag-workbench,
|
|
.location-tag.tag-repair_station {
|
|
background: rgba(255, 193, 7, 0.15);
|
|
border-color: rgba(255, 193, 7, 0.4);
|
|
color: #ffc107;
|
|
}
|
|
|
|
.location-tag.tag-workbench:hover,
|
|
.location-tag.tag-repair_station:hover {
|
|
background: rgba(255, 193, 7, 0.25);
|
|
border-color: rgba(255, 193, 7, 0.6);
|
|
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
|
|
}
|
|
|
|
.location-tag.tag-safe_zone,
|
|
.location-tag.tag-shelter {
|
|
background: rgba(76, 175, 80, 0.15);
|
|
border-color: rgba(76, 175, 80, 0.4);
|
|
color: #4caf50;
|
|
}
|
|
|
|
.location-tag.tag-safe_zone:hover,
|
|
.location-tag.tag-shelter:hover {
|
|
background: rgba(76, 175, 80, 0.25);
|
|
border-color: rgba(76, 175, 80, 0.6);
|
|
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
.location-tag.tag-medical {
|
|
background: rgba(244, 67, 54, 0.15);
|
|
border-color: rgba(244, 67, 54, 0.4);
|
|
color: #f44336;
|
|
}
|
|
|
|
.location-tag.tag-medical:hover {
|
|
background: rgba(244, 67, 54, 0.25);
|
|
border-color: rgba(244, 67, 54, 0.6);
|
|
box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
|
|
}
|
|
|
|
/* Crafting Menu */
|
|
/* Workbench Menu - Moved to game/Workbench.css */
|
|
|
|
.no-items {
|
|
text-align: center;
|
|
color: #888;
|
|
padding: 2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.equipped-badge,
|
|
.inventory-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 12px;
|
|
background: rgba(255, 107, 107, 0.2);
|
|
border: 1px solid rgba(255, 107, 107, 0.4);
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.inventory-badge {
|
|
background: rgba(107, 185, 240, 0.2);
|
|
border-color: rgba(107, 185, 240, 0.4);
|
|
color: #6bb9f0;
|
|
}
|
|
|
|
.durability-bar {
|
|
position: relative;
|
|
height: 24px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
margin: 0.5rem 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.durability-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #f44336, #ff9800);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.durability-fill.full {
|
|
background: linear-gradient(90deg, #4caf50, #8bc34a);
|
|
}
|
|
|
|
.durability-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.repair-info {
|
|
font-size: 0.85rem;
|
|
color: #6bb9f0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.repair-info.full-durability {
|
|
color: #4caf50;
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
background: rgba(76, 175, 80, 0.1);
|
|
border-radius: 4px;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.close-btn {
|
|
background: rgba(244, 67, 54, 0.2);
|
|
border: 1px solid rgba(244, 67, 54, 0.4);
|
|
color: #f44336;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: rgba(244, 67, 54, 0.3);
|
|
border-color: rgba(244, 67, 54, 0.6);
|
|
}
|
|
|
|
.item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.item-slot {
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
.item-description {
|
|
font-size: 0.85rem;
|
|
color: #aaa;
|
|
margin: 0.5rem 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.location-tag.clickable {
|
|
cursor: pointer;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.location-description {
|
|
color: #ddd;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.location-image-container {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 1rem auto;
|
|
aspect-ratio: 10 / 7;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
border: 2px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.location-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.message-box {
|
|
background: rgba(255, 107, 107, 0.2);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #ff6b6b;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Location Messages Log */
|
|
.location-messages-log {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
border: 2px solid rgba(255, 107, 107, 0.2);
|
|
padding: 0.8rem;
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.location-messages-log h4 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: #ff6b6b;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.messages-scroll {
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.location-message-item {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.6rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.message-time {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 0.75rem;
|
|
flex-shrink: 0;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.message-text {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
flex: 1;
|
|
}
|
|
|
|
.movement-controls {
|
|
background: var(--game-bg-panel);
|
|
padding: 1.5rem;
|
|
border-radius: var(--game-radius-md);
|
|
border: 1px solid var(--game-border-color);
|
|
box-shadow: var(--game-shadow-card);
|
|
}
|
|
|
|
.movement-controls h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: var(--game-text-highlight);
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* 8-Direction Compass Grid */
|
|
.compass-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 80px);
|
|
gap: 0.6rem;
|
|
max-width: 260px;
|
|
margin: 0 auto 1rem auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
.compass-btn {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 1px solid var(--game-border-color);
|
|
background: linear-gradient(135deg, rgba(80, 80, 90, 0.3) 0%, rgba(40, 40, 50, 0.5) 100%);
|
|
color: var(--game-text-primary);
|
|
border-radius: var(--game-radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
box-shadow: var(--game-shadow-card);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.compass-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.compass-arrow {
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
display: block;
|
|
/* Ensure consistent vertical centering regardless of cost */
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.compass-cost {
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
color: var(--game-color-warning);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
|
display: block;
|
|
line-height: 1;
|
|
/* Use absolute positioning to prevent layout shifts */
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.compass-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, rgba(234, 113, 66, 0.2) 0%, rgba(234, 113, 66, 0.3) 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
border-color: var(--game-color-primary);
|
|
}
|
|
|
|
.compass-btn:active:not(:disabled) {
|
|
transform: translateY(0) scale(0.98);
|
|
box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.compass-btn:disabled,
|
|
.compass-btn.disabled {
|
|
opacity: 0.2;
|
|
cursor: not-allowed;
|
|
background: rgba(100, 100, 100, 0.2);
|
|
border-color: rgba(100, 100, 100, 0.3);
|
|
}
|
|
|
|
.compass-center {
|
|
width: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-radius: 12px;
|
|
border: 2px solid rgba(255, 107, 107, 0.5);
|
|
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.compass-icon {
|
|
font-size: 2.5rem;
|
|
animation: compass-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes compass-pulse {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.compass-center {
|
|
width: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.compass-center-btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--game-color-primary);
|
|
background: radial-gradient(circle, rgba(225, 29, 72, 0.2) 0%, rgba(20, 20, 20, 0.8) 100%);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 0 15px rgba(225, 29, 72, 0.2);
|
|
padding: 0.25rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.compass-center-btn:hover:not(:disabled) {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 20px rgba(225, 29, 72, 0.4);
|
|
background: radial-gradient(circle, rgba(225, 29, 72, 0.3) 0%, rgba(30, 30, 30, 0.9) 100%);
|
|
}
|
|
|
|
.compass-center-btn:active:not(:disabled) {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.compass-center-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.center-btn-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
}
|
|
|
|
.center-btn-icon {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* Header Cooldown State */
|
|
.movement-controls h3.cooldown-active {
|
|
color: var(--game-color-warning);
|
|
animation: pulse-text 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-text {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* Cooldown indicator */
|
|
.cooldown-indicator {
|
|
text-align: center;
|
|
padding: 0.75rem;
|
|
margin: 0.5rem 0;
|
|
background: rgba(255, 152, 0, 0.2);
|
|
border: 2px solid rgba(255, 152, 0, 0.5);
|
|
border-radius: 8px;
|
|
color: #ff9800;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Special movement buttons */
|
|
.special-moves {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.special-btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
background: rgba(107, 147, 255, 0.3);
|
|
color: #fff;
|
|
font-size: 0.95rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.special-btn:hover {
|
|
background: rgba(107, 147, 255, 0.6);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.special-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.location-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.action-button {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
background: rgba(76, 175, 80, 0.3);
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background: rgba(76, 175, 80, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Interactables Section */
|
|
.interactables-section {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 1.5rem;
|
|
border-radius: 10px;
|
|
border: 2px solid rgba(255, 193, 7, 0.3);
|
|
}
|
|
|
|
.interactables-section h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
body.no-scroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Interactable Card with Image */
|
|
.interactable-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
border: 2px solid rgba(255, 193, 7, 0.4);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.interactable-card:hover {
|
|
border-color: rgba(255, 193, 7, 0.7);
|
|
box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.interactable-image-container {
|
|
width: 100%;
|
|
aspect-ratio: 10 / 7;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.interactable-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.interactable-card:hover .interactable-image {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.interactable-content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Legacy interactable-item (without image) */
|
|
.interactable-item {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 0.75rem;
|
|
border-left: 3px solid rgba(255, 193, 7, 0.6);
|
|
}
|
|
|
|
.interactable-header {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.interactable-name {
|
|
font-weight: 600;
|
|
color: #ffc107;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.interactable-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.interact-btn {
|
|
width: 100%;
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
background: rgba(255, 193, 7, 0.3);
|
|
color: #fff;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.interact-btn:hover {
|
|
background: rgba(255, 193, 7, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.interact-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Ground Entities - NPCs and Items */
|
|
.ground-entities {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.entity-section {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
padding: 1.5rem;
|
|
border-radius: 10px;
|
|
border: 2px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.entity-section h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #ff6b6b;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.entity-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 1rem;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
padding-right: 5px;
|
|
/* Custom scrollbar */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--game-border-active) rgba(0, 0, 0, 0.3);
|
|
/* Ensure overflow doesn't clip dropdowns if possible,
|
|
but for scrolling lists we need overflow-y: auto.
|
|
Dropdowns must use fixed position or Portal if they need to escape.
|
|
However, we can try to make sure cards have z-index context */
|
|
}
|
|
|
|
/* Ensure cards handle their own stacking context */
|
|
.entity-card {
|
|
position: relative;
|
|
/* ... existing styles ... */
|
|
}
|
|
|
|
.entity-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.entity-list::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.entity-list::-webkit-scrollbar-thumb {
|
|
background-color: var(--game-border-active);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.entity-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
transition: all 0.3s;
|
|
min-width: 320px;
|
|
}
|
|
|
|
.entity-card:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(107, 185, 240, 0.5);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(107, 185, 240, 0.2);
|
|
}
|
|
|
|
.entity-icon {
|
|
font-size: 2.5rem;
|
|
min-width: 50px;
|
|
max-width: 75px;
|
|
max-height: 75px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.entity-icon.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.entity-item-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.entity-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.entity-name {
|
|
font-weight: 600;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Tier-based entity name colors (for ground items) */
|
|
.entity-name.tier-1 {
|
|
color: #ffffff;
|
|
/* Common - White */
|
|
}
|
|
|
|
.entity-name.tier-2 {
|
|
color: #1eff00;
|
|
/* Uncommon - Green */
|
|
text-shadow: 0 0 8px rgba(30, 255, 0, 0.5);
|
|
}
|
|
|
|
.entity-name.tier-3 {
|
|
color: #0070dd;
|
|
/* Rare - Blue */
|
|
text-shadow: 0 0 8px rgba(0, 112, 221, 0.5);
|
|
}
|
|
|
|
.entity-name.tier-4 {
|
|
color: #a335ee;
|
|
/* Epic - Purple */
|
|
text-shadow: 0 0 8px rgba(163, 53, 238, 0.5);
|
|
}
|
|
|
|
.entity-name.tier-5 {
|
|
color: #ff8000;
|
|
/* Legendary - Orange/Gold */
|
|
text-shadow: 0 0 10px rgba(255, 128, 0, 0.6);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.entity-level {
|
|
color: #ffc107;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.entity-quantity {
|
|
color: #6bb9f0;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.entity-action-btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
background: linear-gradient(135deg, #6bb9f0, #89d4ff);
|
|
color: white;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
transition: all 0.3s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.entity-action-btn:hover {
|
|
background: linear-gradient(135deg, #89d4ff, #6bb9f0);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(107, 185, 240, 0.4);
|
|
}
|
|
|
|
.entity-action-btn.pickup {
|
|
background: linear-gradient(135deg, #4caf50, #66bb6a);
|
|
}
|
|
|
|
.entity-action-btn.pickup:hover {
|
|
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
.npc-card {
|
|
border-left: 4px solid rgba(107, 185, 240, 0.6);
|
|
}
|
|
|
|
.item-card {
|
|
border-left: 4px solid rgba(76, 175, 80, 0.6);
|
|
}
|
|
|
|
.enemy-card {
|
|
border-left: 4px solid rgba(244, 67, 54, 0.8);
|
|
background: rgba(244, 67, 54, 0.05);
|
|
}
|
|
|
|
.enemy-card:hover {
|
|
background: rgba(244, 67, 54, 0.1);
|
|
border-color: rgba(244, 67, 54, 1);
|
|
box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
|
|
}
|
|
|
|
.corpse-card {
|
|
border-left: 4px solid rgba(156, 39, 176, 0.8);
|
|
background: rgba(156, 39, 176, 0.05);
|
|
}
|
|
|
|
.corpse-card:hover {
|
|
background: rgba(156, 39, 176, 0.1);
|
|
border-color: rgba(156, 39, 176, 1);
|
|
box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
|
|
}
|
|
|
|
.corpse-loot-count {
|
|
color: #ce93d8;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Corpse Details Expansion */
|
|
.corpse-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.corpse-details {
|
|
background: rgba(156, 39, 176, 0.1);
|
|
border: 2px solid rgba(156, 39, 176, 0.3);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.corpse-details-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid rgba(156, 39, 176, 0.3);
|
|
}
|
|
|
|
.corpse-details-header h4 {
|
|
margin: 0;
|
|
color: #ce93d8;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.close-btn {
|
|
background: rgba(244, 67, 54, 0.2);
|
|
border: 1px solid rgba(244, 67, 54, 0.5);
|
|
color: #ff5252;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: rgba(244, 67, 54, 0.4);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.corpse-items-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.corpse-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.corpse-item:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(107, 185, 240, 0.3);
|
|
}
|
|
|
|
.corpse-item.locked {
|
|
opacity: 0.6;
|
|
background: rgba(244, 67, 54, 0.05);
|
|
border-color: rgba(244, 67, 54, 0.2);
|
|
}
|
|
|
|
.corpse-item-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.corpse-item-name {
|
|
font-weight: 600;
|
|
color: #fff;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.corpse-item-qty {
|
|
color: #6bb9f0;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.corpse-item-tool {
|
|
font-size: 0.85rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.corpse-item-tool.has-tool {
|
|
background: rgba(76, 175, 80, 0.2);
|
|
color: #66bb6a;
|
|
border: 1px solid rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
.corpse-item-tool.needs-tool {
|
|
background: rgba(244, 67, 54, 0.2);
|
|
color: #ff5252;
|
|
border: 1px solid rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.corpse-item-loot-btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
background: linear-gradient(135deg, #4caf50, #66bb6a);
|
|
color: white;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
transition: all 0.3s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.corpse-item-loot-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
.corpse-item-loot-btn:disabled {
|
|
background: rgba(244, 67, 54, 0.3);
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.loot-all-btn {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: none;
|
|
background: linear-gradient(135deg, #9c27b0, #ba68c8);
|
|
color: white;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.loot-all-btn:hover {
|
|
background: linear-gradient(135deg, #ba68c8, #9c27b0);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
|
|
}
|
|
|
|
.entity-image {
|
|
width: 100px;
|
|
height: 70px;
|
|
flex-shrink: 0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.entity-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.combat-btn {
|
|
background: linear-gradient(135deg, #f44336, #ff5252);
|
|
}
|
|
|
|
.combat-btn:hover {
|
|
background: linear-gradient(135deg, #ff5252, #f44336);
|
|
box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.enemy-name {
|
|
color: #ff5252;
|
|
}
|
|
|
|
/* Inventory Panel (Right Sidebar) */
|
|
.inventory-panel {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 1.5rem;
|
|
border-radius: 10px;
|
|
border: 2px solid rgba(107, 147, 255, 0.3);
|
|
height: fit-content;
|
|
}
|
|
|
|
.inventory-panel h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #6b93ff;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.inventory-panel .info-note {
|
|
color: #aaa;
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.inventory-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Inventory Tab */
|
|
.inventory-tab {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.inventory-tab h2 {
|
|
color: #ff6b6b;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.info-note {
|
|
background: rgba(255, 193, 7, 0.2);
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #ffc107;
|
|
margin-bottom: 1rem;
|
|
color: #ffd54f;
|
|
}
|
|
|
|
.inventory-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.inventory-item {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.inventory-item:hover {
|
|
background: rgba(255, 107, 107, 0.2);
|
|
border-color: #ff6b6b;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.item-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.item-name {
|
|
font-size: 0.85rem;
|
|
color: #ddd;
|
|
}
|
|
|
|
.item-quantity {
|
|
font-size: 0.75rem;
|
|
color: #aaa;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.empty-message {
|
|
text-align: center;
|
|
color: #888;
|
|
padding: 2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Map Tab */
|
|
.map-tab {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.map-tab h2 {
|
|
color: #ff6b6b;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.map-info {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 1.5rem;
|
|
border-radius: 10px;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.map-info ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.map-info li {
|
|
padding: 0.5rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Profile Tab */
|
|
.profile-tab {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.profile-tab h2 {
|
|
color: #ff6b6b;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.profile-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.profile-section {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 1.5rem;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.profile-section h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #ff6b6b;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.stat-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.stat-row.highlight {
|
|
background: rgba(255, 193, 7, 0.2);
|
|
border-left: 3px solid #ffc107;
|
|
}
|
|
|
|
/* Buttons */
|
|
.button-primary {
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
background: #ff6b6b;
|
|
color: white;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background: #ff5252;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
|
|
}
|
|
|
|
/* Profile Sidebar */
|
|
.profile-sidebar {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
border: 2px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.profile-sidebar h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #ff6b6b;
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar-stat-bars {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.sidebar-stat-bar {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.sidebar-stat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.sidebar-stat-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-stat-numbers {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.sidebar-progress-bar {
|
|
height: 24px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 6px;
|
|
overflow: visible;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar-progress-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.progress-percentage {
|
|
position: relative;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: 0.85rem;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.sidebar-progress-fill.health {
|
|
background: linear-gradient(90deg, #dc3545, #ff6b6b);
|
|
box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
|
|
}
|
|
|
|
.sidebar-progress-fill.stamina {
|
|
background: linear-gradient(90deg, #ffc107, #ffeb3b);
|
|
box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
|
|
}
|
|
|
|
.sidebar-progress-fill.xp {
|
|
background: linear-gradient(90deg, #6bb9f0, #89d4ff);
|
|
box-shadow: 0 0 10px rgba(107, 185, 240, 0.5);
|
|
}
|
|
|
|
.sidebar-progress-fill.weight {
|
|
background: linear-gradient(90deg, #9c27b0, #ba68c8);
|
|
box-shadow: 0 0 10px rgba(156, 39, 176, 0.5);
|
|
}
|
|
|
|
.sidebar-progress-fill.volume {
|
|
background: linear-gradient(90deg, #ff5722, #ff8a65);
|
|
box-shadow: 0 0 10px rgba(255, 87, 34, 0.5);
|
|
}
|
|
|
|
/* Inventory Capacity Progress Bars */
|
|
.inventory-capacity {
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.capacity-info {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.capacity-info:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.capacity-stat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.capacity-label {
|
|
font-weight: bold;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.capacity-numbers {
|
|
color: #ccc;
|
|
}
|
|
|
|
.capacity-bar {
|
|
height: 20px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 107, 107, 0.2);
|
|
position: relative;
|
|
}
|
|
|
|
.capacity-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Single color for capacity bars */
|
|
.capacity-fill {
|
|
background: linear-gradient(90deg, #6bb9f0, #89d4ff);
|
|
box-shadow: 0 0 8px rgba(107, 185, 240, 0.5);
|
|
}
|
|
|
|
/* Compact stats grid - 2x2 layout */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.4rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.sidebar-stat-row.compact {
|
|
padding: 0.4rem 0.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.sidebar-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.sidebar-stat-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.5rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stat-plus-btn {
|
|
background: rgba(107, 185, 240, 0.3);
|
|
border: 1px solid #6bb9f0;
|
|
color: #6bb9f0;
|
|
border-radius: 4px;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
transition: all 0.2s;
|
|
padding: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.stat-plus-btn:hover {
|
|
background: rgba(107, 185, 240, 0.5);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.stat-plus-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.sidebar-stat-row.highlight {
|
|
background: rgba(255, 193, 7, 0.2);
|
|
border-left: 3px solid #ffc107;
|
|
padding-left: 0.4rem;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.sidebar-label {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sidebar-value {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-divider {
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
/* Equipment Sidebar */
|
|
.equipment-sidebar {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
|
overflow: visible;
|
|
/* Allow tooltips to overflow */
|
|
}
|
|
|
|
.equipment-sidebar h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #ff6b6b;
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.equipment-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
overflow: visible;
|
|
/* Allow tooltips to overflow */
|
|
}
|
|
|
|
.equipment-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
margin: auto;
|
|
overflow: visible;
|
|
/* Allow tooltips to overflow */
|
|
}
|
|
|
|
.equipment-row.two-cols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem;
|
|
margin: auto;
|
|
}
|
|
|
|
.equipment-row.three-cols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 0.5rem;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Remove .large variation to enforce uniformity */
|
|
.equipment-slot.large {
|
|
min-width: 0;
|
|
grid-column: auto;
|
|
}
|
|
|
|
.equipment-slot {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
/* Changed from center to space-between */
|
|
gap: 0.25rem;
|
|
/* Fixed dimensions for consistent sizing */
|
|
height: 100px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
overflow: visible;
|
|
/* Changed from hidden to visible to allow tooltips */
|
|
position: relative;
|
|
/* For tooltip positioning */
|
|
}
|
|
|
|
/* Constrain item images in sidebar */
|
|
/* Constrain item images in sidebar */
|
|
.equipment-slot-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 6px;
|
|
opacity: 0.6;
|
|
z-index: 1;
|
|
/* Below text/buttons */
|
|
}
|
|
|
|
/* Ensure content is above image */
|
|
.equipment-slot>*:not(.equipment-slot-image) {
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.equipment-slot.empty {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
cursor: default;
|
|
}
|
|
|
|
.equipment-slot.filled {
|
|
border-color: rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
.equipment-slot.filled:hover {
|
|
border-color: #ff6b6b;
|
|
background: rgba(255, 107, 107, 0.1);
|
|
transform: scale(1.02);
|
|
box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
|
|
z-index: 10001;
|
|
}
|
|
|
|
/* Equipment action buttons - new styles */
|
|
.equipment-item-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
width: 100%;
|
|
flex: 1;
|
|
/* Allow content to grow */
|
|
justify-content: space-between;
|
|
/* Space out elements */
|
|
}
|
|
|
|
/* New unequip button in top-right corner */
|
|
.equipment-unequip-btn {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: rgba(244, 67, 54, 0.9);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
color: #fff;
|
|
font-size: 0.7rem;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
padding: 0;
|
|
z-index: 10;
|
|
line-height: 1;
|
|
}
|
|
|
|
.equipment-unequip-btn:hover {
|
|
background: rgba(244, 67, 54, 1);
|
|
transform: scale(1.1);
|
|
box-shadow: 0 2px 8px rgba(244, 67, 54, 0.6);
|
|
}
|
|
|
|
/* Equipment tooltip - shows on slot hover */
|
|
.equipment-tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(30, 30, 30, 0.98);
|
|
border: 2px solid #ff6b6b;
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
min-width: 220px;
|
|
max-width: 300px;
|
|
z-index: 10000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
pointer-events: none;
|
|
white-space: normal;
|
|
transform-origin: bottom center;
|
|
}
|
|
|
|
.equipment-slot.filled:hover .equipment-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
/* Smart positioning for equipment tooltips based on slot position */
|
|
/* Weapon slot (left column) - tooltip extends to the right */
|
|
.equipment-row.three-cols .equipment-slot:nth-child(1) .equipment-tooltip {
|
|
left: 0;
|
|
transform: none;
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
/* Backpack slot (right column) - tooltip extends to the left */
|
|
.equipment-row.three-cols .equipment-slot:nth-child(3) .equipment-tooltip {
|
|
left: auto;
|
|
right: 0;
|
|
transform: none;
|
|
transform-origin: bottom right;
|
|
}
|
|
|
|
/* Head slot (first row) - tooltip appears below */
|
|
.equipment-row:first-child .equipment-slot .equipment-tooltip {
|
|
bottom: auto;
|
|
top: calc(100% + 8px);
|
|
transform-origin: top center;
|
|
}
|
|
|
|
/* Feet slot (last row) - tooltip appears above (default) */
|
|
.equipment-row:last-child .equipment-slot .equipment-tooltip {
|
|
bottom: calc(100% + 8px);
|
|
top: auto;
|
|
}
|
|
|
|
/* Remove old equipment-actions container */
|
|
.equipment-actions {
|
|
display: none;
|
|
}
|
|
|
|
.equipment-action-btn {
|
|
padding: 0.3rem 0.5rem;
|
|
/* Increased padding */
|
|
font-size: 0.7rem;
|
|
/* Slightly larger font */
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
white-space: nowrap;
|
|
/* Prevent button text wrapping */
|
|
}
|
|
|
|
.equipment-action-btn.info {
|
|
background: linear-gradient(135deg, #6bb9f0, #4a9fd8);
|
|
font-size: 0.65rem;
|
|
padding: 0.3rem 0.4rem;
|
|
}
|
|
|
|
.equipment-action-btn.info:hover {
|
|
background: linear-gradient(135deg, #4a9fd8, #6bb9f0);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(107, 185, 240, 0.4);
|
|
}
|
|
|
|
.equipment-action-btn.unequip {
|
|
background: linear-gradient(135deg, #f44336, #e57373);
|
|
font-size: 0.7rem;
|
|
padding: 0.3rem 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.equipment-action-btn.unequip:hover {
|
|
background: linear-gradient(135deg, #e57373, #f44336);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.equipment-emoji {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.equipment-emoji.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.equipment-name {
|
|
font-size: 0.75rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Tier-based item name colors (WoW-style quality colors) */
|
|
.equipment-name.tier-1,
|
|
.item-name.tier-1 {
|
|
color: #ffffff;
|
|
/* Common - White */
|
|
}
|
|
|
|
.equipment-name.tier-2,
|
|
.item-name.tier-2 {
|
|
color: #1eff00;
|
|
/* Uncommon - Green */
|
|
text-shadow: 0 0 8px rgba(30, 255, 0, 0.5);
|
|
}
|
|
|
|
.equipment-name.tier-3,
|
|
.item-name.tier-3 {
|
|
color: #0070dd;
|
|
/* Rare - Blue */
|
|
text-shadow: 0 0 8px rgba(0, 112, 221, 0.5);
|
|
}
|
|
|
|
.equipment-name.tier-4,
|
|
.item-name.tier-4 {
|
|
color: #a335ee;
|
|
/* Epic - Purple */
|
|
text-shadow: 0 0 8px rgba(163, 53, 238, 0.5);
|
|
}
|
|
|
|
.equipment-name.tier-5,
|
|
.item-name.tier-5 {
|
|
color: #ff8000;
|
|
/* Legendary - Orange/Gold */
|
|
text-shadow: 0 0 10px rgba(255, 128, 0, 0.6);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.equipment-durability {
|
|
font-size: 0.65rem;
|
|
color: #6bb9f0;
|
|
background: rgba(107, 185, 240, 0.1);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.equipment-slot-label {
|
|
font-size: 0.7rem;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Inventory Sidebar */
|
|
.inventory-sidebar {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
padding-top: 3rem;
|
|
border: 1px solid rgba(107, 185, 240, 0.3);
|
|
overflow: visible;
|
|
/* Allow tooltips and dropdowns to show */
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
/* Allow flex children to shrink */
|
|
}
|
|
|
|
.inventory-sidebar h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #6bb9f0;
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar-inventory-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.sidebar-inventory-item {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-inventory-item:hover {
|
|
border-color: #6bb9f0;
|
|
background: rgba(107, 185, 240, 0.1);
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 15px rgba(107, 185, 240, 0.3);
|
|
}
|
|
|
|
.sidebar-item-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.sidebar-item-icon img {
|
|
width: 80%;
|
|
height: 80%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.sidebar-item-quantity {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: #ffc107;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sidebar-item-equipped {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
background: rgba(255, 107, 107, 0.9);
|
|
color: white;
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sidebar-empty {
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-style: italic;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
/* Enhanced Inventory Styles */
|
|
.inventory-section {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.inventory-section h4 {
|
|
color: #6bb9f0;
|
|
font-size: 0.9rem;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.equipped-section h4 {
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.inventory-items-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
overflow: visible;
|
|
}
|
|
|
|
.inventory-category-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.category-header {
|
|
background: rgba(107, 147, 255, 0.2);
|
|
color: #6b93ff;
|
|
padding: 0.5rem 0.75rem;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border-left: 3px solid #6b93ff;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.category-header.clickable {
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.category-header.clickable:hover {
|
|
background: rgba(107, 147, 255, 0.3);
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
.category-toggle {
|
|
font-size: 0.7rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
min-width: 1rem;
|
|
}
|
|
|
|
.category-count {
|
|
margin-left: auto;
|
|
font-size: 0.75rem;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.inventory-item-row-hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
position: relative;
|
|
transition: all 0.2s;
|
|
margin-bottom: 0.5rem;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
.inventory-item-row-hover .item-header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.inventory-item-row-hover:hover {
|
|
background: rgba(107, 185, 240, 0.1);
|
|
border-color: #6bb9f0;
|
|
transform: translateX(2px);
|
|
z-index: 20;
|
|
position: relative;
|
|
}
|
|
|
|
/* Inventory item tooltip - shows on row hover */
|
|
.inventory-item-tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 0;
|
|
background: rgba(30, 30, 30, 0.98);
|
|
border: 2px solid #6bb9f0;
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
min-width: 220px;
|
|
max-width: 300px;
|
|
z-index: 10000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
pointer-events: none;
|
|
white-space: normal;
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
.inventory-item-row-hover:hover .inventory-item-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
.inventory-item-row-hover .item-actions-hover {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
flex-wrap: nowrap;
|
|
gap: 0.5rem;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
padding: 0.5rem 0.5rem;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(107, 185, 240, 0.3);
|
|
z-index: 10;
|
|
}
|
|
|
|
.inventory-item-row-hover:hover .item-actions-hover {
|
|
display: flex;
|
|
}
|
|
|
|
.item-action-btn {
|
|
background: rgba(107, 185, 240, 0.3);
|
|
border: 1px solid #6bb9f0;
|
|
color: #6bb9f0;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.item-action-btn:hover {
|
|
background: rgba(107, 185, 240, 0.5);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.item-action-btn.use {
|
|
background: rgba(76, 175, 80, 0.3);
|
|
border-color: #4caf50;
|
|
color: #4caf50;
|
|
}
|
|
|
|
.item-action-btn.use:hover {
|
|
background: rgba(76, 175, 80, 0.5);
|
|
}
|
|
|
|
.item-action-btn.equip {
|
|
background: rgba(255, 152, 0, 0.3);
|
|
border-color: #ff9800;
|
|
color: #ff9800;
|
|
}
|
|
|
|
.item-action-btn.equip:hover {
|
|
background: rgba(255, 152, 0, 0.5);
|
|
}
|
|
|
|
.item-action-btn.drop {
|
|
background: rgba(244, 67, 54, 0.3);
|
|
border-color: #f44336;
|
|
color: #f44336;
|
|
}
|
|
|
|
.item-action-btn.drop:hover {
|
|
background: rgba(244, 67, 54, 0.5);
|
|
}
|
|
|
|
.item-action-btn.info {
|
|
background: rgba(107, 185, 240, 0.3);
|
|
border-color: #6bb9f0;
|
|
color: #6bb9f0;
|
|
}
|
|
|
|
.item-action-btn.info:hover {
|
|
background: rgba(107, 185, 240, 0.5);
|
|
}
|
|
|
|
.item-info-btn-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.item-info-btn-container .item-info-tooltip {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
right: 0;
|
|
background: rgba(30, 30, 30, 0.98);
|
|
border: 2px solid #6bb9f0;
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
min-width: 220px;
|
|
max-width: 300px;
|
|
z-index: 10000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
pointer-events: none;
|
|
white-space: normal;
|
|
/* Fix overflow - position relative to viewport if needed */
|
|
transform-origin: bottom right;
|
|
}
|
|
|
|
/* Alternative positioning if tooltip would overflow right */
|
|
.entity-card:first-child .item-info-btn-container .item-info-tooltip,
|
|
.entity-card:nth-child(2) .item-info-btn-container .item-info-tooltip {
|
|
right: auto;
|
|
left: 0;
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
/* Equipment tooltip positioning - avoid cutting off */
|
|
.equipment-slot .item-info-btn-container .item-info-tooltip {
|
|
right: auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
}
|
|
|
|
/* Smart positioning for equipment slots based on location */
|
|
/* Weapon slot (left column) - tooltip extends to the right */
|
|
.equipment-row.three-cols .equipment-slot:nth-child(1) .item-info-btn-container .item-info-tooltip {
|
|
left: 0;
|
|
right: auto;
|
|
transform: none;
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
/* Backpack slot (right column) - tooltip extends to the left */
|
|
.equipment-row.three-cols .equipment-slot:nth-child(3) .item-info-btn-container .item-info-tooltip {
|
|
left: auto;
|
|
right: 0;
|
|
transform: none;
|
|
transform-origin: bottom right;
|
|
}
|
|
|
|
/* Head slot (first row) - tooltip appears below */
|
|
.equipment-row:first-child .equipment-slot .item-info-btn-container .item-info-tooltip {
|
|
bottom: auto;
|
|
top: calc(100% + 8px);
|
|
transform-origin: top center;
|
|
}
|
|
|
|
/* Head slot when it's in a three-column row (still show below) */
|
|
.equipment-row.three-cols:first-child .equipment-slot:nth-child(2) .item-info-btn-container .item-info-tooltip {
|
|
bottom: auto;
|
|
top: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
transform-origin: top center;
|
|
}
|
|
|
|
/* Feet slot (last row) - tooltip appears above (default behavior) */
|
|
.equipment-row:last-child .equipment-slot .item-info-btn-container .item-info-tooltip {
|
|
bottom: calc(100% + 8px);
|
|
top: auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
}
|
|
|
|
.item-info-btn-container:hover .item-info-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
.item-tooltip-desc {
|
|
color: #ddd;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.item-tooltip-stat {
|
|
color: #6bb9f0;
|
|
font-size: 0.8rem;
|
|
margin: 0.25rem 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Drop button with quantity menu */
|
|
.item-drop-btn-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.item-drop-menu {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 0;
|
|
margin-bottom: 4px;
|
|
padding-bottom: 4px;
|
|
background: rgba(30, 30, 30, 0.98);
|
|
border: 2px solid #f44336;
|
|
border-radius: 8px;
|
|
padding: 0.5rem;
|
|
min-width: 120px;
|
|
z-index: 10000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Add a bridge between button and menu */
|
|
.item-drop-btn-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 12px;
|
|
display: none;
|
|
}
|
|
|
|
.item-drop-btn-container:hover::before,
|
|
.item-drop-btn-container:hover .item-drop-menu {
|
|
display: flex;
|
|
}
|
|
|
|
.item-drop-option {
|
|
background: rgba(244, 67, 54, 0.3);
|
|
border: 1px solid #f44336;
|
|
color: #f44336;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-drop-option:hover {
|
|
background: rgba(244, 67, 54, 0.6);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Pickup button with quantity menu */
|
|
.item-pickup-btn-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.item-pickup-menu {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 0;
|
|
margin-bottom: 4px;
|
|
padding-bottom: 4px;
|
|
background: rgba(30, 30, 30, 0.98);
|
|
border: 2px solid #4caf50;
|
|
border-radius: 8px;
|
|
padding: 0.5rem;
|
|
min-width: 140px;
|
|
z-index: 10000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.item-pickup-btn-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 12px;
|
|
display: none;
|
|
}
|
|
|
|
.item-pickup-btn-container:hover::before,
|
|
.item-pickup-btn-container:hover .item-pickup-menu {
|
|
display: flex;
|
|
}
|
|
|
|
.item-pickup-option {
|
|
background: rgba(76, 175, 80, 0.3);
|
|
border: 1px solid #4caf50;
|
|
color: #4caf50;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-pickup-option:hover {
|
|
background: rgba(76, 175, 80, 0.6);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Item effect indicators */
|
|
.item-effect {
|
|
font-size: 0.85em;
|
|
color: #4caf50;
|
|
font-weight: 600;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.inventory-item-row {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.inventory-item-row:hover {
|
|
background: rgba(107, 185, 240, 0.1);
|
|
border-color: #6bb9f0;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.inventory-item-row.selected {
|
|
background: rgba(107, 185, 240, 0.2);
|
|
border-color: #6bb9f0;
|
|
}
|
|
|
|
.inventory-item-row.equipped-item {
|
|
border-left: 4px solid #ff6b6b;
|
|
}
|
|
|
|
.item-icon-small {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-icon-small img {
|
|
width: 90%;
|
|
height: 90%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.item-name-qty {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.item-name {
|
|
color: #fff;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.item-qty {
|
|
color: #ffc107;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.item-equipped-badge {
|
|
background: rgba(255, 107, 107, 0.9);
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Category Filter */
|
|
.inventory-categories {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0.25rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.category-btn {
|
|
padding: 0.5rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.category-btn:hover {
|
|
background: rgba(107, 185, 240, 0.1);
|
|
border-color: #6bb9f0;
|
|
color: #6bb9f0;
|
|
}
|
|
|
|
.category-btn.active {
|
|
background: rgba(107, 185, 240, 0.2);
|
|
border-color: #6bb9f0;
|
|
color: #6bb9f0;
|
|
}
|
|
|
|
/* Scrollable Items Area */
|
|
.inventory-items-scrollable {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
min-height: 200px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.inventory-items-scrollable::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.inventory-items-scrollable::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.inventory-items-scrollable::-webkit-scrollbar-thumb {
|
|
background: rgba(107, 185, 240, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.inventory-items-scrollable::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(107, 185, 240, 0.7);
|
|
}
|
|
|
|
/* Item Actions Panel */
|
|
.item-actions-panel {
|
|
background: rgba(107, 185, 240, 0.1);
|
|
border: 2px solid #6bb9f0;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.item-details-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.item-details-header strong {
|
|
color: #6bb9f0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.close-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: #ff6b6b;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.item-description {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.item-action-buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.item-action-btn {
|
|
padding: 0.6rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.item-action-btn.use-btn {
|
|
background: linear-gradient(135deg, #4caf50, #66bb6a);
|
|
color: white;
|
|
}
|
|
|
|
.item-action-btn.use-btn:hover {
|
|
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
.item-action-btn.equip-btn {
|
|
background: linear-gradient(135deg, #2196f3, #42a5f5);
|
|
color: white;
|
|
}
|
|
|
|
.item-action-btn.equip-btn:hover {
|
|
background: linear-gradient(135deg, #42a5f5, #2196f3);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
|
|
}
|
|
|
|
.item-action-btn.unequip-btn {
|
|
background: linear-gradient(135deg, #ff9800, #ffb74d);
|
|
color: white;
|
|
}
|
|
|
|
.item-action-btn.unequip-btn:hover {
|
|
background: linear-gradient(135deg, #ffb74d, #ff9800);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
|
|
}
|
|
|
|
.item-action-btn.drop-btn {
|
|
background: linear-gradient(135deg, #f44336, #e57373);
|
|
color: white;
|
|
}
|
|
|
|
.item-action-btn.drop-btn:hover {
|
|
background: linear-gradient(135deg, #e57373, #f44336);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
/* Weight and Volume Progress Bars */
|
|
.sidebar-progress-fill.weight {
|
|
background: linear-gradient(90deg, #ff9800, #f57c00);
|
|
}
|
|
|
|
.sidebar-progress-fill.volume {
|
|
background: linear-gradient(90deg, #9c27b0, #7b1fa2);
|
|
}
|
|
|
|
/* Inventory Tab - Full View */
|
|
.inventory-tab {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.inventory-tab h2 {
|
|
color: #6bb9f0;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Enemy Cards */
|
|
.enemy-card {
|
|
border-left: 4px solid rgba(244, 67, 54, 0.6);
|
|
background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(255, 0, 0, 0.05));
|
|
}
|
|
|
|
.enemy-card:hover {
|
|
border-left-color: rgba(244, 67, 54, 0.9);
|
|
box-shadow: 0 8px 20px rgba(244, 67, 54, 0.3);
|
|
}
|
|
|
|
.enemy-name {
|
|
color: #f44336;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.combat-btn {
|
|
background: linear-gradient(135deg, #f44336, #d32f2f);
|
|
}
|
|
|
|
.combat-btn:hover {
|
|
background: linear-gradient(135deg, #ff5252, #f44336);
|
|
}
|
|
|
|
.entity-image {
|
|
width: 80px;
|
|
height: 56px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
margin-right: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.entity-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Combat Modal */
|
|
.combat-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
animation: fadeIn 0.3s;
|
|
}
|
|
|
|
.combat-modal {
|
|
background: linear-gradient(135deg, #1a1a2e, #16213e);
|
|
border: 2px solid rgba(107, 185, 240, 0.3);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
max-width: 600px;
|
|
width: 90%;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
animation: slideUp 0.3s;
|
|
}
|
|
|
|
.combat-header {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid rgba(107, 185, 240, 0.3);
|
|
}
|
|
|
|
.combat-header h2 {
|
|
margin: 0;
|
|
font-size: 1.8rem;
|
|
color: #6bb9f0;
|
|
}
|
|
|
|
.combat-enemy-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
padding: 1.5rem;
|
|
background: rgba(244, 67, 54, 0.1);
|
|
border: 2px solid rgba(244, 67, 54, 0.3);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.combat-enemy-image-container {
|
|
width: 200px;
|
|
height: 140px;
|
|
flex-shrink: 0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.combat-enemy-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.combat-enemy-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.combat-enemy-info h3 {
|
|
margin: 0 0 1rem 0;
|
|
color: #f44336;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.combat-hp-bar-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.combat-stat-label {
|
|
font-size: 0.9rem;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.combat-hp-bar {
|
|
width: 100%;
|
|
height: 24px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.combat-hp-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #f44336, #ff5252);
|
|
transition: width 0.5s ease;
|
|
box-shadow: 0 0 10px rgba(244, 67, 54, 0.6);
|
|
}
|
|
|
|
.combat-log {
|
|
margin: 1.5rem 0;
|
|
padding: 1rem;
|
|
background: rgba(107, 185, 240, 0.1);
|
|
border-left: 4px solid #6bb9f0;
|
|
border-radius: 8px;
|
|
min-height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.combat-log p {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.combat-turn-indicator {
|
|
text-align: center;
|
|
margin: 1.5rem 0;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.your-turn {
|
|
color: #4caf50;
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
.enemy-turn {
|
|
color: #f44336;
|
|
}
|
|
|
|
|
|
|
|
.combat-action-btn {
|
|
padding: 1rem 2rem;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
border: none;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.combat-action-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.attack-btn {
|
|
background: linear-gradient(135deg, #f44336, #d32f2f);
|
|
color: white;
|
|
}
|
|
|
|
.attack-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #ff5252, #f44336);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.flee-btn {
|
|
background: linear-gradient(135deg, #ff9800, #f57c00);
|
|
color: white;
|
|
}
|
|
|
|
.flee-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #ffb74d, #ff9800);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(50px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* Inline Combat View (replaces modal) */
|
|
.combat-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
padding: 2rem;
|
|
background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(139, 0, 0, 0.1));
|
|
border: 2px solid rgba(244, 67, 54, 0.5);
|
|
border-radius: 12px;
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
.combat-header-inline {
|
|
text-align: center;
|
|
border-bottom: 2px solid rgba(244, 67, 54, 0.5);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.combat-header-inline h2 {
|
|
color: #ff5252;
|
|
margin: 0;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.combat-enemy-display-inline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.combat-enemy-image-large {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
aspect-ratio: 10 / 7;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 3px solid rgba(244, 67, 54, 0.5);
|
|
}
|
|
|
|
.combat-enemy-image-large img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.combat-enemy-info-inline {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.combat-enemy-info-inline h3 {
|
|
color: #ff5252;
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.combat-hp-bar-container-inline {
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.combat-hp-bar-container-inline.enemy-hp-bar {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.combat-hp-bar-container-inline.player-hp-bar {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.combat-stat-label-inline {
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
position: absolute;
|
|
left: 0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 1), -1px -1px 2px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* Player HP bar - right-aligned text */
|
|
.player-hp-bar .combat-stat-label-inline {
|
|
text-align: right;
|
|
left: auto;
|
|
right: 0.75rem;
|
|
}
|
|
|
|
.combat-hp-bar-inline {
|
|
width: 100%;
|
|
height: 32px;
|
|
background: rgba(20, 20, 20, 0.8);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
border: 2px solid rgba(255, 100, 100, 0.6);
|
|
position: relative;
|
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.combat-hp-fill-inline {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #ff3333, #ff6666, #ff4444);
|
|
transition: width 0.3s ease-out;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
|
|
}
|
|
|
|
/* Player HP bar - reversed fill (right to left) */
|
|
.player-hp-bar .combat-hp-fill-inline {
|
|
left: auto;
|
|
right: 0;
|
|
background: linear-gradient(270deg, #f44336, #ff6b6b);
|
|
}
|
|
|
|
.combat-log-inline {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid rgba(244, 67, 54, 0.3);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
min-height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.combat-log-inline p {
|
|
color: #fff;
|
|
font-size: 1.1rem;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.combat-turn-indicator-inline {
|
|
text-align: center;
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 2px solid transparent;
|
|
min-height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Apply pulsing animation when it's enemy's turn processing */
|
|
.combat-turn-indicator-inline.enemy-turn-message {
|
|
background: rgba(255, 152, 0, 0.2);
|
|
border: 2px solid rgba(255, 152, 0, 0.5);
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.combat-turn-indicator-inline.enemy-turn-message .enemy-turn {
|
|
color: #ff9800;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.combat-actions-inline {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.exit-btn {
|
|
grid-column: 1 / -1;
|
|
background: linear-gradient(135deg, #4caf50, #66bb6a);
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
|
|
}
|
|
|
|
.exit-btn:hover {
|
|
background: linear-gradient(135deg, #66bb6a, #4caf50);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
/* Combat Log Styles */
|
|
.combat-log-container {
|
|
margin-top: 2rem;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 2px solid rgba(244, 67, 54, 0.3);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.combat-log-container h4 {
|
|
color: #fff;
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1.2rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-bottom: 2px solid rgba(244, 67, 54, 0.3);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.combat-log-messages {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.combat-log-entry {
|
|
color: #fff;
|
|
padding: 0.75rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-left: 3px solid rgba(244, 67, 54, 0.5);
|
|
border-radius: 4px;
|
|
line-height: 1.5;
|
|
font-size: 0.95rem;
|
|
animation: fadeInLog 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.combat-log-entry.player-action {
|
|
border-left-color: #4caf50;
|
|
background: rgba(76, 175, 80, 0.1);
|
|
}
|
|
|
|
.combat-log-entry.enemy-action {
|
|
border-left-color: #f44336;
|
|
background: rgba(244, 67, 54, 0.1);
|
|
}
|
|
|
|
.log-time {
|
|
font-size: 0.85rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-family: monospace;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.log-separator {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.log-message {
|
|
flex: 1;
|
|
}
|
|
|
|
@keyframes fadeInLog {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.combat-log-messages::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.combat-log-messages::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.combat-log-messages::-webkit-scrollbar-thumb {
|
|
background: rgba(244, 67, 54, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.combat-log-messages::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(244, 67, 54, 0.7);
|
|
}
|
|
|
|
/* Responsive Combat View */
|
|
@media (max-width: 768px) {
|
|
.combat-view {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.combat-header-inline h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.combat-enemy-info-inline h3 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.combat-actions-inline {
|
|
grid-template-columns: 1fr 1fr;
|
|
/* Side by side on mobile */
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.combat-log-container {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.combat-log-messages {
|
|
max-height: 200px;
|
|
}
|
|
}
|
|
|
|
/* Centered headings for consistency */
|
|
.centered-heading {
|
|
text-align: center;
|
|
}
|
|
|
|
.interactables-section h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Location description box */
|
|
.location-description-box {
|
|
background: rgba(25, 26, 31, 0.6);
|
|
border: 1px solid rgba(107, 185, 240, 0.3);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.location-description {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Cooldown emoji */
|
|
.cooldown-emoji {
|
|
font-size: 1.2rem;
|
|
margin-left: 0.5rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Stamina cost on interact buttons */
|
|
.interact-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.stamina-cost {
|
|
font-size: 0.85rem;
|
|
opacity: 0.8;
|
|
margin-left: 0.3rem;
|
|
}
|
|
|
|
.interact-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
|
|
|
|
/* Other players card styling */
|
|
.player-card {
|
|
background: rgba(107, 147, 255, 0.15);
|
|
border-color: rgba(107, 147, 255, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.player-card .entity-icon {
|
|
background: rgba(107, 147, 255, 0.3);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.player-card .entity-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.player-card .entity-name {
|
|
color: #6b93ff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.player-card .level-diff {
|
|
font-size: 0.8rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.pvp-btn {
|
|
padding: 0.4rem 0.8rem;
|
|
background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
|
|
color: white;
|
|
border: 1px solid rgba(255, 68, 68, 0.5);
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pvp-btn:hover {
|
|
background: linear-gradient(135deg, #ff6666 0%, #ff2222 100%);
|
|
box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.pvp-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.pvp-disabled-reason {
|
|
font-size: 0.75rem;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-style: italic;
|
|
padding: 0.3rem 0.6rem;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ============= PVP COMBAT UI ============= */
|
|
|
|
.pvp-combat-display {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pvp-players {
|
|
display: flex;
|
|
gap: 2rem;
|
|
justify-content: center;
|
|
margin: 2rem 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pvp-player-card {
|
|
background: rgba(30, 30, 40, 0.8);
|
|
border: 2px solid rgba(255, 107, 107, 0.4);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
min-width: 280px;
|
|
flex: 1;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.pvp-player-card.your-card {
|
|
border-color: rgba(107, 185, 240, 0.4);
|
|
background: rgba(30, 40, 50, 0.8);
|
|
}
|
|
|
|
.pvp-player-card h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: #ff6b6b;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.pvp-player-card.your-card h3 {
|
|
color: #6bb9f0;
|
|
}
|
|
|
|
.pvp-level {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ============= MOBILE SLIDING MENUS ============= */
|
|
|
|
/* Hide mobile menu buttons on desktop */
|
|
.mobile-menu-buttons {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-nav {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile menu overlay (darkens background when menu is open) */
|
|
.mobile-menu-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 998;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Mobile header toggle button */
|
|
.mobile-header-toggle {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile Styles */
|
|
@media (max-width: 768px) {
|
|
|
|
/* Tab-style navigation bar at bottom */
|
|
.mobile-menu-buttons {
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(20, 20, 20, 1) !important;
|
|
/* Fully opaque */
|
|
border-top: 2px solid rgba(255, 107, 107, 0.5);
|
|
z-index: 1000;
|
|
/* Always on top */
|
|
padding: 0.5rem 0;
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8);
|
|
justify-content: space-around;
|
|
gap: 0;
|
|
height: 65px;
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
flex: 1;
|
|
height: 55px;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.mobile-menu-btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10%;
|
|
right: 10%;
|
|
height: 3px;
|
|
background: transparent;
|
|
border-radius: 3px 3px 0 0;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.mobile-menu-btn:active {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.mobile-menu-btn.left-btn::after {
|
|
background: rgba(255, 107, 107, 0.8);
|
|
}
|
|
|
|
.mobile-menu-btn.bottom-btn::after {
|
|
background: rgba(255, 193, 7, 0.8);
|
|
}
|
|
|
|
.mobile-menu-btn.right-btn::after {
|
|
background: rgba(107, 147, 255, 0.8);
|
|
}
|
|
|
|
/* Active tab styles */
|
|
.mobile-menu-btn.left-btn.active {
|
|
color: rgb(255, 107, 107);
|
|
background: rgba(255, 107, 107, 0.1);
|
|
}
|
|
|
|
.mobile-menu-btn.bottom-btn.active {
|
|
color: rgb(255, 193, 7);
|
|
background: rgba(255, 193, 7, 0.1);
|
|
}
|
|
|
|
.mobile-menu-btn.right-btn.active {
|
|
color: rgb(107, 147, 255);
|
|
background: rgba(107, 147, 255, 0.1);
|
|
}
|
|
|
|
.mobile-menu-btn.active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mobile-menu-btn:not(.active)::after {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Disable bottom-btn during combat */
|
|
.mobile-menu-btn.bottom-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Show overlay when any menu is open */
|
|
.mobile-menu-overlay {
|
|
display: block;
|
|
}
|
|
|
|
/* Hide desktop 3-column layout on mobile */
|
|
.explore-tab-desktop {
|
|
display: block !important;
|
|
position: relative;
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Mobile panels - hidden by default, slide in when open */
|
|
.mobile-menu-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 65px;
|
|
/* Stop 65px from bottom (above tab bar) */
|
|
width: 85vw;
|
|
max-width: 400px;
|
|
background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(40, 40, 40, 0.98));
|
|
z-index: 999;
|
|
/* Below tab bar */
|
|
overflow-y: auto;
|
|
transition: transform 0.3s ease;
|
|
padding: 1rem;
|
|
padding-bottom: 1rem;
|
|
/* No extra padding needed */
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* Left sidebar - slides from left */
|
|
.left-sidebar.mobile-menu-panel {
|
|
left: 0;
|
|
transform: translateX(-100%);
|
|
border-right: 3px solid rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
.left-sidebar.mobile-menu-panel.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Right sidebar - slides from right */
|
|
.right-sidebar.mobile-menu-panel {
|
|
right: 0;
|
|
transform: translateX(100%);
|
|
border-left: 3px solid rgba(107, 147, 255, 0.5);
|
|
}
|
|
|
|
.right-sidebar.mobile-menu-panel.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Bottom panel (ground entities) - slides from bottom */
|
|
.ground-entities.mobile-menu-panel.bottom {
|
|
top: auto;
|
|
bottom: 65px;
|
|
/* Start 65px from bottom (above tab bar) */
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: calc(70vh - 65px);
|
|
/* Height minus tab bar */
|
|
transform: translateY(calc(100% + 65px));
|
|
/* Hide below screen */
|
|
border-top: 3px solid rgba(255, 193, 7, 0.5);
|
|
border-radius: 20px 20px 0 0;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.ground-entities.mobile-menu-panel.bottom.open {
|
|
transform: translateY(0);
|
|
/* Slide up to bottom: 65px position */
|
|
}
|
|
|
|
/* Keep center content always visible on mobile */
|
|
.center-content {
|
|
display: block !important;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Hide sidebars and ground entities by default on mobile (until menu opened) */
|
|
.left-sidebar:not(.open),
|
|
.right-sidebar:not(.open),
|
|
.ground-entities:not(.open) {
|
|
display: none;
|
|
}
|
|
|
|
/* When panel is open, show it */
|
|
.mobile-menu-panel.open {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Adjust center content to be full width on mobile */
|
|
.location-info,
|
|
.message-box {
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
/* Make compass slightly smaller on mobile when in panel */
|
|
.mobile-menu-panel .compass-grid {
|
|
grid-template-columns: repeat(3, 70px);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.mobile-menu-panel .compass-btn {
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
|
|
.mobile-menu-panel .compass-center {
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
|
|
/* Always show item action buttons on mobile (no hover needed) */
|
|
.inventory-item-row-hover .item-actions-hover {
|
|
display: flex !important;
|
|
position: static;
|
|
margin-top: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.inventory-item-row-hover {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.item-action-btn {
|
|
min-width: 70px;
|
|
padding: 0.4rem 0.6rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Ensure right sidebar has proper background */
|
|
.right-sidebar {
|
|
background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(40, 40, 40, 0.98));
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Make combat view always visible and prominent on mobile */
|
|
.combat-view {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Combat mode - maintain tab bar */
|
|
.game-main:has(.combat-view) .mobile-menu-buttons {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Fix item tooltips on mobile - allow overflow and reposition */
|
|
.inventory-items-scrollable {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.inventory-panel {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.right-sidebar.mobile-menu-panel {
|
|
overflow-y: auto !important;
|
|
overflow-x: visible !important;
|
|
}
|
|
|
|
.item-info-btn-container .item-info-tooltip {
|
|
right: auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
max-width: 90vw;
|
|
z-index: 10001;
|
|
}
|
|
|
|
/* Make sure tooltips show on touch */
|
|
.item-info-btn-container:active .item-info-tooltip,
|
|
.item-info-btn-container.show-tooltip .item-info-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
/* Hide header on mobile, show toggle button */
|
|
.game-container {
|
|
position: relative;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
/* Prevent header from going outside viewport */
|
|
}
|
|
|
|
.game-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 80%;
|
|
max-width: 300px;
|
|
height: 100%;
|
|
z-index: 999;
|
|
background: rgba(20, 20, 20, 0.98) !important;
|
|
border-right: 2px solid rgba(255, 107, 107, 0.5);
|
|
border-bottom: none;
|
|
transform: none;
|
|
transition: left 0.3s ease;
|
|
overflow-y: auto;
|
|
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.8);
|
|
padding: 1.5rem !important;
|
|
padding-top: 4rem !important;
|
|
/* Space for X button */
|
|
padding-bottom: calc(65px + 1.5rem) !important;
|
|
/* Space for tab bar + padding */
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.game-header.open {
|
|
left: 0;
|
|
}
|
|
|
|
.game-header h1 {
|
|
font-size: 1.3rem !important;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.game-header .nav-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.game-header .user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
.nav-link,
|
|
.username-link {
|
|
padding: 0.75rem 1rem !important;
|
|
font-size: 0.95rem !important;
|
|
width: 100%;
|
|
text-align: left;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.button-secondary {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-header-toggle {
|
|
display: block;
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(60, 60, 60, 0.95));
|
|
border: 2px solid rgba(255, 107, 107, 0.5);
|
|
color: #fff;
|
|
font-size: 1.3rem;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
/* Above sidebar */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.mobile-header-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Make game-main fill space and account for tab bar */
|
|
.game-main {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
margin-bottom: 65px;
|
|
/* Space for tab bar */
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
/* Compact location titles on mobile */
|
|
.location-info h2 {
|
|
font-size: 1.2rem !important;
|
|
line-height: 1.3 !important;
|
|
margin-bottom: 0.3rem !important;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.location-badge {
|
|
font-size: 0.7rem !important;
|
|
padding: 0.2rem 0.4rem !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Toast notification for messages */
|
|
.message-box {
|
|
position: fixed !important;
|
|
top: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 90%;
|
|
max-width: 400px;
|
|
z-index: 9999 !important;
|
|
margin: 0 !important;
|
|
animation: slideDown 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
|
|
cursor: pointer;
|
|
background: rgba(40, 40, 40, 0.98) !important;
|
|
/* Opaque background */
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
.message-box.fade-out {
|
|
animation: fadeOut 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-20px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Utility classes */
|
|
.text-danger {
|
|
color: #ff4444 !important;
|
|
}
|
|
|
|
/* --- Combat Actions --- */
|
|
.combat-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
min-height: 220px;
|
|
/* Reserve space for grid to prevent layout shift */
|
|
justify-content: center;
|
|
/* Center content vertically */
|
|
}
|
|
|
|
.combat-actions-group {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.combat-actions-group .btn {
|
|
padding: 1rem;
|
|
font-size: 1.1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
/* Specific Combat Buttons */
|
|
.btn-attack {
|
|
background: linear-gradient(180deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.3) 100%);
|
|
border: 1px solid rgba(220, 38, 38, 0.5);
|
|
color: #fca5a5;
|
|
}
|
|
|
|
.btn-attack:hover:not(:disabled) {
|
|
background: linear-gradient(180deg, rgba(220, 38, 38, 0.3) 0%, rgba(153, 27, 27, 0.4) 100%);
|
|
border-color: #f87171;
|
|
box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-defend {
|
|
background: linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
|
|
border: 1px solid rgba(37, 99, 235, 0.5);
|
|
color: #93c5fd;
|
|
}
|
|
|
|
.btn-defend:hover:not(:disabled) {
|
|
background: linear-gradient(180deg, rgba(37, 99, 235, 0.3) 0%, rgba(30, 64, 175, 0.4) 100%);
|
|
border-color: #60a5fa;
|
|
box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-supplies {
|
|
background: linear-gradient(180deg, rgba(217, 119, 6, 0.2) 0%, rgba(180, 83, 9, 0.3) 100%);
|
|
border: 1px solid rgba(217, 119, 6, 0.5);
|
|
color: #fcd34d;
|
|
}
|
|
|
|
.btn-supplies:hover:not(:disabled) {
|
|
background: linear-gradient(180deg, rgba(217, 119, 6, 0.3) 0%, rgba(180, 83, 9, 0.4) 100%);
|
|
border-color: #fbbf24;
|
|
box-shadow: 0 0 15px rgba(217, 119, 6, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-flee {
|
|
background: linear-gradient(180deg, rgba(75, 85, 99, 0.2) 0%, rgba(55, 65, 81, 0.3) 100%);
|
|
border: 1px solid rgba(75, 85, 99, 0.5);
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.btn-flee:hover:not(:disabled) {
|
|
background: linear-gradient(180deg, rgba(75, 85, 99, 0.3) 0%, rgba(55, 65, 81, 0.4) 100%);
|
|
border-color: #9ca3af;
|
|
box-shadow: 0 0 15px rgba(75, 85, 99, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Pickup Action Group (Split Button) */
|
|
.pickup-actions-group {
|
|
display: flex;
|
|
align-items: stretch;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
overflow: visible;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.pickup-main-btn {
|
|
padding: 0.4rem 0.75rem;
|
|
background: linear-gradient(135deg, #48bb78, #38a169);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px 0 0 6px;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.pickup-main-btn:hover {
|
|
background: linear-gradient(135deg, #38a169, #2f855a);
|
|
}
|
|
|
|
.pickup-toggle-btn {
|
|
padding: 0 0.4rem;
|
|
background: linear-gradient(135deg, #48bb78, #38a169);
|
|
border: none;
|
|
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-radius: 0 6px 6px 0;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.pickup-toggle-btn:hover {
|
|
background: linear-gradient(135deg, #38a169, #2f855a);
|
|
}
|
|
|
|
.pickup-dropdown {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 0;
|
|
background: var(--game-bg-panel);
|
|
border: 1px solid var(--game-border-color);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 120px;
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
animation: fadeIn 0.1s ease-out;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pickup-option {
|
|
padding: 0.6rem 1rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--game-text-primary);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: background 0.2s;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.pickup-option:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.pickup-option:hover {
|
|
background: rgba(72, 187, 120, 0.2);
|
|
color: #48bb78;
|
|
}
|
|
|
|
/* Single button variant (no split) */
|
|
.pickup-btn-single {
|
|
padding: 0.4rem 1rem;
|
|
background: linear-gradient(135deg, #48bb78, #38a169);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.pickup-btn-single:hover {
|
|
background: linear-gradient(135deg, #38a169, #2f855a);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(56, 161, 105, 0.3);
|
|
}
|
|
|
|
/* Pickup Action Group (Row of Buttons) */
|
|
.pickup-actions-group {
|
|
display: flex;
|
|
gap: 2px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
padding: 2px;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(72, 187, 120, 0.4);
|
|
/* Green border */
|
|
align-items: center;
|
|
}
|
|
|
|
.action-btn.pickup {
|
|
background: transparent;
|
|
color: #48bb78;
|
|
/* Green text */
|
|
border: none;
|
|
padding: 0.3rem 0.6rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.action-btn.pickup:hover {
|
|
background: rgba(72, 187, 120, 0.2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.action-btn.pickup.single {
|
|
/* Special styling if we want the single button to look distinct,
|
|
but keeping it consistent with group for now */
|
|
border: 1px solid rgba(72, 187, 120, 0.4);
|
|
background: rgba(72, 187, 120, 0.1);
|
|
}
|
|
|
|
.action-btn.pickup.single:hover {
|
|
background: rgba(72, 187, 120, 0.2);
|
|
} |