/* Fonts loaded via HTML */
* {
box-sizing: border-box;
}
body {
background-color: #1e1e1e;
color: #e0e0e0;
font-family: Arial, Helvetica, sans-serif, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'EmojiSymbols';
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
}
/* Cinematic Container */
.chat-container {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
background-color: #2c2c2c;
border-radius: 0;
box-shadow: none;
transition: all 0.3s ease-in-out;
}
/* Custom Scrollbar Styles */
.chat-window::-webkit-scrollbar,
.stats-sidebar::-webkit-scrollbar {
width: 12px;
}
.chat-window::-webkit-scrollbar-track,
.stats-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.chat-window::-webkit-scrollbar-thumb,
.stats-sidebar::-webkit-scrollbar-thumb {
background-color: #000;
border-radius: 6px;
border: 3px solid transparent;
background-clip: padding-box;
}
/* Chat Main */
.chat-main {
display: grid;
grid-template-columns: 4fr auto;
grid-template-rows: 1fr auto;
grid-template-areas:
"chat-window stats-sidebar"
"chat-input stats-sidebar";
flex: 1;
padding: 0;
margin: 0;
height: 100vh;
min-height: 0;
}
/* Chat Window */
.chat-window {
grid-area: chat-window;
flex: 1;
padding: 20px 5%;
overflow-y: auto;
background-color: #1c1c1c;
font-size: 20px;
display: flex;
flex-direction: column;
align-items: center; /* center all message bubbles */
max-width: 100%;
position: relative; /* allow absolute children like #turn-changes */
}
/* Stats Sidebar */
.stats-sidebar {
grid-area: stats-sidebar;
flex: 0.2;
padding: 12px;
background-color: #2c2c2c;
border-left: 0px solid #444;
overflow-y: auto;
font-size: 25px;
border-radius: 0 15px 15px 0;
box-shadow: inset -2px 0 10px rgba(0,0,0,0.5);
min-width: 120px;
height: 100vh;
position: sticky;
top: 0;
z-index: 9;
}
/* Hidden state for mobile keyboard */
.stats-sidebar.hidden {
display: none !important;
}
.stats-sidebar h3 {
margin-top: 0;
margin-bottom: 10px;
color: #2983dd;
font-size: 1.6em;
border-bottom: 2px solid #2983dd;
padding-bottom: 5px;
}
.stats-sidebar hr {
border: 0;
height: 1px;
background: #2983dd;
margin: 20px 0;
}
/* Message Bubble Base */
.message-text {
padding: 15px 20px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease-in-out, transform 0.2s;
font-size: 38px;
width: fit-content; /* shrink-to-fit based on content */
max-width: 80%; /* never exceed 80% of the chat-window */
word-wrap: break-word; /* wrap long words if needed */
white-space: pre-wrap;
margin: 0 auto 50px; /* center horizontally with bottom spacing */
}
/* User Messages (blue) */
.user-message .message-text {
background-color: #2983dd;
color: #ffffff;
max-width: 100%;
}
.user-message .message-text:hover {
background-color: #1c6fb4;
transform: scale(1.02);
}
/* Game Messages (grey) */
.game-message .message-text {
background-color: #333333;
color: #ffffff;
}
.game-message .message-text:hover {
background-color: #444444;
transform: scale(1.02);
}
/* Chat Input Styling */
.chat-input {
grid-area: chat-input;
background-color: #2c2c2c;
padding: 10px 20px;
border-top: 1px solid #555;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
position: sticky;
bottom: 0;
z-index: 10;
}
.chat-input form {
display: flex;
align-items: center;
width: 100%;
max-width: 1000px;
}
.chat-input input[type="text"] {
flex: 1;
padding: 12px 18px;
border: none;
border-radius: 25px;
margin-right: 10px;
font-size: 18px;
outline: none;
background-color: #424242;
color: #e0e0e0;
text-align: center;
caret-color: transparent;
transition: background-color 0.3s ease-in-out;
}
.chat-input input[type="text"].typing {
animation: none;
}
.chat-input input[type="text"].keypress-effect {
animation: pressFlash 0.2s ease-out;
}
.chat-input input[type="text"]:focus {
background-color: #333;
}
.chat-input input[type="text"]::placeholder {
color: #b0b0b0;
text-align: center;
}
.chat-input button {
padding: 12px 24px;
border: none;
background-color: #2983dd;
color: #fff;
border-radius: 25px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s ease-in-out, transform 0.2s;
margin-left: 5px;
}
.chat-input button:hover {
background-color: #1c6fb4;
transform: translateY(-2px);
}
/* Undo Button */
.undo-button {
background-color: #ff5722;
}
/* TTS Toggle */
#tts-toggle {
background-color: #2196f3; /* blue when off */
}
#tts-volume {
margin-left: 10px;
}
#tts-toggle.toggled {
background-color: #4caf50; /* green when on */
}
/* Audio Controls */
#audio-btn {
background-color: #2983dd;
}
/* Modal overlay for audio controls */
#audio-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 3000;
align-items: center;
justify-content: center;
}
#audio-settings {
background-color: #2c2c2c;
border: 1px solid #99ccff;
border-radius: 8px;
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}
.audio-section {
display: flex;
align-items: center;
gap: 5px;
margin-top: 5px;
}
#audio-close {
background: none;
border: none;
color: #e0e0e0;
font-size: 20px;
align-self: flex-end;
cursor: pointer;
}
#music-toggle {
background-color: #2196f3;
}
#music-toggle.toggled {
background-color: #4caf50;
}
#music-volume {
margin-left: 10px;
}
/* Popup for inventory/currency changes */
#turn-changes {
/* Position relative to the viewport so it always appears near the
bottom of the chat area regardless of scroll position */
position: fixed;
left: 50%;
bottom: 160px;
transform: translateX(-50%);
background: rgba(50, 50, 50, 0.95);
color: #e0e0e0;
padding: 10px 20px;
border: 1px solid #99ccff;
border-radius: 8px;
font-family: inherit;
opacity: 0;
pointer-events: none;
z-index: 2000;
transition: opacity 0.5s ease-in-out;
}
.undo-button:hover {
background-color: #e64a19;
transform: translateY(-2px);
}
/* Stats layout */
.stats-flex {
display: flex;
flex-direction: column;
gap: 10px;
}
#inventory,
#currency {
word-break: break-word;
}
@media (max-width: 768px) {
#turn-changes {
width: auto;
bottom: 180px;
}
.stats-flex {
flex-direction: row;
justify-content: space-between;
}
#inventory,
#currency {
width: 48%;
}
#inventory {
max-height: 150px;
overflow-y: auto;
}
}
/* Fade-In Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes flashInput {
0% { box-shadow: 0 0 5px #2983dd; }
50% { box-shadow: 0 0 12px #2983dd; }
100% { box-shadow: 0 0 5px #2983dd; }
}
@keyframes pressFlash {
0% { background-color: #424242; }
50% { background-color: #4a4a4a; }
100% { background-color: #424242; }
}
/* Index Page Styling (scoped only to the main form that’s a direct child of .container) */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #1e1e1e;
padding: 20px;
}
.container h1 {
color: #2983dd;
font-size: 2.5em;
margin-bottom: 30px;
text-align: center;
}
/* Only style the panel form, not nested forms */
.container > form {
background-color: #2c2c2c;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 500px;
}
.container > form label {
display: block;
margin-bottom: 8px;
font-size: 1.1em;
color: #e0e0e0;
}
/* Inputs in that panel only */
.container > form input[type="text"],
.container > form input[type="password"],
.container > form textarea,
.container > form select {
width: 100%;
padding: 12px 15px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
font-size: 1em;
background-color: #424242;
color: #e0e0e0;
outline: none;
transition: background-color 0.3s ease-in-out;
}
.container > form input[type="text"]:focus,
.container > form input[type="password"]:focus,
.container > form textarea:focus,
.container > form select:focus {
background-color: #555555;
}
/* Submit button in that panel only */
.container > form input[type="submit"] {
width: 100%;
padding: 12px 20px;
border: none;
border-radius: 25px;
background-color: #2983dd;
color: #fff;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease-in-out, transform 0.2s;
}
.container > form input[type="submit"]:hover {
background-color: #1c6fb4;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.chat-container {
flex-direction: column;
}
.message-text {
font-size: 22px; /* slightly smaller for better mobile readability */
max-width: 95%;
}
.stats-sidebar h3 {
display: none;
}
.chat-main {
display: flex;
flex-direction: column;
height: auto;
}
.stats-sidebar {
border-left: none;
border-top: 1px solid #444;
height: auto;
flex: none;
width: 100%;
font-size: 18px;
position: static;
bottom: auto;
}
.chat-window {
padding: 20px;
max-width: 100%;
font-size: 20px;
height: auto;
}
.chat-input {
height: 120px;
padding: 10px 20px;
}
.chat-input form {
flex-direction: column;
}
.chat-input input[type="text"] {
width: 100%;
margin-right: 0;
margin-bottom: 10px;
font-size: 18px;
}
.chat-input button {
width: 100%;
margin-left: 0;
margin-bottom: 10px;
font-size: 18px;
}
.undo-button {
margin-bottom: 0;
}
.chat-main {
height: auto;
}
#tips-btn,
#home-link {
display: none;
}
}
/* Nicer Hyperlink Styling */
a {
display: inline-block;
padding: 6px 12px;
margin: 2px;
background-color: #2983dd;
color: #fff;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.2s ease-in-out;
}
a:hover {
background-color: #1c6fb4;
text-decoration: none;
}
/* Match Tips button styling to links */
#tips-btn {
display: inline-block;
padding: 6px 12px;
margin: 2px;
background-color: #2983dd;
color: #fff;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
text-decoration: none;
}
#tips-btn:hover {
background-color: #1c6fb4;
}