/*
 * Common stylesheet for the player-facing part of the site: the game list, the game
 * itself, the stats table, teams and profiles.
 *
 * Loaded after Bootstrap, and every domain theme in css_d/ @imports this file first
 * and then overrides it - so anything a theme is expected to restyle (colours above
 * all) has to live in a rule of its own here rather than be inlined into the markup.
 *
 * Sections:
 *    1. Base and typography          12. Stats table
 *    2. Layout containers            13. Code map
 *    3. Bootstrap overrides          14. Inventory
 *    4. Site header (legacy)         15. Spoilers (.sp-*)
 *    5. Messages and errors          16. Image zoom
 *    6. Login, registration, profile 17. Star rating widget
 *    7. Teams                        18. Admin controls
 *    8. Game list and game shell     19. Utilities and animations
 *    9. Task page
 *   10. Answer form and results
 *   11. Answer monitoring
 *
 * Rules within a section are ordered so that the cascade still works: where two
 * selectors of equal weight set the same property, the more specific case comes
 * later. Those places are marked with a comment.
 */

/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
*/


/* ==========================================================================
   1. Base and typography
   ========================================================================== */

/* iOS otherwise repaints buttons and text fields with its own chrome. */
input.text,
input[type="text"],
input[type="button"],
input[type="a"],
input[type="submit"],
a.btn,
button,
.input-checkbox {
    -webkit-appearance: none !important;
}

/* Task content is author-supplied - keep wide images inside the container. */
img {
    max-width: 100%
}

html,
body {
    color: #333;
    font: 14px Verdana, Helvetica, sans-serif;
    line-height: 1.5;
}

body {
    background-color: #DFDFDA;
}

body.game {
    font-family: Verdana, Helvetica, sans-serif;
}

/* Pages rendered into an iframe or a popup, without the site chrome. */
body.inline {
    margin: 10px;
}

pre {
    color: #e83e8c;
}

a {
    cursor: pointer;
    /*  text-decoration:underline;*/
    /*  color:#333;*/
}

a.btn {
    text-decoration: none;
}


/* ==========================================================================
   2. Layout containers
   ========================================================================== */

/* The white card the page content sits on. Three flavours of the same thing. */
.page-container {
    background-color: #FFF;
    color: #333;
    display: block;
    text-align: start;
    border: #C9D7F1 1px solid;
    border-radius: 5px;
    box-shadow: 1px 1px 9px #AAB;
    padding: 1rem;
}

.game-container {
    background-color: #FFF;
    min-height: 600px;
    border: #C9D7F1 1px solid;
    border-radius: 5px;
    box-shadow: 1px 1px 9px #AAB;
    padding: 10px;
}

.task-container {
    background-color: #FFF;
    color: #333;
    min-height: 600px;
    display: block;
    text-align: start;
    border: #C9D7F1 1px solid;
    border-radius: 5px;
    box-shadow: 1px 1px 9px #AAB;
    margin: 0 0 15px 0;
    padding: 1.0rem;
}

/* Narrow single-purpose pages. */
div.login {
    max-width: 600px;
    margin: auto;
}

div.register-container {
    max-width: 400px;
}

div.out-login {
    padding: 10px;
}

div.page-links {
    max-width: 800px;
    margin: auto;
}

/* Inner block inside a card: profile, team page, invitations. */
.inn {
    font-size: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.description {
    margin-left: 20px;
    margin-right: 20px;
}


/* ==========================================================================
   3. Bootstrap and third-party overrides
   ========================================================================== */

.alert {
    max-width: 800px;
    margin: auto;
}

.dropdown-menu {
    text-align: center;
    z-index: 20000;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-item {
    display: inline-block;
    width: 100%;
}

ul.list-unstyled {
    margin: 0px;
}

/* Bootstrap 4 dropped the default button - it is still used in the markup. */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default:active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* --- Navbar ------------------------------------------------------------- */

.navbar-light .nav-link,
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .5);
    /* menu button colour */
}

.navbar-light .nav-item:hover {
    background-color: rgba(255, 255, 255, .85);
    /* menu button hover colour */
}

.navbar-light .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
    color: rgba(0, 0, 0, .75);
    /* active menu button colour */
}

.navbar-dark .nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .5);
    /* menu button colour */
}

.navbar-dark .nav-item:hover {
    background-color: rgba(255, 255, 255, .85);
    /* menu button hover colour */
}

.navbar-dark .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(0, 0, 0, .75);
    /* active menu button colour */
}

.nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}

