.tpl-imperial {

    --vellum:      #d8cfb4;
    --vellum-lit:  #eae2c9;
    --vellum-dim:  #bdb298;
    --iron:        #1a1613;
    --iron-soft:   #3a322a;
    --ash:         #6b6459;
    --imperial:    #8c1c13;
    --imperial-lit:#c4392c;
    --brass:       #a8863f;

    --font-im:   'Palatino Linotype', Palatino, 'Book Antiqua', Georgia,
                 'Times New Roman', serif;
    --font-stamp:'Haettenschweiler', 'Arial Narrow', 'Roboto Condensed',
                 'Franklin Gothic Medium', Impact, sans-serif;

    --bg:           #14110e;
    --surface:      var(--vellum);
    --surface-2:    var(--vellum-dim);
    --border:       rgba(26, 22, 19, .38);
    --text:         var(--iron);
    --text-muted:   var(--ash);
    --primary:      var(--imperial);
    --primary-text: #f2e9d6;
    --ok:           #4a6b32;
    --error:        var(--imperial);
    --radius:       0;
    --maxw:         1400px;
}

body.tpl-imperial {
    background-color: #14110e;
    background-image:
        url("../img/astartes.svg"),
        radial-gradient(ellipse at 50% 0%, rgba(168, 134, 63, .07), transparent 58%);
    background-repeat: no-repeat, no-repeat;
    background-size: 900px auto, 100% 100%;
    background-position: center 14%, top center;

    background-attachment: fixed, fixed;
    color: var(--vellum);
    font-family: var(--font-im);
}
.tpl-imperial .admin .tab-body, .tpl-imperial .userpanel, .tpl-imperial .card, .tpl-imperial .card .day-tab{color:var(--iron);}
.tpl-imperial .card .day-tab:hover{color: var(--iron-soft);}
.tpl-imperial .admin .update-log li{color:black;}

.tpl-imperial .content { max-width: var(--maxw); }

.tpl-imperial h1, .tpl-imperial h2, .tpl-imperial h3 { font-family: var(--font-im); }
.tpl-imperial .event-header { text-align: center; }
.tpl-imperial .event-header h1 {
    color: var(--vellum-lit);
    font-weight: 400;
    font-size: 2.1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .7);
}

.tpl-imperial .event-header h1::after {
    content: "";
    display: block;
    width: 180px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, transparent, var(--imperial) 20%, var(--imperial) 80%, transparent);
    box-shadow: 0 3px 0 -1px rgba(168, 134, 63, .55);
}
.tpl-imperial .event-date,
.tpl-imperial .event-hours {
    text-align: center;
    font-family: var(--font-stamp);
    color: var(--brass);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-size: 0.82rem;
    margin: 0.1rem 0 0;
}

.tpl-imperial .day-tabs { justify-content: center; border-bottom: 2px solid var(--brass); gap: 0.3rem; }
.tpl-imperial .day-tab {
    font-family: var(--font-stamp);
    color: var(--vellum-dim);
    background: rgba(216, 207, 180, .10);
    border: 1px solid rgba(168, 134, 63, .45);
    border-bottom: none;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tpl-imperial .day-tab:hover { background: rgba(216, 207, 180, .2); color: var(--vellum-lit); }
.tpl-imperial .day-tab-active,
.tpl-imperial .day-tab-active:hover {
    color: var(--iron);
    background: var(--vellum);
    border-color: var(--brass);
    box-shadow: inset 0 3px 0 var(--imperial);
}
.tpl-imperial .day-tab-date, .tpl-imperial .day-tab-hours { color: inherit; opacity: 0.8; }

.tpl-imperial .table-block {
    background: rgba(20, 17, 14, .55);
    border: 1px solid rgba(168, 134, 63, .35);
    border-radius: 0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}
.tpl-imperial .table-title {
    font-family: var(--font-stamp);
    color: var(--brass);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(168, 134, 63, .35);
    padding-bottom: 0.4rem;
}

.tpl-imperial .game-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 3em; align-items: flex-start; }
.tpl-imperial .game-card {
    display: flex; align-items: flex-start; gap: 0;
    flex: 0 0 auto;
    background: transparent; border: none; padding: 0; box-shadow: none;
}

