/* Outfit, the settings screen's font (SIL Open Font License, fonts/outfit/OFL.txt), served from the
   site. Browsers fetch it only when a page uses it. */
@font-face {
    font-family: Outfit;
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/outfit/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Outfit;
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/outfit/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Theme shared by the server pages and the game. */
:root {
    --nav-height: 3.25rem;
    --footer-height: 1.9rem;
    --accent: #b8321f;
    --panel-bg: rgba(255, 250, 240, 0.9);
    --panel-text: #2b2116;
    --panel-rule: rgba(43, 33, 22, 0.15);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-height: 100%;
}

/* The player's chosen background (see Backgrounds.cs); set early by a script in App.razor. */
body {
    /* Header, page, footer: the footer sits at the bottom of the window when the page is short. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: #3b2414 var(--page-background, url("backgrounds/dragon-valley.jpg")) center / cover fixed no-repeat;
}

/* Ordinary pages (account, leaderboards, stats) sit on a readable card over the background. */
.content {
    width: 100%;
    max-width: 60rem;
    margin: 1.5rem auto;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    background: var(--panel-bg);
    color: var(--panel-text);
}

/* The game uses the full window. */
.content:has(.play-page),
.content:has(.cube-page) {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: var(--accent);
    border-color: #9c2a19;
}

.btn-primary:hover,
.btn-primary:disabled {
    background-color: #9c2a19;
    border-color: #7f2214;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Header speaker button: which icon shows depends on the saved setting (see App.razor). */
.sound-toggle .icon-sound-off {
    display: none;
}

html[data-sound="off"] .sound-toggle .icon-sound-on {
    display: none;
}

html[data-sound="off"] .sound-toggle .icon-sound-off {
    display: inline;
}

/* How-to-play pages (Components/HowToPlay): long reading on the content card, with pictures,
   rule diagrams and a tile guide. */
.help {
    max-width: 46rem;
    margin: 0 auto;
    line-height: 1.6;
}

.help h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.help h2 {
    margin-top: 2rem;
    font-size: 1.4rem;
}

.help h3 {
    margin-top: 1.25rem;
    font-size: 1.1rem;
}

.help .lead {
    font-size: 1.15rem;
}

.help figure {
    margin: 1.25rem 0;
}

.help figcaption {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: #6b5a44;
}

/* A board picture: the game's own drawing (flat boards) or a snapshot (3D, cube), on a dark panel. */
.help .board-picture {
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: #2b2116 url("backgrounds/dragon-valley.jpg") center / cover;
}

.help .board-picture svg,
.help .board-picture img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 26rem;
}

.help .diagram {
    display: block;
    width: 100%;
    max-width: 34rem;
    height: auto;
    margin: 0 auto;
}

.help .tile-guide {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem 1rem;
    padding: 0;
    list-style: none;
}

.help .tile-guide li {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.help .tile-guide .tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.help .tile-guide img {
    width: 1.9rem;
    height: auto;
}

.help .tile-guide .points {
    font-size: 0.85rem;
    color: #6b5a44;
}

.help .games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.help .games li {
    padding: 1rem;
    border: 1px solid var(--panel-rule);
    border-radius: 0.75rem;
}

.help .games h2 {
    margin-top: 0.5rem;
    font-size: 1.2rem;
}

.help .play-now {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.6rem 1.4rem;
    border-radius: 0.6rem;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.help .help-nav {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--panel-rule);
}

.help dt {
    margin-top: 0.75rem;
    font-weight: 700;
}

.help dd {
    margin-left: 0;
}

@media (max-width: 600px) {
    .help h1 {
        font-size: 1.6rem;
    }
}

/* In play the Connect line fades at once; in a help picture it stays to show the pair's path. */
.help .board-picture polyline.connect-path {
    animation: none;
    opacity: 0.95;
}

/* Sign-in and sign-up (Components/Account/Pages/Login, Register): the settings screen's dark style, one
   compact column that fits a phone screen without scrolling. */
.content:has(.auth-page) {
    max-width: 440px;
    padding: 18px 20px;
    background: #171310;
    color: #F3EEDC;
    font-family: Outfit, system-ui, sans-serif;
}

@media (max-width: 600px) {
    .content:has(.auth-page) {
        flex: 1;
        margin: 0;
        border-radius: 0;
    }
}

.auth-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-page h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
}

.auth-page .lead {
    margin: -6px 0 0;
    font-size: 13px;
    color: #B8AE9C;
}

.auth-page a {
    color: #F3EEDC;
}

.auth-page .divider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #B8AE9C;
}

.auth-page .divider::before,
.auth-page .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #3A312B;
}

.auth-page form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

/* A field: the label small and above the value, inside the box, like the settings' Game list. */
.auth-field {
    position: relative;
    display: block;
    margin: 0;
}

.auth-field > span {
    position: absolute;
    left: 14px;
    top: 7px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B8AE9C;
    pointer-events: none;
}

.auth-field input {
    width: 100%;
    height: 52px;
    padding: 18px 14px 0;
    border: 1px solid #3A312B;
    border-radius: 12px;
    background: #201A16;
    color: #F3EEDC;
    font-size: 16px;
}