.nav-item.list-inline-item {
    margin-right: 0;
}

/* --- Animated hamburger button ------------------------------------------
 *
 * Three <span> bars that fold into an X. The open state is the base rule; the
 * folded one is keyed off [aria-expanded="true"], which Bootstrap sets on the
 * toggler - an attribute selector, so it outweighs the base rules regardless of
 * the order they are written in.
 */
.navbar-toggler span {
    display: block;
    background-color: #4f4f4f;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}

.navbar-light .navbar-toggler span {
    background-color: rgba(0, 0, 0, .5);
}

.navbar-dark .navbar-toggler span {
    background-color: rgba(255, 255, 255, .5);
}

/* Open state: three bars. The top one needs a little padding. */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
    transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(2) {
    opacity: 1;
}

.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
}

/* Collapsed state: top and bottom bars rotate into an X, the middle one fades out. */
.navbar-toggler[aria-expanded="true"] span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
}

/* --- jQuery UI timepicker (admin date fields) ---------------------------- */

.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

.ui-timepicker-div dl dt {
    height: 25px;
    margin-bottom: -25px;
}

.ui-timepicker-div dl dd {
    margin: 0 10px 10px 65px;
}

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   4. Site header (legacy, pre-navbar markup)
   ========================================================================== */

#header {
    width: 100%;
    padding-bottom: 0px;
}

.header {
    width: 100%;
}

#header .logo {
    max-width: 800px;
}

/* Log out / profile links pinned to the top right corner. */
div.out {
    float: left;
    display: inline;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 500;
}

div.out a {
    color: #b2b2b2;
    font-size: 14px;
}

#header .out a:hover {
    color: #79b9f9;
    font-size: 14px;
}

#header .menu {
    width: 600px;
    height: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    display: block;
}

#header .menu ul {
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

#header .menu ul li {
    background-color: #DDE5FF;
    float: left;
    border: #000 2px solid;
    border-left: none;
    line-height: 20px;
    font-size: 13px;
    padding: 3px 10px;
}

#header .menu ul li.first {
    border-left: #000 2px solid;
}

#header .menu ul li a:hover {
    color: #F22;
}


/* ==========================================================================
   5. Messages, warnings and errors
   ========================================================================== */

div#message {
    border: 1px solid #000;
    border-spacing: 20px;
}

#message_time {
    font-weight: 700;
}

span.email_warning,
.login_error,
.team_action_result {
    font-size: 15px;
    background-color: #000;
    color: red;
    font-weight: 700;
    padding-right: 24px;
    padding-left: 24px;
}

a.email_warning,
a.login_error,
a.team_action_result {
    color: #AAAAFF;
}

/* Banner shown while a game is in test mode. */
div#test_warning {
    background-color: #000;
    color: red;
}

div#test_warning a {
    background-color: #000;
    color: #FF0;
}

/* Shown when the browser is running a cached, outdated version of the game script. */
.old_script_error {
    color: #777;
}


/* ==========================================================================
   6. Login, registration and profile
   ========================================================================== */

table.login {
    border-collapse: collapse;
    border-spacing: 0;
}

table.login td {
    border: #000 2px solid;
    text-align: center;
}

table.login tr:first-child {
    background-color: #DDE5FF;
    border-style: none;
}

div.openid_login {
    font-size: 15px;
    background-color: #DDE5FF;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Field edited in place by a click. */
span.click_edit {
    border: #AAA 1px solid;
}

.profile-edit input {
    width: 100%;
    text-align: center;
}

.profile-edit input:disabled {
    border: 0;
    background-color: #FFF;
}

/* User stats page (usp.php). */
#usp {
    width: 90%;
    margin-left: 50px;
}

#usp .inn td {
    border: #7f7f7f 1px solid;
    text-align: center;
}

#usp table,
#usp .inn table {
    border: none;
}


/* ==========================================================================
   7. Teams
   ========================================================================== */

table.team {
    border-collapse: collapse;
    border-spacing: 0;
    width: 95%;
}

table.team tr {
    border: #CCF 1px solid;
    border-style: solid none;
    text-align: center;
}

table.team tr:first-child {
    border-style: none;
}

table.team td {
    padding: 5px;
}

a.url-team,
a.game-team-control {
    text-decoration: none;
}

form.team-controls .btn {
    margin: 3px;
}

.access-key {
    margin: 10px;
}


/* ==========================================================================
   8. Game list and game shell
   ========================================================================== */

/* --- Game list ----------------------------------------------------------- */

