body {
    text-align: center;
}

b {
    font-style: normal !important;
}

#scores h4 {
    margin: 0;
    max-width: 99%;
}

.menu-logo {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.menu-logo a {
    color: var(--whiteLine);
    font-size: 1.5em;
    font-weight: bold;
}

#logo {
    min-width: min(250px, 50vw);
    background-image: url("/mywoooord/images/logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 6;
}

#recap {
    margin-top: -15px;
}

.menu-items {
    display: flex;
    gap: 2vw;
    margin: 0;
    padding: 0;
    z-index: 100000;
}

.menu-items > li > a {
    color: var(--whiteLine);
    font-size: 1.2em;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.menu-items > li.active a:hover {
    color: var(--correctLight);
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    background-color: var(--courtdark);
    z-index: 100000;
    flex-direction: column;
    min-width: 10em;
    padding: 0;
    border: var(--lineStyle);
}

.dropdown:last-of-type .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}


.dropdown-menu li a {
    padding: var(--whiteLineThickness);
    display: block;
}

.moreOptions {
    cursor: pointer;
}


body:not(.deb) * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(3600deg);
    }
}

#ball {
    width: 1.5rem;
    aspect-ratio: 1;
    background-image: url("/mywoooord/images/favicon.ico");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transition: all 0.25s ease-in-out;
}

#ball.slow {
    transition: all 2s cubic-bezier(.17, .67, .01, .98);

}

#ball.rotate {
    animation: rotate 2s cubic-bezier(.17, .67, .01, .98) 1;
}

@media (hover: hover) and (pointer: fine) {
    #ball:hover { /*todo: keep?*/
        rotate: 45deg;
    }

    .menu-items li:hover {
        color: var(--correctLight);
    }

    .dropdown-menu li:hover {
        background-color: var(--courtin);
    }

    .dropdown-menu li:hover a {
        color: var(--correctLight);
    }

    .menu-items > li:hover span, #burgerBall:hover {
        filter: var(--filter);
    }

    .menu-items > li:hover * {
        filter: none;
    }
}


.dropdown-menu li a.active {
    color: var(--correctLight);
}


.dropdown:hover .dropdown-menu {
    display: flex;
}

.menu-items.mobile {
    display: none;
}

.card, .placeholder {
    width: 13%;
    position: relative;
    aspect-ratio: 1/1.5;
    display: inline-block;
    font-family: sans-serif;
    box-sizing: border-box;
    padding: 0.45% 0;
    border-radius: 8%;
    background-color: var(--whiteLine);
    transition: transform 0.2s;
    cursor: pointer;
    text-align: center;
    border: 2px solid var(--courtdark);
    flex: 0 0 auto;
    text-transform: uppercase;
}

#humanHand .card, .placeholder {
    margin: 0 0.6%;
}


.card.dragging {
    opacity: 0.5;
}

.card.spacer {
    visibility: hidden;
}

#currentWord .card {
    max-height: 23vh;
}

.placeholder {
    visibility: hidden;
    margin-left: -13% !important;
}

.footerLegend .card {
    width: 4em;
    height: 6em;
    font-size: 0.75em;
    cursor: default;
}


.card-content {
    text-transform: uppercase;
    -webkit-text-stroke: 2px var(--courtdark);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5em;
    font-weight: bold;
}

.corner {
    position: absolute;
    font-size: 0.85em;
    color: var(--courtdark);
}


.corner.tl {
    top: 4px;
    left: 6px;
}

.corner.tr {
    top: 4px;
    right: 6px;
}

.corner.br {
    bottom: 4px;
    right: 6px;
}

.corner.bl {
    bottom: -14px;
    left: 0;
}


#currentWord {
    padding-top: 2.5em;
    PADDING-LEFT: 1.5em;
    padding-bottom: 0.5em;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
    margin-top: auto;
}

.gameover #currentWord, .intro #currentWord {
    overflow: initial;
    white-space: unset;
    animation: scrollLR 4s linear infinite alternate;
}

.gameover #currentWord {
    animation-duration: 8s;
}

.zoom #currentWord {
    display: flex
}

