/* Fresh stylesheet targeting the same class/id names the templates use
   (.head, #menu, .content, .footer, .small, #map, #player-list, .offline,
   table.penalty/.uniques). This is NOT a port of the original g7.css /
   styles.css -- those two asset files weren't part of this conversion pass.
   Drop your own copies into this file, or replace it outright, to restore
   the exact original look. */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    color: #222;
    background: #f4f1e8;
}

.head {
    text-align: center;
    background: #1e2327;
    padding: 10px 0;
}
.head img { max-width: 100%; height: auto; }

nav#menu {
    background: #33393f;
}
nav#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
nav#menu li a {
    display: block;
    padding: 10px 16px;
    color: #f4f1e8;
    text-decoration: none;
}
nav#menu li a:hover { background: #4a525a; }

.content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
}

.footer {
    text-align: center;
    padding: 14px;
    background: #1e2327;
    color: #ccc;
}
.footer a { color: #9cf; }
.small { font-size: 12px; }

table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}
th, td {
    border: 1px solid #ccc;
    padding: 4px 8px;
    text-align: left;
}
th { background: #e9e4d3; }

#main-content { display: flex; flex-wrap: wrap; gap: 24px; }
#map-container { flex: 2 1 500px; }
#player-list { flex: 1 1 260px; }
#map img { max-width: 100%; height: auto; border: 1px solid #ccc; }

ol { padding-left: 20px; }
li.offline, a.offline { color: #999; }

.card {
    border: 1px solid #ccc;
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

code {
    display: block;
    background: #f0eee4;
    padding: 8px 12px;
    margin: 8px 0;
    border-left: 3px solid #be9256;
    font-family: "Courier New", monospace;
}

.error { color: #c0392b; font-weight: bold; }

form input, form textarea, form button {
    font: inherit;
    padding: 6px 8px;
    width: 100%;
    max-width: 420px;
}
form button { width: auto; cursor: pointer; }