span.game-list-time {
    float: right;
}

span.game-list-title {
    display: block;
}

a.game-list-id span {
    float: left;
    font-size: 75%;
}

.badge-awards {
    background: #FFBF00;
    background: linear-gradient(157deg, rgba(255, 255, 255, 1) 0%, rgba(255, 191, 0, 1) 100%);
    color: #55F;
    border-radius: 10px;
}

/* --- Game top bar -------------------------------------------------------- */

.out_game_controls {
    /*background-color:#FCFCFA;*/
    border: #CCC 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
    border-style: none none solid none;
    padding: 5px;
    margin: -0.5rem -0.5rem 0 -0.5rem;
}

.out_game_controls form {
    margin: 10px;
    display: inline;
}

a#game_title {
    font-size: 18px;
    text-decoration: none;
}

a#game_menu_button {
    color: #333;
    font-size: 22px;
    text-decoration: none;
}

a#game_menu_button:hover {
    color: #000;
}

input.game_control_button {
    font-size: 24px;
}

/* Stats / monitoring / refresh links in the top bar. */
div.out_game_stat {
    display: inline-block;
    padding-right: 16px;
}

a#game_stat,
a#game_monitoring,
a#refresh {
    color: #00C;
}

div#out_refresh {
    display: inline;
}

span#out_end_time,
div#out_end_time {
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    padding-right: 24px;
}

/* Progress bar in the game menu. */
#game_progress_out {
    background-color: #000;
}

#game_progress_text {
    color: #FFF;
}

/* --- Waiting / finished states ------------------------------------------- */

div#wait_game_out {
    text-align: center;
    font-size: 18px;
    padding-top: 28px;
    padding-bottom: 28px;
}

div#game_over {
    margin: auto;
}

div#profile {
    font-size: 9px;
    border: #000 1px solid;
    border-style: solid none none;
}


/* ==========================================================================
   9. Task page
   ========================================================================== */

div#task_header,
div.task-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    margin: 0px 0px 5px 0px;
    background-color: rgb(250, 250, 240);
    border-radius: 5px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.20);
}

div#task_title,
div.task-title {
    font-weight: bolder;
    font-size: 14px;
    display: inline-block;
    padding-right: 24px;
}

div#out_task,
div.out-task {
    border: #000 1px solid;
    padding: 8px;
    border-style: none;
}

.closed-level {
    font-size: 18px;
    border-radius: 5px;
    color: #FFF;
    margin: 5px;
    font-weight: 700;
    background-color: #080;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* How a task ended when it was not solved. */
.task-status-timeout,
.task-status-surrender,
.task-status-game-over {
    color: #930;
    font-weight: 800;
    font-size: 10px;
}

/* Drop target while reordering tasks by drag and drop. */
.task-drag-spot {
    background-color: #888;
    color: #FFF;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 5px;
}

/* --- Hints --------------------------------------------------------------- */

.out_hint {
    border: silver 1px solid;
    padding-top: 4px;
    padding-bottom: 8px;
    padding-left: 8px;
    border-style: solid none none;
}

.hint_title {
    color: #606060;
}

/* Same block as .bonus-hint / .bonus-description below - kept separate so the
 * bonus section stays self-contained. */
.hint {
    margin: 4px 0px 0px 0px;
    display: block;
    border: 1px;
    padding: 0px 0px 0px 8px;
    border-style: none none none solid;
    border-color: #DDD;
}

div.hint-title-open {
    color: #333;
}

/* A hint that has just opened blinks a few times so it is not missed. */
@keyframes hint-title-open-fresh {
    from {
        color: #FFF;
    }

    to {
        color: #333;
    }
}

div.hint-title-open-fresh .hint_name {
    animation-name: hint-title-open-fresh;
    animation-duration: 0.5s;
    animation-iteration-count: 5;
    animation-fill-mode: forwards;
}


/* ==========================================================================
   10. Answer form and answer results
   ========================================================================== */

.answers_controls {
    background-color: #EDF0F9;
    font-size: 14px;
    font-weight: 700;
    padding-top: 2px;
    padding-bottom: 2px;
}

div#out_answer_frame {
    padding: 0px;
}

form#answer_form {
    /*  max-width:500px;*/
    padding: 0px;
}

div#answer_form {
    padding-right: 8px;
    max-width: 100%;
}

/* Hints about the answer format - shown white on the dark answer panel. */
div#answer_format_block,
div#answer_limit_block,
div#out_limit,
span.another-task-comment {
    color: #FFF;
}