.zoom #currentWord .card {
    flex: 1
}

.zoom #currentWord.length0 .card, .zoom #currentWord.length1 .card {
    flex: initial;
}

.gameover .hand, .preGameover .hand {
    text-decoration: line-through;
}

#currentWord.length0, #currentWord.length1 {
    justify-content: center;
}

#currentWord > span {
    margin-left: -6%;
}

#currentWord.length0 > span {
    margin-left: 0;
}

#currentWord.length1 > span {
    margin-left: -2%;
}

#currentWord.length2 > span {
    margin-left: -3%;
}

#currentWord.length3 > span {
    margin-left: -4%;
}

#currentWord.length4 > span {
    margin-left: -4.5%;
}

#currentWord.length5 > span {
    margin-left: -5%;
}

#currentWord.length6 > span {
    margin-left: -5.5%;
}


body.net #currentWord {
    opacity: .35;

}

.stash {
    opacity: 0.5;
    order: 2000000 !important;
}


.ghost span {
    opacity: .25;
}

.card.hint {
    box-shadow: 1px 2px 9px 5px white;
}

.card.hint.rotate, #currentWord.rotate .card {
    rotate: 10deg;
}

.ghost {
    border-color: var(--neutralLight);
}


#currentWord .pending {
    filter: contrast(0.7);
}

/*mot entier*/

#currentWord.orange .card {
    background-color: var(--warning);
}

#currentWord.green .card {
    background-color: var(--correct);
}

#currentWord.red .card {
    background-color: var(--penalty);
    rotate: -180deg;
}

#currentWord.ok .card {
    box-shadow: 1px 2px 9px 5px white;
}

#currentWord.ace .card {
    background-color: var(--bright);
    animation: rotate 2s cubic-bezier(.17, .67, .01, .98) 1;
}




#msgContainer {
    font-size: 0.9em;
    padding: 0;
    color: var(--whiteLine);
    text-align: left;
    overflow-y: auto; /*todo: expend on demand?*/
    flex: 1;
}

#msg, .history {
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 1em;
}

#msg .report {
    float: right;
}

h1 {
    font-size: 1.5em;
    margin: 0
}

#msg h1 {
    text-overflow: ellipsis;
    overflow: hidden;
}

button {
    cursor: pointer;
    font-size: 2em;
    border: none;
    background-color: var(--disabled);
    color: var(--whiteLine);
}

button.active {
    background-color: var(--courtin);
}

button:hover {
    cursor: not-allowed;
}

button.active:hover {
    cursor: pointer;
    background-color: var(--courtout); /* #2980b9;*/
}

button.active:active {
    background-color: var(--courtout);
}

button.alert {
    background-color: var(--warning);
}

#humanHand {
    margin-top: calc(2 * var(--whiteLineThickness));
    min-height: 50px;
    padding: 1.5% 0.5%;
    border-top: var(--lineStyle);
}

#humanHand .card {
    touch-action: none;
}

#humanHand.disabled .card {
    opacity: 0.2;
}

#humanHand.disabled span {
    cursor: not-allowed;
}

#humanHand .selected {
    opacity: 0.2;
}

#controls, #newGameBtns, #scores {
    display: flex;
    background: var(--whiteLine);
    padding: var(--whiteLineThickness) 0 0;
    gap: var(--whiteLineThickness);
}

#scores {
    padding-bottom: var(--whiteLineThickness);
}

#scores .player.pending h4, #scores .player.pending .pile, #scores .player.pending .sets{
    visibility: hidden;
}

#container button {
    flex: 1;
    /*max-height: 85px;*/
}

#scores .player {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    flex: 1;
    background: var(--courtout);
    box-shadow: inset 0 0 0 5px var(--courtout);
    border: 5px solid var(--courtout);
}

/*Human always yellow*/
#scores .player.human, #scores.double #player0, #scores.double #player1 {
    color: var(--courtdark);
    background-color: var(--bright);
    box-shadow: inset 0 0 0 5px var(--bright);
    border: 5px solid var(--bright);
}

