:root {
    --emojiA: '';
    --emojiB: '';
    --emojiC: '';
    --emojiD: '';
    --emojiE: '';
    --emojiQ: '❓';
    --score-container-width: 728px;
}

@keyframes loadingspin {
    100% {
        transform: rotate(360deg);
    }
}

@media (min-width: 1024px) {
    body {
        transform: scale(1.3);
        transform-origin: top;
        width: 70%;
        margin: auto;
    }
}

#topScorers {
    width: var(--score-container-width);
    margin: 0 auto 30px;
    clear: both;
    height: 739px;
    overflow: auto;
    position: relative;
}

#weeklyTopScorers,
#monthlyTopScorers,
#yearlyTopScorers,
#aveTopScorers,
#topGameCounts {
    margin: 0 auto 15px;
    clear: both;
    max-height: 208px; /*169px;*/
    overflow: auto;
    font-size: 12px;
    position: relative;
}

#yearlyTopScorers {
    max-height: 248px; /*169px;*/
}

#topScorers:empty,
#weeklyTopScorers:empty,
#monthlyTopScorers:empty,
#yearlyTopScorers:empty,
#aveTopScorers:empty,
#topGameCounts:empty {
    background: rgba(238, 238, 238, .5);
    min-height: 169px;
}

#weeklyTopScorers:empty:before,
#monthlyTopScorers:empty:before,
#yearlyTopScorers:empty:before,
#topScorers:empty:before,
#aveTopScorers:empty:before,
#topGameCounts:empty:before {
    content: '';
    pointer-events: none;
    width: 2.5em;
    height: 2.5em;
    border: 0.4em solid transparent;
    border-color: #eee;
    border-top-color: #3E67EC;
    border-radius: 50%;
    animation: loadingspin 1s linear infinite;
    display: block;
    left: 50%;
    top: 50%;
    position: absolute;
    margin-top: -20px;
    margin-left: -20px;
}

.no-scores {
    color: #aaa;
}

::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}

#topScorersHeader {
    width: var(--score-container-width);
    margin: 50px auto 0;
    clear: both;
}

#topScorersHeader h2 {
    font-size: 18px;
    display: inline-block;
    margin: 15px 0 6px;
}

.homeLink {
    text-decoration: none;
    float: right;
    margin: 15px 0 6px;
}

.tile {
    border-radius: 4px;
}

#topScorers table,
#weeklyTopScorers table,
#monthlyTopScorers table,
#yearlyTopScorers table,
#aveTopScorers table,
#topGameCounts table {
    width: 100%;
    border-collapse: collapse;
}

#topScorers table td,
#topScorers table th,
#weeklyTopScorers table td,
#weeklyTopScorers table th,
#monthlyTopScorers table td,
#monthlyTopScorers table th,
#yearlyTopScorers table td,
#yearlyTopScorers table th,
#aveTopScorers table th,
#aveTopScorers table td,
#topGameCounts table th,
#topGameCounts table td {
    border: 1px solid #ddd;
}

#topScorers table th,
#weeklyTopScorers table th,
#monthlyTopScorers table th,
#yearlyTopScorers table th,
#aveTopScorers table th,
#topGameCounts table th {
    height: 50px;
    background: #eee;
    text-transform: uppercase;
}

#weeklyTopScorers table th,
#monthlyTopScorers table th,
#yearlyTopScorers table th,
#aveTopScorers table th,
#topGameCounts table th {
    height: 30px;
}

#weeklyTopScorers .rank,
#monthlyTopScorers .rank,
#yearlyTopScorers .rank,
#aveTopScorers .rank,
#topGameCounts .rank {
    font-size: 18px;
}

#weeklyTopScorers .player img,
#monthlyTopScorers .player img,
#yearlyTopScorers .player img,
#aveTopScorers .player img,
#topGameCounts .player img {
    width: 30px;
    height: 30px;
}

#weeklyTopScorersHeader h2,
#monthlyTopScorersHeader h2,
#yearlyTopScorersHeader h2,
#aveTopScorersHeader h2,
#topGameCountsHeader h2 {
    font-size: 12px;
}

#weeklyTopScorersHeader .myWeeklyTopScoreNote,
#monthlyTopScorersHeader .myMonthlyTopScoreNote,
#yearlyTopScorersHeader .myYearlyTopScoreNote,
#aveTopScorersHeader .myAveTopScoreNote,
#topGameCountsHeader .myTopGameCountsNote  {
    font-size: 10px;
}

#weeklyTopScorersHeader .homeLink,
#monthlyTopScorersHeader .homeLink,
#yearlyTopScorersHeader .homeLink,
#aveTopScorersHeader .homeLink,
#topGameCounts .homeLink {
    margin: 8px 0 6px;
}