.tpl-imperial .gc-info {
    width: 250px; flex: 0 0 250px;

    position: relative; z-index: 2;
    background-color: var(--vellum);
    background-image: url("../img/parchment.svg");
    background-size: 200px 200px;
    color: var(--iron);
    text-align: left;
    border: 1px solid #8a7f62;
    border-left: 4px solid var(--imperial);
    border-radius: 0;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .55);
    padding-bottom: 0.6rem;
}
.tpl-imperial .gc-tabs { display: flex; gap: 0.25rem; padding: 0.35rem 0.4rem 0; justify-content: flex-start; }
.tpl-imperial .gc-tab {
    font-family: var(--font-stamp);
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.18rem 0.5rem; border-radius: 0; text-decoration: none;
    color: var(--vellum-lit);
    background: var(--iron-soft);
    border: 1px solid var(--iron);
}
.tpl-imperial .gc-tab:hover { background: var(--iron); text-decoration: none; }
.tpl-imperial .gc-tab-del { background: var(--imperial); border-color: #5e1109; }
.tpl-imperial .gc-tab-del:hover { background: var(--imperial-lit); }

.tpl-imperial .im-designation {
    display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
    font-family: var(--font-stamp);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash);
    padding: 0.35rem 0.5rem 0.3rem;

    padding-right: 2.6rem;
    border-bottom: 1px solid rgba(26, 22, 19, .25);
}
.tpl-imperial .im-ref { color: var(--imperial); font-weight: 700; }
.tpl-imperial .im-sanction {
    color: var(--iron-soft);
    font-family: var(--font-stamp);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.tpl-imperial .im-sanction .sanction-time{
    color: var(--iron);
    font-weight: 700;
    font-size: 1.15rem;
}

.tpl-imperial .gc-thumb { padding: 0.5rem 0 0.2rem; text-align: center; }
.tpl-imperial .gc-thumb img {
    max-width: 150px; max-height: 190px;
    border: 1px solid #8a7f62;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.tpl-imperial .gc-name {
    color: var(--iron);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0.4rem 0.5rem 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--iron);
    text-align: left;
}
.tpl-imperial .gc-name a { color: var(--iron); text-decoration: none; }
.tpl-imperial .gc-name a:hover { color: var(--imperial); }

.tpl-imperial .im-seal {
    position: absolute;

    top: 3.4rem; right: -30px;
    width: 78px; height: 104px;
    background: url("../img/seal.svg") center top / contain no-repeat;

    filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, .5));
    text-align: center;
    pointer-events: none;
    z-index: 3;
}
.tpl-imperial .im-seal-value {
    display: block;
    font-family: var(--font-stamp);
    font-size: 1.1rem;
    line-height: 1;
    color: #f6e2d6;
    padding-top: 1.05rem;

    text-shadow: 0 -1px 0 rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 210, 190, .28);
}
.tpl-imperial .im-seal-label {
    display: block;
    font-family: var(--font-stamp);
    font-size: 0.44rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(246, 226, 214, .7);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}

.tpl-imperial .im-seal.weight-1 { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, .5)) hue-rotate(108deg) saturate(.85); }
.tpl-imperial .im-seal.weight-2 { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, .5)) hue-rotate(72deg)  saturate(.9); }
.tpl-imperial .im-seal.weight-3 { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, .5)) hue-rotate(34deg)  saturate(1); }
.tpl-imperial .im-seal.weight-4 { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, .5)) hue-rotate(14deg)  saturate(1.05); }
.tpl-imperial .im-seal.weight-5 { filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, .5)); }

.tpl-imperial .gc-band {
    padding: 0.28rem 0.5rem;
    font-size: 0.86rem;
    color: var(--iron-soft);
    border-bottom: 1px solid rgba(26, 22, 19, .12);
}
.tpl-imperial .gc-band strong { color: var(--iron); font-weight: 700; }
.tpl-imperial .gc-row { background: transparent; }