#scores .player.human.passed, #scores.double #player0.passed, #scores.double #player1.passed {
    color: var(--courtout);
    background-color: var(--hint) !important;
    box-shadow: inset 0 0 0 5px var(--hint);
    border: 5px solid var(--hint);
}


#scores .player.selected h4 {
    font-weight: bold;
}


.double #player1 .sets, .double #player3 .sets, .double #player1 .pile, .double #player3 .pile {
    visibility: hidden;
}

#scores .sets {
    font-size: 1.25em;
}


#scores p {
    margin: 0;
    padding: 0;
}

#scores .player i {
    font-size: 0.75em;
}

body.countdowntype0 #scores .player .time {
    /*display: none;*/
    visibility: hidden;
}

#scores .player .time {
    opacity: 0.75;
}

#scores .player.selected .time {
    opacity: 1;
    visibility: visible !important;
}

#scores .player.passed /*, #scores .player.out*/
{
    background-color: var(--disabled) !important;
    box-shadow: inset 0 0 0 5px var(--disabled);
    border: 5px solid var(--disabled);
}

#scores .player.alert {
    color: var(--whiteLine) !important;
    background-color: var(--warning) !important;
    box-shadow: inset 0 0 0 5px var(--warning) !important;
    border: 5px solid var(--warning) !important;
}

#scores .player.alert.passed {
    opacity: 0.5;
}

#scores .player.out { /*todo: was limited to .human, understand why*/
    color: var(--courtin) !important;
    background-color: var(--neutralLight) !important;
    box-shadow: inset 0 0 0 5px var(--neutralLight) !important;
    border: 5px solid var(--neutralLight) !important;
}


#scores .player.selected {
    box-shadow: inset 0 0 0 5px var(--whiteLine) !important;
    border: 5px solid var(--correct) !important;
}


#scores .player.winner {
    background-color: var(--correctLight) !important;
    color: var(--courtin) !important;
    border-color: var(--correctLight) !important;

    background-image: url("/mywoooord/images/cup.png");
    background-size: 2.5em;
    background-repeat: no-repeat;
    background-position-x: -0.5em;
    background-position-y: bottom;
}

#scores h4.playerInitial, #scores .handShort {
    display: none;
}

#scores .hand {
    display: none;
    font-size: 0.9em;
}


#container.lastround #scores .hand {
    display: block;
    font-weight: bold;
}

#scores .time {
    font-size: .75em;
}


#msgContainer {
    display: flex;
}

#history {
    flex: 1;
}

.history {
    text-align: left;
    font-size: 0.9rem;
}

.history p i, .history p:not(.wordRecap) a {
    float: right;
}


.history p b, #msg p b {
    padding-left: 0.3em;
}

#msg {
    flex: 3.5;
    border-right: var(--lineStyle);
}

#msg h3 {
    text-transform: capitalize;
}
#msg, .history {
    padding: var(--whiteLineThickness) var(--whiteLineThickness) 0;
}


.cards {
    display: flex;
    border-bottom: var(--lineStyle);
}



.deck, .pot {
    background: var(--neutral);
    padding: 1%;
    flex: 1;
}

.deck {
    /* border-right: var(--lineStyle); todo: shall we restore for portrait?*/

}


.point1 {
    color: var(--whiteLine);
}

.point2 {
    color: var(--courtout);
}

.point2 .card-content {
    -webkit-text-stroke: 2px var(--courtout);
}

.point3 {
    color: var(--courtin);
}

.point3 .card-content {
    -webkit-text-stroke: 2px var(--courtin);
}

.point5 .card-content {
    color: var(--courtdark);
}


.point8 .card-content {
    -webkit-text-stroke: unset;
    color: var(--bright);
}

.point0 .card-content {
    -webkit-text-stroke: unset;
    color: var(--disabled);
    font-weight: normal;
}

.point1 .card-content {
    -webkit-text-stroke: 2px var(--courtout);
}


.special .corner.tl {
    font-size: 1em;
    top: 0
}

.special .corner.tr {
    font-style: italic;
    font-size: 0.75em;
    text-align: right;
    text-transform: lowercase;
}


/**
SPECIAL CARDS
 */