.auth-field input:focus {
    outline: 3px solid #F3EEDC;
    outline-offset: 1px;
}

.auth-page .pair-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.auth-page .validation-message,
.auth-page .validation-errors,
.auth-page .text-danger {
    margin: 4px 2px 0;
    padding: 0;
    color: #ff9c8f;
    font-size: 13px;
    list-style: none;
}

.auth-page .options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    font-size: 13px;
}

.auth-page .options label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #B8AE9C;
}

.auth-page input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #D7263D;
}

.auth-primary {
    height: 54px;
    flex-shrink: 0;
    border: 0;
    border-radius: 14px;
    background: #D7263D;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.auth-primary:hover {
    background: #C21F33;
}

.auth-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border: 1px solid #3A312B;
    border-radius: 14px;
    background: transparent;
    color: #F3EEDC;
    font-size: 15px;
    font-weight: 500;
}

.auth-page .foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    font-size: 14px;
}

.auth-page .foot .small {
    font-size: 12px;
    color: #B8AE9C;
}

/* Sign-up's extras, folded away until wanted so the form fits the screen. */
.auth-page details {
    border: 1px solid #3A312B;
    border-radius: 12px;
    background: #201A16;
}

.auth-page summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
    cursor: pointer;
}

.auth-page details > :not(summary) {
    padding: 0 14px 12px;
}

.auth-page .name-note {
    margin: 4px 2px 0;
    font-size: 12px;
    color: #B8AE9C;
}

/* Sign-up has more to fit, so its rows sit a little closer. */
.auth-page.compact,
.auth-page.compact form {
    gap: 8px;
}

/* The avatar and emoji pickers are shared with the light account pages; on sign-up they go dark. */
.auth-page .avatar-picker {
    margin: 0;
}

.auth-page .avatar-picker legend {
    display: none;
}

.auth-page .avatar-picker .choice {
    background: #2B231E;
    color: #F3EEDC;
}

.auth-page .avatar-picker .choice:has(input:checked) {
    border-color: #D7263D;
    background: #3a2024;
}

.auth-page .display-name-help .emoji button {
    background: #2B231E;
    color: #F3EEDC;
}

.auth-page .display-name-help .tip,
.auth-page .display-name-help p {
    color: #B8AE9C;
}

/* The leaderboards, a deal's replays and My stats (Components/Pages/Leaderboards, Replays, Stats): the
   settings' dark style, wider than sign-in so a score fits on one line on a computer. */
.content:has(.dark-page) {
    padding: 24px 28px;
    background: #171310;
    color: #F3EEDC;
    font-family: Outfit, system-ui, sans-serif;
}

@media (max-width: 600px) {
    .content:has(.dark-page) {
        flex: 1;
        margin: 0;
        padding: 16px;
        border-radius: 0;
    }
}

.dark-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dark-page h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
}

.dark-page a {
    color: #F3EEDC;
}

.dark-page .status {
    margin: 0;
    color: #B8AE9C;
}

.page-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-head h1 {
    flex: 1;
    min-width: 0;
}

/* The game switch and the layout list, on one row when there's room (also in the game page's
   leaderboard dialog). */
.board-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.seg {
    display: flex;
    flex: 1 1 auto;
    border: 1px solid #3A312B;
    border-radius: 999px;
    overflow: hidden;
    background: #201A16;
}

.seg > a,
.seg > button {
    flex: 1;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    color: #F3EEDC;
    font: 600 14px Outfit, system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.seg > * + * {
    border-left: 1px solid #3A312B;
}

.seg > a:hover,
.seg > button:hover {
    background: #2B231E;
    color: #fff;
}

.seg > .active,
.seg > .active:hover {
    background: #D7263D;
    color: #fff;
}

.seg .long {
    display: none;
}

@media (min-width: 600px) {
    .seg .short {
        display: none;
    }

    .seg .long {
        display: inline;
    }
}

/* A list with its label small inside the box, like the settings' Game list. */
.select-field {
    position: relative;
    display: block;
    flex: 1 1 220px;
    max-width: 100%;
    margin: 0;
}

@media (min-width: 600px) {
    .select-field {
        flex: 0 0 240px;
    }
}

.select-field > span {
    position: absolute;
    left: 14px;
    top: 7px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B8AE9C;
    pointer-events: none;
}

.select-field select {
    appearance: none;
    width: 100%;
    height: 52px;
    padding: 18px 44px 0 14px;
    border: 1px solid #3A312B;
    border-radius: 12px;
    background: #201A16;
    color: #F3EEDC;
    font: 600 17px Outfit, system-ui, sans-serif;
    cursor: pointer;
}

.select-field select:focus-visible,
.seg > :focus-visible {
    outline: 3px solid #F3EEDC;
    outline-offset: 1px;
}

.select-field svg {
    position: absolute;
    right: 14px;
    top: 16px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #D7263D;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.dark-page .back-link {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #B8AE9C;
    text-decoration: none;
}

.dark-page .back-link:hover {
    color: #F3EEDC;
}

.title-tag {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #2B231E;
    border: 1px solid #3A312B;
    color: #B8AE9C;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}