@font-face {
    font-family: 'JustAnotherHand';
    src: url('JustAnotherHand-Regular.ttf');
}

@font-face {
    font-family: 'TT2020';
    src: url('TT2020Base-Regular-bigasterisk.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT2020';
    src: url('TT2020Base-Italic-bigasterisk.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT2020';
    src: url('TT2020StyleE-Regular-bigasterisk.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT2020';
    src: url('TT2020StyleE-Italic-bigasterisk.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

html {
    min-height:100vh;

    --page-bg-rgb: 136, 136, 136;
    --accent-rgb: 132, 182, 141;
    --link-rgb: 139, 0, 0;

    --white-color: #000000;
    --neutral-color: #333;
    --accent-color: rgb(var(--accent-rgb));
    --accent-bg-color: rgba(var(--accent-rgb), 0.3);
    --accent-hover-color: #c0e4da;

    --page-bg-color: rgb(var(--page-bg-rgb));
    --sticky-bg-color: var(--accent-color);
    --heading-text-color: var(--neutral-color);

    --border-color: var(--accent-color);
    --print-border-color: #111;

    --link-text-color: rgb(var(--link-rgb));
    --link-hover-color: #c91a09;

    --btn-text-color: var(--neutral-color);
    --btn-bg-color: var(--accent-color);
    --btn-hover-color: var(--accent-hover-color);

    --tray-text-color: var(--neutral-color);
    --tray-bg-color: var(--accent-color);

    --text-font: 'TT2020';
    --btn-font: 'TT2020';
    --input-font: 'TT2020';
    --answer-font: 'TT2020';
    --handwritten-font: 'JustAnotherHand';
}

h1 {
    letter-spacing: 0.08rem;
}

h2 {
    letter-spacing: 0.04rem;
}


/* The background tile repeats both ways across the whole canvas, so no plain
   grey shows below the body. It's drawn at two thirds of its 560x320 size,
   which keeps it sharp on high-density screens. */
html {
    background-image: url('/static/images/backgrounds/background.png');
    background-position: top center;
    background-repeat: repeat;
    background-size: calc(560px * 2 / 3) calc(320px * 2 / 3);
}

.body-content-wrapper {
    min-height: 100vh;
}

/* The paper starts the same distance below the header on every page: the
   first heading's margin stays inside the paper instead of pushing it down. */
@media screen and (min-width: 961px) {
    .body-content-wrapper {
        padding-top: 25px;
    }

    /* As tall as the team strip, so logged-out pages match. */
    .actions-column .top-right-actions {
        min-height: 40px;
    }

    .body-content {
        display: flow-root;
    }
}

.body-content {
    font-family: var(--text-font);
    color: var(--white-color);
    font-variant-ligatures: none;
    font-feature-settings: "lnum";
    font-weight: medium;
    line-height: 2.3rem;
    font-size: 1.9rem;
    overflow-wrap: break-word;
    position: relative;
    min-height:calc(100vh - 30px);
    padding-bottom: 30px;    /* Footer height */
}

@media print {
    nav, .shortcuts {
        display: none;
    }
}

@media screen {
    .body-content {
        margin: 0 auto;
        width: 80%;
        width: 80vw;
        max-width: 960px;
    }
}

p {
    margin-bottom: 2rem;
}

li {
    list-style-position: outside;
    margin-left: 1.5em;
}

ul > li {
    list-style-type: "\2013  ";
}

/* Form fields are light paper boxes in dark ink. */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=url], input[type=search], input[type=tel], textarea, select {
    font-family: var(--input-font);
    color: #2f2a1f;
    background: #fbf9f2;
    border: 1px solid #8a8272;
    border-radius: 2px;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=url]:focus, input[type=search]:focus,
input[type=tel]:focus, textarea:focus, select:focus {
    border-color: #22336b;
    outline: 2px solid #22336b;
    outline-offset: 1px;
}

textarea {
    width: 100%;
    min-height: 24ch;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    font-size: 4.5rem;
    line-height: 1.2;
}

h2 {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    font-size: 3rem;
    line-height: 1.2;
}

main {
    position: relative;
    padding: 20px 30px;
    border-radius: 8px;
    color: black;
}

svg.hunt-icon {
    filter: invert(0.925);
}

/* The hint token, key and meta icons beside counts, sized like the drawn SVG
icons they replaced. */
.stat-icon {
    height: 35px;
    width: auto;
    vertical-align: -8px;
    padding-right: 2px;
}

hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-top: 1px solid #555555;
}

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

table.very-small {
    font-size: 80%;
}

table.very-small td, table.very-small th {
    padding: 0.4em;
    line-height: 1.4;
}

code {
    font-size: 80%;
    max-width: 1000px;
    overflow: scroll;
}

/* Inline code is typed text in the page's font, picked out in bold rather
   than a grey pill. */
:not(pre) > code {
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    white-space: normal;
    background: none;
    border: none;
    overflow: visible;
}

/* Table rules dark enough to see on the paper; pages can set their own. */
th, td {
    border-bottom-color: rgba(47, 42, 31, .3);
}

tr:last-child td,
tbody tr:last-child > th {
    border-bottom: none;
}

a, .btn {
    color: var(--link-text-color);
}

.btn, .shortcuts .btn, .logout-form .btn {
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    border-radius: 8px;
    border: none;
    font-family: var(--btn-font);

    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    font-size: 2rem;
}

/* Logout is a form (Django only logs out on POST) but sits among the nav links. */
.logout-form {
    display: inline;
    margin: 0;
}

form .btn {
    padding: 0 24px;
    height: 48px;
    line-height: 48px;
    font-size: 3rem;
}

input[type=text], input[type=password], input[type=email] {
    width: 100%;
    margin: 0.5rem 0;
}

figcaption {
    text-align: center;
}

/* See https://webaim.org/techniques/skipnav/ */
a.skip-to-main {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

a.skip-to-main:focus, a.skip-to-main:active {
    color: #fff;
    background-color: #000;
    opacity: 0.8;
    left: auto;
    top: auto;
    width: 70%;
    height: auto;
    overflow: auto;
    margin: 10px 15%;
    padding: 5px;
    border-radius: 15px;
    text-align:center;
    z-index: 999;
}

a.main-content-anchor {
    /* For some reason, display: block, visibility: hidden is needed. */
    display: block;
    visibility: hidden;
    position: relative;
    top: 4rem; /* .top-right-actions margin-bottom + h1 margin-top */
}

@media print {
    main {
        border-top: 1px solid var(--print-border-color);
    }

    .btn {
        border: 1px solid currentColor;
    }
}

@media screen {
    html {
        background-color: var(--page-bg-color);
    }

    /* An ordinary block, so text always wraps to the paper rather than the
       whole column widening to fit its widest table or grid. */
    main {
        display: block;
        box-sizing: border-box;
    }

    h1, h2, h3, h4 {
        color: var(--heading-text-color);
    }

    h1 {
        text-align: center;
        padding: 2rem;
        position: relative;
    }

    /* h3, h4 {
        text-decoration: underline;
    } */

    a {
        transition: color 0.3s;
    }

    a:hover,
    a:focus {
        color: var(--link-hover-color);
    }

    .puzzle-main {
        padding: 20px 30px;
        border-radius: 8px;
        color: #000000;
    }

    .puzzle-main h1, .puzzle-main h2, .puzzle-main h3, .puzzle-main h4 {
        color: #333333;
        background: none;
        border-left: none;
        border-right: none;
        padding: 0;
    }

    .btn {
        transition: background-color 0.3s;
        color: var(--btn-text-color);
        background-color: var(--btn-bg-color);
    }

    .btn:hover,
    .btn:focus {
        color: var(--btn-text-color);
        background-color: var(--btn-hover-color);
    }

    .btn.danger {
        filter: hue-rotate(180deg);
    }

    .btn:disabled, .btn:disabled:hover, .btn.btn-disabled {
        background-color: var(--btn-bg-color);
        filter: grayscale(1);
        cursor: not-allowed;
    }

    nav {
        overflow: hidden;
        margin-top: -5px;
        font-family: var(--text-font);
        font-variant-ligatures: none;
        font-feature-settings: "lnum";
        font-weight: medium;
    }

    .top-tabs {
        padding-top: 5px;
        display: flex;
        white-space: nowrap;
        justify-content: space-evenly;
        font-size: 2rem;
        margin: 5px 0 1.5rem;
        padding-top: 5px;
        line-height: 1;
    }

    .navbar-coloring {
        background-color: rgb(var(--accent-rgb));
    }

    .top-tabs a {
        display: inline-flex;
        position: relative;
        padding: 6px 0 10px;
        text-decoration: none;
        align-items: center;
        color: var(--heading-text-color);
    }

    .top-tabs a:hover {
        text-decoration: underline;
    }

    .top-tabs .selected-tab {
        font-weight: bold;
    }

    .top-left-actions {
        float: left;
    }

    .inner-column {
        width: 60%;
        margin: auto;
    }

    .top-right-actions {
        float: right;
        min-height: 32px;
        margin-bottom: 1.5rem;
    }

    .top-left-actions, .top-right-actions {
        line-height: 32px;
        word-spacing: 8px;
    }

    .top-left-actions > *, .top-right-actions > * {
        word-spacing: initial;
    }

    .current-stat {
        white-space: nowrap;
        display: inline-block;
        text-decoration: none;
        vertical-align: bottom;
    }

    .current-stat-label {
        font-size: 2.4rem;
        vertical-align: bottom;
    }

    .shortcuts {
        border: 2px solid var(--tray-bg-color);
        background-color: rgba(32, 32, 32, 0.8);
        position: absolute;
        padding: 1rem 1rem 0;
        right: 60px;
        z-index: 800;
        display: none;
    }

    .shortcuts form {
        margin: 0;
    }

    .shortcuts p {
        width: 25rem;
        font-size: 1.5rem;
        line-height: 1.75rem;
        margin: 0 0 1rem;
    }

    .shortcuts .btn {
        margin-bottom: 1rem;
    }

    button#toggle-shortcuts {
        /* Make the button look like text. */
        padding: 0px;
        margin: 0px;
        height: auto;
        border: none;
        color: #ececec;
        text-transform: none;
        font-size: 17.5px;
        font-weight: 600;
        line-height: 32px;
        overflow-wrap: break-word;
    }

    button#toggle-shortcuts:focus {
        outline: 5px auto Highlight;
        outline: 5px auto -webkit-focus-ring-color;
    }
}

@media screen and (max-width: 960px) {
    html {
        font-size: calc((960px - 100vw) / 80 + 10px);
    }

    
    .body-content {
        width: calc(480px + 30vw);
    }

    .tray {
        display: flex;
        justify-content: space-between;
        position: fixed;
        margin: auto;
        left: 0;
        right: 0;
        transform: translateY(calc(5px - 100%));
        transition: transform .1s;
        z-index: 900;
        padding: 2rem calc(150vw - 1160px) 1rem;
    }

    .tray:before {
        content: "";
        text-align: center;
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: -100vh;
        bottom: 0;
        padding-top: 90vh;
        background-color: var(--tray-bg-color);
        color: var(--tray-text-color);
    }

    .tray:after {
        content: "\2630";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: -10px;
        padding-top: 10px;
        height: 64px;
        cursor: grab;
        color: var(--tray-text-color);
        text-align: center;
        font-size: 32px;
        line-height: 40px;
        background-image: linear-gradient(var(--tray-bg-color), var(--tray-bg-color));
        background-size: 100% 48px;
        background-repeat: no-repeat;
        background-origin: content-box;
    }

    .tray div {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-basis: 0;
        z-index: 0;
    }

    .top-tabs {
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0;
        font-size: calc((960px - 100vw) / 16 + 20px);
    }

    /* The team strip, then a row of the page's own buttons under it (not in
       the tray, which holds only the nav links). */
    .actions-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .top-right-actions {
        float: none;
        text-align: center;
        padding-top: 64px;
    }

    .top-left-actions {
        float: none;
        order: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        margin-bottom: 1.5rem;
    }

    .top-left-actions:empty,
    .top-left-actions:not(:has(*)) {
        display: none;
    }

    .flavor {
        margin-left: calc(100vw - 800px);
        margin-right: calc(100vw - 800px);
    }

    a.main-content-anchor {
        top: calc(4rem - 64px); /* .top-right-actions margin-bottom + h1 margin-top - .tray:after height */
    }
}

@media screen and (max-width: 960px) and (any-hover: hover) {
    .tray:not(:hover) {
        transform: translateY(-100%);
    }

    .tray:focus-within {
        transform: none;
    }
}

@media screen and (max-width: 800px) {
    html {
        font-size: 12px;
    }

    
    .body-content {
        width: 90vw;
    }

    .tray {
        padding: 2rem calc((100% - 90vw) / 2) 1rem;
    }

    .top-tabs {
        font-size: 30px;
    }

    .flavor {
        margin-left: 0;
        margin-right: 0;
    }
}

.hunt-icon {
    vertical-align: bottom;
}

.btn .hunt-icon {
    vertical-align: -5px;
}

.list-table {
    min-width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.list-table td, .list-table th {
    padding: 4px 8px;
}

.list-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    border-color: var(--border-color);
}

@media screen {
    .list-table th {
        border: none;
        position: sticky;
        top: 0;
        background-color: var(--sticky-bg-color);
        box-shadow: inset 0 -2px 0 0 var(--border-color);
    }
}

@media screen and (max-width: 960px) {
    .list-table th {
        top: 4rem;
    }
}

.form-section {
    margin: 4rem 0;
}

.form-row, .note {
    background-color: var(--accent-bg-color);
    border-left: 2px solid var(--border-color);
    padding: 1rem 2rem;
    margin: 1rem 0 1rem;
    position: relative;
}

.form-desc label {
    display: inline;
}

.form-row .delete-row {
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2.4rem;
    text-decoration: none;
}

.dynamic-form:only-of-type .delete-row {
    display: none;
}

/* Touch screens: a bigger tap area around the ✕, which stays where it is.
   It grows up and sideways only: just below it is the name field. */
@media (pointer: coarse) {
    .form-row .delete-row {
        --pad-up: 20px;
        --pad-side: 11px;
        padding: var(--pad-up) var(--pad-side) 0;
        margin: calc(-1 * var(--pad-up)) calc(-1 * var(--pad-side)) 0 0;
    }
}

@media (pointer: coarse) and (max-device-width: 600px) {
    .form-row .delete-row {
        --pad-side: 33px;
    }
}

.info-row {
    margin-bottom: 2.4rem;
}

.info-empty {
    color: #777;
    font-style: italic;
}

.info-desc p:last-child {
    margin-bottom: 0;
}

.team-achievement {
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}

.team-achievement::after {
    position: absolute;
    z-index: 2;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    width: max-content;
    max-width: min(24rem, 80vw);
    padding: 0.6rem 0.9rem;
    transform: translate(-50%, 0.25rem);
    border-radius: 0.4rem;
    background: var(--neutral-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    color: #fff;
    content: attr(data-achievement-label);
    font-family: var(--text-font);
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}

.team-achievement:hover::after,
.team-achievement:focus-visible::after {
    transform: translate(-50%, 0);
    opacity: 1;
}

.team-achievement-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

.team-achievement-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    padding: 0.25rem;
    text-align: center;
}

.team-achievement-card::after {
    position: absolute;
    z-index: 2;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    width: max-content;
    max-width: min(24rem, 80vw);
    padding: 0.6rem 0.9rem;
    transform: translate(-50%, 0.25rem);
    border-radius: 0.4rem;
    background: var(--neutral-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    color: #fff;
    content: attr(data-achievement-label);
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}

.team-achievement-card:hover::after,
.team-achievement-card:focus-visible::after {
    transform: translate(-50%, 0);
    opacity: 1;
}

.team-achievement-card-emoji {
    font-size: 5rem;
    line-height: 1;
}

@media screen {
    .info-row > div {
        border: 2px solid var(--border-color);
    }

    .info-row h4 {
        margin: 0;
		text-align: center;
        background-color: var(--border-color);
        color: var(--btn-text-color);
        border: none;
    }

    .info-desc {
        font-size: 2rem;
        padding: 1rem 2rem;
    }
}

@media print, (min-width: 961px) {
    .info-row {
        display: flex;
        gap: 4%;
    }

    .info-row > div {
        flex-grow: 1;
        flex-basis: 0;
    }
}

.no-break {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid;                /* IE 11 */
    display: table;                     /* Actually FF 20+ */
    width: 100%;
}

.submitted-text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Story pictures shrink to fit the paper, keeping their shape. A fixed table
   layout stops .no-break's table from widening to the picture's natural size. */
.story-chunk {
    table-layout: fixed;
}

.story-chunk img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media print {
    .story-chunk {
        border-bottom: 1px solid var(--print-border-color);
    }
}

@media screen {
    .story-chunk {
        margin: 0 auto 3rem;
    }

    .story-chunk a {
        text-decoration: none;
    }
}

.flavor {
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
    font-style: italic;
}

/* Form errors: a paper card with a red rule, like the field panels' green one. */
.errorlist {
    padding: 1rem;
    border: 0;
    border-left: 3px solid currentColor;
    list-style-type: none;
    color: #b21;
    background-color: #fbf9f2;
}

.errorlist li {
    margin-bottom: 0;
    list-style-type: none;
    text-indent: 0;
    padding-left: 0;
}

.solved-title-marker {
    letter-spacing: 0.04rem;
    font-size: 50%;
    color: black;
}

.solved-title-answer {
    color: #4a2;
}

.ansnotif {
    font-family: var(--answer-font);
    font-size: 115%;
}

.stat-entry {
    font-weight: bold;
}

.stat-value {
    font-weight: normal;
}

.current-team {
    font-weight: bold;
}

.meta-stats {
    font-style: italic;
}

.puzzle-erratum {
    color: #c32;
    margin-bottom: 1rem;
}

.hint-table {
    width: 100%;
}

.hint-table th, .hint-table td {
    border: none;
    padding: 0 15px;
}

/* Staff lists of hints have fixed column widths, so a team's long list of
   unlocked characters can't squeeze the puzzle and claim columns to a word
   per line. */
.hint-entries {
    table-layout: fixed;
}

.hint-entries th, .hint-entries td {
    overflow-wrap: anywhere;
}

.hint-entries col:nth-child(1) { width: 27%; }
.hint-entries col:nth-child(2) { width: 35%; }
.hint-entries col:nth-child(3) { width: 24%; }
.hint-entries col:nth-child(4) { width: 14%; }

.hint-entries .btn, .hint-controls .btn {
    white-space: nowrap;
}

/* Narrow screens: a claim button in a hint's row wraps inside its column
   rather than spilling over the links beside it. */
@media screen and (max-width: 960px) {
    .hint-entries .btn {
        white-space: normal;
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
        line-height: 1.2;
        text-align: center;
    }

    /* Desktop-size text and tighter cells, so short links such as
       "(guesses)" and "(both)" fit their column whole. */
    .hint-entries {
        font-size: 19px;
    }

    .hint-entries th, .hint-entries td {
        padding-left: 6px;
        padding-right: 6px;
    }

    .hint-entries col:nth-child(1) { width: 25%; }
    .hint-entries col:nth-child(2) { width: 32%; }
    .hint-entries col:nth-child(3) { width: 24%; }
    .hint-entries col:nth-child(4) { width: 19%; }
}

.hint-table tr:first-child th, .hint-table tr:first-child td, .hint-table td[colspan] {
    padding-top: 12px;
}

.hint-table tr:last-child th, .hint-table tr:last-child td {
    padding-bottom: 12px;
}

.hint-table button {
    margin: 0;
}

.hint-table hr {
    border-color: currentColor;
    opacity: 0.25;
}

.hint-table .submitted-text, .hint-table textarea {
    font-size: 1.5rem;
    line-height: 2rem;
}

.hint-controls {
    margin-bottom: 2rem;
}

.hint-controls > :last-child {
    float: right;
}

.hint-controls form, .hint-controls input {
    margin: 0;
}

.puzzles-list {
    font-size: clamp(16px, 3vw, 24px);
    line-height: clamp(16px, 3vw, 24px);
    width: 100%;
}

.puzzles-list h1 {
    font-size: clamp(30px, 5.5vw, 44px);
    line-height: clamp(30px, 5.5vw, 44px);
}

.puzzles-inner {
    font-size: clamp(10px, 2vw, 16px);
    line-height: clamp(10px, 2vw, 16px);
}

.puzzles-inner b {
    font-size: clamp(11.5px, 2.25vw, 18px);
    line-height: clamp(11.5px, 2.25vw, 18px);
}

.puzzles-section {
    border-radius: 50px;
}
.puzzles-list a {
    text-decoration: none;
}

.puzzles-list h1 {
    text-align: left;
    margin: 0;
}

.puzzles-list th {
    border: none;
}

.puzzles-list tbody:not(:first-child) th {
    padding-top: 2em;
}

.puzzles-list td {
    border: none;
    padding-left: 0;
    padding-right: 0.5ch;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.puzzles-list td:first-child, .puzzles-list td:last-child {
    width: 2rem;
    text-align: right;
    font-weight: bold;
}

.puzzles-list td:nth-child(4) {
    width: 0;
    white-space: nowrap;
}

.puzzles-answer {
    width: 25ch;
    max-width: 30vw;
}

.puzzles-answer > :first-child {
    font-family: var(--answer-font);
}

.puzzles-new {
    display: inline-block;
    font-size: clamp(10px, 2vw, 16px);
    line-height: clamp(14px, 2.75vw, 22px);
    padding: 0 clamp(3px, 0.625vw, 5px);
    vertical-align: top;
    font-family: var(--btn-font);
    border-radius: clamp(5px, 0.875vw, 7px);
}

.handwritten {
    position: relative;
    width: calc(100% - 40px);
    background-color: white;
    padding: 20px 30px;
    padding-left: 70px;
    margin-left: -30px;
    clip-path: polygon(0% 0%, 11% 2%, 25% 0%, 30% 4%, 40% 0%, 48% 2%, 59% 0%, 64% 5%, 78% 0%, 84% 3%, 93% 0%, 96% 5%, 100% 0%, 100% 100%, 95% 98%, 89% 100%, 80% 96%, 74% 100%, 64% 96%, 60% 100%, 51% 97%, 46% 100%, 39% 98%, 31% 100%, 24% 98%, 20% 100%, 15% 98%, 10% 100%, 5% 98%, 0% 100%);
    font-family: var(--handwritten-font);
    font-size: 24px;
    letter-spacing: 0.05em;
    margin-bottom: 36px;
}

.handwritten:before {
    position: absolute;
    left: -14px;
    top: calc(50% - 36px);
    height: 72px;
    width: 72px;
    content: url('../images/paperclip.svg');
}

.handwritten.handwritten-answer:before {
    content: url('../images/paperclip-green.svg');
}

.handwritten.handwritten-erratum:before {
    content: url('../images/paperclip-red.svg');
}

.handwritten-erratum {
    color: #c32;
}

@media screen {
    .puzzles-new {
        color: var(--btn-text-color);
        background-color: var(--btn-bg-color);
        transition: background-color 0.3s;
    }

    .puzzles-new:hover, a:hover .puzzles-new {
        color: var(--btn-text-color);
        background-color: var(--btn-hover-color);
    }
}

@media screen {
    .spoiler.solved-title-answer {
        display: inline-block;
        min-width: 200px;
        text-align: left;
    }

    /* While hidden, every answer bar is the same size, so it doesn't give
       away the answer's length. Hovering reveals and wraps it as usual. */
    .spoiler.solved-title-answer:not(:hover) {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .spoiler:not(:hover) {
        background-color: currentColor;
        color: inherit;
    }
}

.puzzle .copy-only {
    display: none;
}

.body-content {
    background-image: url('/static/images/backgrounds/paper.png');
    background-position: top center;
    background-repeat: repeat-y;
    background-size: 100% auto;
}

#clipboard-button:not(.shown) {
    display: none;
}

.clipboard-button {
    border-radius: 1em;
    bottom: 1.5em;
    cursor: pointer;
    font-size: 1em;
    height: 2em;
    padding: 0 0.8em;
    position: fixed !important;
    right: 1.5em;
    z-index: 100; /* Needed so hover & click work even when button floats outside of its parent. */
}

@media print {
    .clipboard-button {
        display: none;
    }
}

@media screen {
    time[title] {
        text-decoration: underline dotted;
        text-underline-position: under;
        cursor: help;
        text-underline-offset: -0.1em;
    }
}

.chart {
    width: 100%;
    transform: scaleY(-1);
    margin-bottom: 2.4rem;
    position: relative;
    display: block;
}

.chart-area {
    fill: #ECECEC;
    opacity: 0.5;
}

.chart-line {
    stroke: var(--accent-color);
    stroke-width: 0.25%;
    fill: none;
}

@media print {
    .chart {
        display: none;
    }
}

footer {
    text-align: center;
    opacity: 0.5;
    font-size: 80%;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    height: 30px;
    z-index: 2;
}

@media print {
    footer {
        display: none;
    }
}

.dialogue {
    position: absolute;
    bottom: 25px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    z-index: 10000;
    justify-content: center;
    text-align: center;
}

.dialog-options {
    width: 50%;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: auto;
    margin-top: 10px;
    font-size: 3.2vmin;
    line-height: 3vmin;
    align-items: stretch;
    font-weight: bold;
}

.dialog-option {
    background-color: #5E3583;
    cursor: pointer;
    padding: 10px;
}

.dialog-option:hover {
    outline: 3px solid white;
}

.dialog-box {
    margin: auto;
    pointer-events: none;
    background-color:rgba(0,0,0,0.8);
    color:white;
    width:60%;
    max-height: 20%;
    min-height: 20%;
    outline: 2px dotted white;
    bottom: 25px;
    z-index:10000;
    padding-inline: 10px;
    padding-block: 10px;
    display: flex;
    align-items:center;
    word-wrap: break-word;
}

.dialog-box-puzzle {
    margin: auto;
    pointer-events: none;
    background-color:rgba(0,0,0,0.8);
    color:white;
    width:90%;
    max-height: 20%;
    min-height: 20%;
    outline: 2px dotted white;
    bottom: 25px;
    z-index:10000;
    padding-left: 20px;
    padding-block: 10px;
    display: flex;
    align-items:center;
    word-wrap: break-word;
}

.ghost {
    cursor: pointer;
}

.dialog-image {
    align-items: center;
    justify-content: center;
    height: 10vmin;
    margin: auto;
    max-width: 100%;
    margin-left: 0px;
    margin-right: 5px;
}

.dialog-box-puzzle .dialog-image {
    height: 8rem;
}


.dialog-text {
    font-size: 3.2vmin;
    line-height: 3vmin;
    text-align: left;
    margin-inline: 10px;
}

.dialog-box-puzzle .dialog-text {
    font-size: 2.4rem;
    line-height: 2.25rem;
    text-align: left;
    margin-inline: 10px;
}

.nav-box {
    position: relative;
    width: 75%;
    margin: auto;
}

.darken-bg {
    /* Fallback color */
    background-color: rgb(0, 0, 0);

    /* Black w/opacity/see-through */
    background-color: rgba(32, 32, 32, 0.8);
}

.lighten-bg {
    /* Fallback color */
    background-color: rgb(255, 255, 255);

    /* White w/opacity/see-through */
    background-color: rgba(255, 255, 255, 0.2);
}

.blur-bg {
    backdrop-filter: blur(2px);
}

.top-right-actions {
    color: #ececec;
}

.toast {
    font-family: var(--text-font);
}

.puzzles-list {
    border: 2px solid var(--border-color);
    background-color: rgba(32,32,32,0.8);
    border-radius: 16px;
    border-collapse: separate;
}

.puzzles-list h1 {
    letter-spacing: 0;
    background-color:rgba(0, 0, 0, 0);
    border: none;
    padding: 1rem;
}

.puzzles-list tbody th {
    border-radius: 11px 11px 0px 0px;
    border-left: 25px solid var(--accent-color);
    border-right: 25px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    background-color: var(--accent-bg-color);
}

.puzzles-list tr:not(:last-child) td:not(:last-child):not(:first-child) {
    border-bottom: 1px solid var(--accent-color);
}

.puzzles-list td:nth-child(2) {
    padding-left: clamp(4px, 0.75vw, 6px);
}

.puzzles-section tr:first-child td {
    padding-top: clamp(13px, 2.5vw, 20px);
}

.puzzles-section tr:last-child td {
    padding-bottom: clamp(13px, 2.5vw, 20px);
}

#android-chrome {
    display: none;
}

/* The team's status sits on a paper strip on the desk, in one ink colour;
   Logout, Login and Register stay on the desk beside it. */
@media screen and (min-width: 961px) {
    .top-right-actions {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    /* The button rows are wider than the paper, so a puzzle page's buttons,
       the team strip and Logout fit on one row. */
    .inner-column.actions-column {
        width: min(1200px, 94vw);
    }

    /* The page's own buttons (left) share the strip's centre line, and keep a
       gap from it when the window is narrow enough for them to meet. */
    .top-left-actions {
        margin-top: 4px;
    }

    .top-right-actions {
        margin-left: 12px;
    }

    .top-right-actions > .logout-form,
    .top-right-actions > .btn,
    .top-right-actions .logout-form .btn {
        display: flex;
        margin: 0;
    }

}

/* The team strip is a paper card in one ink colour at every width; on narrow
   screens it's centred and may wrap onto two lines. */
@media screen {
    /* The Shortcuts panel opens just below the 40px strip, on its own dark
       background, at every width. An absolutely positioned child of a flex row
       is otherwise centred on the row, so a tall panel would cover the header
       and its own toggle. (It stays positioned against the page: the nav clips
       overflow.) */
    .team-status .shortcuts {
        align-self: flex-start;
        margin-top: 48px;
        color: #ececec;
        font-size: 15px;
        font-weight: normal;
        line-height: 32px;
    }

    .team-status {
        --tab-ink: #2f2a1f;
        display: inline-flex;
        gap: 14px;
        align-items: center;
        height: 40px;
        padding: 0 12px;
        border-radius: 4px;
        color: var(--tab-ink);
        background: #f1efe9 url('/static/images/backgrounds/paper.png') center / 960px auto;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
        font-size: 17.5px;
        font-weight: 600;
        line-height: 1;
    }

    .team-status .team-name,
    .team-status .current-stat,
    .team-status button#toggle-shortcuts {
        color: var(--tab-ink);
        font-size: 17.5px;
        font-weight: 600;
        line-height: 1;
    }

    .team-status .current-stat {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }

    .team-status .current-stat :is(svg, img) {
        padding-right: 0 !important;
    }

    .team-status .current-stat-label {
        font-size: 2.2rem;
        line-height: 1;
    }

    /* Staff queues that need answering stand out in red. */
    .team-status a.current-stat.needs-attention {
        color: var(--link-text-color);
    }

    .team-status a:is(.team-name, .current-stat):hover,
    .team-status a:is(.team-name, .current-stat):focus {
        color: var(--link-hover-color);
    }
}

@media screen and (max-width: 960px) {
    .team-status {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        min-height: 40px;
        max-width: 100%;
        box-sizing: border-box;
        padding: 4px 12px;
    }

    .top-right-actions .logout-form {
        margin-left: 8px;
    }
}

/* The nav tabs never run together: as wide as the button rows, a minimum gap
   between tabs, and a second row if they still don't fit. */
@media screen and (min-width: 961px) {
    .navbar-coloring .inner-column {
        width: min(1200px, 94vw);
    }

    .top-tabs {
        flex-wrap: wrap;
        column-gap: 1.5em;
        row-gap: 0;
    }
}

/* Times swap to the reader's local time when tapped or clicked (js/time.js). */
time.toggle-time {
    cursor: pointer;
}

/* Floating buttons (Copy to clipboard, the Ko-fi widget) float in the margin
   beside the paper, never over it. --paper-margin is the margin's width. */
@media screen {
    :root {
        --paper-margin: calc((100vw - min(80vw, 960px)) / 2);
    }

    /* Centred in the margin whatever its width: its centre sits half a margin
       in from the window's edge. */
    .btn.clipboard-button {
        position: fixed !important;
        right: max(20px, calc(var(--paper-margin) / 2));
        transform: translateX(50%);
        bottom: 1.5em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        font-size: 18px;
        line-height: 1;
    }

    .btn.clipboard-button .clipboard-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media screen and (max-width: 960px) {
    :root {
        --paper-margin: calc((100vw - (480px + 30vw)) / 2);
    }
}

@media screen and (max-width: 800px) {
    :root {
        --paper-margin: 5vw;
    }
}

/* With room in the margin (and a gap either side), the full label. */
@media screen and (min-width: 1520px) {
    .btn.clipboard-button {
        width: auto;
        height: 2em;
        padding: 0 .8em;
        border-radius: 1em;
        font-size: 1.9rem;
    }

    .btn.clipboard-button .clipboard-icon {
        display: none;
    }

    .btn.clipboard-button .clipboard-label {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }
}

/* The Ko-fi widget on About: centred in the left margin when it fits. On
   narrower windows it keeps Ko-fi's own place in the bottom-left corner,
   over the paper's edge. */
@media screen and (min-width: 1440px) {
    .floatingchat-container-wrap,
    .floatingchat-container-wrap-mobi {
        left: calc((var(--paper-margin) - 195px) / 2) !important;
    }
}

/* In puzzles and solutions a long unbroken string (a bit pattern, a list
   without spaces) never breaks mid-string, which could change its meaning;
   pages where that's wider than the paper are fixed one by one. */
.puzzle-main {
    overflow-wrap: normal;
}