@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Thin'), url('./../fonts/OutfitVariableFont_wght1.woff') format('woff');
    font-display: swap;
    font-weight: 100;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit ExtraLight'), url('./../fonts/OutfitExtraLight.woff') format('woff');
    font-display: swap;
    font-weight: 200;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Light'), url('./../fonts/OutfitLight1.woff') format('woff');
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Regular'), url('./../fonts/OutfitRegular.woff') format('woff');
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Medium'), url('./../fonts/OutfitMedium.woff') format('woff');
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit SemiBold'), url('./../fonts/OutfitSemiBold.woff') format('woff');
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Bold'), url('./../fonts/OutfitBold.woff') format('woff');
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit ExtraBold'), url('./../fonts/OutfitExtraBold.woff') format('woff');
    font-display: swap;
    font-weight: 800;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    src: local('Outfit Black'), url('./../fonts/OutfitBlack.woff') format('woff');
    font-display: swap;
    font-weight: 900;
}

@font-face {
    font-family: 'Figtree Light';
    font-style: normal;
    font-weight: normal;
    src: local('Figtree Light'), url('./../fonts/Figtree[wght].woff') format('woff');
    font-display: swap;
}


@font-face {
    font-family: 'Figtree Light';
    font-style: italic;
    font-weight: normal;
    src: local('Figtree Light Italic'), url('./../fonts/Figtree-Italic[wght].woff') format('woff');
    font-display: swap;
}

:root {
    --primary: 255, 112, 98;
    --secondary: 255, 204, 62;
    --muted: 243, 240, 231;
    --cream: 255, 253, 247;
    --navy: 20, 50, 79;
    --coral: 255, 112, 98;
    --mint: 93, 201, 156;
    --sunny: 255, 204, 62;
}

body {
    font-family: 'Figtree Light', sans-serif;
    background-color: #fffdf7;
    color: #252131;
}

@media (min-width: 1920px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1420px;
    }
}

.font-outfit {
    font-family: 'Outfit', sans-serif;
}

.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

.header .nav-link {
    --bs-nav-link-padding-x: 0.75rem;
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-color: rgba(var(--navy), 1);
    --bs-nav-link-hover-color: rgba(var(--primary), 1);
}

.header-search {
    width: 100%;
}

/* Mobile: separate the collapsed menu from the content and enlarge the tap area */
@media (max-width: 767.98px) {
    .header .navbar-collapse {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(var(--navy), 0.15);
    }

    .header .nav-link {
        --bs-nav-link-padding-x: 0;
        --bs-nav-link-padding-y: 0.75rem;
    }
}

/* Desktop: cap the search field width so it cannot squeeze the nav */
@media (min-width: 768px) {
    .header-search {
        width: 12rem;
        flex-shrink: 0;
    }
}

.aside {
    width: 20rem;
}

.aside-title a {
    text-decoration: none;
    color: rgba(var(--navy), 1);
}

.aside-title a:hover {
    color: rgba(var(--primary), 1);
}

.aside-title .badge {
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 1rem;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.35rem;
    background-color: rgba(var(--mint), 0.15);
    color: rgba(var(--navy), 0.7);
}

.aside-search .form-control {
    --bs-body-bg: #fdfdfd;
    --bs-body-color: rgba(var(--navy), 0.4);
    --bs-border-color: rgba(var(--navy), 0.15);
    font-size: 0.875rem;
    font-family: 'Figtree Light', sans-serif;
    padding: .5rem .75rem
}

.aside-search .form-control:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: none;
}

.aside-group .btn-random {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), 0.9);
    --bs-btn-active-bg: rgba(var(--primary), 0.8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.aside-group .btn-submit {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--secondary), 1);
    --bs-btn-hover-bg: rgba(var(--secondary), 0.9);
    --bs-btn-active-bg: rgba(var(--secondary), 0.8);
    --bs-btn-color: #14324f;
    --bs-btn-hover-color: #14324f;
    --bs-btn-active-color: #14324f;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.aside-group .btn-random svg,
.aside-group .btn-submit svg {
    width: 1rem;
    height: 1rem;
}

.aside-categories .nav-link {
    --bs-nav-link-padding-x: 0.75rem;
    color: rgba(var(--navy), 0.7);
}

.aside-categories .nav-link:hover,
.aside-categories .nav-link.active {
    background: rgba(var(--navy), 1);
    color: rgba(var(--cream), 1);
}

