/* The home page (BST-444): the narrow column like an app. The home page loads this file and dist-shared.css only (no Bootstrap, no dist-basta.css). */

/* the basic rules of the page (the old basta.css was removed) */
a:focus {
    outline:0;
    text-decoration: none;
}

footer .hidden-print a {
    background: var(--readable-on-page-bg, rgba(248, 248, 248, 0.6));
}

main h1 {
    margin-top: 0;
}

/*
 * BST-444: the home page (index.xhtml): a narrow column like an app (the same on a phone and on a desktop). The look is the one of the information pages
 * (round controls, big round cards, the line icons), made of the tokens of the game (theme.css): the dark mode follows by itself.
 */

/* the frame of the home page (it needs no Bootstrap: the side margin of the column and of the ad above the footer) and the ad above the footer: over the whole width */
.hp-wrap,
.hp-bottom {
    padding: 0 15px;
}
.hp-bottom__ad {
    min-height: 12.5rem;
    margin: 3rem 0;
    text-align: center;
}
@media print {
    .hidden-print {
        display: none !important;
    }
}

.hp-page {
    max-width: 34rem;
    margin: 0 auto;
    padding-top: 1rem;
}

/* the header: the logo on the left, one word (the login, or the settings of a registered player) and the round buttons on the right */
.hp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0 0.75rem;
}
.hp-logo {
    margin: 0;
    font-size: inherit;
    line-height: 0;
}
.hp-logo a {
    display: inline-flex;
    line-height: 0;
}
.hp-logo a:hover,
.hp-logo a:focus,
.hp-logo a:active {
    text-decoration: none;
}
.hp-logo img {
    display: block;
    width: 13.125rem; /* the width of the original (210 px) */
    max-width: 100%;
    height: auto;
}
/* a narrow phone: the login word and the round button need the room too */
@media (max-width: 28rem) {
    .hp-logo img {
        width: 10.5rem;
    }
}
.hp-tools {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.hp-tools__word {
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--readable-on-page-bg, rgba(248, 248, 248, 0.6));
    font-weight: 700;
}
.hp-tools__form {
    margin: 0;
    line-height: 0;
}

/* a round icon button of the header (the dark mode, the logout) */
.hp-themeToggle,
.hp-iconBtn {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border-input);
    border-radius: 50%;
    background: var(--box-content-background);
    color: var(--color-text);
    font: inherit;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.hp-iconBtn--logout {
    color: var(--color-danger);
}
.hp-themeToggle:hover,
.hp-iconBtn:hover {
    border-color: var(--color-accent);
    text-decoration: none;
}
.hp-themeToggle:focus-visible,
.hp-iconBtn:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #1f4f78);
    outline-offset: 2px;
}
.hp-themeToggle:focus:not(:focus-visible),
.hp-iconBtn:focus:not(:focus-visible) {
    outline: none;
}
.hp-themeIcons {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hp-themeIcons .feather-sun {
    display: none;
}
.hp-themeIcons .feather-moon {
    display: block;
}
html.dark .hp-themeIcons .feather-sun,
html[theme="dark"] .hp-themeIcons .feather-sun {
    display: block;
}
html.dark .hp-themeIcons .feather-moon,
html[theme="dark"] .hp-themeIcons .feather-moon {
    display: none;
}
.hp-themeIcons svg,
.hp-themeIcons img {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}
html.dark .hp-themeIcons img,
html[theme="dark"] .hp-themeIcons img {
    filter: invert(1);
}

/* the cards: the player and the menu */
.hp-card {
    margin-bottom: 1rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--box-content-border);
    border-radius: 1.5rem;
    background: var(--box-content-background);
    box-shadow: var(--box-shadow-panel);
}

/* the player: the avatar with the pencil on the left, the label and the name (the rotate button and Save are the halves of the field) on the right */
.hp-nick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
a.hp-nick,
a.hp-nick:hover,
a.hp-nick:focus {
    color: inherit;
    text-decoration: none;
}
.hp-avatarwrap {
    position: relative;
    flex: none;
}
.hp-avatar {
    position: relative;
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 2px solid var(--color-border-input);
    border-radius: 50%;
    background: var(--avatar-surface);
    cursor: pointer;
}
button.hp-avatar:hover,
button.hp-avatar[aria-expanded="true"],
a.hp-nick--account:hover .hp-avatar {
    border-color: var(--color-focus);
}
.hp-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
/* the pencil: the avatar can be changed */
.hp-avatar__pencil {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text-color);
    font-size: 0.9375rem;
    line-height: 1;
}
.hp-nick__field {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.hp-nick__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.hp-nick__group {
    display: flex;
    min-width: 0;
}
.hp-rotate,
.hp-nick__input,
.hp-nickSave {
    box-sizing: border-box;
    height: 3rem;
    font-size: 1rem;
}
.hp-rotate {
    flex: none;
    width: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border-input);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: var(--box-content-background);
    color: var(--link-text-color);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.hp-rotate:hover {
    border-color: var(--color-focus);
}
.hp-nick__input {
    flex: 1;
    min-width: 0;
    padding: 0 1.25rem 0 0.75rem;
    border: 1px solid var(--color-border-input);
    border-radius: 0 999px 999px 0;
    background: var(--input-background);
    color: var(--input-foreground);
}
.hp-nick__input:focus {
    outline: 0;
    border-color: var(--blue-300);
    box-shadow: 0 0 0.5rem rgba(102, 175, 233, 0.6);
}
/* a registered player: the name is a link to the account, it looks like the field */
.hp-nick__input--account {
    display: flex;
    flex: none; /* in the column of the field flex: 1 would shrink it to the height of the text, it is 3rem like the input of a guest */
    align-items: center;
    border-radius: 999px;
    padding-left: 1.25rem;
    cursor: pointer;
}
a.hp-nick--account:hover .hp-nick__input--account {
    border-color: var(--color-focus);
}
.hp-nick__hint {
    /* the message about a nickname that was replaced */
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--danger-color, #c0392b);
}
.hp-nick__hint[hidden] {
    display: none;
}
/* BST-470: the Save button of a name that was changed by hand is the right part of the field, and the Play button waits for it */
.hp-nickSave {
    flex: none;
    padding: 0 1.125rem;
    border: 1px solid var(--btn-primary-bg);
    border-left: 0;
    border-radius: 0 999px 999px 0;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text-color);
    font-weight: 700;
    cursor: pointer;
}
.hp-nickSave[hidden] {
    display: none;
}
.hp-nickSave:disabled {
    opacity: 0.5;
    cursor: default;
}
.hp-nick__group--dirty .hp-nick__input {
    border-radius: 0;
}