.special .card-content {
    display: inline-block;
    width: 65%;
    aspect-ratio: 1;
    background: var(--courtout);
    border: 3px solid var(--courtout);
}

/* Circle */
.aei .card-content {
    border-radius: 50%;
    border-color: var(--courtout);
}

/* Square: already default with border-radius 0 */
.bcd .card-content {
    border-radius: 0;
    background: var(--courtin);
    border-color: var(--courtin);
}

.double .card-content, .doubleright .card-content {
    background: var(--courtdark);
    border-color: var(--courtdark);
}

.double .card-content {
    clip-path: polygon(90% 0, 0 50%, 90% 100%);
}

.doubleright .card-content {
    clip-path: polygon(0 0, 100% 50%, 0 100%);

}

.point8 {
    background-color: var(--courtdark);
    border: 1px solid var(--courtout)
}

.point8 .corner {
    color: var(--bright)
}

/* Star */
.joker .card-content {
    clip-path: polygon(
            50% 0%, 60% 35%, 100% 35%, 68% 57%,
            80% 100%, 50% 75%, 20% 100%, 32% 57%,
            0% 35%, 40% 35%
    );
    background: var(--bright)
}

/*todo: see what we do with this
.double .card-content::before, .doubleright .card-content::before{
    content: "";
    position: absolute;
    inset: 1px; !* épaisseur du contour *!
    background-color: var(--point5); !* couleur du contour *!
    clip-path: inherit;
    z-index: -1;
    margin-left: 3px;
}

.joker .card-content ::before {
    content: "";
    position: absolute;
    inset: 2px; !* stroke thickness *!
    background: var(--courtdark);
    clip-path: inherit;
    z-index: 100000000000;
    width: 30%;
}*/

.joker .corner.tl {
    font-size: 0.75em
}

.bcd .corner.tr {
    text-decoration: line-through;
}


#modal {
    min-height: 23px;
    visibility: hidden;
    text-align: center;
    width: 100%;
    z-index: 100;
    position: absolute;
    font-size: 1.1em;
    pointer-events: none;
    top: 13vh;
}


header a, #msgContainer a.main, .wordRecap a.main {
    font-weight: bold;
}

#msgContainer a, .history a, #strongestWord a {
    text-transform: uppercase;
}

#strongestWord a {
    color: var(--courtdark);
    font-weight: bold;
}

.deck.empty {
    color: red
}

ul {
    list-style: none;
    text-align: left;
}


#container {
    position: relative;
    background: var(--courtin);
    border: var(--lineStyle);
    height: calc(100vh - calc(2 * var(--whiteLineThickness)));
    display: flex;
    flex-direction: column;
}


.anagrammSelection {
    filter: drop-shadow(2px 4px 6px var(--courtdark));
    cursor: grabbing;
}

.anagrammSelection .corner.bl {
    font-weight: bold;
    font-size: 2em !important;
    color: var(--whiteLine);
    -webkit-text-stroke: 1px var(--courtdark);
}

button .legend {
    display: block;
    font-size: 1.25rem;
}

#newGameBtns {
    min-height: 100px;
}

#newGameBtns button b {
    text-transform: uppercase;
}

#newGameBtns button.active {
    border: var(--whiteLineThickness) solid var(--warning);
}

#modalContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index: 11111;

}

#modalContainer.visible {
    display: flex;
}


.hidden {
    display: none !important;
}

.wordRecap.reported {
    filter: grayscale(1);
    opacity: 0.6;
}


.modal {
    display: none;
    background: var(--modalBg);
    padding: var(--whiteLineThickness);
    box-shadow: 0 0 var(--whiteLineThickness) rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 230px;
    color: var(--courtdark);
    overflow-y: auto;
    max-height: 90vh;
    position: fixed;
    max-width: 90vw;
    flex-direction: column;
}


.modal .closer {
    position: absolute;
    right: 5px;
    top: 8px;
    cursor: pointer;

}

.modal .closer:after {
    content: "✖";
    font-size: 2em;
}


.modal.visible {
    display: flex;
}

.modal:not(#langSelector) button {
    font-size: 1.75em;
    font-weight: bold;
}


