/* Same Times font, coloured text, plain links and thin table frames as incl/header.php. */
.campus, .campus-dashboard, .campus-shelf, .campus-clubs {
    box-sizing: border-box;
    width: 95%;
    max-width: 760px;
    margin: 16px auto;
    padding: 0;
    color: #339933;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: normal;
    text-align: center;
}
.campus *, .campus-dashboard *, .campus-shelf * { box-sizing: border-box; }
.campus h1, .campus-dashboard h2, .campus-clubs h2 { color: #ff0000; font-size: 20px; font-weight: normal; margin: 16px 0; }
.campus h2 { color: #0033cc; font-size: 18px; font-weight: normal; margin: 16px 0 12px; }
.campus h3 { color: #006600; font-size: 16px; margin: 10px 0; }
.campus p, .campus-dashboard p, .campus-shelf p, .campus-clubs p { margin: 12px 0; }
.campus a, .campus-dashboard a, .campus-shelf a, .campus-clubs a { color: #4444aa; text-decoration: none; }
.campus a:hover, .campus-dashboard a:hover, .campus-shelf a:hover, .campus-clubs a:hover { color: #aa44aa; text-decoration: underline; }
.campus a:active { color: #44aa44; }
.campus-heading { margin-bottom: 12px; }
.campus-energy { color: #0000cc; }
.campus-small { font-size: 14px; }
.campus-tabs { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px; row-gap: 4px; margin: 16px 0 20px; }
.campus-tabs a::before { content: "[ "; }
.campus-tabs a::after { content: " ]"; }
.campus-tabs a[aria-current=page] { color: #006600; font-weight: bold; }
.campus-directory { width: 100%; border-collapse: collapse; border: 1px solid #6600cc; text-align: left; }
.campus-directory th, .campus-directory td { border: 1px solid #6600cc; padding: 8px; font-weight: normal; }
.campus-directory thead th { color: #990000; text-align: center; }
.campus-directory thead th:first-child, .campus-directory tbody th { width: 30%; text-align: center; }
.campus-grid { margin: 14px 0; }
.campus-card { min-width: 0; margin: 12px 0; padding: 8px; border: 1px solid #6600cc; text-align: center; overflow-wrap: anywhere; }
.campus-shelf { width: 90%; padding: 8px; border: 1px dotted #2222cc; background: #ffffff; }
.campus-clubs { border: 0; }
.campus-form { max-width: 480px; margin: 12px auto; }
.campus-form fieldset { min-width: 0; border: 1px solid #6600cc; padding: 8px; text-align: left; }
.campus-form legend { color: #0000cc; padding: 0 4px; }
.campus-form label { display: block; margin: 6px 0; cursor: pointer; }
.campus-form input[type=radio], .campus-form input[type=checkbox] { vertical-align: middle; margin-right: 5px; }
.campus-form select, .campus-form input[type=text] { max-width: 100%; }
.campus-form button { margin-top: 8px; max-width: 100%; white-space: normal; cursor: pointer; }
.campus-form button:disabled { cursor: default; }
.campus-meter { max-width: 400px; margin: 10px auto; color: #0000cc; }
.campus progress { display: block; width: 100%; height: 10px; margin: 5px 0; appearance: none; border: 1px solid #6600cc; border-radius: 0; background: #ffffff; }
.campus progress::-webkit-progress-bar { background: #ffffff; }
.campus progress::-webkit-progress-value { background: #0066cc; }
.campus progress::-moz-progress-bar { background: #0066cc; }
.campus-notice, .campus-hint { padding: 8px; border: 1px dotted #2222cc; color: #0000cc; background: #ffffff; }
.campus-error { color: #ff0000; border-color: #ff0000; }
.campus-done { color: #006600; }
.campus-badge { display: inline-block; margin-right: 8px; font-size: 18px; color: #660066; }
.campus-locked { color: #666666; }
.campus-eyebrow { color: #990066; }
.campus-timeline { padding-left: 22px; text-align: left; }
.campus-timeline li { margin-bottom: 16px; }
.campus-timeline time { color: #330066; font-size: 14px; }
.campus-ranking { max-width: 480px; margin: 12px auto; padding-left: 24px; text-align: left; }
.campus-ranking li { padding: 4px; }
.campus-ranking strong { margin-left: 16px; color: #0000cc; }
.star-map { color: #999999; font-size: 20px; line-height: 1.2; }
.discovered .star-map { color: #0000cc; }
.robot-track { position: relative; height: 36px; max-width: 360px; margin: 12px auto; border-bottom: 1px dashed #6600cc; }
.robot-runner { position: absolute; left: 10%; bottom: 0; color: #660066; font-size: 24px; }
.robot-finish { position: absolute; right: 5%; bottom: 0; color: #006600; font-size: 24px; }
@media (max-width: 760px) {
    body.game-page { padding-bottom: calc(174px + env(safe-area-inset-bottom)); }
    .campus, .campus-dashboard, .campus-clubs { width: 100%; padding: 0 4px; }
    .campus-directory { table-layout: fixed; }
    .campus-directory thead th:first-child, .campus-directory tbody th { width: 34%; }
    .campus-directory td, .campus-directory th { padding: 6px; overflow-wrap: anywhere; }
    .campus-tabs { column-gap: 8px; row-gap: 0; }
    .campus-tabs a, .campus-link, .campus-directory a { display: inline-flex; align-items: center; min-height: 44px; }
    .campus-form label { padding: 8px 0; }
    .campus-form select { width: 100%; }
    .campus-form input[type=radio], .campus-form input[type=checkbox] { width: 18px; height: 18px; }
}