/* --- Verdict on the last answer ------------------------------------------ */

/* Plain colours, on the light page background. */
.repeat-answer {
    color: #005;
    font-weight: 700;
}

.wrong-answer,
.nonsubmit-answer {
    color: #B00;
    font-weight: 700;
}

.right-answer,
.bonus-answer {
    color: #050;
    font-weight: 700;
}

/* The floating dark answer panel repeats the same set in light shades.
 * Selected through the #out_answer id, so it wins over the rules above. */
div#out_answer {
    color: #FFF;
    background-color: rgba(48, 48, 64, 0.75);
    border-radius: 5px;
    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.80);
    padding: 8px 8px 4px 8px;
    z-index: 10000;
}

div#out_answer .repeat-answer {
    color: #AAF;
    font-weight: 400;
}

div#out_answer .wrong-answer,
div#out_answer .nonsubmit-answer {
    color: #FAA;
    font-weight: 400;
}

div#out_answer .unknown-answer {
    color: #FFF;
}

div#out_answer .right-answer,
div#out_answer .bonus-answer {
    color: #AFA;
    font-weight: 400;
}

/* --- Sending state ------------------------------------------------------- */

span.answers-sending {
    color: #FFA;
    font-weight: 400;
    word-break: break-all;
}

div.answers-send-error {
    color: #FAA;
    font-weight: 400;
}

/* Spinner next to the answer field: the state of the offline queue. */
.send-spinner-error {
    color: #F00;
}

.send-spinner-offline-unknown {
    color: #FF0;
}

.send-spinner-offline-correct {
    color: #0F0;
}

/* Default state - deliberately unstyled, it inherits the surrounding colour. */
.send-spinner-normal {}


/* ==========================================================================
   11. Answer monitoring and test answers
   ========================================================================== */

a.answers-monitoring {
    font-size: 12px;
    border: #333 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
    border-style: solid none none none;
    text-align: center;
    width: 100%;
    color: #ccc;
    padding: 4px 0px 0px 0px;
}

a.answers-monitoring:hover {
    color: #eee;
}

span.answers-queue-text {
    color: #ff0;
}

#monitoring_window_out {
    text-align: center;
    width: 100%;
}

/* Dark log of the team's recent answers. */
div.answers-monitoring-body {
    background-color: rgba(48, 48, 64, 0.75);

    text-align: left;
    font-size: 12px;
    padding: 8px;
    color: #CCC;
    max-height: 200px;
    overflow-y: auto;
    orphans: 4;
    widows: 4;
}

div.answers-monitoring-body ul {
    margin: 0;
}

div.answers-monitoring-body span.answer-right {
    color: #33FF33;
}

div.answers-monitoring-body span.answer-wrong {
    color: #CCC;
}

div.answers-monitoring-body span.answer-repeat {
    color: #AA88FF;
}

div.answers-monitoring-body span.answer-user {
    color: #FC5;
}

/* Bonus results inside the dark log - light shades instead of the page ones. */
div.answers-monitoring-body .bonus-result-positive {
    color: #AFA;
    font-weight: 100;
}

div.answers-monitoring-body .bonus-result-negative {
    color: #FAA;
    font-weight: 100;
}

/* --- Test answers (test mode) -------------------------------------------- */

div#test_answers_out {
    align-items: center;
}

div#test_answers {
    max-width: 800px;
    margin: auto;
}

a.test-answer-click {
    color: #ccc;
    text-decoration: none;
}

a.test-answer-click:hover {
    color: #eee;
}

a.test-answers {
    font-size: 12px;
    border: #333 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
    border-style: solid none solid none;
    text-align: center;
    width: 100%;
    color: #ccc;
    padding: 4px 0px 0px 0px;
}

a.test-answers:hover {
    color: #eee;
}


/* ==========================================================================
   12. Bonuses and codes
   ========================================================================== */

div#out_codes,
div#out_bonuses,
div#out_global_bonuses {
    border: #C9D7F1 1px solid;
    padding: 8px;
    border-style: solid;
    border-radius: 4px;
    margin: 8px;
}

.bonus {
    display: block;
    border: #D0D0D0 1px solid;
    margin: 8px;
    border-style: solid none none none;
}

.bonus-hint,
.bonus-description {
    margin: 4px 0px 0px 0px;
    display: block;
    border: 1px;
    padding: 0px 0px 0px 8px;
    border-style: none none none solid;
    border-color: #DDD;
}

.bonus-solved {
    background-color: #EFE;
}