.modal#welcome button#rules2{
background-color: var(--neutral);
}

.modal#welcome button#rules2:hover{
    background-color: var(--neutralLight);
}



.modal ul {
    flex-wrap: wrap;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.modal ul button {
    flex: 1;
    color: var(--courtdark);
    padding: var(--whiteLineThickness);
    border: 1px solid var(--courtdark);
    text-align: center;
    font-size: 1.25rem;
    cursor: pointer !important;
}

.modal ul button.active {
    color: var(--whiteLine);
}

.modal h3 {
    text-transform: uppercase;
    margin: calc(2 * var(--whiteLineThickness)) 0 var(--whiteLineThickness);
}

.modal p {
    margin: 0 0 0;
}

.modal#customConfirm p {
    margin-bottom: 1em;
}

.modal#gameSelector p {
    font-weight: bold;
}


.modal#langSelector b {
    color: var(--bright);
}

.modal#langSelector .join {
    color: var(--bright);
    font-size: 1em;
    font-weight: bold;
}


#welcome, #gameSelector {
    flex-direction: column;
    gap: var(--whiteLineThickness);
}

#welcome button {
    padding: var(--whiteLineThickness);
}

#welcome button#tournament, #welcome button#freegame,  #welcome button#demo,#welcome button#rules2, #welcome button#resume {
    background-image: url("/mywoooord/images/robot.png");
    background-size: 1.25em;
    background-repeat: no-repeat;
    background-position: 0.25em;
    padding-left: 1em;
}

#welcome button#demo {
    background-image: url("/mywoooord/images/hat_glasses.png");
}
#welcome button#rules2 {
    background-image: url("/mywoooord/images/rules.png");
    background-size: 1em;
}

#welcome button#resume{
    background-image: url("/mywoooord/images/play.png");
    background-size: 1em;
}

#controls button, #newGameBtns button {
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    padding-top: 16%; /*affects portrait only*/
    background-position-y: center;
    display: flex;
    align-content: end;
    flex-wrap: wrap;
    justify-content: center;
}


#newGameBtns button {
    padding-top: 0%; /*affects portrait only*/
}


#controls #challenge {
    background-image: url("/mywoooord/images/contest.png");
}

#controls #pass {
    background-image: url("/mywoooord/images/pass.png");
}

#controls #hint {
    background-image: url("/mywoooord/images/info.png");
}

#controls #smash {
    background-image: url("/mywoooord/images/racket_smash.png");
    background-color: var(--courtdark);
}

#controls #quit {
    background-image: url("/mywoooord/images/pass.png");
}

#controls #quit {
    background-image: url("/mywoooord/images/forfeit.png");
    /*cursor: pointer;*/
    background-color: var(--courtdark);
}

#controls #play, button#newgame {
    background-image: url("/mywoooord/images/racket_play.png");
}

#controls #play.active:hover, button#newgame:hover {
    background-image: url("/mywoooord/images/racket_smash.png");
}

button#replay {
    background-image: url("/mywoooord/images/replay.png");
}


/*
#controls #play.active:not(.alert) {
    background-image: url("/mywoooord/images/racket_play.png");
}*/


#langSelector h3 {
    font-size: 1.75em;
}

#langSelector ul {
    display: inline;
}


#langSelector button {
    padding: 0;
    margin: 0.5em;
}

#langSelector button h4 {
    background-color: var(--courtdark);
    color: var(--whiteLine);
    width: 100%;
}

.modal button h6, .modal button h4, .modal button h5, .modal button p {
    margin: var(--whiteLineThickness);
}

.modal button h4 {
    padding: 0;
    margin: 0;
    font-size: 1.5em;
}

.modal .lang button h4 {
    font-size: 2.5em;
    line-height: 0.5em;
    padding-top: 0.15em;
}

.modal .lang button h4 span {
    font-size: 1.125rem;
    display: block;
}



.modal button h5 {
    font-size: 1.25em;
}

.modal button h6 {
    font-size: 1.15em;
    font-weight: normal;
}

.modal button p {
    font-size: 1em;
}


#langSelector p {
    font-size: 0.8em;
}