.aside-tools a {
    display: block;
    color: rgba(var(--navy), 0.7);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.aside-tools a span {
    padding: 0.5rem;
}

.aside-tools a span svg {
    width: 1rem;
    height: 1rem;
}

.aside-tools a span.icon-fav {
    background: rgba(var(--sunny), .15);
}

.aside-tools a span.icon-blog {
    background: rgba(var(--primary), .25);
}

.aside-tools a em {
    color: rgba(var(--navy), 0.4);
    font-style: normal;
}

.aside-tools a:hover {
    color: rgba(var(--primary), 1);
}

.hero-surface {
    background: linear-gradient(135deg, rgba(var(--navy), 1), rgba(var(--navy), 1));
    color: rgba(var(--cream), 1);
}

.hero-surface .hero-inner {
    max-width: 30rem;
}

.hero-surface .badge {
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 1rem;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.35rem;
    background-color: rgba(var(--primary), 1);
}

.hero-surface p {
    color: rgba(var(--cream), 0.7);
}

.hero-surface .btn-play {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--secondary), 1);
    --bs-btn-hover-bg: rgba(var(--secondary), 0.9);
    --bs-btn-active-bg: rgba(var(--secondary), 0.8);
    --bs-btn-color: #14324f;
    --bs-btn-hover-color: #14324f;
    --bs-btn-active-color: #14324f;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.hero-surface .btn-surprise {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--cream), 1);
    --bs-btn-hover-bg: rgba(var(--cream), 0.9);
    --bs-btn-active-bg: rgba(var(--cream), 0.8);
    --bs-btn-color: #14324f;
    --bs-btn-hover-color: #14324f;
    --bs-btn-active-color: #14324f;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.hero-surface .btn-surprise svg {
    width: 1rem;
    height: 1rem;
}

.choice-title p {
    color: rgba(var(--primary), 1);
}

.choice-title span {
    color: rgba(var(--navy), .5);
}

.choice-item {
    position: relative;
}

.choice-item a {
    text-decoration: none;
}

.choice-item .choice-info h3 {
    color: rgba(var(--navy), 1);
}

.choice-item .choice-info p {
    color: rgba(var(--navy), .5);
}

.choice-item .btn-star {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-bg: rgb(253, 253, 253, .9);
    --bs-btn-hover-bg: rgb(253, 253, 253, 1);
    --bs-btn-active-bg: rgb(253, 253, 253, .9);
    --bs-btn-color: rgba(var(--primary), 1);
    --bs-btn-hover-color: rgba(var(--primary), 1);
    --bs-btn-active-color: rgba(var(--primary), 1);
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.choice-icon {
    width: 4rem;
    height: 4rem;
}

.featured-title p {
    color: rgba(var(--navy), .5);
}

.featured-item span {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
    text-align: center;
    font-weight: 600;
}

.featured-item .icon-one {
    background: rgba(var(--primary), .15);
    color: rgba(var(--primary), 1);
}

.featured-item .icon-two {
    background: rgba(var(--mint), .20);
}

.featured-item .icon-three {
    background: rgba(var(--sunny), .25);
}

.featured-item p {
    color: rgba(var(--navy), .5);
}

.puzzle-title p {
    color: rgba(var(--mint), 1);
}

.puzzle-title span {
    color: rgba(var(--navy), .5);
}

.puzzle-item {
    transition: border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.puzzle-item:hover {
    transform: translateY(-0.25rem);
    --bs-border-color: rgba(var(--primary), 1);
}

.puzzle-item a {
    text-decoration: none;
}

.puzzle-item img {
    width: 3.25rem;
    height: 3.25rem;
}

.puzzle-item .puzzle-info h3 {
    color: rgba(var(--navy), 1);
}


.puzzle-item .btn-star {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-bg: rgb(253, 253, 253, .9);
    --bs-btn-hover-bg: rgb(253, 253, 253, 1);
    --bs-btn-active-bg: rgb(253, 253, 253, .9);
    --bs-btn-color: rgba(var(--primary), 1);
    --bs-btn-hover-color: rgba(var(--primary), 1);
    --bs-btn-active-color: rgba(var(--primary), 1);
}

.blog-title p {
    color: rgba(var(--primary), 1);
}

.blog-title a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.blog-title a:hover {
    color: rgba(var(--primary), 1);
}

.blog-item {
    text-decoration: none;
}

.blog-item .blog-info h3 {
    color: rgba(var(--navy), 1);
}

.blog-item .blog-info p {
    color: rgba(var(--navy), .5);
}

.footer-line {
    height: 0.5rem;
}

.footer-line .bg-coral {
    background-color: rgba(var(--coral), 1);
}

.footer-line .bg-sunny {
    background-color: rgba(var(--sunny), 1);
}

.footer-line .bg-mint {
    background-color: rgba(var(--mint), 1);
}

.footer-line .bg-navy {
    background-color: rgba(var(--navy), 1);
}

.footer-title p {
    color: rgba(var(--navy), .5);
}

.footer-nav .nav-link {
    --bs-nav-link-padding-x: 0.75rem;
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-color: rgba(var(--navy), 1);
    --bs-nav-link-hover-color: rgba(var(--primary), 1);
}

.footer-copy p {
    color: rgba(var(--navy), .5);
}

.footer-copy a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.footer-copy a:hover {
    color: rgba(var(--primary), 1);
}

.archive-title span {
    color: rgba(var(--primary), .5);
}

.submit-title p {
    color: rgba(var(--primary), 1);
}

.submit-title strong {
    color: rgba(var(--navy), .5);
}

.comment-stats a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.comment-stats a:hover {
    color: rgba(var(--primary), 1);
}

.submit-main .form-control {
    --bs-body-bg: #fdfdfd;
    --bs-body-color: rgba(var(--navy), 1);
    --bs-border-color: rgba(var(--navy), .15);
    font-size: .875rem;
}

.submit-main .form-control:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: none;
}

.submit-main .dropdown-toggle {
    background: #fdfdfd;
    border-color: rgba(var(--navy), .15);
}

.submit-main .dropdown-toggle.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.submit-main .dropdown-menu {
    max-height: 16rem;
    overflow-y: auto;
}

#submit-toast-container {
    z-index: 1090;
}

