/* Core Terminal Layout & Palette */
body {
    background-color: #000000; /* Pitch black background */
    color: #ffffff;            /* Stark white body text */
    font-family: monospace, sans-serif; /* System monospace for that raw terminal feel */
    margin: 0;
    padding: 0; /* old layout: menu and content sit flush to the window edge */
}

/* Hyperlinks */
a {
    color: #0000ff;          /* Classic cobalt blue links */
    text-decoration: none;
}
a:hover {
    color: #ffa500;          /* Orange active/hover state */
    text-decoration: underline;
}

/* Retro UI Containers / Table Boxes */
.game-container {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #ffffff; /* Crisp 1px white border */
    background-color: #000020; /* Deep navy interior tint */
    padding: 20px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Form Inputs & Textareas */
input[type="text"],
input[type="password"],
select,
textarea {
    background-color: #000020;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 6px 10px;
    font-family: monospace;
}

/* Terminal Combat Log Output Box */
.combat-log {
    background-color: #000000;
    border: 1px dashed #ffffff;
    padding: 15px;
    height: 250px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Status / Stat Tables */
table.stats-table {
    width: 100%;
    border-collapse: collapse;
}

table.stats-table th,
table.stats-table td {
    border: 1px solid #444444;
    padding: 8px;
    text-align: left;
}

/* ---- Small additions for the form/layout pages (not in the original spec) ---- */
h1, h2 { margin-top: 0; }
form p { margin: 0 0 12px; }
label { display: block; margin-bottom: 4px; }
button {
    background-color: #000020;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 6px 14px;
    font-family: monospace;
    cursor: pointer;
}
button:hover { color: #ffa500; border-color: #ffa500; }
.error { color: #ff5555; border: 1px solid #ff5555; padding: 8px; margin-bottom: 12px; }
.muted { color: #888888; }
nav { margin-bottom: 16px; }
.inline-form { display: inline; }

/* ---- Old skrpg.com page shell: left menu + bordered content frame ---- */
#if_table .spacer td { height: 13px; }
#menu_table, #content_table { border-collapse: collapse; }
#menuheadercell {
    border: 1px solid #ffffff;
    background-color: #000020;
    padding: 4px 8px;
    font-weight: bold;
}
#menucontentcell {
    border: 1px solid #ffffff;
    border-top: none;
    background-color: #000020;
    padding: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
}
#contentframe {
    border: 1px solid #ffffff;
    background-color: #000020;
    padding: 20px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
.intro-table { border-spacing: 5px; width: 100%; }
.intro-table td { vertical-align: top; padding: 5px; }
input[type="submit"] {
    background-color: #000020;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 6px 14px;
    font-family: monospace;
    cursor: pointer;
}
input[type="submit"]:hover { color: #ffa500; border-color: #ffa500; }
/* Logout is a POST form (CSRF), but looks like a menu link */
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: #0000ff;
    font: inherit;
    cursor: pointer;
}
.link-button:hover { color: #ffa500; border: none; text-decoration: underline; }

/* ---- Sidebar player box + progress bars ---- */
.side-col { min-width: 170px; }
#player_table { border-collapse: collapse; }
#playerheadercell {
    border: 1px solid #ffffff;
    background-color: #000020;
    padding: 4px 8px;
    font-weight: bold;
}
#playercontentcell {
    border: 1px solid #ffffff;
    border-top: none;
    background-color: #000020;
    padding: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
}
svg.bar { display: block; margin: 3px 0; }
.bar-bg { fill: #000000; stroke: #ffffff; stroke-width: 1; }
.bar-hp { fill: #9b1c1c; }
.bar-en { fill: #1f5fbf; }
.bar-text {
    fill: #ffffff;
    font: 10px monospace;
    paint-order: stroke;
    stroke: #000000;
    stroke-width: 2px;
    stroke-linejoin: round;
}

/* ---- Messages + number input ---- */
.success { color: #55ff55; border: 1px solid #55ff55; padding: 8px; margin-bottom: 12px; }
input[type="number"] {
    background-color: #000020;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 6px 10px;
    font-family: monospace;
    width: 5em;
}

/* ---- Log highlights ---- */
.combat-log .lucky { color: #ffa500; }
.combat-log .log-total { border-top: 1px dashed #ffffff; margin-top: 8px; padding-top: 8px; font-weight: bold; }

/* ---- Log colours + misc ---- */
.combat-log .crit { color: #ffff55; }
.combat-log .miss { color: #888888; }
.combat-log .win { color: #55ff55; font-weight: bold; }
.combat-log .loss { color: #ff5555; font-weight: bold; }
.combat-log .gem { color: #55ffff; }
.ko { color: #ff5555; }
table.stats-table th a { color: #ffffff; }
table.stats-table th a:hover { color: #ffa500; }
input[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---- Online status, journal ---- */
.online { color: #55ff55; }
.nowrap { white-space: nowrap; }
td.unread { color: #ffa500; }

/* ---- Staging banner ---- */
.staging-banner { background: #b00000; color: #ffffff; text-align: center; font-weight: bold; padding: 6px; margin: 0 0 8px; }

/* ---- Chat + private messages ---- */
.chat-log { background: #000000; border: 1px dashed #ffffff; padding: 10px; height: 380px; overflow-y: auto; font-size: 0.9rem; line-height: 1.4; margin-bottom: 8px; }
.chat-line { word-wrap: break-word; overflow-wrap: anywhere; }
.pm-body { background: #000000; border: 1px dashed #ffffff; padding: 12px; margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
textarea { max-width: 100%; }

/* ---- placeholders, menu gaps, tooltips ---- */
.menu-gap { height: 0.7em; }
.icon { display: inline-block; min-width: 1.4em; text-align: center; cursor: default; }
.avatar { border: 1px dashed #4a5a8a; color: #8896c0; text-align: center; padding: 1.6em 0; margin-bottom: 0.5em; font-size: 0.8em; }
.home-log { max-height: 22em; }
.gem-tip { border-bottom: 1px dotted #8896c0; cursor: help; }
.gem-bar { color: #8896c0; font-size: 0.85em; }