.tpl-imperial .gc-band:nth-of-type(even) { background: rgba(26, 22, 19, .045); }
.tpl-imperial .gc-rules { font-weight: 700; background: rgba(26, 22, 19, .06); }
.tpl-imperial .gc-rules.rules-good { color: #4a6b32; }
.tpl-imperial .gc-rules.rules-mid  { color: #9a6a12; }
.tpl-imperial .gc-rules.rules-bad  { color: var(--imperial); }
.tpl-imperial .gc-comment {
    background: rgba(26, 22, 19, .07);
    font-size: 0.82rem;
    line-height: 1.4;
    font-style: italic;
}
.tpl-imperial .gc-comment .c-name { color: var(--imperial); font-style: normal; }

.tpl-imperial .gc-players {
    background: linear-gradient(rgba(216, 207, 180, .07), transparent 30%), rgba(26, 22, 19, .93);
    border: 1px solid rgba(168, 134, 63, .4);
    border-radius: 0;
    padding: 0.6rem 0.6rem 0.6rem 1.4rem;
    margin-left: -0.8rem; margin-top: 2rem;
    min-width: 310px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
}
.tpl-imperial .im-muster-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-stamp);
    color: var(--brass);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.7rem;
    padding-bottom: 0.3rem;
    margin-bottom: 0.45rem;
    border-bottom: 1px solid rgba(168, 134, 63, .4);
}
.tpl-imperial .im-muster-count { color: var(--vellum); }
.tpl-imperial .gc-slot {
    display: flex; align-items: center; gap: 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(168, 134, 63, .16);
    border-radius: 0;
    padding: 0.26rem 0.3rem;
    margin-bottom: 0;
    font-size: 0.86rem;
    color: var(--vellum);
}
.tpl-imperial .gc-slot strong { color: var(--vellum-lit); font-weight: 700; }

.tpl-imperial .im-line-no {
    flex: 0 0 auto;
    min-width: 1.5rem;
    font-family: var(--font-stamp);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--brass);
}

