@media (max-width: 200px) {
    #container {
        display: none;
    }

    #cup {
        display: block !important;
    }

    #modalContainer {
        display: none !important;
    }
}


@media (max-width: 250px) {
    #history {
        display: block !important;
    }

    #msg {
        display: none;
    }

    #scores .hand {
        display: none !important;
    }
}


@media (max-width: 300px) {
    /*.right span, .right span a {
        background: none;
        color: var(--whiteLine);
    }todo: why??*/
    #scores h4:not(.playerInitial) {
        display: none !important;
    }

    #scores h4.playerInitial {
        display: block;
    }

    #scores .hand {
        font-size: 0.6em !important;
    }

    #newGameBtns button .legend {
        display: none;
    }
}

@media (max-width: 475px) {
    .modal ul button, .modal button h4.flag span {
        font-size: 1rem;
    }

    body.gameover .card-content {
        font-size: 2em;
    }

    .flag {
        line-height: 25px;
    }

    .bigscreen {
        display: none !important;
    }

    #scores > div.player {
        padding-right: 0;
        padding-left: 0;
    }

    .game4 #scores h4 i {
        display: none
    }

    #msg {
        border-right: 0;
        padding-right: 0
    }

    #history {
        display: none;
    }

    #msgContainer p span, .msg-bubble span, #msg h1 span {
        display: none;
    }

    #msg p {
        line-height: 0.75em;
        margin: 0.75em 0;
    }


    #msg p span.mobile {
        display: inline;
        text-decoration: line-through;
    }

    #msg p.right {
        max-width: unset;
        padding-left: unset;
    }

    #msg p.right span {
        display: unset;
    }


    /**
    Menu
     */
    .menu a {
        margin: 0;
        padding-right: var(--whiteLineThickness);
    }

    #modal_content {
        padding: 0;
        border: none;
        background: none;
        color: var(--whiteLine);
    }

    .modal-content {
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .menu-items.desktop {
        display: none;
        flex-direction: column;
        position: absolute;
        right: calc(-1 * var(--whiteLineThickness));
        background-color: var(--courtdark);
        text-align: right;
    }


    .menu-items.mobile {
        display: flex;
        align-items: end;
        margin: 0;
    }

    .menu-items.active {
        display: flex;
        border: var(--lineStyle);
        padding: 1em 0 1em 10vw;
        max-height: 80vh;
        overflow-y: auto;
        top: 35px;
    }

    #mobile-menu {
        display: block;
        width: max-content;
    }

    .dropdown {
        border-left: var(--lineStyle);
    }

    #recap {
        max-width: initial;
    }


    .dropdown-menu {
        position: static;
        border: none;
        display: flex !important;
        margin-top: var(--whiteLineThickness);
        font-size: 1.1em;
    }


    .dropdown-menu li {
        padding: 10px 0;
    }

    .dropdown-menu li a {
        padding-top: 0;
        padding-bottom: 0;
    }

    #burgerBall {
        width: 8vw;
        aspect-ratio: 1;
        background-size: contain;
        display: inline-block;
        max-height: 45px;
        background-repeat: no-repeat;
        background-position: center;
    }


    .dropdown-menu {
        text-align: right;
    }


    .menu-items > li {
        cursor: pointer;
    }

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

    #recap .label {
        display: none;
    }

    .corner.tr {
        display: none;
    }
}

/*@see mywoooord.css (URLs)
@media (min-width: 475px) and (max-width: 800px) {
}*/


@media (max-width: 868px) {
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        overflow-x: hidden;
    }


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

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

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

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

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

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

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

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


}

@media (max-width: 360px)   and (orientation: portrait) {
    #scores .time {
        font-size: 0.8em;
    }

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

    .modal .lang button h4 span {
        font-size: 1rem;
    }

    .corner.tr, .corner.br, .corner.tl {
        display: none;
    }

    #scores.double h4 {
        font-size: 0.9rem;
    }

    #scores .hand {
        display: none !important;
    }

    .lastround #scores .handShort {
        display: block;
    }
}

@media (max-width: 800px) {

    #controls button .legend {
        display: none
    }

    #controls button {
        background-size: contain;
    }

    .card-content {
        font-size: 2.5em;
    }

    /**
    NB: not .bcd
     */
    .aei .card-content {
        font-size: 5em;
    }
}

@media (min-width: 568px) and (orientation: portrait) {
    #modal_content {
        width: fit-content;
        min-height: 23px;
        margin: auto;
        padding: 1em;
        background: var(--whiteLine);
        border: 2px solid var(--neutralLight);
        border-radius: 11px;
        text-align: left;
        color: var(--courtdark);
    }
}


@media (max-width: 568px) {
    #currentWord {
        padding-top: 1.25em;
    }

    #currentWord .card {
        margin-right: 0;
    }

    .corner.tl {
        visibility: hidden;
    }

    #scores .hand {
        font-size: 0.85em;
    }

    /*.anagrammSelection .corner.tl {
        visibility: visible !important; !*obsolete?*!
        font-size: 1em !important;
    }*/
    #recap {
        font-size: 0.9em;
    }

    .footerLegend {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    #editTools {
        top: -28%;
    }


    #editTools button {
        width: min(45px, 11vw, 11vh);
    }


}