#weeklyTopScorersHeader .rank span,
#monthlyTopScorersHeader .rank span,
#yearlyTopScorersHeader .rank span,
#aveTopScorersHeader .rank span,
#topGameCounts .rank span {
    width: auto;
    height: auto;
}


.rank {
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    width: 100px;
}

.rank span {
    /*border: 3px outset gold;*/
    padding: 6px 4px;
    /*background: rgba(255, 215, 0, 0.6);*/
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    border-radius: 100%;
    display: inline-block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    /*box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5);*/
}
/*
.rank span[title="2nd Place"] {
    border-color: silver;
    background: rgba(192, 192, 192, .6);
}

.rank span[title="3rd Place"] {
    border-color: #f4a460;
    background: rgba(244, 164, 96, .6);
}
*/
.player {
    width: 48%;
    position: relative;
}

.player img {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
    margin: 5px 10px 5px 5px;
    border-radius: 100%;
    box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.5);
}

#weeklyTopScorers .player img,
#monthlyTopScorers .player img,
#yearlyTopScorers .player img,
#aveTopScorers .player img,
#topGameCounts .player img {
    box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5);
}

.score {
    text-align: center;
    width: 150px;
}

.date {
    text-align: center;
    width: 250px;
}

.game {
    text-align: center;
}

.shareCol {
    width: 100px;
    text-align: center;
}

.topRank {
    background: #fafad2;
    font-weight: bold;
    height: 100px;
}

.topRank .player:before {
    content: '👑✨';
    display: inline-block;
    width: 80px;
    /*32px;*/
    height: 23px;
    position: absolute;
    /*background: transparent url(crown-32x23.png) no-repeat;
top: 3px;
left: 16px;*/
    top: 5px;
    left: 19px;
    font-size: 20px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

.fbLoginContainer,
.loggedIn,
.loginCallout {
    width: 920px;
    text-align: right;
    margin: auto;
}

.loggedIn img {
    vertical-align: middle;
    border-radius: 100%;
}

.loggedIn span {
    margin-left: 10px;
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loginCallout {
    margin: 20px auto 5px;
    font-size: 10px;
}

.loginCallout.loggedOut {
    position: relative;
    top: 80px;
}

.loginCallout.loggedOut~.fbLoginContainer {
    position: relative;
    top: -30px;
}

.followUs {
    /*width: 920px;*/
    margin: auto;
    text-align: center;
}

.fb-like {
    display: block !important;
    margin: 5px auto 20px;
}

.scoreNote {
    margin-top: 10px;
    font-size: 13px;
    color: #555;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.fbShare {
    background: #1877f2;
    border: 0;
    cursor: pointer;
    color: #fff;
    font: 700 13px Helvetica, Arial, sans-serif;
    padding: 5px 8px;
    border-radius: 3px;
}

.myScore:not(.topRank) {
    background: #f0ffff;
}

.myTopScoreNote {
    font-size: 14px;
}

.tile,
#gameTitle span {
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .4);
}

#gameTitle span {
    border-radius: 7px;
}

#gameTitle.red span {
    background: red;
}

#gameTitle.fuchsia span {
    background: fuchsia;
}

#gameTitle.blue span {
    background: blue;
}

#gameTitle.yellow span {
    background: yellow;
}

#gameTitle.cyan span {
    background: cyan;
}

.tile:empty {
    border-color: transparent !important;
    background: rgba(0, 128, 0, 0.3) !important;
    border-radius: 0;
}

#samegameTbl {
    background: green no-repeat center;
    background-size: cover;
}

#samegameTbl.xxxx td {
    background: rgba(0, 128, 0, 0.3) !important;
    border-color: transparent !important;
}

.smalltile {
    border-radius: 5px;
    padding: 0;
}

.gameNotes {
    font-size: 13px;
    color: #999;
}

.gameOver .tile:empty {
    background: transparent !important;
}

#myTopScore:not(:empty) {
    margin: 10px auto -30px;
    text-align: right;
    width: 920px;
    font-size: 12px;
}

#myTopScore > div:not(:last-child) {
	margin-bottom: 11px;
}

#myTopScore strong {
    border: 2px outset #eee;
    padding: 3px 4px;
    border-radius: 5px;
    /* box-shadow: 1px 1px 4px rgba(0,0,0,.4); */
    background: #90ee90;
}

#buttonDiv input {
    -webkit-appearance: none;
    border: 1px solid #c3c3c3;
    border-radius: 3px;
    line-height: 23px;
}

#buttonDiv input:not(:disabled) {
    background: #efefef;
}

#status {
    white-space: nowrap;
}

#selectedEmoji {
    font-size: 30px;
    vertical-align: text-top;
    margin-right: 5px;
}

#gaaxdContainer {
    position: relative;
}

#gaaxd {
    position: absolute;
    height: 60px;
    width: 468px;
    top: 28px;
    left: 50%;
    margin-left: -234px;
}