.bonus-solved-penalty {
    background-color: #FEE;
}

.bonus-timed-out {
    background-color: #EEE;
}

.bonus-result-out,
.bonus-answer-out {
    margin: 0px 0px 0px 8px;
}

.bonus-result-positive {
    color: #050;
    font-weight: 700;
}

.bonus-result-negative {
    color: #500;
    font-weight: 700;
}


/* ==========================================================================
   13. Stats table (stat.php, stat2.php)
   ========================================================================== */

table.stat {
    background-color: #FFF;
    color: #333;
    font-size: 12px;
    border: 1px solid #AAA;
    border-collapse: collapse;
    border-spacing: 0;
}

table.stat th {
    text-align: center;
    border: 1px solid #AAA;
    border-style: none solid none;
}

table.stat td {
    padding: 0.25rem;
    text-align: center;
    white-space: nowrap;
    border: #CCC 1px solid;
}

table.stat a {
    text-decoration: none;
    color: #339;
}

/* Column headers. Written as `table th` rather than `table.stat th`, which gives
 * them the same weight as the rule above - so they must stay after it, otherwise
 * .task-hidden loses the full border it sets with a shorthand. */
table th.total {
    background-color: #FDFDFF;
    border: 1px solid #AAA;
    border-style: none solid none;
    min-width: 100px;
}

table th.stat-place {
    min-width: 20px;
}

table th.task {
    min-width: 120px;
    border: 1px solid #AAA;
    border-style: none solid none;
}

table th.task-hidden {
    border: 1px solid #AAA;
    min-width: 20px;
}

/* Row of task numbers. */
tr.stat_task_numbers {
    background-color: #EFEFFF;
}

/* Cancelled task: its cells do not count towards the totals. */
table.stat td.task-canceled {
    background-color: #999999;
}

/*
 * Pause task (time_k = 0): the task is there but yields no time.
 * Lighter than the grid (#CCC) - were the colours equal, cell borders
 * would vanish on such columns.
 */
table.stat td.task-pause {
    background-color: #E4E4E4;
}

/* Top three places. */
.stat_first {
    background-color: #FFFFE0;
}

.stat_second {
    background-color: #FFFFE8;
}

.stat_third {
    background-color: #FFFFF0;
}

/* Notes under a task name: (cancelled), (filler), (x2), (hidden). */
table.stat .stat-note-canceled,
table.stat .stat-note-hidden {
    color: #F00;
}

table.stat .stat-note-pause {
    color: #808080;
}

/*
 * Bonus and penalty sums. The colours live here rather than in the markup so a
 * domain theme can restyle them - on a dark theme the hardcoded ones were barely
 * readable.
 */
table.stat .stat-bonus {
    color: #008B0A;
}

table.stat .stat-penalty {
    color: #8B0000;
}

/*
 * Marker of a link that opens a popup from the corner of a stats cell: monitoring,
 * code map, team bonuses. A font icon rather than an image, so it takes its colour
 * and size from the surrounding text - and it is scoped to the table, which is the
 * only place left that uses it.
 */
table.stat .rm {
    float: right;
    border: none;
}

/* Legacy counterpart of .rm, kept for old task markup. */
img.lm {
    float: left;
    border: none;
}

#stat a {
    color: #CCC;
}

/* --- Team highlighting --------------------------------------------------- */

/*
 * Team highlight colours. JS only picks the number - the colours live here so that a
 * domain theme can restyle them; the pale shades below are unreadable on a dark one.
 *
 * JS cycles through the classes by number and reads how many there are from
 * --stat-highlight-count, so a theme that redefines the palette states its size here
 * and nothing has to be changed in the script. The custom property is declared with
 * the palette rather than on the main table.stat rule so the two cannot drift apart.
 *
 * Written as `td.stat-highlight-N` and NOT as `.stat-highlight-N`: the fills of the
 * cancelled tasks and the stubs above are `table.stat td.task-canceled` and weigh more
 * than a bare class would, so a highlighted stub kept its grey and the selection simply
 * did not show there. With the `td` the weights are equal, and these rules must
 * therefore STAY AFTER the fills - the later one wins a tie.
 */
table.stat {
    --stat-highlight-count: 18;
}

table.stat td.stat-highlight-1 {
    background-color: #A0F0A0;
}

table.stat td.stat-highlight-2 {
    background-color: #F0A0A0;
}

table.stat td.stat-highlight-3 {
    background-color: #A0A0F0;
}