@media (orientation: landscape) {
    #container {
        overflow: hidden; /*prevent ball from overflowing when rotating screen*/
    }

    #editTools {
        top: 0;
    }

    #currentWord {
        margin-top: 9vh;
    }

    #container button {
        max-height: initial;
    }

    #controls button {
        flex: 1 1 auto;
        min-height: 0;
    }

    #scores .player {
        padding: 0;
    }

    #scores .msg-bubble, #ball {
        top: 0 !important;
        left: initial !important;
    }

    #scores .msg-bubble {
        padding: var(--whiteLineThickness) 15px var(--whiteLineThickness) var(--whiteLineThickness);
    }

    #scores .msg-bubble::after {
        left: initial !important;
        right: -14px;
        top: 50%;
        width: 23px;
        height: 23px;
        background: var(--whiteLine);
        border-right: 2px solid var(--courtdark);
        border-bottom: 2px solid var(--courtdark);
        transform: translateY(-50%) rotate(-45deg); /* triangle pointant vers le bas */
    }

    #scores.end .hand {
        margin-bottom: -1.2em;
    }

    #container button {
        height: auto !important;
        padding-left: var(--whiteLineThickness);
        padding-right: var(--whiteLineThickness);
    }

    #currentWord {
        padding-top: 0.5em;
        min-height: 5em;
    }


    #historyLandscape {
        display: block;
        flex: 1.25;
        border-right: var(--lineStyle);
        border-bottom: var(--lineStyle);
    }

    #leftCol {
        flex: 4;
    }

    #rightCol {
        flex: 2;
        display: flex;
    }

    #container button {
        font-size: 1.5em;
    }

    p.pile {
        display: inline;
        padding: 32px;
    }

    #gameBoard {
        display: flex;
    }

    #controls, #newGameBtns, #scores {
        flex-direction: column;
        padding: 0 0 var(--whiteLineThickness) var(--whiteLineThickness);
    }

    #controls, #newGameBtns {
        width: 40%;
        order: 100;
    }

    #scores {
        width: 60%;
    }

    body.demo:not(.gameover) #scores {
        width: 100%;
    }

    #humanHand {
        margin-top: auto;
        border-bottom: var(--lineStyle);
    }

    #scores .sets {
        display: inline;
        margin: 0 calc(var(--whiteLineThickness) / 2);
    }


    #scores h4 {
        margin-right: var(--whiteLineThickness);
        display: inline;
    }

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


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

    .cards {
        display: none;
    }


    #history {
        display: none;
    }

    #msgContainer {
        padding-right: 0;
        flex: 0.5
    }

    #msg {
        border: none;
    }

    #gameBoard {
        overflow: hidden;
        flex: 1
    }

    body.gameover #leftCol {
        border-bottom: var(--lineStyle);
    }

    body.gameover #currentWord {
        margin-bottom: 35%;
    }

    #scores .player .time {
        float: right;
    }
}


@media (max-width: 475px) and (orientation: landscape) {

    #scores h4:not(.playerInitial) {
        display: none !important;
    }

    #scores h4.playerInitial {
        display: inline;
    }
}


@media (max-height: 400px) and (orientation: landscape) {
    #controls button .legend {
        display: none
    }
}

@media (max-height: 500px) and (orientation: landscape) {

    .menu-logo {
        flex-direction: row;
    }

    #recap {
        margin-top: 0;
    }


    .menu-items.mobile li a {
        width: 6vw;
    }

    #recap {
        font-size: 1.7em;
    }

    #recap span:nth-of-type(2) {
        display: none;
    }

    #newGameBtns button .legend {
        display: none;
    }

    #historyLandscape {
        display: block;
        flex: 1;
    }

    #container {
        border-bottom: 0;
        height: calc(100vh - calc(var(--whiteLineThickness)));
    }

    #msgContainer {
        display: none;
    }

    header {
        flex: 1
    }
}

@media (max-height: 700px) and (orientation: landscape) {
    #gameBoard {
        overflow: hidden;
        flex: 1
    }

    #scores .player.selected {
        box-shadow: none !important;
    }
}


@media (max-width: 700px) and (orientation: landscape) {
    #scores .player {
        font-size: 0.85em;
    }
}

@media (min-width: 800px) {
    .menu-items > li:hover > a {
        color: var(--correctLight) !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    #newGameBtns button .legend {
        display: none;
    }

    #scores h4 i {
        display: none
    }

    .corner.tr {
        visibility: hidden;
    }
}

@media (orientation: portrait) {
    #historyLandscape {
        display: none;
    }

    #map {
        display: none;
    }

    #map_v {
        display: block;
    }

    #australia {
        width: 54vw;
    }

    #us {
        left: initial;
        bottom: 21%;
        right: 0;
        width: 50vw;
    }

    #roland {
        top: 0;
        width: 45vw;
    }

    #wimbledon {
        right: initial;
        top: 12%;
        left: 6%;
        width: 48vw;
        aspect-ratio: 0.85;
    }

    .msg-bubble, #ball {
        margin-top: 0 !important;
        right: initial !important;
        bottom: initial !important;
    }

    .msg-bubble.last {
        right: 0 !important;
        left: initial !important;
    }

    #bubble0 {
        left: 0;
    }

    #bubble0::after {
        left: 25%;
    }

    #bubble3::after {
        left: initial;
        right: 25%;
    }

    #scores :not(.human) h4 {
        margin: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 99%;
    }

}