#langSelector p.score {
    font-size: 0.9em;
    font-weight: bold;
}


#board {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
}

#boardContent {
    position: relative
}

.gameover #boardContent, .intro #boardContent {
    overflow: hidden;
    border: 1px solid var(--courtin); /*for the scroll anim*/
}

#start {
    padding-top: var(--whiteLineThickness);
    padding-bottom: var(--whiteLineThickness);
    text-transform: uppercase;
    font-weight: bold;
}

.right {
    text-align: right;
}

#msg .right {
    max-width: 85%;
    padding-left: 15%;
}

.right > span {
    background: var(--whiteLine);
    color: var(--courtdark);
    padding: 5px;
    border-radius: var(--whiteLineThickness);
}

.right span a {
    color: var(--courtdark)
}

.right span.chair {
    background: var(--courtdark);
    color: var(--whiteLine);
}

.right span.chair a {
    color: var(--whiteLine)
}

#recap {
    font-size: 1.1em;
    display: flex;
    align-items: baseline;
    line-height: 1em;
}

.msg-bubble {
    position: absolute;
    background: var(--whiteLine);
    color: var(--courtdark);
    padding: var(--whiteLineThickness) var(--whiteLineThickness) 15px var(--whiteLineThickness);
    border: 2px solid var(--courtdark);
    font-size: 14px;
    max-width: 45vw;
    text-align: center;
    box-shadow: 0 4px var(--whiteLineThickness) rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

/* Flèche avec bordure commune */
.msg-bubble::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    width: 23px;
    height: 23px;
    background: var(--whiteLine);
    border-right: 2px solid var(--courtdark);
    border-bottom: 2px solid var(--courtdark);
    transform: translateX(-50%) rotate(45deg); /* triangle pointant vers le bas */
}

.msg-bubble a {
    color: var(--courtdark)
}

.msg-bubble span {
    display: inline !important;
}

.msg-bubble.dot0 span {
    visibility: hidden;
}

.msg-bubble.dot1 span:nth-child(1) {
    visibility: visible;
}

.msg-bubble.dot1 span:nth-child(2) {
    visibility: hidden;
}


.msg-bubble.dot2 span {
    visibility: visible;
}

#map_container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: var(--sky);
}

#map_container div.active {
    animation: rotate 1s cubic-bezier(.17, .67, .01, .98) 1 forwards;
    z-index: 100;
}

#map_container h2 {
    position: absolute;
    bottom: 3vh;
    text-align: center;
    margin: 0;
    width: min-content;
    color: var(--sky);
    -webkit-text-stroke: 2px var(--courtdark);
    font-weight: bold;
    font-size: 2em;
}

#map_container .active h2 {
    color: var(--whiteLine);
    text-shadow: 2px 2px var(--courtdark);
}

#australia, #us, #roland, #wimbledon {
    position: absolute;
    font-weight: bold;
    font-size: 1.25em;
    color: var(--courtdark);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: end;
    justify-content: center;
}

#australia {
    left: 0;
    bottom: 0;
    background-image: url("/mywoooord/images/map_australia.png");
    width: 32vw;
    aspect-ratio: 1;
    background-position: bottom;
}

#us {
    left: 20%;
    bottom: 39%;
    background-image: url("/mywoooord/images/map_us.png");
    width: 32vw;
    aspect-ratio: 0.8;
    background-position: bottom;
}

#roland {
    right: 0;
    top: 0;
    background-image: url("/mywoooord/images/map_paris.png");
    left: unset;
    background-position: bottom right;
    width: 26vw;
    aspect-ratio: 0.8;
}

#wimbledon {
    right: 19%;
    bottom: 17%;
    background-image: url("/mywoooord/images/map_london.png");
    min-height: 37vw;
    min-width: 33vw;
}


#cupImg {
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/mywoooord/images/cupXL.png");
    width: 80vw;
    margin: 0 auto;
    height: 100vh;
    background-position: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
}

.history p, .history h4 {
    line-height: 0.75em;
    margin: 0.75em 0;
}

.history span {
    display: none;
}