table.stat td.stat-highlight-4 {
    background-color: #A0F0F0;
}

table.stat td.stat-highlight-5 {
    background-color: #F0F0A0;
}

table.stat td.stat-highlight-6 {
    background-color: #F0A0F0;
}

table.stat td.stat-highlight-7 {
    background-color: #60F0A0;
}

table.stat td.stat-highlight-8 {
    background-color: #F060A0;
}

table.stat td.stat-highlight-9 {
    background-color: #60A0F0;
}

table.stat td.stat-highlight-10 {
    background-color: #60F0F0;
}

table.stat td.stat-highlight-11 {
    background-color: #F0F060;
}

table.stat td.stat-highlight-12 {
    background-color: #F060F0;
}

table.stat td.stat-highlight-13 {
    background-color: #60A0A0;
}

table.stat td.stat-highlight-14 {
    background-color: #6060A0;
}

table.stat td.stat-highlight-15 {
    background-color: #60A060;
}

table.stat td.stat-highlight-16 {
    background-color: #60F060;
}

table.stat td.stat-highlight-17 {
    background-color: #F06060;
}

table.stat td.stat-highlight-18 {
    background-color: #6060F0;
}

/* --- Pinned columns ------------------------------------------------------ */

/*
 * Place and Result columns pinned to the left (stat2.php).
 *
 * Selected by position rather than by class: the first two cells of a row have
 * different tags and different classes, yet they are one and the same column.
 * The offset of the second column depends on the width of the first one and
 * arrives from JS in --stat-pin-offset.
 *
 * A pinned cell's own background is never touched, neither here nor from JS: pinning
 * must not change how a cell looks, and a domain theme may paint it however it likes.
 * What a cell does need is opacity - the backdrop below provides it.
 */
.stat-pinned tr > *:first-child,
.stat-pinned tr > *:nth-child(2) {
    position: sticky;
    z-index: 2;
}

.stat-pinned tr > *:first-child {
    left: 0;
}

.stat-pinned tr > *:nth-child(2) {
    left: var(--stat-pin-offset, 24px);
}

/*
 * Collapsed borders (border-collapse) are painted by the table, not by the cell,
 * and under sticky they do not travel with it: one-pixel gaps are left along the
 * edges, and the scrolling columns show through them. A backdrop stretched past
 * the cell edges plugs those gaps.
 *
 * The backdrop covers the grid as well, so it redraws it with its own border, in
 * the very place the collapsed border used to be. The z-index is negative, but
 * within the stacking context of the cell itself: the backdrop goes underneath
 * the cell content and still stays above the scrolling table.
 *
 * Its background is the row's one, measured by JS (--stat-pin-backdrop): the cell
 * paints over it, so a cell with a colour of its own hides the backdrop entirely,
 * and a transparent one gets back exactly what shows through it when the table is
 * not scrolled. The gradient is carried over as well - a themed row is often painted
 * with one, and then its background-color is transparent.
 */
.stat-pinned tr > *:first-child::before,
.stat-pinned tr > *:nth-child(2)::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    background-color: var(--stat-pin-backdrop, #FFF);
    background-image: var(--stat-pin-backdrop-image, none);
    border: 1px solid #CCC;
    pointer-events: none;
    z-index: -1;
}

/* Header rows had no horizontal borders - only vertical ones, and darker. */
.stat-pinned tr.stat_task_numbers > *:first-child::before,
.stat-pinned tr.stat_task_numbers > *:nth-child(2)::before {
    border-color: #AAA;
    border-top-style: none;
    border-bottom-style: none;
}

/*
 * Border and shadow at the seam with the scrolling part - a single gradient band:
 * the first pixel is the line, the rest fades out into transparency.
 *
 * Not box-shadow: it does not apply to table cells at all under
 * border-collapse: collapse, and the pseudo-element is one pixel wide - a shadow
 * cast by such a source is barely visible anyway.
 *
 * The band lies over the neighbouring column, hence pointer-events: none -
 * otherwise it would swallow clicks on the links underneath it.
 */
