body {
    background: #111;
    color: #eee;
    font-family: monospace;
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    height: 100vh;
}

.main {
    flex: 3;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
}

.sidebar {
    flex: 1;
    background: #1a1a1a;
    padding: 20px;
    border-left: 2px solid #333;
    overflow-y: auto;
}

h1, h2, h3 {
    color: #6cf;
    margin-top: 0;
}

.messages {
    background: #222;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #444;
    height: 200px;
    overflow-y: auto;
    flex-shrink: 0;
}

.messages p {
    margin: 2px 0;
}

.buttons {
    margin-bottom: 20px;
}

button {
    background-color: #333;
    color: #eee;
    border: 1px solid #555;
    padding: 10px 15px;
    margin: 3px;
    cursor: pointer;
    font-family: monospace;
}

button:hover {
    background-color: #555;
}

ul {
    list-style-type: none;
    padding: 0;
}

.found {
    color: #6f6;
}
body {
    background: #111;
    color: #eee;
    font-family: monospace;
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    height: 100vh;
}

.main {
    flex: 3;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
}

.sidebar {
    flex: 1;
    background: #1a1a1a;
    padding: 20px;
    border-left: 2px solid #333;
    overflow-y: auto;
}

h1, h2, h3 {
    color: #6cf;
    margin-top: 0;
}

.messages {
    background: #222;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #444;
    height: 200px;
    overflow-y: auto;
    flex-shrink: 0;
}

.messages p {
    margin: 2px 0;
}

.buttons {
    margin-bottom: 20px;
}

button {
    background-color: #333;
    color: #eee;
    border: 1px solid #555;
    padding: 10px 15px;
    margin: 3px;
    cursor: pointer;
    font-family: monospace;
}

button:hover {
    background-color: #555;
}

ul {
    list-style-type: none;
    padding: 0;
}

.found {
    color: #6f6;
}

.missing {
    color: #f66;
}

.dim-giant {
    font-weight: bold;
    color: #ff0; /* bright yellow */
    text-shadow: 0 0 5px #fc0;
}

.victory {
    color: #6f6;
    font-weight: bold;
    margin-top: 10px;
}

.defeat {
    color: #f66;
    font-weight: bold;
    margin-top: 10px;
}

.missing {
    color: #f66;
}

.dim-giant {
    font-weight: bold;
    color: #ff0; /* bright yellow */
    text-shadow: 0 0 5px #fc0;
}

.victory {
    color: #6f6;
    font-weight: bold;
    margin-top: 10px;
}

.defeat {
    color: #f66;
    font-weight: bold;
    margin-top: 10px;
}
.current-msg {
    background-color: #444;   /* darker highlight */
    color: #ff0;              /* bright yellow text */
    padding: 3px;
    border-radius: 3px;
}
.missing {
    color: #888;  /* greyed out */
    font-style: italic;
}
.current-room {
    color: #ff0;       /* yellow */
    font-weight: bold;
}
.visited-room {
    color: #6f6;       /* green */
}
.unknown-room {
    color: #888;       /* gray */
}
.current-room {
    color: #ff0;       /* yellow */
    font-weight: bold;
}
.visited-room {
    color: #6f6;       /* green */
}
.unknown-room {
    color: #888;       /* gray */
}
.text-map {
    font-family: monospace;
    background-color: #222;
    color: #fff;
    padding: 10px;
    border: 1px solid #444;
    overflow-x: auto;
}