#comment-toast-container {
    z-index: 1090;
}

.submit-main .btn-submit {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), 0.9);
    --bs-btn-active-bg: rgba(var(--primary), 0.8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.comment-form .form-control {
    --bs-body-bg: #fdfdfd;
    --bs-body-color: rgba(var(--navy), 1);
    --bs-border-color: rgba(var(--navy), .15);
    font-size: .875rem;
}

.comment-form .form-control:focus {
    border-color: rgba(var(--primary), 1);
    box-shadow: none;
}

.comment-form .form-control::placeholder {
    color: rgba(var(--navy), .4);
}

.comment-form .respond a {
    color: rgba(var(--primary), 1);
}

.comment-form .btn-comment {
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), .9);
    --bs-btn-active-bg: rgba(var(--primary), .8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 700;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-avatar img {
    border-radius: 3rem;
}

.comment-author strong a {
    color: rgba(var(--navy), 1);
    text-decoration: none;
}

.comment-author small a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.comment-content {
    font-size: 0.875rem;
    color: rgba(var(--navy), .7);
    line-height: 1.6;
}

.comment-content p {
    margin: 0;
}

.back-home a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.back-home a:hover {
    color: rgba(var(--primary), 1);
}

.post-icon {
    width: 6rem;
    height: 6rem;
}

.post-bookmark {
    top: 0;
    right: 2rem;
    background: #ffffff;
    padding: 0.5rem;
    box-shadow: 0 0 0.25rem rgba(var(--navy), .1);
}

.post-bookmark svg {
    width: 1.25rem;
    height: 1.25rem;
}

.post-header p {
    color: rgba(var(--primary), 1);
}

.post-header h1 {
    line-height: 1.5;
}

.post-header small {
    color: rgba(var(--navy), .5);
}

.post-rate .btn-rate {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-color: rgba(var(--navy), 0.1);
    --bs-btn-active-border-color: transparent;
}

/* Bootstrap's .btn.active repaints the button itself, so the star colour has to be set
   on the icon or a picked star would turn the button's own active colour. */
.post-rate .btn-rate svg {
    color: rgba(var(--navy), .15);
    transition: color .15s ease-in-out;
}

.post-rate .btn-rate:hover svg,
.post-rate .btn-rate.active svg {
    color: rgba(var(--secondary), 1);
}

/* Stars are disabled while the rating is being saved - keep them from fading out. */
.post-rate .btn-rate:disabled {
    opacity: 1;
}

.post-rate .post-rate-value {
    color: rgba(var(--navy), .5);
}

.post-content {
    color: rgba(var(--navy), .8);
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* Markdown output: everything the editor can produce, on the site's tokens */

.post-content>*:first-child {
    margin-top: 0;
}

.post-content>*:last-child {
    margin-bottom: 0;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    line-height: 1.35;
    color: rgba(var(--navy), 1);
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.post-content h1 {
    font-size: 1.75rem;
}

.post-content h2 {
    font-size: 1.5rem;
}

.post-content h3 {
    font-size: 1.25rem;
}

.post-content h4 {
    font-size: 1rem;
}

.post-content h5 {
    font-size: .9375rem;
}

.post-content h6 {
    font-size: .875rem;
}

.post-content p {
    margin-bottom: 1rem;
}

.post-content a {
    color: rgba(var(--primary), 1);
    text-decoration: underline;
    text-underline-offset: .2em;
    transition: color .3s ease-in-out;
}

.post-content a:hover {
    color: rgba(var(--navy), 1);
}

/* Lift emphasis off the .8 body colour so it actually reads as emphasis */
.post-content strong,
.post-content b {
    font-weight: 700;
    color: rgba(var(--navy), 1);
}

.post-content em,
.post-content i {
    font-style: italic;
}

.post-content del {
    color: rgba(var(--navy), .4);
}

.post-content ul,
.post-content ol {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.post-content li {
    margin-bottom: .375rem;
}

.post-content li::marker {
    color: rgba(var(--primary), 1);
}

.post-content li>ul,
.post-content li>ol {
    margin-top: .375rem;
    margin-bottom: 0;
}

.post-content blockquote {
    margin: 1.5rem 0;
    padding: .75rem 1.25rem;
    border-left: 3px solid rgba(var(--primary), .6);
    border-radius: 0 .25rem .25rem 0;
    background: rgba(var(--muted), 1);
    color: rgba(var(--navy), .7);
}

.post-content blockquote>*:last-child {
    margin-bottom: 0;
}

.post-content code {
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: .875em;
    padding: .15em .4em;
    border-radius: .25rem;
    background: rgba(var(--muted), 1);
    color: rgba(var(--navy), 1);
}

.post-content pre {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    background: rgba(var(--navy), 1);
    color: rgba(var(--cream), .9);
    font-size: .875rem;
    line-height: 1.6;
    overflow-x: auto;
}

/* The dark surface already carries the block, so drop the inline chip */
.post-content pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.post-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: .5rem;
}

.post-content figure {
    margin: 1.5rem 0;
}

.post-content figcaption {
    margin-top: .5rem;
    font-size: .875rem;
    text-align: center;
    color: rgba(var(--navy), .5);
}

.post-content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid rgba(var(--navy), .15);
}

/* Shrink to the table's own width and scroll, so a wide table cannot blow
   out the column on small screens */
.post-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
    font-size: .875rem;
}

.post-content th,
.post-content td {
    padding: .5rem .75rem;
    border: 1px solid rgba(var(--navy), .15);
    text-align: left;
}

.post-content th {
    background: rgba(var(--muted), 1);
    font-weight: 600;
    color: rgba(var(--navy), 1);
}

.post-content sup,
.post-content sub {
    font-size: .75em;
    line-height: 0;
}

.related-puzzle {
    background: rgba(var(--sunny), .15);
}

.near-item {
    display: block;
    text-decoration: none;
}

.near-item p {
    color: rgba(var(--mint), 1);
}

.near-item h3 {
    color: rgba(var(--navy), 1);
    transition: color .3s ease-in-out;
}

.near-item:hover h3 {
    color: rgba(var(--primary), 1);
}

.game-title p {
    color: rgba(var(--primary), 1);
}

.game-title small {
    color: rgba(var(--navy), .7);
}

.level-item {
    background: rgba(var(--muted), 1);
}

.level-item span {
    color: rgba(var(--navy), .5);
}

.game-tools .btn-play {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-bg: rgba(var(--primary), 1);
    --bs-btn-hover-bg: rgba(var(--primary), 0.9);
    --bs-btn-active-bg: rgba(var(--primary), 0.8);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.game-tools .btn-play svg {
    width: 1rem;
    height: 1rem;
}

.game-tools .btn-save {
    --bs-btn-border-color: rgba(var(--navy), .15);
    --bs-btn-hover-border-color: rgba(var(--navy), .15);
    --bs-btn-hover-bg: rgba(var(--mint), 1);
    --bs-btn-font-color: rgba(var(--navy), 1);
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.game-tools .btn-save.active {
    background: rgba(var(--mint), 1);
    --bs-btn-font-color: #fdfdfd;
}

.page-navigator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.page-navigator li {
    margin: 0;
}

.page-navigator a,
.page-navigator span {
    display: flex;
    min-width: 2.25rem;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: .35rem .65rem;
    border: 1px solid rgba(var(--navy), .15);
    border-radius: .35rem;
    color: rgba(var(--navy), .7);
    background: #fdfdfd;
    font-size: .875rem;
    line-height: 1;
    text-decoration: none;
    transition: border-color .2s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out;
}

.page-navigator a:hover,
.page-navigator a:focus-visible {
    border-color: rgba(var(--primary), 1);
    color: rgba(var(--primary), 1);
    background: rgba(var(--primary), .08);
}

.page-navigator li.current a,
.page-navigator li.current span {
    border-color: rgba(var(--primary), 1);
    color: #fdfdfd;
    background: rgba(var(--primary), 1);
    font-weight: 600;
}

.page-navigator li:not(.current) span {
    border-color: transparent;
    background: transparent;
    color: rgba(var(--navy), .45);
}

.page-navigator li.next {
    margin-left: .25rem;
}

.page-navigator li.next a {
    padding-right: .8rem;
    padding-left: .8rem;
}

@media (max-width: 575.98px) {
    .page-navigator {
        gap: .375rem;
        margin-top: 1.5rem;
    }

    .page-navigator a,
    .page-navigator span {
        min-width: 2rem;
        min-height: 2rem;
        padding: .3rem .5rem;
        font-size: .8125rem;
    }

    .page-navigator li.next {
        margin-left: 0;
    }
}

.saved-title p {
    color: rgba(var(--primary), 1);
}

.saved-title a {
    color: rgba(var(--navy), .5);
    text-decoration: none;
}

.options-modal {
    --bs-modal-header-padding: 1.25rem 1.5rem 0;
    --bs-modal-header-border-width: 0;
}

.options-modal .modal-header h2 {
    color: rgba(var(--navy), 1);
}

.options-modal .modal-header p {
    color: rgba(var(--navy), .5);
}

.options-modal .btn-options {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-border-color: rgba(var(--navy), .1);
    --bs-btn-color: #fdfdfd;
    --bs-btn-hover-color: #fdfdfd;
    --bs-btn-active-color: #fdfdfd;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 700;
}

.options-modal .btn-options:hover,
.options-modal .btn-options.active {
    border: 1px solid rgba(var(--primary), 1);
}

.options-modal .options-content p {
    color: rgba(var(--navy), 1);
}

.options-modal .options-content span {
    color: rgba(var(--navy), .5);
    font-size: 0.875rem;
}

.options-modal .options-icon {
    display: inline-flex;
    background: rgba(var(--primary), .1);
    color: rgba(var(--primary), 1);
}

.options-modal .options-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.game-offcanvas {
    --bs-offcanvas-width: min(92vw, 1100px);
}

.game-offcanvas .offcanvas-body {
    min-height: 0;
    background: #fff;
}

.game-offcanvas iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 4.25rem);
    min-height: 24rem;
    border: 0;
}

@media (max-width: 575.98px) {
    .game-offcanvas {
        --bs-offcanvas-width: 100vw;
    }

    .game-offcanvas iframe {
        height: calc(100vh - 3.75rem);
        min-height: 18rem;
    }
}

.card-title .card-num {
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.5rem;
    text-align: center;
    background: rgba(var(--primary), .15);
    color: rgba(var(--primary), 1);
}

.card-title a {
    color: rgba(var(--navy), 1);
    text-decoration: none;
}

.card-title a span {
    color: rgba(var(--navy), .5);
}

.card-content ul li {
    transition: background-color .2s ease-in-out;
}

.card-content ul li:hover {
    background-color: rgba(var(--navy), .1);
}



.card-content .card-icon {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    background: rgba(var(--muted), 1);
    transition: transform .2s ease-in-out;
}

.card-content ul li a {
    font-size: 0.875rem;
    text-decoration: none;
    color: rgba(var(--navy), 1);
    transition: color .2s ease-in-out;
}

.card-content ul li a:hover {
    color: rgba(var(--primary), 1);
}

.card-content ul li a:hover .card-icon {
    transform: scale(1.1);
}

.card-content .btn-star {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-bg: rgb(253, 253, 253, .9);
    --bs-btn-hover-bg: rgb(253, 253, 253, 1);
    --bs-btn-active-bg: rgb(253, 253, 253, .9);
    --bs-btn-color: rgba(var(--primary), 1);
    --bs-btn-hover-color: rgba(var(--primary), 1);
    --bs-btn-active-color: rgba(var(--primary), 1);
    flex-shrink: 0;
}

.card-content .btn-star.active {
    background: rgba(var(--primary), .12);
}

.build-title p {
    color: rgba(var(--mint), 1);
}