.stat-pinned tr > *:nth-child(2)::after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -9px;
    width: 9px;
    background: linear-gradient(to right,
            #888 0, #888 1px,
            rgba(0, 0, 0, 0.20) 1px,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Toggle that turns pinning on and off. */
.stat-pin {
    cursor: pointer;
    color: #AAA;
}

.stat-pin.stat-pin-on {
    color: #339;
}

/* --- History slider ------------------------------------------------------ */

/*
 * How far a team moved since the last refresh or the previous moment on the history
 * slider, shown in the place column. Small and beside the number, not under it: the
 * column is narrow and the row height is set by the team block next to it.
 */
.stat-place-shift {
    margin-left: 3px;
    font-size: 10px;
    white-space: nowrap;
    vertical-align: top;
}

.stat-place-up {
    color: #1A7F37;
}

.stat-place-down {
    color: #B3261E;
}

/*
 * Cells slide to their new place instead of jumping there (FLIP: stat_render.js puts
 * them back where they were, this carries them home). Only transform is animated -
 * it costs no layout, and the table is rebuilt whole on every render.
 */
.stat-sliding {
    transition: transform 250ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .stat-sliding {
        transition: none;
    }
}

/*
 * History slider bar (stat2.php). Sticky, so the table can be scrolled while
 * scrubbing. Its background arrives from JS in --stat-history-bg: a transparent
 * sticky bar would let the scrolling table show through, and the page colour is
 * a domain setting, not something to hardcode here.
 */
#stat_history {
    position: sticky;
    top: 0;
    z-index: 3;
    /*
     * The side padding is not decorative: the tooltip is centred on the thumb, so at
     * either end of the track half of it would hang off screen. 64px fits the longest
     * text the tooltip ever shows - a date with a time. The background still spans the
     * full width: the bar is sticky, and a gap at the edges would let the table
     * scrolling underneath show through.
     */
    padding: 6px 64px;
    background-color: var(--stat-history-bg, #FFF);
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.35);
}

/*
 * A narrow screen cannot spare that much - the track would end up shorter than the
 * tooltip itself. There stat_render.js keeps the tooltip inside the viewport instead.
 */
@media (max-width: 640px) {
    #stat_history {
        padding-left: 12px;
        padding-right: 12px;
    }
}

#stat_history_track {
    position: relative;
}

/*
 * Bootstrap paints the range track in #dee2e6, which on this page sits on a background
 * of nearly the same shade and reads as empty space. Each vendor selector needs its own
 * rule: a browser that does not know one of them would drop the whole group.
 */
#stat_history_range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background-color: #A0A0B0;
}

#stat_history_range::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background-color: #A0A0B0;
}

#stat_history_range::-ms-track {
    height: 8px;
    border-radius: 4px;
    background-color: #A0A0B0;
}

/*
 * Follows the slider thumb while scrubbing; native title tooltips do not show during
 * a drag. It hangs below the thumb, not above: the bar sticks to the top of the
 * viewport, and anything above it is off screen.
 */
#stat_history_tip {
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #333;
    color: #FFF;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}

#stat_history_tip.visible {
    opacity: 1;
}


/* ==========================================================================
   14. Code map
   ========================================================================== */

table.codemap th {
    white-space: nowrap;
    text-align: left;
}

table.codemap td {
    white-space: nowrap;
}

/* Task names turned on their side, so the columns can stay narrow. */
table.codemap th.vertical {
    width: 10px;
    padding: 0px 6px 0px 6px;
    vertical-align: bottom;
}

.vertical-text {
    writing-mode: vertical-rl;
    line-height: 0;
    transform: rotate(-180deg);
}


/* ==========================================================================
   15. Inventory
   ========================================================================== */

table.inventory {
    border: 1px solid;
    border-spacing: 3px
}

table.inventory td {
    padding: 5px;
}

table.inventory td.selected {
    box-shadow: 0 0 0 10px green inset;
}

table.inventory img {
    border: 1px solid;
}


/* ==========================================================================
   16. Spoilers (.sp-*)
   ========================================================================== */

/* Shared by the whole widget; .sp-head resets border-width below, so this
 * group has to come first. */
.sp-wrap,
.sp-head,
.sp-body {
    color: #333;
    clear: both;
    border-width: 1px;
}

.sp-wrap {
    background-color: rgb(250, 250, 240);
    box-shadow: 1px 1px 9px #CCD;
    border-radius: 4px;
    margin: 12px auto;
    /*width:98%;*/
    padding: 0;
}

.sp-head {
    font-size: 14px;
    /*margin-left:6px;*/
    line-height: 15px;
    cursor: pointer;
    border-width: 0;
    padding: 5px 14px 5px;
}

.sp-body {
    display: none;
    font-weight: 400;
    background-color: #FFF;
    border-width: 1px 0 0;
    padding: 0.5rem;
}

.sp-body.unfolded {
    display: block;
}

/* A nested spoiler gets a softer shadow. */
.sp-body .sp-wrap {
    box-shadow: 1px 1px 6px #CCD;
}