#burgerBall {
    background-image: url("/mywoooord/images/burgerBall.png");
    cursor: pointer;
}

#burgerBall:hover {
    rotate: 45deg;
}

#msg p span.mobile {
    display: none;
}


#scores .deck, #scores .pot {
    display: none;
}

.cards .deck, .cards .pot {
    display: block;
}

.pass {
    text-decoration: line-through;
}

.gameover #humanHand, .gameover .corner, .intro #currentWord .corner {
    display: none;
}


#msg p.right span {
    line-height: 1.5em;
}


.range-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.range-wrapper input[type="range"] {
    flex: 1;
    direction: rtl
}

.range-label {
    font-size: 0.9em;
}


.flag {
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: min(40px, 10vw);
    line-height: 35px;
}


.modal .flag {
    font-size: 1.5rem !important;
    display: flex !important;
    align-items: center;
    text-indent: min(20px, 10vw);
}

#langSelector .flag {
    min-height: 35px;
    text-indent: min(35px, 10vw);
}

.flag.en {
    background-image: url("/mywoooord/images/en.png");
}

.flag.fr {
    background-image: url("/mywoooord/images/fr.png");
}

.flag.de {
    background-image: url("/mywoooord/images/de.png");
}

.flag.es {
    background-image: url("/mywoooord/images/es.png");
    display: none
}

#editTools {
    position: absolute;
    top: -19%;
    right: 1%;
    display: flex;
    z-index: 10000;
    border-radius: 1em;
    background-color: var(--courtdark);
    opacity: .6;
    border: 3px solid white;
}


#editTools button {
    background: none;
    border: min(1.5vw, 1.5vh) solid transparent;
    border-radius: min(1.5vw, 1.5vh);
    padding: 0;
    width: min(50px, 11vw, 11vh);
    aspect-ratio: 1;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    cursor: not-allowed;
    opacity: .85;
}

#editTools button.active {
    cursor: pointer;
}

#editTools button.active:hover {
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.88) !important;
    opacity: 1;
}

.gameover #editTools, .intro #editTools, .demo #editTools {
    display: none;
}

button#zoom {
    background-image: url("/mywoooord/images/zoom.png");
}

button#cancel {
    background-image: url("/mywoooord/images/cancel.png");
}

button#cutmode {
    background-image: url("/mywoooord/images/edit.png");
}

button#shuffle {
    background-image: url("/mywoooord/images/shuffle.png?w");
}


#hint {
    position: relative;
}

#hintQty {
    font-size: 80%;
    position: absolute;
    top: 31%;
    right: 8%;
}

.setOver {
    text-transform: uppercase;
}


.highlight {
    color: var(--correctLight)
}

.warning {
    color: var(--warning)
}

/*.gameover.demo #newgame span {
    visibility: hidden;
}*/


@keyframes scrollLR {
    from {
        transform: translateX(30px);
    }
    to {
        transform: translateX(var(--scrollMax));
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-track {
        animation: none;
        transform: none;
    }
}

/**
NB: only responsive stuff because of URLs
 */
@media (min-width: 475px) and (max-width: 800px) {
    .dropdown-menu {
        top: 35px;
    }


    .menu-items > li span {
        width: min(50px, 6vw);
        aspect-ratio: 1;
        background-size: contain;
        display: inline-block;
        max-height: 45px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }

    .menu-items > li > a {
        display: none;
    }

    .menu-items > li.theme span {
        background-image: url("/mywoooord/images/court.png");
    }

    .menu-items > li.rules span {
        background-image: url("/mywoooord/images/rules.png");
    }

    .menu-items > li.play span {
        background-image: url("/mywoooord/images/play.png");
    }

    .menu-items > li.play.off span {
        background-image: url("/mywoooord/images/pause.png");
    }

    .menu-items > li.sound span {
        background-image: url("/mywoooord/images/sound_on.png");
    }

    .menu-items > li.sound.off span {
        background-image: url("/mywoooord/images/sound_off.png");
    }

}


#rulesContainer, iframe, #rulesContainer .content {
    width: 100%;
    height: 100%;
}

#rulesContainer .content {
    overflow-y: scroll;
}