Phillip Tarrant
16171dc34a
- Fixed grid layout not applying to modal content (grid was on wrong parent element) - Applied grid to .npc-chat-container instead of .npc-modal-body--three-col - Removed htmx-indicator class from history panel (was causing content to disappear) - Made history loading indicator visible by default - Updated responsive breakpoints to target correct selectors - Added warning to HTMX_PATTERNS.md about htmx-indicator hidden behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1987 lines
38 KiB
CSS
1987 lines
38 KiB
CSS
/**
|
|
* Code of Conquest - Play Screen Stylesheet
|
|
* 3-column layout for immersive gameplay
|
|
*/
|
|
|
|
/* ===== PLAY SCREEN VARIABLES ===== */
|
|
:root {
|
|
/* Play-specific backgrounds (inherit from main.css theme) */
|
|
--play-bg-panel: var(--bg-secondary);
|
|
--play-bg-content: var(--bg-tertiary);
|
|
--play-border: var(--border-primary);
|
|
|
|
/* Action tier colors */
|
|
--action-free: #3b82f6;
|
|
--action-free-hover: #2563eb;
|
|
--action-premium: #8b5cf6;
|
|
--action-premium-hover: #7c3aed;
|
|
--action-elite: var(--accent-gold);
|
|
--action-elite-hover: var(--accent-gold-hover);
|
|
|
|
/* Resource bars */
|
|
--hp-bar-fill: #ef4444;
|
|
--hp-bar-bg: #7f1d1d;
|
|
--mp-bar-fill: #3b82f6;
|
|
--mp-bar-bg: #1e3a5f;
|
|
--xp-bar-fill: #10b981;
|
|
--xp-bar-bg: #065f46;
|
|
|
|
/* Panel sizing */
|
|
--sidebar-left-width: 280px;
|
|
--sidebar-right-width: 320px;
|
|
}
|
|
|
|
/* ===== MAIN LAYOUT ===== */
|
|
.play-container {
|
|
display: grid;
|
|
grid-template-columns: var(--sidebar-left-width) minmax(500px, 1fr) var(--sidebar-right-width);
|
|
gap: 1rem;
|
|
height: calc(100vh - 140px);
|
|
padding: 1rem;
|
|
max-width: 2400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Override base main styles for play screen */
|
|
.play-page main {
|
|
padding: 0;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
/* ===== PANEL BASE STYLES ===== */
|
|
.play-panel {
|
|
background: var(--play-bg-panel);
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.play-sidebar {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.play-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ===== LEFT SIDEBAR - CHARACTER PANEL ===== */
|
|
.character-panel {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Character Header */
|
|
.character-header {
|
|
text-align: center;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--play-border);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.character-name {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-xl);
|
|
color: var(--accent-gold);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.character-info {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.character-class {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.character-level {
|
|
color: var(--accent-gold);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Resource Bars */
|
|
.resource-bars {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.resource-bar {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.resource-bar-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: var(--text-xs);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.resource-bar-name {
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.resource-bar-value {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.resource-bar-track {
|
|
height: 8px;
|
|
background: var(--bg-input);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.resource-bar-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.resource-bar--hp .resource-bar-fill {
|
|
background: linear-gradient(90deg, var(--hp-bar-fill), #f87171);
|
|
}
|
|
|
|
.resource-bar--mp .resource-bar-fill {
|
|
background: linear-gradient(90deg, var(--mp-bar-fill), #60a5fa);
|
|
}
|
|
|
|
/* Panel Accordion (for character panel) */
|
|
.panel-accordion {
|
|
margin-bottom: 0.75rem;
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-accordion-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg-tertiary);
|
|
border: none;
|
|
color: var(--accent-gold);
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.panel-accordion-header:hover {
|
|
background: var(--bg-input);
|
|
}
|
|
|
|
.panel-accordion-icon {
|
|
font-size: 10px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.panel-accordion.collapsed .panel-accordion-icon {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.panel-accordion-content {
|
|
padding: 0.75rem;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.panel-accordion.collapsed .panel-accordion-content {
|
|
display: none;
|
|
}
|
|
|
|
/* Stats Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
background: var(--bg-input);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.stat-abbr {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Quick Actions (Equipment, NPC, Travel) */
|
|
.quick-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--play-border);
|
|
}
|
|
|
|
/* Actions Section */
|
|
.actions-section {
|
|
flex: 1;
|
|
}
|
|
|
|
.actions-title {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-xs);
|
|
color: var(--accent-gold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.actions-tier {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.actions-tier-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.actions-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.action-btn {
|
|
width: 100%;
|
|
padding: 0.625rem 0.75rem;
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
text-align: left;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-btn:hover:not(:disabled) {
|
|
transform: translateX(2px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.action-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.action-btn--free {
|
|
background: var(--action-free);
|
|
}
|
|
|
|
.action-btn--free:hover:not(:disabled) {
|
|
background: var(--action-free-hover);
|
|
}
|
|
|
|
.action-btn--premium {
|
|
background: var(--action-premium);
|
|
}
|
|
|
|
.action-btn--premium:hover:not(:disabled) {
|
|
background: var(--action-premium-hover);
|
|
}
|
|
|
|
.action-btn--elite {
|
|
background: var(--action-elite);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.action-btn--elite:hover:not(:disabled) {
|
|
background: var(--action-elite-hover);
|
|
}
|
|
|
|
.action-btn--locked {
|
|
background: var(--bg-input);
|
|
color: var(--text-muted);
|
|
border: 1px dashed var(--play-border);
|
|
}
|
|
|
|
.action-btn--locked:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.action-btn-icon {
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
.action-btn-lock {
|
|
margin-left: auto;
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
/* Special Action Button Style */
|
|
.action-btn--special {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--play-border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.action-btn--special:hover:not(:disabled) {
|
|
border-color: var(--accent-gold);
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
/* ===== MIDDLE - NARRATIVE PANEL ===== */
|
|
.narrative-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Location Header */
|
|
.location-header {
|
|
padding: 1rem 1.25rem;
|
|
background: var(--bg-tertiary);
|
|
border-bottom: 1px solid var(--play-border);
|
|
}
|
|
|
|
.location-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.location-type-badge {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border-radius: 4px;
|
|
background: var(--accent-gold);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.location-type-badge--wilderness {
|
|
background: var(--accent-green);
|
|
}
|
|
|
|
.location-type-badge--dungeon {
|
|
background: var(--accent-red);
|
|
}
|
|
|
|
.location-type-badge--town {
|
|
background: var(--accent-blue);
|
|
}
|
|
|
|
.location-name {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-xl);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.location-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.location-region::before {
|
|
content: '';
|
|
}
|
|
|
|
.turn-counter {
|
|
color: var(--accent-gold);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Ambient Details */
|
|
.ambient-section {
|
|
padding: 0.75rem 1.25rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid var(--play-border);
|
|
}
|
|
|
|
.ambient-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.ambient-toggle:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.ambient-icon {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.ambient-section.collapsed .ambient-icon {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.ambient-content {
|
|
margin-top: 0.75rem;
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ambient-section.collapsed .ambient-content {
|
|
display: none;
|
|
}
|
|
|
|
/* DM Response Area */
|
|
.narrative-content {
|
|
flex: 1;
|
|
padding: 1.25rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dm-response {
|
|
font-size: var(--text-base);
|
|
line-height: 1.8;
|
|
color: var(--text-primary);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.dm-response p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dm-response p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ===== PLAYER INPUT AREA ===== */
|
|
.player-input-area {
|
|
padding: 1rem 1.25rem;
|
|
background: var(--bg-tertiary);
|
|
border-top: 1px solid var(--play-border);
|
|
}
|
|
|
|
.player-input-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.player-input-label {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-sm);
|
|
color: var(--accent-gold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.player-input-row {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.player-input-textarea {
|
|
flex: 1;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.5;
|
|
resize: none;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.player-input-textarea::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.player-input-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent-gold);
|
|
box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
|
|
}
|
|
|
|
.player-input-submit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.25rem;
|
|
background: var(--accent-gold);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--bg-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.player-input-submit:hover:not(:disabled) {
|
|
background: var(--accent-gold-hover);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.player-input-submit:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.submit-icon {
|
|
font-size: var(--text-base);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.player-input-submit:hover:not(:disabled) .submit-icon {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.player-input-hint {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Loading state for player input */
|
|
.player-input-area.htmx-request .player-input-textarea,
|
|
.player-input-area.htmx-request .player-input-submit {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Error state */
|
|
.dm-response.error {
|
|
color: var(--accent-red);
|
|
padding: 1rem;
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--accent-red);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.player-input-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.player-input-submit {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Player Action Echo - Shows player's submitted action */
|
|
.player-action-echo {
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--action-free);
|
|
}
|
|
|
|
.player-action-label {
|
|
display: block;
|
|
font-size: var(--text-xs);
|
|
color: var(--action-free);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.player-action-text {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-primary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Loading State */
|
|
.loading-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.loading-spinner-large {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid var(--bg-input);
|
|
border-top-color: var(--accent-gold);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.loading-text {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ===== RIGHT SIDEBAR - ACCORDIONS ===== */
|
|
.accordion-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.accordion {
|
|
border-bottom: 1px solid var(--play-border);
|
|
}
|
|
|
|
.accordion:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.accordion-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 0.875rem 1rem;
|
|
background: var(--bg-tertiary);
|
|
border: none;
|
|
color: var(--accent-gold);
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-sm);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.accordion-header:hover {
|
|
background: var(--bg-input);
|
|
}
|
|
|
|
.accordion-icon {
|
|
font-size: var(--text-xs);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.accordion.collapsed .accordion-icon {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.accordion-content {
|
|
padding: 0.75rem 1rem;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* History accordion gets more height */
|
|
[data-accordion="history"] .accordion-content {
|
|
max-height: 330px;
|
|
}
|
|
|
|
.accordion.collapsed .accordion-content {
|
|
display: none;
|
|
}
|
|
|
|
.accordion-count {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* History Items */
|
|
.history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.history-item {
|
|
padding: 0.75rem;
|
|
background: var(--bg-input);
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--accent-gold);
|
|
}
|
|
|
|
.history-item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.history-turn {
|
|
font-size: var(--text-xs);
|
|
color: var(--accent-gold);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.history-action {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.history-response {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.history-load-more {
|
|
margin-top: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-load-more {
|
|
padding: 0.5rem 1rem;
|
|
font-size: var(--text-xs);
|
|
background: transparent;
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-load-more:hover {
|
|
border-color: var(--accent-gold);
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
/* Quest Items */
|
|
.quest-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.quest-item {
|
|
padding: 0.75rem;
|
|
background: var(--bg-input);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.quest-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.quest-name {
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.quest-difficulty {
|
|
font-size: var(--text-xs);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 3px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.quest-difficulty--easy {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
color: #10b981;
|
|
}
|
|
|
|
.quest-difficulty--medium {
|
|
background: rgba(245, 158, 11, 0.2);
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.quest-difficulty--hard {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.quest-giver {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.quest-objectives {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.quest-objective {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.quest-objective-check {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.quest-objective-check.completed {
|
|
background: var(--accent-green);
|
|
border-color: var(--accent-green);
|
|
color: white;
|
|
}
|
|
|
|
.quest-objective-progress {
|
|
margin-left: auto;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.quest-empty {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-sm);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* NPC Items */
|
|
.npc-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.npc-item {
|
|
padding: 0.625rem 0.75rem;
|
|
background: var(--bg-input);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.npc-item:hover {
|
|
border-color: var(--accent-gold);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.npc-name {
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
|
|
.npc-role {
|
|
font-size: var(--text-xs);
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
.npc-appearance {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.npc-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-top: 0.375rem;
|
|
overflow: hidden;
|
|
max-height: 3.5em; /* Limit to roughly 2 rows of tags */
|
|
}
|
|
|
|
.npc-tag {
|
|
font-size: 10px;
|
|
padding: 0.125rem 0.375rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 3px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Map Items */
|
|
.map-region {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.map-region:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.map-region-name {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.map-locations {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.map-location {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.625rem;
|
|
background: var(--bg-input);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.map-location:hover {
|
|
border-color: var(--play-border);
|
|
}
|
|
|
|
.map-location.current {
|
|
border-color: var(--accent-gold);
|
|
background: rgba(243, 156, 18, 0.1);
|
|
}
|
|
|
|
.map-location-icon {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.map-location-name {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.map-location-type {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ===== MODALS ===== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--bg-secondary);
|
|
border: 2px solid var(--border-ornate);
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: slideUp 0.2s ease;
|
|
}
|
|
|
|
/* Modal Size Variants */
|
|
.modal-content--sm { max-width: 400px; }
|
|
.modal-content--md { max-width: 500px; }
|
|
.modal-content--lg { max-width: 700px; }
|
|
.modal-content--xl { max-width: 1000px; } /* Expanded for 3-column NPC chat */
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1rem 1.25rem;
|
|
background: var(--bg-tertiary);
|
|
border-bottom: 1px solid var(--play-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-lg);
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-xl);
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1rem 1.25rem;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 0.75rem 1.25rem;
|
|
background: var(--bg-tertiary);
|
|
border-top: 1px solid var(--play-border);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Travel Modal */
|
|
.travel-destinations {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.travel-destination {
|
|
padding: 0.75rem 1rem;
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.travel-destination:hover {
|
|
border-color: var(--accent-gold);
|
|
background: rgba(243, 156, 18, 0.1);
|
|
}
|
|
|
|
.travel-destination-name {
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.travel-destination-meta {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* NPC Chat Modal */
|
|
.npc-chat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.npc-chat-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--bg-input);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
.npc-chat-info h3 {
|
|
font-family: var(--font-heading);
|
|
font-size: var(--text-lg);
|
|
color: var(--accent-gold);
|
|
margin: 0;
|
|
}
|
|
|
|
.npc-chat-info p {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.chat-history {
|
|
min-height: 200px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin-bottom: 1rem;
|
|
padding: 0.5rem;
|
|
background: var(--bg-input);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.chat-message {
|
|
padding: 0.5rem 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.chat-message:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.chat-message--player {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.chat-message--npc {
|
|
background: rgba(243, 156, 18, 0.1);
|
|
margin-right: 1rem;
|
|
border-left: 2px solid var(--accent-gold);
|
|
}
|
|
|
|
.chat-message strong {
|
|
font-size: var(--text-sm);
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.chat-message--player strong {
|
|
color: var(--action-free);
|
|
}
|
|
|
|
.chat-message--npc strong {
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
.chat-input-form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.chat-input {
|
|
flex: 1;
|
|
padding: 0.625rem 0.875rem;
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.chat-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-gold);
|
|
}
|
|
|
|
.chat-send-btn {
|
|
padding: 0.625rem 1rem;
|
|
background: var(--accent-gold);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--bg-primary);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.chat-send-btn:hover {
|
|
background: var(--accent-gold-hover);
|
|
}
|
|
|
|
.chat-greet-btn {
|
|
padding: 0.625rem 1rem;
|
|
background: transparent;
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.chat-greet-btn:hover {
|
|
border-color: var(--accent-gold);
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
/* ===== RESPONSIVE DESIGN ===== */
|
|
@media (max-width: 1200px) {
|
|
.play-container {
|
|
grid-template-columns: var(--sidebar-left-width) 1fr 280px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.play-container {
|
|
grid-template-columns: 1fr 280px;
|
|
height: auto;
|
|
min-height: calc(100vh - 140px);
|
|
}
|
|
|
|
.play-sidebar--left {
|
|
display: none; /* Will be slide-out drawer on tablet */
|
|
}
|
|
|
|
/* Mobile menu toggle would go here */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.play-container {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.play-sidebar--right {
|
|
order: 3;
|
|
}
|
|
|
|
.play-main {
|
|
order: 1;
|
|
}
|
|
|
|
.location-name {
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.accordion-content {
|
|
max-height: 200px;
|
|
}
|
|
}
|
|
|
|
/* ===== EQUIPMENT MODAL ===== */
|
|
.equipment-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.equipment-slot {
|
|
padding: 0.75rem;
|
|
border-radius: 6px;
|
|
background: var(--bg-input);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.equipment-slot--equipped {
|
|
border: 1px solid var(--accent-gold);
|
|
}
|
|
|
|
.equipment-slot--empty {
|
|
border: 1px dashed var(--play-border);
|
|
}
|
|
|
|
.slot-header {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.slot-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.slot-item {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.slot-icon {
|
|
font-size: var(--text-xl);
|
|
line-height: 1;
|
|
}
|
|
|
|
.slot-icon--empty {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.slot-details {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.slot-item-name {
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.slot-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.slot-stats span {
|
|
font-size: var(--text-xs);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 3px;
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.stat-damage {
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.stat-defense {
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
.stat-bonus {
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.slot-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.slot-empty-text {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Equipment Summary */
|
|
.equipment-summary {
|
|
padding: 0.75rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--accent-gold);
|
|
}
|
|
|
|
.summary-title {
|
|
font-size: var(--text-xs);
|
|
color: var(--accent-gold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.summary-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.summary-stat {
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
color: var(--accent-green);
|
|
padding: 0.25rem 0.5rem;
|
|
background: rgba(16, 185, 129, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.summary-none {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ===== EXPANDED NPC MODAL ===== */
|
|
.npc-modal-body {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* 3-column layout for chat modal with history sidebar */
|
|
.npc-modal-body--three-col {
|
|
padding: 0; /* Let container handle padding */
|
|
max-height: 70vh;
|
|
}
|
|
|
|
/* Apply grid to the actual container holding the three columns */
|
|
.npc-modal-body--three-col .npc-chat-container {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr 280px; /* Profile | Chat | History */
|
|
gap: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Override hardcoded widths for grid children - let grid define sizes */
|
|
.npc-modal-body--three-col .npc-profile {
|
|
width: auto;
|
|
}
|
|
|
|
/* Ensure history panel is visible in modal grid */
|
|
.npc-modal-body--three-col .npc-history-panel {
|
|
min-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* NPC Profile (Left Column) */
|
|
.npc-profile {
|
|
width: 200px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.npc-portrait {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg-input);
|
|
border: 2px solid var(--play-border);
|
|
}
|
|
|
|
.npc-portrait img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.npc-portrait-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-heading);
|
|
font-size: 4rem;
|
|
color: var(--accent-gold);
|
|
background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-input));
|
|
}
|
|
|
|
.npc-profile-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.npc-profile-role {
|
|
font-size: var(--text-sm);
|
|
color: var(--accent-gold);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.npc-profile-appearance {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
margin-top: 0.25rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.npc-profile-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.npc-profile-tag {
|
|
font-size: 10px;
|
|
padding: 0.125rem 0.375rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 3px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Relationship Meter */
|
|
.npc-relationship {
|
|
padding: 0.75rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.relationship-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.relationship-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.relationship-value {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.relationship-bar {
|
|
height: 8px;
|
|
background: var(--bg-input);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.relationship-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
background: linear-gradient(90deg, var(--accent-gold), #f59e0b);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.relationship-status {
|
|
text-align: center;
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-friendly {
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.status-neutral {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-unfriendly {
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
/* Interaction Stats */
|
|
.npc-interaction-stats {
|
|
padding: 0.5rem;
|
|
background: var(--bg-input);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.interaction-stat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.interaction-stat .stat-label {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.interaction-stat .stat-value {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* NPC Conversation (Middle Column) */
|
|
.npc-conversation {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0; /* Important for grid child to enable scrolling */
|
|
}
|
|
|
|
.npc-conversation .chat-history {
|
|
flex: 1;
|
|
min-height: 250px;
|
|
max-height: 500px; /* Set max height to enable scrolling */
|
|
overflow-y: auto; /* Enable vertical scroll */
|
|
}
|
|
|
|
.chat-empty-state {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
padding: 2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ===== NPC CHAT HISTORY SIDEBAR ===== */
|
|
.npc-history-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--play-border);
|
|
padding-left: 1rem;
|
|
overflow-y: auto;
|
|
max-height: 70vh;
|
|
}
|
|
|
|
.history-header {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Compact history cards */
|
|
.history-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--play-border);
|
|
border-radius: 4px;
|
|
padding: 0.5rem;
|
|
font-size: 0.8rem;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.history-card:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.history-timestamp {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 0.25rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.history-player {
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.125rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.history-player strong {
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
.history-npc {
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.history-npc strong {
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
.history-empty {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
padding: 2rem 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.loading-state-small {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
padding: 1rem 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* HTMX Loading Indicator - visible by default, replaced by HTMX response */
|
|
.history-loading {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
padding: 1rem 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Responsive NPC Modal */
|
|
@media (max-width: 700px) {
|
|
.npc-modal-body {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.npc-profile {
|
|
width: 100%;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.npc-portrait {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.npc-portrait-placeholder {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.npc-profile-info {
|
|
flex: 1;
|
|
text-align: left;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.npc-relationship {
|
|
width: 100%;
|
|
}
|
|
|
|
.npc-profile-tags {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.npc-interaction-stats {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Responsive: 3-column modal stacks on smaller screens */
|
|
@media (max-width: 1024px) {
|
|
.npc-modal-body--three-col .npc-chat-container {
|
|
grid-template-columns: 1fr; /* Single column */
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.npc-modal-body--three-col .npc-profile {
|
|
order: 1;
|
|
width: 100%;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.npc-modal-body--three-col .npc-conversation {
|
|
order: 2;
|
|
}
|
|
|
|
.npc-modal-body--three-col .npc-history-panel {
|
|
order: 3;
|
|
border-left: none;
|
|
border-top: 1px solid var(--play-border);
|
|
padding-left: 0;
|
|
padding-top: 1rem;
|
|
max-height: 200px; /* Shorter on mobile */
|
|
}
|
|
}
|
|
|
|
/* ===== UTILITY CLASSES FOR PLAY SCREEN ===== */
|
|
.play-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.play-loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Custom scrollbar for play panels */
|
|
.play-panel::-webkit-scrollbar,
|
|
.accordion-content::-webkit-scrollbar,
|
|
.narrative-content::-webkit-scrollbar,
|
|
.chat-history::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.play-panel::-webkit-scrollbar-track,
|
|
.accordion-content::-webkit-scrollbar-track,
|
|
.narrative-content::-webkit-scrollbar-track,
|
|
.chat-history::-webkit-scrollbar-track {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.play-panel::-webkit-scrollbar-thumb,
|
|
.accordion-content::-webkit-scrollbar-thumb,
|
|
.narrative-content::-webkit-scrollbar-thumb,
|
|
.chat-history::-webkit-scrollbar-thumb {
|
|
background: var(--play-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.play-panel::-webkit-scrollbar-thumb:hover,
|
|
.accordion-content::-webkit-scrollbar-thumb:hover,
|
|
.narrative-content::-webkit-scrollbar-thumb:hover,
|
|
.chat-history::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* ===== NPC CHAT DEDICATED PAGE ===== */
|
|
/* Mobile-friendly full page view for NPC conversations */
|
|
|
|
.npc-chat-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Page Header with Back Button */
|
|
.npc-chat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: var(--bg-primary);
|
|
border-bottom: 2px solid var(--play-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.npc-chat-back-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--bg-input);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--play-border);
|
|
font-family: var(--font-heading);
|
|
font-size: 0.9rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.npc-chat-back-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--accent-gold);
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
.npc-chat-back-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.npc-chat-title {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-family: var(--font-heading);
|
|
font-size: 1.5rem;
|
|
color: var(--accent-gold);
|
|
}
|
|
|
|
/* Chat Container - Full Height Layout */
|
|
.npc-chat-page .npc-chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
gap: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Responsive Layout for NPC Chat Content */
|
|
/* Desktop: 3-column grid */
|
|
@media (min-width: 1025px) {
|
|
.npc-chat-page .npc-chat-container {
|
|
display: grid;
|
|
grid-template-columns: 250px 1fr 300px;
|
|
gap: 1.5rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Mobile: Stacked layout */
|
|
@media (max-width: 1024px) {
|
|
.npc-chat-page .npc-chat-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Compact profile on mobile */
|
|
.npc-chat-page .npc-profile {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.npc-chat-page .npc-portrait {
|
|
width: 80px;
|
|
height: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.npc-chat-page .npc-profile-info {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.npc-chat-page .npc-relationship,
|
|
.npc-chat-page .npc-profile-tags,
|
|
.npc-chat-page .npc-interaction-stats {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Conversation takes most of the vertical space */
|
|
.npc-chat-page .npc-conversation {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 400px;
|
|
}
|
|
|
|
/* History panel is collapsible on mobile */
|
|
.npc-chat-page .npc-history-panel {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
border-top: 1px solid var(--play-border);
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Ensure chat history fills available space on page */
|
|
.npc-chat-page .chat-history {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 300px;
|
|
}
|
|
|
|
/* Fix chat input to bottom on mobile */
|
|
@media (max-width: 1024px) {
|
|
.npc-chat-page .chat-input-form {
|
|
position: sticky;
|
|
bottom: 0;
|
|
background: var(--bg-secondary);
|
|
padding: 0.75rem 0;
|
|
border-top: 1px solid var(--play-border);
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|