@media (max-device-width: 414px) and (orientation: portrait) {
    #gaaxdContainer {
        width: 175%;
    }

    /* #gaaxd {
margin-left: -230px;
} */
}

/* @media (device-width: 667px) and (orientation: landscape) {
#gaaxd {
margin-left: -200px;
}
} */

/* @media (min-device-width: 320px) and (orientation: portrait), (min-device-width: 568px) and (orientation: landscape) {
#gaaxd {
margin-left: 0;
left: 213px;
}
}
@media (min-device-width: 812px) and (orientation: landscape) {
#gaaxd {
left: 260px;
}
}
@media (min-device-width: 847px) and (orientation: landscape) {
#gaaxd {
left: 280px;
}
} */

@media (max-device-width: 375px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
    #gaaxd {
        margin-left: -190px;
    }
}

@media (max-device-width: 320px) and (hover: none) and (pointer: coarse) {
    #gaaxd {
        margin-left: -120px;
    }
}

@media (max-device-width: 731px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #gaaxd {
        margin-left: -220px;
    }
}

@media (max-device-height: 731px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #gaaxd {
        margin-left: -220px;
    }
}

@media (max-device-width: 667px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #gaaxd {
        margin-left: -205px;
    }
}

@media (max-device-width: 568px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #gaaxd {
        margin-left: -140px;
    }
}

#fb-root>div:not(.fb_dialog)~.fb_dialog:not([style*="top: -"]) {
    top: 750px !important;
    right: 30px !important;
    left: auto !important;
}

#btnMode {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    width: 52.5px;
}

.mode-letter-round #samegameTbl:not(.gameOver),
.mode-emoji-round #samegameTbl:not(.gameOver),
.mode-blank-round #samegameTbl:not(.gameOver),
.mode-letter-round #samegameTbl:not(.gameOver) .tile:empty,
.mode-emoji-round #samegameTbl:not(.gameOver) .tile:empty,
.mode-blank-round #samegameTbl:not(.gameOver) .tile:empty {
    background: #262626 !important;
}

.mode-letter-round #gameTitle span,
.mode-emoji-round #gameTitle span,
.mode-blank-round #gameTitle span,
.mode-letter-round .smalltile,
.mode-emoji-round .smalltile,
.mode-blank-round .smalltile,
.mode-letter-round .tile,
.mode-emoji-round .tile,
.mode-blank-round .tile {
    border-radius: 100%;
}

.mode-blank-round #samegameTbl:not(.gameOver) .tile,
.mode-blank-square #samegameTbl:not(.gameOver) .tile,
.mode-blank-round .smalltile,
.mode-blank-square .smalltile {
    text-indent: -999999px;
}

.modeTransition .tile,
.modeTransition .smalltile,
.modeTransition #gameTitle span {
    transition: border-radius .4s;
}

[class*="mode-emoji-"] .tile:not([data-no-emoji]),
[class*="mode-emoji-"] .smalltile {
    text-indent: -999999px;
    position: relative;
}

[class*="mode-emoji-"] .tile:empty:not([data-no-emoji]):before {
    display: none;
}

[class*="mode-emoji-"] .tile:not([data-no-emoji]):before,
[class*="mode-emoji-"] .smalltile:before {
    display: flex;
    justify-content: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 0;
    background: transparent;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    font-size: 18px;
}

[class*="mode-emoji-"] .smalltile:before {
    width: 27px;
    height: 27px;
    line-height: 27px;
    font-size: 13px;
}

/* A */
[class*="mode-emoji-"] .tile[style*=blue]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .tile[style*=silver][data-letter=A]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .smalltile[style*=blue]:before {
    content: var(--emojiA);
}

/* B */
[class*="mode-emoji-"] .tile[style*=red]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .tile[style*=silver][data-letter=B]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .smalltile[style*=red]:before {
    content: var(--emojiB);
}

/* C */
[class*="mode-emoji-"] .tile[style*=fuchsia]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .tile[style*=silver][data-letter=C]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .smalltile[style*=fuchsia]:before {
    content: var(--emojiC);
}

/* D */
[class*="mode-emoji-"] .tile[style*=yellow]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .tile[style*=silver][data-letter=D]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .smalltile[style*=yellow]:before {
    content: var(--emojiD);
}

/* E */
[class*="mode-emoji-"] .tile[style*=cyan]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .tile[style*=silver][data-letter=E]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .smalltile[style*=cyan]:before {
    content: var(--emojiE);
}

/* ? */
[class*="mode-emoji-"] .tile[style*=silver]:not([data-no-emoji]):before,
[class*="mode-emoji-"] .smalltile[style*=silver]:before {
    content: var(--emojiQ);
}

.inlineAdx {
    font-size: 11px;
    text-align: center;
    margin: 20px 0 0;
    color: indianred;
}
.inlineAdx a {
    color: royalblue;
}