.tpl-imperial .im-vacant { opacity: 0.5; }
.tpl-imperial .im-vacant .muted { color: var(--ash); font-style: italic; }
.tpl-imperial .im-vacant .im-line-no { color: rgba(168, 134, 63, .5); }
.tpl-imperial .gc-knows { color: #7fa055; font-size: 0.74rem; }
.tpl-imperial .gc-knows.rules-good { color: #7fa055; }
.tpl-imperial .gc-knows.rules-mid  { color: #c9a227; }
.tpl-imperial .gc-knows.rules-bad  { color: var(--imperial-lit); }
.tpl-imperial .gc-reserve { opacity: 0.85; font-style: italic; }
.tpl-imperial .reserve-tag { color: var(--brass); font-family: var(--font-stamp); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; }
.tpl-imperial .gc-more-slots { font-size: 0.76rem; color: var(--ash); font-style: italic; margin: 0.25rem 0 0.4rem 0.3rem; }
.tpl-imperial .p-signedby { color: var(--ash); font-size: 0.74rem; }
.tpl-imperial .msg-icon { color: var(--brass); }

.tpl-imperial .gc-resign {
    margin-left: auto;
    background: var(--imperial);
    color: #f2e9d6;
    font-family: var(--font-stamp);
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.16rem 0.45rem; border-radius: 0; text-decoration: none; white-space: nowrap;
    border: 1px solid #5e1109;
}
.tpl-imperial .gc-resign:hover { background: var(--imperial-lit); text-decoration: none; }

.tpl-imperial .gc-signup {
    display: block; text-align: center;
    background: var(--imperial);
    color: #f2e9d6;
    font-family: var(--font-stamp);
    border: 1px solid #5e1109;
    border-radius: 0; padding: 0.4rem 0.7rem; margin-top: 0.6rem;
    font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none;
}
.tpl-imperial .gc-signup:hover { background: var(--imperial-lit); text-decoration: none; }

.tpl-imperial .btn {
    font-family: var(--font-stamp);
    background: var(--iron-soft);
    border: 1px solid var(--iron);
    color: var(--vellum-lit);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 0;
}
.tpl-imperial .btn.game-manual{
    display:block;
}
.tpl-imperial .btn:hover { background: var(--iron); color: var(--vellum-lit); }
.tpl-imperial .btn-primary {
    background: var(--imperial);
    border-color: #5e1109;
    color: #f2e9d6;
}
.tpl-imperial .btn-primary:hover { background: var(--imperial-lit); border-color: #5e1109; color: #f2e9d6; }
.tpl-imperial .btn-danger,
.tpl-imperial .btn-danger:hover { background: var(--imperial); border-color: #5e1109; color: #f2e9d6; }

.tpl-imperial input, .tpl-imperial select, .tpl-imperial textarea {
    background-color: rgba(20, 17, 14, .8);
    border: 1px solid rgba(168, 134, 63, .4);
    color: var(--vellum);
    border-radius: 0;
    font-family: var(--font-im);
}
.tpl-imperial input:focus, .tpl-imperial select:focus, .tpl-imperial textarea:focus {
    border-color: var(--brass);
    outline: none;
    box-shadow: 0 0 0 2px rgba(168, 134, 63, .3);
}

.tpl-imperial select option { background: #14110e; color: var(--vellum); }
.tpl-imperial select option:checked,
.tpl-imperial select option:hover { background: var(--imperial); color: #f2e9d6; }
.tpl-imperial label { color: var(--brass); font-family: var(--font-stamp); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }
.tpl-imperial .field-note { color: var(--ash); font-family: var(--font-im); text-transform: none; letter-spacing: 0; }

.tpl-imperial .gc-info .discussion { border-top: 1px solid rgba(26, 22, 19, .2); margin: 0; padding: 0.3rem 0 0; text-align: left; }
.tpl-imperial .comment-list { list-style: none; margin: 0; padding: 0; }
.tpl-imperial .comment-list li {
    background: rgba(26, 22, 19, .06);
    border: none;
    border-bottom: 1px solid rgba(26, 22, 19, .12);
    border-radius: 0;
    color: var(--iron-soft);
    font-size: 0.82rem;
}
.tpl-imperial .comment-add { margin: 0.4rem 0.5rem 0.2rem; }
.tpl-imperial .comment-add summary {
    display: inline-block; cursor: pointer; list-style: none;
    font-family: var(--font-stamp);
    background: var(--iron-soft);
    color: var(--vellum-lit);
    border: 1px solid var(--iron);
    border-radius: 0;
    padding: 0.18rem 0.7rem;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.tpl-imperial .comment-add summary:hover { background: var(--iron); }
.tpl-imperial .comment-add summary::-webkit-details-marker { display: none; }
.tpl-imperial .comment-add form { padding: 0.4rem 0; display: flex; flex-direction: column; gap: 0.35rem; }

.tpl-imperial .poll-card {
    background-color: var(--vellum);
    background-image: url("../img/parchment.svg");
    background-size: 200px 200px;
    color: var(--iron);
    border: 1px solid #8a7f62;
    border-left: 4px solid var(--brass);
    border-radius: 0;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
}
.tpl-imperial .poll-card .game-time { color: var(--iron); font-weight: 700; }
.tpl-imperial .poll-card .game-time::before {
    content: attr(data-label) ": ";
    font-family: var(--font-stamp);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.76em;
    color: var(--iron-soft);
}
.tpl-imperial .poll-by { color: var(--iron-soft); }
.tpl-imperial .poll-by strong { color: var(--iron); }
.tpl-imperial .poll-card .msg-icon { color: var(--imperial); }
.tpl-imperial .poll-tag {
    margin-left: auto;
    font-family: var(--font-stamp);
    background: transparent;
    border: 2px solid var(--imperial);
    color: var(--imperial);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
    border-radius: 0;
    transform: rotate(-2deg);
}
.tpl-imperial .poll-card .btn-small {
    font-family: var(--font-stamp);
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.18rem 0.5rem; border-radius: 0;
    background: var(--iron-soft); color: var(--vellum-lit);
    border: 1px solid var(--iron);
}
.tpl-imperial .poll-card .btn-small:hover { background: var(--iron); text-decoration: none; }
.tpl-imperial .poll-card .btn-danger,
.tpl-imperial .poll-card .btn-danger:hover { background: var(--imperial); border-color: #5e1109; color: #f2e9d6; }
.tpl-imperial .poll-deadline { color: var(--iron-soft); }
.tpl-imperial .poll-deadline strong { color: var(--imperial); }
.tpl-imperial .poll-card .rules-good { color: #4a6b32; }
.tpl-imperial .poll-card .rules-mid  { color: #9a6a12; }
.tpl-imperial .poll-card .rules-bad  { color: var(--imperial); }
.tpl-imperial .poll-option {
    background: rgba(26, 22, 19, .06);
    border: 1px solid rgba(26, 22, 19, .18);
    border-radius: 0;
}
.tpl-imperial .poll-opt-name, .tpl-imperial a.poll-opt-name { color: var(--iron); }
.tpl-imperial .poll-opt-votes { color: var(--ash); font-family: var(--font-stamp); letter-spacing: 0.06em; }
.tpl-imperial .poll-opt-meta { color: var(--ash); }

.tpl-imperial .poll-opt-bar { background: rgba(26, 22, 19, .18); }
.tpl-imperial .poll-opt-bar > span { background: var(--imperial); }
.tpl-imperial .poll-opt-bar.is-full > span { background: #4a6b32; }

.tpl-imperial .timeline { background: rgba(20, 17, 14, .8); border: 1px solid rgba(168, 134, 63, .35); border-radius: 0; }
.tpl-imperial .tl-scroll { background: transparent; border-color: rgba(168, 134, 63, .35); }
.tpl-imperial .timeline-title { font-family: var(--font-stamp); color: var(--brass); letter-spacing: 0.2em; text-transform: uppercase; }
.tpl-imperial .tl-hours { border-bottom-color: rgba(168, 134, 63, .35); }
.tpl-imperial .tl-hour { color: var(--ash); font-family: var(--font-stamp); }
.tpl-imperial .tl-hour::before { border-left-color: rgba(168, 134, 63, .3); }
.tpl-imperial .tl-table-no { background: rgba(0, 0, 0, .4); color: var(--brass); font-family: var(--font-stamp); }
.tpl-imperial .tl-game {
    background: var(--vellum);
    color: var(--iron);
    border: 1px solid #8a7f62;
    border-left: 3px solid var(--imperial);
    border-radius: 0;
    font-weight: 700;
}
.tpl-imperial .tl-game:hover { background: var(--vellum-lit); }
.tpl-imperial .tl-count-full { color: var(--imperial); }

.tpl-imperial .tl-game.tl-poll {
    background: rgba(20, 17, 14, .85);
    color: var(--brass);
    border: 1px dashed var(--brass);
    border-left: 3px dashed var(--brass);
}
.tpl-imperial .tl-game.tl-poll .tl-sub { color: rgba(168, 134, 63, .85); }

.tpl-imperial .topbar {
    background: linear-gradient(#221c17, #14110e);
    border-bottom: 2px solid var(--imperial);
}
.tpl-imperial .topbar a, .tpl-imperial .brand { color: var(--vellum-lit); }
.tpl-imperial .brand { font-family: var(--font-stamp); letter-spacing: 0.2em; text-transform: uppercase; }
.tpl-imperial .mailing-box {
    background: rgba(26, 22, 19, .9);
    border: 1px solid rgba(168, 134, 63, .4);
    border-radius: 0;
}
.tpl-imperial .game-archived .gc-info { opacity: 0.5; }
.tpl-imperial .game-archived .gc-name { text-decoration: line-through; }

.tpl-imperial a:focus-visible,
.tpl-imperial button:focus-visible,
.tpl-imperial input:focus-visible,
.tpl-imperial select:focus-visible,
.tpl-imperial textarea:focus-visible,
.tpl-imperial summary:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}


.tpl-imperial .event-msg{background: var(--surface-2); color: var(--iron);}

@media (min-width: 701px) {
    .tpl-imperial .game-list > article { width: 580px; }
}

@media (max-width: 700px) {
    .tpl-imperial .game-card { flex-direction: column; width: 100%; }
    .tpl-imperial .gc-players {
        margin-left: 0; margin-top: 0.5rem;
        width: 100%; box-sizing: border-box; min-width: 0;
    }
    .tpl-imperial .gc-info { width: 100%; flex-basis: auto; box-sizing: border-box; }
    .tpl-imperial .im-seal { right: 4px; top: 1.6rem; margin-top: 30px;}
    .tpl-imperial .event-header h1 { font-size: 1.6rem; letter-spacing: 0.14em; }

    .tpl-imperial .day-tabs { justify-content: flex-start; }
}
.tpl-imperial .day-tabs { justify-content: safe center; }