/* +/- marker in front of the title. */
.sp-head.folded {
    display: block;
    /*  background:transparent url(https://qeng.org/img/icon_plus_1.gif) no-repeat left center; */
    background: transparent url(https://qeng.org/img/wrap-closed.png?v=3) no-repeat left center;
    background-position: 6px;
    padding-left: 24px;
}

.sp-head.unfolded {
    display: block;
    /*  background:transparent url(https://qeng.org/img/icon_minus_1.gif) no-repeat left center;*/
    background: transparent url(https://qeng.org/img/wrap-open.png) no-repeat left center;
    background-position: 6px;
    padding-left: 24px;
}

/* Spoiler of a game that is running right now, in the game list. */
.game.active .sp-wrap {
    background-color: rgb(255, 245, 235);
}

.game.active .sp-wrap .sp-head {
    color: #333;
}

.game.active .sp-wrap .sp-head a {
    color: #333;
}


/* ==========================================================================
   17. Image zoom
   ========================================================================== */

img.zoom {
    cursor: pointer;
}

/* Full-screen overlay, centred by the inline-block + vertical-align trick.
 * The z-index has to beat everything the page can put on top of it - the
 * floating answer panel (10000), an open dropdown menu (20000) and the tester
 * controls at the bottom of the level. */
#img_zoom {
    display: none;
    position: fixed;
    z-index: 30000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

#img_zoom_img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    display: inline-block;
}

#img_zoom_vcenter {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}


/* ==========================================================================
   18. Star rating widget
   ========================================================================== */

/*fieldset, label { margin: 0; padding: 0; }*/

/* The radio inputs are hidden; the labels floated right are what is clicked, and
 * the sibling combinators below light up the stars from the pointer leftwards. */
.star-rating>input {
    display: none;
}

.star-rating>label {
    color: #AAA;
    float: right;
}

label.full:before {
    margin: 5px;
    font-size: 3.0em;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    content: "\f005";
}

label.half:before {
    margin: 5px;
    font-size: 3.0em;
    font-family: "Font Awesome 5 Free";
    content: "\f089";
    position: absolute;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.star-rating>input:checked~label,
/* show gold star when clicked */
.star-rating:not(:checked)>label:hover,
/* hover current star */
.star-rating:not(:checked)>label:hover~label {
    color: #1FA71F;
}

/* hover previous stars in list */

.star-rating>input:checked+label:hover,
/* hover current star when changing rating */
.star-rating>input:checked~label:hover,
.star-rating>label:hover~input:checked~label,
/* lighten current selection */
.star-rating>input:checked~label:hover~label {
    color: #3FA77F;
}


/* ==========================================================================
   19. Admin controls
   ========================================================================== */

.admin-control {
    padding: 5px 8px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #FFF;
    /*margin: 0px auto 10px auto;*/
    position: relative;
}

/* The admin blocks of the stat pages keep their yellow links. The admin bar
   (.admin-control-nav) is a Bootstrap navbar and is coloured by navbar-dark. */
.admin-control:not(.admin-control-nav) a {
    color: #FF0;
}

.admin-control-nav {
    padding: 0;
}

/* the site centres its dropdowns (see .dropdown-menu above); a menu reads left-aligned */
.admin-control-nav .dropdown-menu {
    text-align: left;
}

.stat-admin-control {
    padding: 20px;
    background-color: #000;
    color: #FFF;
    margin: 10px 0px 10px 0px;
}

.game-admin-control {
    padding: 8px;
    background-color: #000;
    color: #FFF;
    margin: 10px 0px 10px 0px;
}


/* ==========================================================================
   20. Utilities and animations
   ========================================================================== */

/* Text hidden by painting it in the page colour (answers of other teams, etc). */
.invis {
    color: #FFF;
}

/* Non-<a> elements that behave like links. */
.linkspan {
    cursor: pointer;
}

.log {
    text-decoration: underline;
    cursor: pointer;
}

.copy-on-click {
    cursor: copy;
}

.copy-on-click:active {
    font-weight: 800;
}

/* Corner placement inside a position: relative parent (.admin-control). */
.top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.rounded-30px {
    border-radius: 30px;
}

.rounded-5px {
    border-radius: 5px;
}

/* Fade-in for content that appears once the page script has run. */
@keyframes show-on-load {
    from {
        opacity: 0.0;
    }

    to {
        opacity: 1.0;
    }
}

.show-on-load {
    animation-name: show-on-load;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}