/* the Play button (the Btn of the game, the size of the text is smaller than the biggest one) and the bullets under it */
.hp-wrap a.Btn-module__btn.hp-play {
    margin: 0.875rem 0 0;
    padding: 0.875rem 1rem;
    font-size: 1.75rem;
}
.hp-play--off {
    opacity: 0.5;
    pointer-events: none;
}
.hp-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem 1.125rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}
.hp-trust li::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.375rem;
    vertical-align: -0.15em;
    background-color: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the ad under the card of the player (the one above the footer is over the whole width of the page) */
.hp-ad {
    min-height: 6.25rem;
    margin: 0 0 1.25rem;
}

/* the menu: the sentence about the game and the cards of the information pages */
.hp-menu__intro {
    margin: 0 0 0.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}
.hp-menu__intro strong {
    color: var(--color-text);
}
.hp-menu__list {
    display: flex;
    flex-direction: column;
}
/* a card: the row is a rounded area that is highlighted on hover, on a tap and with the keyboard (the text is never underlined); the line between two rows is not under
   the highlighted one nor above it */
.hp-menu__list a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0 -0.75rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0.12s ease;
}
.hp-menu__list a::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    bottom: 0;
    left: 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle);
}
.hp-menu__list a:last-child::after,
.hp-menu__list a:hover::after,
.hp-menu__list a:focus-visible::after,
.hp-menu__list a:has(+ a:hover)::after,
.hp-menu__list a:has(+ a:focus-visible)::after {
    border-bottom-color: transparent;
}
.hp-menu__list a:hover,
.hp-menu__list a:focus,
.hp-menu__list a:active {
    color: var(--color-text);
    text-decoration: none;
}
.hp-menu__list a:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.hp-menu__list a:active {
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.hp-menu__list a:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #1f4f78);
    outline-offset: -2px;
}
.hp-menu__list a:hover .hp-menu__chev,
.hp-menu__list a:focus-visible .hp-menu__chev {
    color: var(--color-accent);
}
.hp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--hp-icon-bg);
    color: #fff;
}
.hp-icon svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}
.hp-menu__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.hp-menu__text strong {
    line-height: 1.3;
}
.hp-menu__text small {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.hp-menu__chev {
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
}

/* the choice of the avatar: opens on the right of the avatar, from the top edge of the card, and is low enough to stay inside the card (it does not cover the ad) */
.hp-avatarMenu {
    position: absolute;
    z-index: 20;
    top: -1.5rem;
    left: calc(100% + 0.75rem);
    box-sizing: border-box;
    width: min(17rem, calc(100vw - 9.5rem));
    padding: 0.75rem;
    border: 1px solid var(--box-content-border);
    border-radius: 1rem;
    background: var(--box-content-background);
    box-shadow: var(--box-shadow-panel);
}
.hp-avatarMenu[hidden] {
    display: none;
}
.hp-avatarMenu__title {
    margin: 0 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.hp-avatarMenu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}
.hp-avatarOption {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--avatar-surface);
    cursor: pointer;
}
.hp-avatarOption img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.hp-avatarOption[data-avatar]:hover {
    border-color: var(--color-focus);
}
.hp-avatarOption[aria-checked="true"] {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 0.125rem var(--color-focus);
}
.hp-avatarOption--locked img {
    filter: grayscale(1);
    opacity: 0.55;
}
.hp-avatarOption__lock {
    position: absolute;
    right: -0.125rem;
    bottom: -0.125rem;
    font-size: 0.75rem;
    line-height: 1;
}
.hp-avatarMenu a.hp-avatarMenu__login {
    margin: 0;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}
@media (max-width: 22rem) {
    .hp-avatarMenu a.hp-avatarMenu__login {
        white-space: normal;
    }
}

/* a visited link has the colour of a link that was not visited (the page has one colour of the links, not two) */
.hp-tools__word,
.hp-tools__word:visited {
    color: var(--link-text-color);
}
.hp-tools__word:hover,
.hp-tools__word:focus {
    color: var(--link-hover-color);
}
.hp-menu__list a:visited {
    color: var(--color-text);
}
a.hp-nick:visited {
    color: inherit;
}
.Footer-module__siteFooter a:visited {
    color: var(--link-text-color);
}