/* mamedk — default theme.
   Reproduces the 2001 mame.dk look (black frame, #BBDDBB panel, #EEEEEE block
   headers, verdana, green links) using CSS rather than the original
   table/font/bgcolor markup. */

:root {
    --frame:  #000000;
    --panel:  #bbddbb;
    --header: #eeeeee;
    --ink:    #000000;
    --paper:  #ffffff;
    --link:   #008800;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 13px;
}

a, a:visited, a:active { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── masthead ─────────────────────────────────────────────────────────────── */
.topbar {
    width: 100%;
    padding: 6px 2px;
}
.topbar .brand {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
}
.topbar .brand img { vertical-align: baseline; }
.topbar .brand b { font-weight: bold; }

/* ── page frame ──────────────────────────────────────────────────────────── */
.frame {
    width: 100%;
    background: var(--frame);
    padding: 1px;
}
.panel {
    background: var(--panel);
    padding: 3px;
}
.columns {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.side  { flex: 0 0 27%; }
.main  { flex: 1 1 auto; min-width: 0; }
.whoami { text-align: right; font-size: 12px; padding: 2px 4px 0; }

/* ── a block (navigator, news, misc, credits …) ──────────────────────────── */
.block {
    background: var(--frame);
    padding: 1px;
    margin: 0 0 8px;
    width: 97%;
}
.block > h1 {
    background: var(--header);
    color: var(--ink);
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 3px;
}
.block > .body {
    background: var(--paper);
    padding: 4px;
    font-size: 12px;
}
.block > .body form { margin: 0; }
.block table.form { border-collapse: collapse; font-size: 12px; }
.block table.form td { padding: 1px 2px; vertical-align: top; }
.block input[type=text], .block select { font-size: 12px; }
.block input[type=submit] { font-size: 12px; }
.block .item { margin: 0 0 6px; }
.block .item b { font-weight: bold; }
.block .note { color: #333; }

/* ── game card ───────────────────────────────────────────────────────────── */
.game {
    background: var(--frame);
    padding: 2px;
    margin: 0 0 10px;
    width: 97%;
}
.game .head {
    background: var(--paper);
    padding: 6px 8px;
}
.game .title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}
.game .idline { font-size: 12px; }
.game .idline b { font-weight: bold; }
.game .display { font-size: 11px; color: #222; }
.game .details { text-align: right; font-weight: bold; font-size: 12px; }
.game .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    color: var(--paper);
    font-size: 11px;
    font-weight: bold;
    line-height: 1.45;
}
.game .meta .col { white-space: nowrap; }
.game .meta .col.left { padding-left: 8px; }
.game .meta .col.right { text-align: right; }

/* ── paging ──────────────────────────────────────────────────────────────── */
.paging { padding: 4px 2px; font-size: 13px; font-weight: bold; text-align: center; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer { text-align: right; font-size: 12px; padding: 6px 6px 10px; }

/* ── view heading (filtered browse) ───────────────────────────────────────── */
.heading {
    font-size: 15px;
    font-weight: bold;
    padding: 4px 2px 6px;
}

/* ── game info page ───────────────────────────────────────────────────────── */
.gamepage { width: 97%; }
.gametitle { font-size: 20px; font-weight: bold; padding: 2px 0; }
.gamecredits { font-size: 12px; padding: 0 0 8px; }
.clones { font-size: 12px; padding: 0 0 8px; }
.clone-list { margin: 4px 0 0 18px; padding: 0; }
.rating { background: #ffffff; border: 1px solid #000; padding: 6px; font-size: 12px; margin: 0 0 8px; }
.rating form { margin: 6px 0 0; }
.section {
    background: #000;
    padding: 1px;
    margin: 0 0 8px;
}
.section > h1 {
    background: #eeeeee;
    width: 30%;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    padding: 3px 6px;
}
.section > dl {
    background: #fff;
    margin: 0;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 34% 66%;
    gap: 2px 6px;
    font-size: 12px;
}
.section > dl dt { text-align: right; font-weight: bold; }
.section > dl dd { margin: 0; }
.download { font-size: 13px; padding: 6px 0; }
.romlist { background: #fff; padding: 6px 8px; font-size: 12px; }
.romrow { padding: 1px 0; }
.note { color: #555; }