/*
Theme Name: BoggleLive
Author: Matt Curney
Author URI: https://mattcurney.com/
Description: Play Boggle and Chat Live
*/
:root {
/* global background */
--hue: 224;
--background: radial-gradient(hsl(var(--hue) 40% 32%), hsl(var(--hue) 40% 16%));
--light-overlay: hsl(var(--hue) 24% 32% / 80%), hsl(var(--hue) 24% 24% / 80%);
--menu-background: linear-gradient(135deg, hsl(var(--hue) 32% 24%), hsl(var(--hue) 32% 50%));
--bg: hsl(var(--hue) 12% 80% / 1);
--tile-color: hsl(var(--hue) 24% 16%);
--points-color: hsl(var(--hue) 70% 28%);
/* game */
--correct-letter: hsl(35 60% 55%);
--bogglelive: linear-gradient(45deg, var(--three-letter), var(--seven-letter));
--ribbon: hsl(35 60% 55%);
--ribbon-dark: hsl(35 60% 40%);
/* board */
--three-letter: hsl(35 60% 55%);
--four-letter: hsl(25 64% 55%);
--five-letter: hsl(10 68% 55%);
--six-letter: hsl(0 68% 55%);
--seven-letter: hsl(340 74% 48%);
--eight-letter: hsl(287 90% 40%);
--nine-letter: hsl(273 94% 50%);
--shadow: rgba(0, 0, 0, .3);
--tile-light: hsl(var(--hue) 11% 40%);
--tile-medium: hsl(var(--hue) 24% 24%);
--light: rgba(255, 255, 255, .4);
--tile: rgba(255, 255, 255, .5);
--dropshadow: drop-shadow(0px 6px 20px rgba(0, 0, 0, .6));
--bezier: cubic-bezier(.175, .885, .32, 1.275);
--half-white: rgba(255, 255, 255, .7);
--quarter-white: rgba(255, 255, 255, .3);
--trophy-gold: #e9bd3a;
--trophy-gold-dark: hsl(45 83% 41% / 1);
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
line-height: 1;
}
h2 {
font-size: 24px;
}
svg .fa-primary {
fill: var(--bg);
}
body {
color: #fff;
background: var(--background);
background-attachment: fixed;
background-size: cover;
transition: background-color 400ms ease;
font-family: 'Averta', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
}
#bitnami-banner {
display: none;
}
.title svg {
width: 200px;
fill: white;
}
.farewell {
background: rgba(0, 0, 0, .2);
padding: 50px 20px;
margin: 100px 0;
backdrop-filter: blur(10px);
}
.farewell p {
width: 400px;
max-width: 100%;
}
#end-screen-message .lower-section {
display: flex;
justify-content: center;
width: 100%;
gap: 16px;
}
#end-screen-message .skip-next {
padding: 0;
width: 100%;
}
.the-title {
text-align: center;
}
.login-wrap {
display: flex;
gap: 8px;
}
.logo {
width: 120px;
display: block;
margin: 8px auto;
position: relative;
}
/* TEXT */
h1 {
font-size: 32px;
line-height: 1;
}
a {
color: var(--ribbon);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
p {
font-size: 16px;
line-height: 1.6;
letter-spacing: .02em;
margin: 16px auto 24px;
}
/* BUTTONS */
.button {
font-family: 'Averta', sans-serif;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
text-align: center;
height: 48px;
line-height: 48px;
padding: 0 48px;
white-space: nowrap;
position: relative;
border-radius: 48px;
color: #fff;
display: inline-block;
border: 2px solid rgba(0, 0, 0, .3);
-webkit-tap-highlight-color: transparent;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, .1);
box-sizing: content-box;
text-shadow: none;
}
.button svg {
fill: #fff;
width: 16px;
margin-left: 8px;
}
.button.secondary-button {
height: 32px;
line-height: 32px;
font-size: 12px;
padding: 0px 24px;
cursor: pointer;
background: transparent;
margin: 0;
}
.button:focus {
outline: 0;
}
.button:hover,
.card:hover {
transform: scale(1.04);
transition: transform 200ms ease;
}
.button:active,
.card:active {
transform: scale(1);
}
.archive-section {
text-align: center;
margin-top: 80px;
}
.info-tool-tip {
display: none;
}
.info-tool-tip.show {
display: block;
position: absolute;
background: var(--bg);
color: var(--tile-color);
width: 420px;
max-width: 100%;
padding: 32px;
top: 64px;
left: 50%;
transform: translateX(-50%);
border-radius: 16px;
z-index: 6;
}
/* TOP BAR */
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 4;
}
/* MENU FLYOUT */
.menu-dropdown {
position: absolute;
left: 0;
top: 0;
text-align: left;
color: #fff;
width: 292px;
margin-left: -24px;
padding-left: 24px;
margin-top: -24px;
padding-top: 24px;
height: auto;
background: var(--menu-background);
border-radius: 0 0 76% 0;
transform: translate(-50%, -100%);
box-shadow: 4px 4px 16px -8px rgb(0 0 0 / 60%);
transition: transform 500ms cubic-bezier(.075, .785, .22, 1.175);
z-index: 12;
}
.menu-dropdown img {
width: 100px;
margin: 8px 0 0 48px;
opacity: .8;
transition: opacity 100ms ease;
}
.menu-dropdown img:hover {
opacity: 1;
}
.menu-dropdown.shown {
transform: translate(0);
}
.menu-dropdown .menu {
padding: 8px 0 56px 56px;
}
.menu-dropdown a {
color: var(--bg);
text-decoration: none;
font-size: 14px;
line-height: 1;
transition: color 100ms ease;
margin: 0;
padding: 12px 16px;
position: relative;
letter-spacing: .4px;
display: flex;
gap: 12px;
align-items: center;
justify-content: start;
}
.menu-dropdown a svg {
fill: var(--bg);
height: 20px;
width: 20px;
}
.menu-dropdown a:hover {
color: #fff;
}
.menu-dropdown a.active {
color: #fff;
filter: drop-shadow(2px 2px 8px var(--ribbon));
}
.menu-dropdown a.active svg,
.menu-dropdown a.active .grid-background,
.menu-dropdown a.active .head-outline,
.menu-dropdown a.active .fa-primary {
fill: #fff;
}
.menu-dropdown .mute-button span:last-child {
display: none;
}
.sound-off .menu-dropdown .mute-button span:last-child {
display: inline-block;
}
.sound-off .menu-dropdown .mute-button span:first-child {
display: none;
}
.menu-dropdown h3 {
font-size: 11px;
text-transform: uppercase;
color: rgba(255, 255, 255, .4);
margin: 16px 0 4px 16px !important;
letter-spacing: 1px;
text-align: left !important;
}
.menu-burger {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
cursor: pointer;
z-index: 13;
padding: 10px 10px 6px;
border-radius: 10px;
filter: var(--dropshadow);
}
.menu-burger.clicked {
filter: none;
}
.menu-line {
display: block;
height: 4px;
width: 100%;
margin-bottom: 4px;
border-radius: 10px;
transition: transform 300ms cubic-bezier(.175, .885, .32, 1.275);
transform: translateZ(0);
background-color: #fff;
cursor: pointer;
}
.menu-burger.clicked .line-1 {
transform: translateY(8px) rotateZ(-135deg);
}
.menu-burger.clicked .line-2 {
opacity: 0;
}
.menu-burger.clicked .line-3 {
transform: translateY(-8px) rotateZ(135deg);
}
.menu-burger.clicked .menu-line,
.menu-burger:hover .menu-line {
box-shadow: 0 0 10px 0px rgba(24, 18, 47, .5);
}
.menu-dropdown .logo a {
display: block;
}
/* Brilliance */
.brilliance {
position: absolute;
padding: 4px 6px 2px;
top: -100%;
top: 0;
right: 0;
border-radius: 0 0 0 14px;
border: 3px solid rgba(0, 0, 0, .1);
box-sizing: content-box;
border-top: none;
border-right: none;
z-index: 10;
text-align: center;
}
.brilliance.shown {
width: 250px;
max-width: 100%;
}
.additional-stats {
flex-direction: column;
justify-content: center;
gap: 15px;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
width: 0;
transition: height 300ms var(--bezier), width 300ms ease;
align-items: center;
}
.brilliance.shown .additional-stats {
display: flex;
padding: 8px;
height: 72px;
opacity: 1;
width: 100%;
}
.down-arrow {
position: absolute;
right: 10px;
top: 10px;
width: 20px;
height: auto;
cursor: pointer;
z-index: 1;
}
.down-arrow:hover {
transform: scale(1.02);
transition: transform 100ms ease;
}
.down-arrow svg {
fill: #fff;
}
.brilliance.shown .down-arrow svg {
transform: rotate(180deg);
}
.down-arrow:hover svg {
fill: var(--ribbon);
}
/*------ ribbon ------*/
.ribbon {
font-size: 16px;
display: inline-block;
z-index: 1;
position: relative;
}
.how-to-play h1,
.how-to-play h2,
.how-to-play h3 {
margin: 16px;
}
.how-to-play p {
font-size: 16px;
line-height: 1.6;
margin: 16px;
}
.ribbon span {
color: #FFF;
background: var(--ribbon);
display: block;
text-align: center;
position: relative;
padding: 8px 16px;
line-height: 1;
border-radius: 8px;
z-index: 1;
white-space: nowrap;
text-transform: uppercase;
}
.ribbon::before,
.ribbon::after {
content: '';
position: absolute;
top: calc(50% - 8px);
border-style: solid;
border-width: 8px;
z-index: 0;
border-radius: 4px;
border-color: var(--ribbon-dark) var(--ribbon-dark) var(--ribbon-dark) transparent;
left: -14px;
}
.ribbon::after {
border-color: var(--ribbon-dark) transparent var(--ribbon-dark) var(--ribbon-dark);
left: auto;
right: -14px;
}
.ribbon.dark span {
background: var(--points-color);
}
.ribbon.dark::before,
.ribbon.dark::after {
--ribbon-dark: hsl(var(--hue) 70% 20%);
}
.title-wrap {
text-align: center;
margin: 8px auto 0;
display: flex;
align-items: center;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3;
}
.title {
font-size: 18px;
position: relative;
margin-top: 14px;
letter-spacing: 1px;
font-style: italic;
}
.title span strong {
display: block;
font-size: 10px;
line-height: 1.4;
color: var(--half-white);
}
.title-meta {
position: fixed;
left: 160px;
transform: translateX(-50%);
top: 53px;
color: #fff;
z-index: 2;
text-transform: capitalize;
font-size: 12px;
}
.brilliance:hover .info {
display: block;
}
.current-league {
font-size: 20px;
line-height: 1;
}
#profile {
display: inline-block;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, .1);
border-radius: 50px;
position: relative;
margin-right: 8px;
}
#profile:hover {
transform: scale(1.08);
transition: transform 200ms ease;
}
#profile img {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 50px;
border: none;
}
#profile svg {
width: 40px;
height: 40px;
position: absolute;
fill: transparent;
left: -6px;
top: -6px;
z-index: -1;
transform: rotate(135deg);
}
.shown #profile {
height: 50px;
width: 50px;
}
.shown #profile svg {
width: 66px;
height: 66px;
left: -8px;
top: -8px;
}
.brilliance .next-league {
text-transform: uppercase;
font-size: 9px;
color: var(--shadow);
text-shadow: none;
margin-top: 16px;
}
.brilliance .next-league span {
color: rgba(0, 0, 0, .5);
}
.brilliance .username {
text-transform: capitalize;
font-size: 10px;
line-height: 1;
color: #fff;
text-shadow: 2px 2px 8px rgb(0 0 0 / 30%);
max-width: 100%;
width: 80px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 8px 0 0;
}
.brilliance.shown .username {
font-size: 20px;
width: 100%;
overflow: visible;
}
#brilliance {
width: 100%;
display: none;
padding: 4px 16px 0px 8px;
text-shadow: 2px 2px 8px rgb(0 0 0 / 30%);
}
#brilliance::before {
content: 'granite league';
font-size: 10px;
line-height: 1;
display: block;
margin: 0 0 8px 0;
color: var(--half-white);
text-transform: uppercase;
}
.shown #brilliance {
display: block;
}
#brilliance .text {
color: #fff;
font-size: 14px;
}
#current-points {
font-size: 20px;
}
#current-points::after {
content: 'points';
font-size: 10px;
line-height: 1;
display: block;
color: var(--half-white);
text-transform: uppercase;
}
#league-goal {
display: none;
}
/*---------------- GEMS ----------------*/
#profile .player-progress {
stroke: #91a2ac;
}
.bronze #profile .player-progress {
stroke: #e9bf64;
}
.sapphire #profile .player-progress {
stroke: #267eff;
}
.emerald #profile .player-progress {
stroke: #00c44f;
}
.ruby #profile .player-progress {
stroke: #f18290;
}
.amethyst #profile .player-progress {
stroke: #d163ff;
}
.diamond #profile .player-progress {
stroke: #ddfffe;
}
.magic #profile .player-progress {
stroke: #bcdf93;
}
.phoenix #profile .player-progress {
stroke: #e63737;
}
.interstellar #profile .player-progress {
stroke: #0e0027;
}
.nirvana #profile .player-progress {
stroke: #00fc7c;
}
.bronze #brilliance::before {
content: 'bronze league';
}
.sapphire #brilliance::before {
content: 'sapphire league';
}
.emerald #brilliance::before {
content: 'emerald league';
}
.ruby #brilliance::before {
content: 'ruby league';
}
.amethyst #brilliance::before {
content: 'amethyst league';
}
.diamond #brilliance::before {
content: 'diamond league';
}
.magic #brilliance::before {
content: 'magic league';
}
.phoenix #brilliance::before {
content: 'phoenix league';
}
.interstellar #brilliance::before {
content: 'interstellar league';
}
.nirvana #brilliance::before {
content: 'nirvana league';
}
.granite {
background: linear-gradient(45deg, hsl(215deg 10% 46%), hsl(215deg 10% 36%));
}
.bronze {
background: linear-gradient(45deg, hsl(43deg 46% 51%), hsl(43deg 46% 41%));
}
.sapphire {
background: linear-gradient(45deg, hsl(226deg 100% 41%), hsl(226deg 100% 31%));
}
.emerald {
background: linear-gradient(45deg, hsl(149deg 99% 29%), hsl(149deg 99% 19%));
}
.ruby {
background: linear-gradient(45deg, hsl(344deg 98% 39%), hsl(344deg 98% 29%));
}
.amethyst {
background: linear-gradient(45deg, hsl(285deg 100% 38%), hsl(285deg 100% 28%));
}
.diamond {
background: linear-gradient(45deg, hsl(245deg 43% 85%), hsl(245deg 43% 75%));
}
.magic {
background: linear-gradient(-135deg, hsl(312deg 42% 62% / 90%), hsl(190deg 67% 80% / 90%));
}
.phoenix {
background: linear-gradient(45deg, hsl(40deg 56% 60%), hsl(18deg 90% 40%));
}
.interstellar {
background: linear-gradient(45deg, hsl(249deg 76% 39%), hsl(267deg 65% 67%));
}
.nirvana {
background: linear-gradient(45deg, hsl(155deg 100% 29%), hsl(181deg 100% 90%));
}
.granite img {
border: 2px solid hsl(215deg 10% 46%);
}
.bronze img {
border: 2px solid hsl(43deg 46% 51%);
}
.sapphire img {
border: 2px solid hsl(226deg 100% 41%);
}
.emerald img {
border: 2px solid hsl(149deg 99% 29%);
}
.ruby img {
border: 2px solid hsl(344deg 98% 39%);
}
.amethyst img {
border: 2px solid hsl(285deg 100% 38%);
}
.diamond img {
border: 2px solid hsl(245deg 43% 85%);
}
.magic img {
border: 2px solid #c776b7;
}
.phoenix img {
border: 2px solid hsl(6deg 71% 60% / 60%);
}
.interstellar img {
border: 2px solid hsl(264deg 92% 90% / 90%);
box-shadow: 0 4px 32px hsl(267deg 100% 80%);
}
.nirvana img {
border: 2px solid hsl(195deg 100% 80%);
box-shadow: 0 4px 32px rgb(255 255 255 / 100%);
}
.granite::before,
.bronze::before,
.sapphire::before,
.emerald::before,
.ruby::before,
.amethyst::before,
.diamond::before,
.magic::before,
.phoenix::before,
.interstellar::before,
.nirvana::before {
content: '';
height: 50%;
min-height: 12px;
width: 33%;
min-width: 8px;
position: absolute;
bottom: 2%;
right: -15%;
filter: drop-shadow(0px 0px 5px #fff);
}
.phoenix::before,
.interstellar::before,
.nirvana::before {
height: 46%;
min-height: 12px;
width: 51%;
min-width: 8px;
right: -22%;
bottom: -1%;
}
.brilliance::before {
display: none;
}
.granite.visible::before {
background: url('/wp-content/uploads/2022/05/granite.png');
background-size: cover;
}
.bronze.visible::before {
background: url('/wp-content/uploads/2022/05/bronze.png');
background-size: cover;
}
.sapphire.visible::before {
background: url('/wp-content/uploads/2022/05/sapphire.png');
background-size: cover;
}
.emerald.visible::before {
background: url('/wp-content/uploads/2022/05/emerald.png');
background-size: cover;
}
.ruby.visible::before {
background: url('/wp-content/uploads/2022/05/ruby.png');
background-size: cover;
}
.amethyst.visible::before {
background: url('/wp-content/uploads/2022/05/amethyst.png');
background-size: cover;
}
.diamond.visible::before {
background: url('/wp-content/uploads/2022/05/diamond.png');
background-size: cover;
}
.magic.visible::before {
background: url('/wp-content/uploads/2022/05/magic.png');
background-size: cover;
}
.phoenix.visible::before {
background: url('/wp-content/uploads/2022/07/phoenix.png') center center;
background-size: cover;
}
.interstellar.visible::before {
background: url('/wp-content/uploads/2022/10/interstellar.png') center center;
background-size: cover;
}
.nirvana.visible::before {
background: url('/wp-content/uploads/2023/01/nirvana.png') center center;
background-size: cover;
}
/*-----------------------------------------------------------------------------------------------*/
/*------------------------------------- FOOTER STYLES -------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/* CLOSE ADS */
.mmt-sticky-bottom .mmt-sticky-close {
display: none !important;
}
/* FOOTER */
footer {
position: relative;
color: #fff;
z-index: 1;
}
footer.visible {
background: url(/wp-content/uploads/2023/07/books-background.jpg);
}
footer .copyright {
opacity: .6;
margin: 16px;
}
footer .button {
background: hsl(156 55% 40%);
}
.footer-message {
padding: 48px;
background: hsl(186deg 24% 16% / 96%);
}
.page-id-158422 .footer-message {
display: none;
}
.footer-message p {
font-size: 16px;
line-height: 1.5;
width: 500px;
max-width: 100%;
margin: 24px auto 24px;
padding: 0 20px;
}
.footer-message .logo {
margin: 40px auto 32px;
}
footer p {
text-align: center;
margin: 10px auto;
font-size: 13px;
line-height: 1.9;
width: 100%;
max-width: 600px;
}
footer a {
color: #fff;
}
footer p a,
footer a:hover {
color: #ffcdc2;
}
footer .lower-content {
padding: 50px 20px;
font-size: 12px;
display: grid;
justify-items: center;
align-items: center;
width: 100%;
background: var(--tile-color);
}
footer .lower-content>div {
display: flex;
gap: 16px;
}
.faq-section {
width: 100%;
max-height: none;
min-height: 80vh;
padding: 40px 0;
background: radial-gradient(hsl(156deg 55% 48% / 96%), hsl(156deg 55% 18% / 88%));
}
.faq-item {
padding: 16px;
background: rgba(0, 0, 0, .1);
border-radius: 16px;
width: 480px;
max-width: 100%;
margin: 8px auto;
backdrop-filter: blur(16px);
}
.faq-answer {
display: none;
padding: 16px 24px;
margin: 16px 0;
line-height: 1.6;
font-size: 16px;
background: hsl(156deg 51% 24% / 72%);
border-radius: 12px;
}
.faq-question {
cursor: pointer;
border: none;
background: none;
text-align: left;
width: 100%;
font-size: 18px;
color: #fff;
font-weight: normal;
padding: 0;
}
.faq-question .icon {
float: right;
}
footer h3 {
font-size: 11px;
text-transform: uppercase;
color: rgba(255, 255, 255, .4);
letter-spacing: 1px;
}
footer .wrap {
display: flex;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
}
.blog-home-wrap {
width: 100%;
padding: 40px 0 80px;
text-align: center;
background: var(--background);
z-index: 1;
position: relative;
border-bottom: 6px solid var(--tile-color);
color: white;
}
.the-post-content {
color: #fff;
font-size: 12px;
line-height: 1.2;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding: 24px;
border-radius: 16px;
border: 4px solid var(--tile-color);
aspect-ratio: 1 / 1;
}
.the-post-content img {
width: 100%;
height: 100% !important;
object-fit: cover;
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
.the-post-title {
font-size: 22px;
padding: 16px;
text-align: center;
}
@media screen and (max-width: 480px) {
.card {
gap: 2px;
font-size: 12px;
}
.card h3 {
font-size: 18px;
}
.two-column-grid {
grid-template-columns: 1fr;
}
.two-column-grid .full-width {
grid-column: span 1;
}
.three-column-grid {
grid-template-columns: 1fr 1fr;
max-width: calc(100% - 32px);
gap: 16px;
}
.three-column-grid .full-width {
grid-column: span 2;
}
#profile {
width: 24px;
height: 24px;
}
#profile svg {
width: 36px;
height: 36px;
left: -6px;
top: -6px;
}
.blog-home {
grid-template-columns: 1fr;
}
}
#demonstration {
padding: 8px 8px 16px 8px;
}
#lil-letter-board {
border-radius: 14px;
width: 120px;
height: 120px;
margin: 0 auto;
position: relative;
}
#lil-letter-board .letter {
width: 31%;
height: 31%;
position: relative;
float: left;
margin: 1%;
background: var(--bg);
border-radius: 9px;
}
#lil-letter-board .selected {
background: transparent;
}
#lil-letter-board .letter span {
position: absolute;
line-height: 1;
font-size: 22px;
top: 6%;
left: 6%;
width: 88%;
height: 88%;
border-radius: 100%;
background: rgb(255 255 255 / 72%);
display: flex;
align-items: center;
justify-content: center;
color: var(--tile-color);
transition: background-color 100ms ease, color 100ms ease;
text-transform: uppercase;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
#lil-letter-board .selected span {
background-color: var(--tile-light);
color: #fff;
animation: selected 300ms ease;
}
#lil-letter-board .glow .selected span {
background: var(--tile-light);
color: #fff;
}
#lil-letter-board .glow .selected {
animation: wordFound 800ms 200ms;
}
#lil-letter-board.four-letter .selected span,
#lil-letter-board.four-letter .goo {
background: var(--four-letter);
}
.shake-hard {
animation-name: shake-hard;
animation-duration: 400ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes shake-hard {
0% {
transform: translate(0, 0) rotate(0)
}
10% {
transform: translate(6px, 10px) rotate(-.5deg)
}
20% {
transform: translate(-8px, -7px) rotate(.5deg)
}
30% {
transform: translate(-9px, -3px) rotate(3.5deg)
}
40% {
transform: translate(8px, -7px) rotate(-2.5deg)
}
50% {
transform: translate(9px, -1px) rotate(2.5deg)
}
60% {
transform: translate(10px, 4px) rotate(1.5deg)
}
70% {
transform: translate(3px, -4px) rotate(-2.5deg)
}
80% {
transform: translate(2px, 7px) rotate(-2.5deg)
}
90% {
transform: translate(-8px, -9px) rotate(2.5deg)
}
100% {
transform: translate(0, 0) rotate(0)
}
}
.lil-connectors-wrap .connector {
position: relative;
height: auto;
float: left;
width: 31%;
height: 31%;
margin: 1%;
}
.lil-connectors-wrap .connector::after {
content: "";
padding-bottom: 100%;
display: block;
}
.play-more {
margin-top: 24px;
color: var(--tile-medium);
}
.play-more-puzzles {
color: #fff;
background: var(--bogglelive);
}
.text-to-speech {
position: relative;
background: rgba(0, 0, 0, .1);
color: white;
font-family: 'Averta', sans-serif;
padding-left: 24px;
font-size: 10px;
text-transform: uppercase;
height: 40px;
width: 40px;
border-radius: 40px;
margin-right: 8px;
border: 2px solid rgba(0, 0, 0, .2);
cursor: pointer;
box-sizing: content-box;
}
.single-definition .text-to-speech {
background: rgba(0, 0, 0, .4);
}
.text-to-speech:hover {
transform: scale(1.08);
transition: transform 200ms ease;
}
.text-to-speech.playing {
transform: scale(1);
}
.text-to-speech::before {
content: url('data:image/svg+xml; utf8, ');
position: absolute;
left: 14px;
top: 9px;
height: auto;
width: 16px;
z-index: 1;
}
.bbs-puzzles {
padding: 16px;
font-size: 24px;
line-height: 1;
display: inline-block;
border-radius: 40px;
}
.bbs-puzzles svg {
width: 20px;
margin-right: 8px;
fill: #fff;
}
.page-template-index h4 {
font-size: 32px;
}
.leaderboard-wrap {
padding: 80px 0;
background: linear-gradient(transparent, rgba(0, 0, 0, .6), rgba(0, 0, 0, .7));
}
.leaderboard-wrap h2 {
text-align: center;
}
.board-wrap {
position: relative;
width: 400px;
max-width: 100vw;
margin: 0 auto 100px;
border-radius: 32px;
z-index: 0;
text-align: center;
}
.end-praise {
font-size: 16px;
text-transform: uppercase;
line-height: 1;
padding: 4px;
margin: 0;
}
/* Hide scroll bar */
.slides::-webkit-scrollbar {
display: none;
}
#end-screen-message .secondary-button {
color: var(--tile-color);
}
#end-screen-message h3 {
font-size: 14px;
margin: 16px 0 8px;
}
#end-screen-message .countdown-to-next-game::before {
display: none;
}
#end-screen-message .countdown-to-next-game {
color: var(--tile-color);
font-size: 14px;
display: block;
height: auto;
padding: 4px 0;
height: 32px;
}
.hint-icon {
display: inline-block;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, .2);
padding: 3px;
border-radius: 26px;
vertical-align: middle;
}
.hint-icon svg {
height: 80%;
fill: #fff;
}
.button svg {
height: 20px;
margin-left: 8px;
vertical-align: text-bottom;
fill: #fff;
}
.small-button svg {
height: 14px;
margin: 0 8px 4px 0;
vertical-align: middle;
}
.calculating-results {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
z-index: 1;
}
.calculating-results>div {
width: 80%;
height: 26px;
border: 2px solid rgba(0, 0, 0, .16);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.calculating-results>div>span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
z-index: -1;
background: rgba(0, 0, 0, .15);
animation: loadResults 6s linear;
}
@keyframes loadResults {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.calculating-results>div>span.full {
width: 100%;
}
.calculating-results>div::after {
content: 'Calculating Results...';
display: block;
font-size: 14px;
line-height: 24px;
width: 100%;
text-align: center;
}
.points-to-add {
display: none;
}
.game-leaderboard .player {
background: transparent;
}
.player-image {
background: none !important;
position: relative;
}
.player-progress {
transition: stroke-dashoffset 500ms var(--bezier);
stroke: var(--correct-letter);
}
.emoji {
text-shadow: 0 0 16px BLACK;
padding: 4px;
}
.the-clue {
font-size: 16px;
line-height: 1;
width: auto;
max-width: 100%;
text-align: center;
position: relative;
text-transform: capitalize;
}
.words-to-find {
text-transform: capitalize;
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
align-items: center;
padding: 8px 0;
position: relative;
}
.words-to-find .quotes {
font-size: 20px;
}
.no-touch {
pointer-events: none;
opacity: .7 !important;
}
.disabled {
pointer-events: none !important;
cursor: default;
}
.disabled .letter {
pointer-events: none !important;
cursor: default;
}
.greyed-out {
opacity: .2!important;
}
.master-grid {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(404px, 2fr) minmax(150px, 1fr);
justify-items: center;
width: 1020px;
max-width: 100%;
position: relative;
margin: 0 auto;
gap: 0 16px;
min-height: 100vh;
box-sizing: border-box;
}
#game-wrap {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
position: relative;
background-size: cover;
align-items: center;
padding-bottom: 80px;
}
.timer-wrap {
text-align: center;
font-size: 13px;
position: relative;
border: 6px solid rgba(0, 0, 0, 0.3);
border-radius: 50%;
width: 40px;
height: 40px;
margin: 8px auto;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
display: none;
}
.leaderboard-header {
font-size: 10px;
text-transform: uppercase;
position: relative;
margin: 4px;
text-align: center;
}
.leaderboard-header::before,
.leaderboard-header::after {
content: url('data:image/svg+xml; utf8, ');
width: 16px;
height: 16px;
}
.timer-wrap::after {
content: url('data:image/svg+xml; utf8, ');
position: absolute;
right: -20px;
top: 5px;
width: 8px;
}
.timer-wrap.halfway::after {
content: url('data:image/svg+xml; utf8, ');
}
.timer-wrap.empty::after {
content: url('data:image/svg+xml; utf8, ');
}
.above-board {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 0 8px;
gap: 8px;
}
.hide {
opacity: 0 !important;
transition: opacity 300ms ease;
}
/* ABOVE BOARD CONTENT */
.word-wrap {
position: relative;
width: 100%;
margin: 0 auto;
z-index: 3;
padding: 16px;
}
.score-reveal-wrap {
width: 40px;
height: 40px;
display: flex;
cursor: pointer;
position: absolute;
left: 16px;
top: 7px;
}
#score {
color: var(--tile-color);
text-align: left;
font-size: 18px;
line-height: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
#score::after {
content: 'Points';
display: block;
font-size: 10px;
}
.point-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
#end-screen-points,
#point-level {
font-size: 18px;
line-height: 1;
position: relative;
}
#end-screen-points::after {
content: 'points';
padding-left: 4px;
}
#info-dropdown p svg {
height: 20px;
width: auto;
vertical-align: middle;
padding-bottom: 2px;
}
.words-possible {
color: #fff;
}
.word {
font-size: 14px;
line-height: 1;
text-align: center;
height: 14px;
color: var(--tile-medium);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.word strong {
position: absolute;
right: 16px;
vertical-align: middle;
font-size: 12px;
display: none;
}
.word-clone {
font-size: 16px;
line-height: 26px;
position: absolute;
top: 0;
z-index: 10;
width: 100%;
background: none !important;
padding: 4px !important;
backdrop-filter: none;
text-align: center;
color: #fff !important;
}
.new-hint-button .fill-up {
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
border-radius: 50px;
width: 100%;
height: 100%;
}
.new-hint-button .fill-up .fill {
background: linear-gradient(to right, var(--three-letter), var(--five-letter));
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
transition: width 500ms var(--bezier);
}
.new-hint-button {
display: flex;
width: auto;
height: 36px;
background: rgba(255, 255, 255, .1);
border-radius: 32px;
align-items: center;
justify-content: center;
font-size: 12px;
padding: 0 24px 0 16px;
gap: 4px;
position: relative;
border: 2px solid var(--light);
cursor: pointer;
}
.new-hint-button svg {
display: block;
width: 16px;
margin-right: 4px;
fill: white;
}
.new-hint-button.hint-available,
.get-definition {
animation: shaker 500ms linear 1;
}
@keyframes shaker {
0% {
transform: scale(1);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.08);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
.new-hint-button.hint-available svg,
.get-definition svg {
fill: #fff;
}
.word-tries-left {
font-size: 14px;
line-height: 1;
}
.word-tries-left .count {
width: 16px;
}
#word-tries {
padding: 6px 4px 2px;
}
.tries-hint-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#word-tries .circle {
width: 10px;
height: 10px;
border-radius: 24px;
background: rgba(0, 0, 0, .2);
display: inline-block;
position: relative;
}
#word-tries .circle.full {
background: rgba(255,255,255,.5);
}
.turn-board,
.show-hint {
width: 36px;
height: 36px;
padding: 4px;
border-radius: 50px;
position: absolute;
cursor: pointer;
top: 8px;
background: rgb(255 255 255 / 40%);
border-radius: 100px;
display: flex;
place-content: center;
z-index: 1;
}
.turn-board {
right: 8px;
}
.turn-board svg {
fill: var(--tile-color);
transition: fill 200ms ease;
}
.turn-board:hover svg {
fill: var(--tile-color);
filter: drop-shadow(0 0 8px white);
}
.show-hint {
right: 52px;
left: auto;
}
.turn-board svg {
width: 24px;
}
.num-of-hints,
.reveals-left,
.num-of-reveals {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
background: var(--bogglelive);
color: white;
border-radius: 50%;
text-align: center;
line-height: 20px;
font-size: 10px;
}
.word-ticker {
display: flex;
width: 100%;
justify-content: center;
align-items: start;
padding-top: 24px;
position: relative;
}
.word-ticker>div {
flex: 1;
display: none;
font-size: 7px;
line-height: 1;
color: var(--tile-color);
padding: 0;
text-align: center;
position: relative;
transition: background-color 200ms ease;
line-height: 40px;
}
.word-ticker div.show {
display: block;
}
.word-ticker div.completed {
color: transparent;
background: var(--correct-letter);
}
.word-bank {
padding: 0 16px 8px;
}
.timer-wrap svg {
width: 42px;
height: 42px;
position: absolute;
fill: transparent;
top: -7px;
left: -7px;
z-index: 1;
}
.flash-timer .timer-progress {
animation: timerFlash 5s linear;
}
@keyframes timerFlash {
0% {
stroke: #fff;
}
15% {
stroke: var(--correct-letter);
}
25% {
stroke: #fff;
}
40% {
stroke: var(--correct-letter);
}
50% {
stroke: #fff;
}
65% {
stroke: var(--correct-letter);
}
75% {
stroke: #fff;
}
90% {
stroke: var(--correct-letter);
}
100% {
stroke: #fff;
}
}
.word-ticker svg,
.clue-countdown svg {
width: 40px;
height: 40px;
position: absolute;
fill: transparent;
left: calc(50% - 20px);
top: 0;
z-index: 1;
background: rgba(255, 255, 255, .2);
border-radius: 50px;
overflow: visible;
}
.circle-progress,
.clue-progress {
stroke: var(--points-color);
transition: stroke-dashoffset 500ms var(--bezier);
stroke-width: 14px;
}
.clue-progress {
stroke: hsl(var(--hue) 50% 23%);
}
.circle-closed.svg {
fill: var(--eight-letter);
opacity: .8;
}
.three .circle-progress {
stroke: var(--three-letter);
}
.three.circle-closed svg {
fill: var(--three-letter);
}
.four .circle-progress {
stroke: var(--four-letter);
}
.four.circle-closed svg {
fill: var(--four-letter);
}
.five .circle-progress {
stroke: var(--five-letter);
}
.five.circle-closed svg {
fill: var(--five-letter);
}
.six .circle-progress {
stroke: var(--six-letter);
}
.six.circle-closed svg {
fill: var(--six-letter);
}
.seven .circle-progress {
stroke: var(--seven-letter);
}
.seven.circle-closed svg {
fill: var(--seven-letter);
}
.eight .circle-progress {
stroke: var(--eight-letter);
}
.eight.circle-closed svg {
fill: var(--eight-letter);
}
.nine-plus .circle-progress {
stroke: var(--nine-letter);
}
.nine-plus.circle-closed svg {
fill: var(--nine-letter);
}
.timer-wrap .timer-progress {
stroke: var(--correct-letter);
stroke-dashoffset: 200.737;
transition: stroke-dashoffset 60s linear;
}
.timer-wrap .timer-progress.no-transition {
transition: none;
}
.w-c {
display: none;
}
.word-ticker .total {
position: relative;
z-index: 1;
font-size: 12px;
}
.circle-closed svg {
fill: var(--points-color);
}
.circle-closed .clue-progress {
fill: url(#strokeGradient);
}
.circle-closed .total {
opacity: 1;
color: transparent;
}
.circle-closed .total::after {
content: url('data:image/svg+xml; utf8, ');
height: 100%;
position: absolute;
display: inline-block;
top: -9px;
left: -6px;
width: 20px;
z-index: 1;
}
.clue-countdown.circle-closed .total::after {
content: url('data:image/svg+xml; utf8, ');
top: 4px;
left: 14px;
}
.word-ticker div::after {
content: '';
border-radius: 50%;
width: 26px;
height: 26px;
position: absolute;
left: calc(50% - 13px);
top: 7px;
z-index: 0;
}
.word-ticker div.circle-closed::after {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.word-ticker div.circle-closed.animate::after {
animation: explode 800ms forwards;
background: var(--correct-letter);
}
.explode {
animation: explode 800ms;
}
@keyframes explode {
0% {
transform: scale(1);
}
100% {
transform: scale(160);
opacity: 0;
}
}
.word-ticker div::before {
content: '...';
display: block;
position: absolute;
color: var(--tile-light);
opacity: .8;
top: -18px;
left: 0;
width: 100%;
font-size: 16px;
line-height: 1;
text-align: center;
white-space: pre-wrap;
}
.word-ticker .four::before {
content: '....';
}
.word-ticker .five::before {
content: '.....';
}
.word-ticker .six::before {
content: '......';
}
.word-ticker .seven::before {
content: '.......';
}
.word-ticker .eight::before {
content: '........';
}
.word-ticker .nine-plus::before {
content: '.........+';
}
.word-ticker div.got::after {
background: rgba(210, 139, 45, .5);
}
.percentage-praise {
color: var(--tile-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 8px;
font-size: 16px;
line-height: 1;
}
.percentage-praise span {
font-size: 40px;
}
.percentage-praise.visible {
animation: plopInOut 2000ms linear forwards;
}
@keyframes plopInOut {
0% {
opacity: 0;
top: -100%;
}
50% {
opacity: 1;
top: 0%;
animation-timing-function: var(--bezier);
}
51% {
opacity: 1;
top: 0%;
}
100% {
opacity: 0;
top: 100%;
}
}
.praise {
display: none;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
z-index: 3;
font-size: 32px;
line-height: 1;
pointer-events: none;
color: #fff;
-webkit-transform: translateY(0);
transform: translateY(0);
text-align: center;
filter: drop-shadow(0px 0px 24px var(--tile-color));
text-shadow: 0 0 24px var(--tile-color);
text-transform: capitalize;
}
.praise.three {
background: radial-gradient(circle 100px, var(--three-letter), transparent);
}
.praise.four {
background: radial-gradient(circle 100px, var(--four-letter), transparent);
}
.praise.five {
background: radial-gradient(circle 100px, var(--five-letter), transparent);
}
.praise.six {
background: radial-gradient(circle 100px, var(--six-letter), transparent);
}
.praise.seven {
background: radial-gradient(circle 100px, var(--seven-letter), transparent);
}
.praise.eight {
background: radial-gradient(circle 100px, var(--eight-letter), transparent);
}
.praise.nine-plus {
background: radial-gradient(circle 160px, var(--eight-letter), transparent);
}
.praise-display {
display: flex;
background: radial-gradient(circle 180px, hsl(34deg 65% 50% / 100%), hsl(34deg 65% 50% / 0%));
font-size: 40px;
border-radius: 24px;
}
.praise-display span {
font-size: 16px;
padding-top: 16px;
}
.praise-show {
display: flex;
animation: floatUp 1600ms ease-out 1;
}
@keyframes floatUp {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-32%);
}
}
@keyframes Dance {
0%,
20% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
50% {
transform: translateY(5px);
}
60% {
transform: translateY(-10px);
}
80% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
.dance {
animation: Dance 800ms;
}
.game-leaderboard a {
color: var(--tile-color);
}
.game-leaderboard .player {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding: 4px 8px;
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.bbs-score,
#bbs-score,
#bbs-hintsLeft,
#bbs-wordCount,
#bbs-clueWords {
display: none !important;
}
.player a {
display: flex;
align-items: center;
position: relative;
width: 100%;
}
.player .name {
max-width: 210px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
}
.player .points {
margin-left: auto;
background: rgba(0, 0, 0, .1);
border-radius: 30px;
color: var(--color);
padding: 8px;
text-align: left;
position: relative;
font-size: 12px;
}
.player .percentage {
font-size: 12px;
}
#player-bb {
background: rgba(0, 0, 0, .1);
}
.player img {
height: 30px;
width: 30px;
border-radius: 30px;
margin: 0 4px;
display: block;
}
.game-leaderboard {
width: 400px;
margin: 16px auto 8px;
max-width: 100%;
height: 140px;
overflow-y: scroll;
border-radius: 14px;
border: 2px solid rgba(0, 0, 0, .2);
background: rgba(255, 255, 255, .1);
overflow-y: auto;
color: var(--color);
touch-action: pan-y;
-ms-overflow-style: none;
scrollbar-width: none;
}
.game-leaderboard {
display: none;
}
.game-leaderboard .place {
font-size: 12px;
padding-left: 8px;
}
.game-leaderboard .player img {
margin: 0 12px;
}
.game-leaderboard .bbs {
background: rgba(255, 255, 255, .4);
background: hsl(186deg 70% 25% / 10%);
}
.game-leaderboard .player .biggest {
font-size: 12px;
text-transform: uppercase;
margin-left: auto;
margin-right: 16px;
}
.checkmark {
position: absolute;
left: -10px;
top: -10px;
width: 40px;
height: auto;
display: none;
z-index: 2;
}
.hand,
.lil-hand {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 4;
pointer-events: none;
-webkit-filter: drop-shadow(2px 3px 10px var(--shadow));
filter: drop-shadow(2px 3px 10px var(--shadow));
}
.game-right {
position: absolute;
right: 0;
top: 0;
width: 48px;
}
.how-to-play {
margin: 0 auto;
width: 600px;
max-width: 100%;
text-align: center;
padding: 24px;
}
.game-wrap {
background: hsl(var(--hue) 12% 74% / 1);
padding: 0 0 40px;
width: calc(100% - 24px);
margin: 12px;
border-radius: 24px;
position: relative;
}
.game-wrap::after {
content: '';
width: 100%;
height: 100%;
background: var(--bg);
display: none;
opacity: .4;
position: absolute;
top: 0;
left: 0;
z-index: 4;
border-radius: 26px;
}
.game-wrap.game-ended::after {
display: flex;
justify-content: center;
align-items: center;
}
#letter-board {
cursor: pointer;
border-radius: 20px;
position: relative;
margin: 0 auto;
width: 308px;
height: 308px;
max-width: 100%;
-youbkit-touch-callout: none;
-youbkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
touch-action: none;
z-index: 2;
transition: transform 800ms ease;
transform-origin: center center;
}
#letter-board.turn-1 {
transform: rotate(90deg);
}
#letter-board.turn-2 {
transform: rotate(180deg);
}
#letter-board.turn-3 {
transform: rotate(270deg);
}
#letter-board.turn-4 {
transform: rotate(360deg);
}
#letter-board.turn-1 .letter,
#letter-board.turn-2 .letter,
#letter-board.turn-3 .letter,
#letter-board.turn-4 .letter {
transition: transform 800ms ease;
transform-origin: center center;
-webkit-text-decoration-skip: none;
}
#letter-board.turn-1 .letter {
transform: rotate(-90deg) !important;
}
#letter-board.turn-2 .letter {
transform: rotate(-180deg) !important;
}
#letter-board.turn-3 .letter {
transform: rotate(-270deg) !important;
}
#letter-board.turn-4 .letter {
transform: rotate(-360deg) !important;
}
#letter-board.no-transition {
transition: none!important;
}
.letter {
border-radius: 8px;
text-transform: capitalize;
position: relative;
float: left;
width: 23%;
height: auto;
margin: 1%;
background: var(--bg);
}
.letter::after {
content: "";
padding-bottom: 100%;
display: block;
}
#letter-board.turn .letter {
transition: transform 800ms ease;
transform: rotate(-90deg) !important;
transform-origin: center center;
}
.glow .selected span {
background: var(--tile-light);
color: #fff;
}
.letter span {
position: absolute;
line-height: 1;
font-size: 38px;
top: 6%;
left: 6%;
width: 88%;
height: 88%;
border-radius: 100%;
background: rgb(255 255 255 / 68%);
display: flex;
align-items: center;
justify-content: center;
color: var(--tile-color);
transition: background-color 100ms ease, color 100ms ease;
}
.starting-frequency,
.board-frequency {
position: absolute;
font-size: 11px;
line-height: 14px;
bottom: 0;
left: 0;
color: var(--tile-light);
display: none;
border-radius: 16px;
width: 14px;
height: 14px;
transition: transform 200ms ease, background 200ms ease;
pointer-events: none;
}
.board-frequency {
right: 0;
left: auto;
opacity: .6;
}
.starting-frequency.highlight,
.board-frequency.highlight {
background: var(--tile-color);
color: #fff;
transform: scale(1.2);
}
.letter .clue-clone {
position: absolute;
background: var(--correct-letter);
color: #fff;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 100px;
filter: var(--dropshadow);
z-index: 1;
}
.letter .clue-clone.remove {
opacity: 0;
transition: opacity 300ms ease;
}
.letter .clue-clone.got-points {
background: #fff;
color: transparent;
}
.letter .hint-clone {
position: absolute;
background: var(--three-letter);
color: white;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 100px;
z-index: 1;
}
.highlighted span {
border: 6px solid var(--tile-light);
}
.selected span {
background-color: var(--tile-light);
color: #fff;
animation: selected 300ms ease;
border: none;
}
@keyframes selected {
0% {
transform: scale(1);
}
30% {
transform: scale(.96);
}
60% {
transform: scale(1.04);
}
100% {
transform: scale(1);
}
}
.glow .selected span {
animation: wordFound 800ms 200ms;
}
@keyframes wordFound {
0% {
transform: scale(1);
}
40% {
transform: scale(1.2);
}
80% {
transform: scale(.95);
}
100% {
transform: scale(1);
}
}
@keyframes bg-animation {
0% {
background-position: right;
}
100% {
background-position: left;
}
}
.all-the-words,
.word-columns {
display: flex;
display: none;
width: 100%;
justify-content: center;
align-items: start;
}
.all-the-words {
margin-top: 8px;
}
.word-columns>div {
display: none;
flex: 1;
font-size: 11px;
line-height: 1;
color: #fff;
text-align: center;
min-width: 40px;
}
.word-columns>div>div {
padding: 4px 0;
}
.word-columns>div>div:first-of-type {
margin-top: 8px;
}
.all-the-words.show,
.word-columns.active {
display: flex;
}
.all-the-words .show,
.word-columns .show {
display: block;
}
.word-group {
font-size: 12px;
line-height: 1;
text-transform: uppercase;
display: none;
flex: 1;
text-align: center;
}
.word-group .game-word {
display: block;
padding: 4px;
margin-left: 2px;
position: relative;
cursor: pointer;
color: white;
}
.word-group .bb-found-it {
border-radius: 4px;
background: var(--correct-letter);
color: #fff;
}
.word-group .bb-found-it-bonus {
border-radius: 4px;
background: var(--eight-letter);
color: #fff!important;
}
#letter-board.three-grid {
width: 260px;
height: 260px;
margin: 0 auto;
}
.three-grid .letter,
.three-grid .connector {
display: none;
width: 31%;
height: 31%;
}
.three-grid .in-play {
display: block;
}
.selected {
background: transparent;
}
.glow .selected span {
color: #fff;
}
/*------ END OF LETTER STYLES ------*/
/*------ ALL CONNECTOR STYLES ------*/
.connectors-wrap,
.lil-connectors-wrap {
z-index: 0;
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.connector {
position: relative;
height: auto;
float: left;
width: 23%;
margin: 1%;
}
.connector::after {
content: "";
padding-bottom: 100%;
display: block;
}
.connector .goo {
position: absolute;
background: var(--tile-light);
transition: background 100ms ease;
}
.left .goo {
left: -20%;
bottom: 40%;
}
.upleft .goo {
left: -45%;
top: -15%;
}
.up .goo {
left: 40%;
top: -20%;
}
.upright .goo {
right: -45%;
top: -15%;
}
.right .goo {
right: -20%;
bottom: 40%;
}
.downright .goo {
right: -45%;
bottom: -15%;
}
.down .goo {
left: 40%;
bottom: -20%;
}
.downleft .goo {
left: -45%;
bottom: -15%;
}
.upleft .goo,
.downright .goo {
width: 80%;
height: 20%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.upright .goo,
.downleft .goo {
width: 80%;
height: 20%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.left .goo,
.right .goo {
width: 40%;
height: 20%;
}
.up .goo,
.down .goo {
width: 20%;
height: 40%;
}
.total-points span {
font-size: 20px;
}
.total-points::after {
content: ' PTS';
font-size: 12px;
}
.trophy {
fill: var(--three-letter);
}
.base {
fill: var(--color);
}
.w-h-p {
color: var(--tile-light);
display: flex;
width: 100%;
align-items: center;
justify-content: center;
font-size: 12px;
}
.goal-wrap {
opacity: 0;
line-height: 1;
width: 100%;
display: block;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.goal-progress-words .progress {
height: 100%;
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 0;
border-radius: 50px;
background: var(--ribbon);
}
.goal-progress-words {
border-radius: 50px;
line-height: 30px;
position: relative;
transition: width 200ms ease;
height: 30px;
overflow: hidden;
width: 100%;
box-sizing: content-box;
}
.progress-text {
position: absolute;
z-index: 1;
left: 0;
top: 0;
text-align: center;
width: 100%;
opacity: 0;
}
.three-letter .selected span,
.three-letter .goo {
background: var(--three-letter);
}
.three-letter .selected .board-frequency,
.three-letter .selected .starting-frequency {
color: var(--three-letter);
}
.four-letter .selected span,
.four-letter .goo {
background: var(--four-letter);
}
.four-letter .selected .board-frequency,
.four-letter .selected .starting-frequency {
color: var(--four-letter);
}
.five-letter .selected span,
.five-letter .goo {
background: var(--five-letter);
}
.five-letter .selected .board-frequency,
.five-letter .selected .starting-frequency {
color: var(--five-letter);
}
.six-letter .selected span,
.six-letter .goo {
background: var(--six-letter);
}
.six-letter .selected .board-frequency,
.six-letter .selected .starting-frequency {
color: var(--six-letter);
}
.seven-letter .selected span,
.seven-letter .goo {
background: var(--seven-letter);
}
.seven-letter .selected .board-frequency,
.seven-letter .selected .starting-frequency {
color: var(--seven-letter);
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 6;
color: var(--tile-color);
width: 100%;
min-height: 100vh;
height: auto;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(rgba(0,0,0,.6), rgba(0,0,0,.4));
}
.overlay .inner {
width: 500px;
max-width: 100%;
height: auto;
border-radius: 32px;
background: hsl(var(--hue) 12% 74% / 1);
box-shadow: 0 0 40px var(--tile-color), 0 0 80px var(--tile-color), 0 0 120px var(--tile-color), 0 0 160px var(--tile-color);
padding: 32px;
position: relative;
margin-top: 40px;
}
.overlay p {
font-size: 16px;
line-height: 1.5;
text-align: center;
margin: 8px auto;
padding: 0;
width: 280px;
max-width: 100%;
z-index: 1;
}
.overlay .close-x {
position: absolute;
right: 24px;
top: 32px;
font-size: 56px;
line-height: 0;
cursor: pointer;
z-index: 1;
transition: transform 200ms ease;
}
.close-x:hover {
text-shadow: 0 0 10px #fff;
transform: scale(1.2);
transition: transform 200ms ease;
}
.overlay .ribbon {
margin: 8px;
}
.overlay .icon svg {
width: 40px;
height: auto;
text-align: center;
padding-bottom: 4px;
}
.info-toggle {
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
right: -24px;
top: 9px;
}
.info-toggle:hover svg {
fill: var(--ribbon);
}
.info-toggle svg {
fill: #fff;
}
.dropdown {
display: flex!important;
}
.found-word {
text-transform: uppercase;
display: block;
position: relative;
cursor: pointer;
}
.found-word:hover,
.game-word:hover {
text-decoration: underline;
}
.found-word.bonus-word,
.game-word.bonus-word {
opacity: 1;
color: var(--tile-light);
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.game-progress {
text-align: center;
font-size: 12px;
line-height: 1;
color: var(--tile-color);
opacity: .6;
padding-bottom: 8px;
}
.loading-gif:after,
.loading-def:before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--bg);
border-top-color: var(--tile-color);
animation: spinner .6s linear infinite;
}
.loading-def::before {
margin-top: -8px;
margin-left: -8px;
top: 50%;
left: 50%;
}
.splash::before {
content: '';
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
background: url(/wp-content/uploads/2020/09/ezgif.com-resize.gif) no-repeat center center;
background-size: 100%;
width: 64px;
height: 64px;
opacity: .8;
}
.letter.splash::before {
width: 88px;
height: 88px;
opacity: 1;
filter: drop-shadow(0px 0px 16px var(--tile-color));
}
/* SHOW */
.show {
opacity: 1 !important;
pointer-events: auto;
transition: opacity 200ms ease;
}
#end-screen-message .button.secondary {
background: radial-gradient(hsl(186 55% 60%), hsl(186 55% 32%));
color: #fff;
}
.info-wrap {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
margin-top: 8px;
}
.info-open {
outline: none;
border: none;
padding: 0;
margin: 0;
background: transparent;
color: var(--half-white);
fill: var(--half-white);
font-family: 'AvenirNextLTPro';
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: color 100ms ease, fill 100ms ease;
padding-top: 2px;
}
.info-open.open .dic-diff {
color: #fff !important;
filter: drop-shadow(2px 2px 8px var(--points-color));
}
.info-open.open svg {
fill: #fff !important;
filter: drop-shadow(2px 2px 8px var(--points-color));
}
.info-open:hover,
.info-open:hover .dic-diff {
color: #fff;
fill: #fff;
}
.info-open svg {
height: 14px;
vertical-align: middle;
fill: inherit;
margin: -2px 4px 0;
}
.current-rank .ordinal {
vertical-align: top;
font-size: 10px;
text-transform: uppercase;
}
/* AUDIO */
audio {
display: none;
}
.end-the-game {
font-size: 10px;
height: 32px;
line-height: 32px;
width: auto;
padding: 0 16px;
max-width: 100%;
text-align: center;
margin: 4px auto 8px;
color: white;
cursor: pointer;
border-radius: 100px;
text-transform: uppercase;
display: none;
border-radius: 48px;
-webkit-tap-highlight-color: transparent;
border: 2px solid rgba(0, 0, 0, .2);
box-sizing: content-box;
}
.end-the-game:hover {
color: #fff;
}
.end-the-game.show {
display: inline-block;
}
.definition-hint {
position: relative;
width: 100%;
}
.definition-hint .tool-tip {
transform: translate(-50%, -50%);
top: -16px;
width: calc(100% - 132px);
}
/* TOOL TIP */
.tool-tip {
position: absolute;
top: -14px;
left: 50%;
transform: translate(-50%, -100%);
width: 300px;
border-radius: 12px;
height: auto;
z-index: 10;
color: var(--tile-color);
line-height: 1.3;
margin: 8px 0 16px;
text-align: left;
text-transform: none;
font-size: 14px;
}
.get-definition .t-t-content {
max-height: 116px;
padding: 16px;
}
/* Hide all .pos elements starting from the third one */
.definition-hint .def:nth-of-type(n+3) {
display: none;
}
.definition-hint .pos:nth-of-type(n+3) {
display: none;
}
.tool-tip .close-x {
font-size: 48px;
position: absolute;
right: 16px;
top: 0px;
}
.tool-tip .audio {
display: none !important;
}
.tool-tip .text-to-speech {
height: 24px;
width: 24px;
}
.tool-tip .text-to-speech::before {
left: 8px;
top: 6px;
width: 10px;
}
.t-t-content {
overflow-y: scroll;
height: 160px;
width: 100%;
padding: 16px 24px;
text-align: left;
background: hsl(192 12% 88% / 1);
border-radius: 12px;
box-shadow: 2px 2px 16px rgba(0, 0, 0, .4);
touch-action: pan-y;
-ms-overflow-style: none;
scrollbar-width: none;
}
.t-t-content::-webkit-scrollbar {
display: none;
}
.t-t-content .synonyms-wrap {
display: none;
}
.t-t-content h3 {
margin: 8px 0;
font-size: 18px;
line-height: 1.2;
}
.pronounciation,
.pronunciation {
display: inline-block;
color: var(--shadow);
font-size: 12px;
line-height: 1;
}
.definition-hint .t-t-content .pronounciation,
.definition-hint .t-t-content .pronunciation,
.definition-hint .t-t-content .example,
.definition-hint .t-t-content .synonyms {
display: none;
}
.definition-hint .t-t-content {
padding: 24px;
}
.t-t-content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
border-radius: 12px;
width: 100%;
height: 100%;
background: linear-gradient(transparent 80%, hsl(204deg 11.63% 91.57%));
pointer-events: none;
}
.t-t-content .pos {
display: inline-block;
margin: 0;
color: inherit;
font-size: 10px;
opacity: .8;
text-transform: uppercase;
}
.tool-tip .caret {
position: absolute;
top: 99%;
left: 50%;
margin-left: -13px;
border-width: 13px;
border-style: solid;
border-color: hsl(204deg 11.63% 91.57%) transparent transparent transparent;
}
.tool-tip h1 {
text-align: left;
font-size: 24px;
text-transform: capitalize;
padding-bottom: 10px;
line-height: 1;
color: #1d2c35;
}
.tool-tip p {
line-height: 1.3;
margin: 8px 0 16px;
text-align: left;
text-transform: none;
font-size: 14px;
color: inherit;
}
.your-ranking {
padding: 8px;
}
.your-ranking .button {
color: #fff!important;
margin: 8px 0 16px;
background: var(--points-color);
}
.you-placed {
display: none;
}
.biggest-word,
.how-you-placed {
font-size: 18px;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
padding: 8px 0 24px;
}
.biggest-word::after,
.how-you-placed::after {
content: 'WORDS FOUND';
font-size: 12px;
line-height: 1;
display: block;
color: rgba(0, 0, 0, .5);
}
.biggest-word::after {
content: 'LONGEST WORD';
}
.how-you-placed::after {
content: 'PLACE';
}
.the-letters {
display: none !important;
}
/*---------- MONUMETRIC PILLARS ----------*/
@media screen and (max-width: 1100px) {
.master-grid {
max-width: 100%;
}
}
/*---------- GLOBAL MOBILE STYLES ----------*/
@media screen and (max-width: 800px) {
.master-grid {
grid-template-columns: 1fr;
gap: 0;
overflow: hidden;
}
}
@media screen and (max-width: 480px) {
.overlay-inner {
padding: 24px 16px;
}
.card {
width: 148px;
height: 148px;
margin: 16px 4px;
}
.title-meta {
top: 44px;
font-size: 10px;
}
.master-grid {
width: 100vw;
}
.title {
font-size: 12px;
}
.letter span {
font-size: 42px;
}
#end-screen-message .small-button {
font-size: 12px;
}
.boggle-stats {
padding: 0 16px 16px;
}
}
@media screen and (max-width: 340px) {
.letter span {
font-size: 38px;
}
}
.playing {
background: radial-gradient(hsl(var(--hue) 45% 45%), hsl(var(--hue) 45% 15%));
}
.game-summary {
width: 100%;
padding: 0;
line-height: 1;
}
.chat-unlocks {
padding: 8px;
}
.chat-unlocks svg {
fill: white;
height: 16px;
width: auto;
margin-right: 8px;
vertical-align: middle;
}
.above-board {
overflow: visible;
}
.mobile-chat,
.mobile-results {
display: none;
position: absolute;
left: 0;
width: 88px;
height: 32px;
line-height: 32px;
border-radius: 0 10px 10px 0;
border: 2px solid rgba(0, 0, 0, .2);
font-size: 12px;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(255, 255, 255, .1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.mobile-chat svg,
.mobile-results svg {
fill: #fff;
height: 12px;
opacity: .9;
width: auto;
transition: transform 500ms ease;
}
.mobile-chat svg {
transform: rotate(-90deg);
}
.mobile-results svg {
transform: rotate(90deg);
}
.mobile-chat.active svg {
transform: rotate(90deg);
}
.mobile-results.active svg {
transform: rotate(-90deg);
}
.mobile-results {
right: 0;
left: auto;
border-radius: 10px 0 0 10px;
}
.chat-title {
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
margin-bottom: 8px;
}
.high-scores {
margin: 16px 0 32px;
padding: 8px 0;
}
.high-scores .place {
font-size: 16px;
padding-left: 8px;
}
.high-scores .name {
font-size: 12px;
}
.high-scores .player img {
margin: 0 12px;
}
.high-scores .bbs {
background: rgba(255, 255, 255, .4);
}
.high-scores .player .biggest {
font-size: 12px;
text-transform: uppercase;
margin-left: auto;
margin-right: 16px;
}
.high-scores .player .points {
margin-left: 0;
background: transparent;
color: var(--tile-color);
font-size: 16px;
text-align: center;
}
.game-results .points {
color: #fff;
}
.high-scores .player .points::after {
content: 'POINTS';
font-size: 8px;
line-height: 1;
display: block;
}
.high-scores,
#chat-area {
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
color: var(--color);
}
.high-scores::-webkit-scrollbar,
#chat-area::-webkit-scrollbar {
display: none;
/* Safari and Chrome */
}
.live-login .boggle-live {
top: -34px;
display: block;
}
.register-button-wrap {
text-align: center;
}
#end-screen-points {
display: block;
margin: 12px 0 10px;
}
#chat-area {
border-radius: 16px;
padding: 8px 8px 8px 16px;
color: #fff;
background: rgba(0, 0, 0, .1);
height: 257px;
font-size: 11px;
overflow: scroll;
text-align: left;
word-wrap: break-word;
/* Older browsers */
overflow-wrap: break-word;
}
#chat-area .new-message {
margin-top: 8px;
position: relative;
-webkit-user-select: text;
user-select: text;
}
#chat-area .new-message .user {
opacity: .5;
}
#chat-area .the-message {
opacity: 1;
font-size: 14px;
}
#chat-area .system-message {
opacity: .5;
display: inline-block;
font-size: 10px !important;
}
#chat-name {
display: none;
}
#send-message-area {
font-size: 12px;
}
#sendie {
border-radius: 8px;
margin-top: 8px;
height: 32px;
}
.game-results,
.live-players {
width: 100%;
color: #fff;
text-align: center;
background: rgba(0, 0, 0, .1);
border-radius: 16px;
max-height: 375px;
overflow: auto;
}
.how-you-placed {
font-size: 24px;
line-height: 1;
margin: 8px 0;
}
.how-you-placed::after {
content: 'PLACE';
display: block;
font-size: 10px;
line-height: 1;
opacity: .5;
margin: 0;
}
.game-leaderboard {
display: block !important;
margin: 0 auto 40px;
}
.game-results.game-leaderboard {
margin: 0;
min-height: 300px;
}
.live-players {
padding: 8px;
min-height: 300px;
}
.beginner .points {
display: inline-block;
}
.small-button {
color: var(--tile-color);
}
.beginner .points::before {
content: url('data:image/svg+xml; utf8, ');
width: 24px;
height: 16px;
padding: 4px;
display: inline-block;
}
.game-results .points::before,
.live-players .points::before {
content: url('data:image/svg+xml; utf8, ');
width: 9px;
margin: 0 auto;
height: auto;
display: block;
}
.live-players {
padding: 8px;
}
.players-and-ranking p {
margin: 8px auto;
}
.players-bested,
.you-placed {
display: none;
}
.game-results {
display: none;
}
span.disclaimer {
display: inline-block;
vertical-align: middle;
color: var(--half-white);
margin: 0 4px;
}
.newRank,
.rankImprovement,
.you-placed {
display: none;
}
.players-and-ranking,
.current-players {
text-align: center;
justify-self: stretch;
}
.current-players h3,
.players-and-ranking h3 {
font-size: 12px;
color: #fff;
padding: 0 0 8px 0;
margin: 0;
line-height: 1;
}
.active-player {
display: flex;
align-items: center;
margin-bottom: 4px;
background: transparent;
padding: 0 4px;
}
.active-player img {
height: 30px;
width: 30px;
border-radius: 30px;
margin: 0 4px;
display: block;
}
.active-player span {
color: #fff;
font-size: 11px;
padding-left: 4px;
}
.player .points {
padding: 3px 8px 4px;
font-size: 12px;
line-height: 1;
}
.active-player .points {
margin-left: auto;
border-radius: 30px;
padding: 2px 6px 4px;
overflow: visible;
position: relative;
line-height: 1;
background: rgba(0, 0, 0, .1);
}
.active-player a {
display: flex;
align-items: center;
position: relative;
width: 100%;
}
.active-player .player-image::before {
height: 52%;
width: 23%;
right: 1px;
}
.active-player .phoenix::before,
.active-player .interstellar::before {
height: 56%;
width: 44%;
}
.active-player .nirvana::before {
height: 56%;
width: 46%;
}
textarea {
font-size: 14px;
line-height: 14px;
}
.timer-wrap {
border-color: transparent;
}
.timer-wrap .timer-progress {
transition: stroke-dashoffset 90s linear;
}
.page-template-three-min-live-game .timer-wrap .timer-progress {
transition: stroke-dashoffset 150s linear;
}
.timer-wrap svg {
display: none;
}
.countdown-wrap {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.timer-wrap .countdown-wrap::before {
content: 'NEXT GAME IN';
position: absolute;
font-size: 12px;
line-height: 1;
top: -8px;
left: 50%;
transform: translateX(-50%);
display: block;
width: 200px;
letter-spacing: 1px;
text-align: center;
}
.timer-wrap::after {
display: none;
}
.timer-wrap.game-on {
border-color: rgba(0, 0, 0, .6);
}
.timer-wrap.game-on svg {
display: block;
}
.timer-wrap.game-on .countdown-wrap::before {
display: none;
}
.timer-wrap.game-on::after {
display: block;
}
.timer-wrap.game-starting .countdown-wrap::before {
content: 'GAME STARTING!';
}
.timer-wrap-end-screen {
display: inline-block;
background: rgba(255, 255, 255, .4);
width: 100%;
border-radius: 40px;
height: 32px;
line-height: 32px;
position: relative;
}
.timer-wrap-end-screen::before {
content: 'NEXT GAME IN';
position: absolute;
font-size: 12px;
line-height: 1;
top: -16px;
left: 0;
display: block;
width: 100%;
letter-spacing: 1px;
text-align: center;
}
.countdown_minutes,
.countdown_seconds,
.colon {
display: inline-block;
}
.all-words-header {
background: var(--bg);
border-radius: 16px 16px 0 0;
height: 56px;
z-index: 1;
margin-top: 8px;
margin-bottom: -16px;
font-size: 24px;
text-align: center;
width: 100%;
line-height: 56px;
display: none;
}
.num-players {
margin-right: 4px;
}
@media screen and (max-width: 800px) {
.current-players,
.players-and-ranking {
background: radial-gradient(hsl(var(--hue) 24% 48%), hsl(var(--hue) 24% 24%));
border: 2px solid rgba(0, 0, 0, .2);
border-right: none;
background-size: 300%;
background-position: center center;
margin-top: 0;
transition: transform 500ms ease;
position: absolute;
padding: 16px 24px 24px;
z-index: 10;
width: 400px;
max-width: calc(100% - 16px);
min-height: 364px;
}
.current-players {
transform: translateX(-100%);
right: auto;
left: 0;
border-radius: 0 16px 16px 0;
}
.players-and-ranking {
transform: translateX(100%);
left: auto;
right: 0;
border-radius: 16px 0 0 16px;
}
/* for the tabs fixed to the site */
.board-wrap {
width: 100%;
}
.word-wrap {
width: 424px;
max-width: 100%;
}
.open-tab {
transform: none;
}
.players-and-ranking .open-tab {
right: 0;
left: auto;
}
.mobile-chat,
.mobile-results {
display: flex;
}
}
#comments {
margin: 0 auto;
width: 800px;
max-width: 100%;
text-align: left;
border-radius: 12px;
padding: 24px;
border: 2px solid rgba(0, 0, 0, .2);
background: var(--bg);
color: var(--tile-light);
}
.comments-wrap {
width: calc(100% - 32px);
padding: 100px 0;
margin: 0 auto;
}
.comment-body .reply a {
text-transform: uppercase;
}
#comments .children {
margin-left: 24px;
padding: 0;
}
#comments .comment-reply-title,
.comments-title {
text-transform: capitalize;
padding: 0;
color: var(--tile-color);
}
#comments p {
color: var(--tile-color);
}
#comments p.logged-in-as {
display: block;
}
#comments p.comment-form-comment {
display: block;
}
#comments p.comment-form-author,
#comments p.comment-form-email,
#comments p.comment-notes {
display: inline-block;
}
#comments p.comment-form-author,
#comments p.comment-form-email {
width: 49%;
}
#comments p.comment-form-email {
margin-left: 1%;
}
#comments p.comment-form-url {
display: none;
}
#comments p.comment-form-comment label,
#comments p.comment-form-author label,
#comments p.comment-form-email label {
text-decoration: none;
display: block;
}
#comments input[type="text"],
#comments input[type="email"],
#comments textarea {
padding: 10px 15px;
width: 100%;
max-width: 100%;
border-radius: 7px;
background: #fff;
border: none;
margin-top: 5px;
font-size: 16px;
color: var(--tile-color);
}
#comments span.required {
display: none;
}
.comment-author,
.comment-meta {
display: block;
vertical-align: middle;
}
.comment-author img {
border-radius: 40px;
vertical-align: middle;
height: 40px;
width: 40px;
margin: 4px;
}
.comment-author .fn,
.comment-author .fn a {
text-transform: uppercase;
vertical-align: middle;
color: var(--tile-light);
font-style: normal;
}
.comment-author .says {
display: none;
}
#comments .comment-meta a {
font-size: 12px;
font-weight: normal;
text-decoration: none;
}
.comment .comment-body {
padding-bottom: 24px;
margin-bottom: 24px;
}
.background-image {
width: 100vw;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.background-image::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: radial-gradient(hsl(var(--hue) 32% 20% / 88%), hsl(var(--hue) 32% 20% / 100%));
}
.entry-title {
width: 520px;
max-width: 100%;
text-shadow: 0 0 24px var(--tile-color);
line-height: 1.4;
font-size: 24px;
text-align: center;
}
.input-wrap {
display: flex;
gap: 16px;
width: auto;
flex-wrap: wrap;
justify-content: center;
padding: 16px 32px;
border-radius: 16px;
}
.default-page {
min-height: 100vh;
width: 100%;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.default-page article {
width: 500px;
max-width: 100%;
}
/* FORMS */
ul {
list-style: none;
}
textarea {
font-size: 14px;
color: var(--tile-color);
line-height: 1.3;
border: none;
padding: 8px;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
-webkit-appearance: none;
width: 100%;
max-width: 320px;
font-family: 'Averta', sans-serif;
font-weight: 100;
background: #fff;
resize: none;
}
input[type="submit"],
button[type="submit"] {
background: var(--bogglelive);
font-family: 'Averta', sans-serif;
color: #fff;
text-transform: uppercase;
font-size: 14px;
text-align: center;
height: 48px;
line-height: 48px;
position: relative;
border-radius: 48px;
display: block;
width: 100%;
max-width: 320px;
margin: 16px auto;
padding: 0;
border: none;
border: 2px solid rgba(0, 0, 0, .2);
-webkit-tap-highlight-color: transparent;
box-sizing: content-box !important;
}
input[type="submit"] {
margin-top: 16px;
}
.google-login-btn {
display: inline-block;
background: #fff !important;
color: #757575;
margin: 16px 0;
border-radius: 50px;
width: 100%;
max-width: 320px;
font-size: 14px;
padding: 8px 36px 7px 32px;
text-align: center;
vertical-align: middle;
border: 2px solid rgba(0, 0, 0, .2);
}
.google-login-btn:before {
content: '' !important;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
background-color: white;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: inline-block;
width: 18px !important;
height: 18px;
margin-right: 6px;
vertical-align: bottom;
}
.wpforms-container {
border: 6px solid rgba(255, 255, 255, .3);
border-radius: 30px;
}
fieldset {
margin: 0 0 4px 0;
padding: 0;
border: none;
}
fieldset label .field {
vertical-align: middle;
display: inline-block;
}
.fieldset-remember {
margin: 12px 0 8px;
}
.wpforms-confirmation-scroll {
background: rgba(0, 0, 0, .1);
padding: 16px;
border-radius: 12px;
margin: 24px 0;
}
.wpforms-container {
margin: 24px 0;
padding: 8px 32px 32px;
background: rgba(0, 0, 0, .08);
border-radius: 16px;
width: 480px;
max-width: 100%;
}
.page-template-premium .premium-faq {
padding-bottom: 120px;
position: relative;
margin-top: 40px;
}
.premium-faq h2 {
text-align: center;
}
.premium-faq p,
.premium-faq h3 {
text-align: left;
width: 100%;
}
.premium-faq h3 {
margin-top: 40px;
}
.page-template-premium .secure {
text-align: center;
font-size: 12px;
text-transform: uppercase;
color: var(--light);
margin-bottom: 40px;
}
.page-template-premium .secure svg {
fill: var(--light);
}
.go-ad-free {
background: var(--shadow);
border-radius: 50px !important;
margin-top: 4px;
color: #fff !important;
display: inline-block !important;
}
.pagination {
padding: 80px;
width: 100%;
font-size: 32px;
color: #fff;
text-align: center;
}
.pagination a {
padding: 0 8px;
color: var(--ribbon);
text-shadow: 0 0 24px black;
}
.page-template-index .pagination {
background: transparent;
}
/* 404 */
.not-found-404 {
background: url(/wp-content/uploads/2020/04/cookie-the-pom-gySMaocSdqs-unsplash-scaled.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-shadow: 0 0 24px black;
}
.not-found-404 .button.secondary {
background: var(--bg);
text-shadow: none;
}
.field_email,
.field_type_email {
display: none !important;
}
.wpforms-container .wpforms-field {
padding: 12px 0 !important;
}
.wpforms-container {
padding: 16px;
background: rgba(0, 0, 0, .1);
border-radius: 10px;
}
.wpforms-container .wpforms-field-label {
margin: 8px 0;
}
ul {
padding: 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"] {
font-size: 14px;
line-height: 32px;
padding: 0 8px;
color: var(--tile-color);
border: none;
height: 32px;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
width: 100%;
font-family: 'AvenirNextLTPro';
max-width: 320px !important;
margin: 0 auto !important;
background: #fff;
}
.page-template-edit-display-name input[type="submit"] {
margin: 16px auto 24px;
}
.wpforms-container input[type=checkbox] {
width: 24px;
height: 24px;
margin: 8px 8px 8px 0;
-webkit-appearance: none;
appearance: none;
border: none;
background: #fff;
border-radius: 4px;
vertical-align: middle;
}
.wpforms-container input[type=checkbox]::before {
content: "✔︎";
width: 24px;
height: 24px;
display: none;
color: #fff;
font-size: 16px;
text-align: center;
background: var(--tile-color);
border-radius: 4px;
line-height: 24px;
}
.wpforms-container input[type="checkbox"]:checked::before {
display: block;
}
::-webkit-input-placeholder {
color: #949ca1;
font-size: 14px;
}
.wpforms-container .wpforms-field-label-inline {
vertical-align: middle;
}
.wpforms-container .wpforms-error-container {
color: #fff;
background: rgba(0, 0, 0, .1);
border-radius: 8px;
font-size: 14px;
padding: 8px;
}
.wpforms-container .wpforms-error-container p {
margin: 8px;
}
::-moz-placeholder {
color: #949ca1;
font-size: 14px;
}
::-ms-placeholder {
color: #949ca1;
font-size: 14px;
}
::placeholder {
color: #949ca1;
font-size: 14px;
}
label {
color: #fff;
display: block;
font-size: 12px;
margin: 0;
padding: 0;
line-height: 24px;
}
.account-nav {
display: flex;
flex-wrap: wrap;
margin: 80px auto 16px;
width: 100%;
justify-content: center;
align-items: center;
}
.account-nav a {
color: white;
text-decoration: none;
font-size: 18px;
line-height: 1;
transition: color 100ms ease;
display: inline-block;
margin: 0;
padding: 12px 16px;
position: relative;
}
.account-nav a svg {
fill: white;
height: 18px;
width: auto;
vertical-align: middle;
margin-right: 6px;
}
.account-nav a:hover {
color: #fff;
filter: drop-shadow(0px 0px 16px black);
border-radius: 30px;
width: auto;
}
.account-nav a:hover svg {
fill: #fff;
}
.my-profile {
text-align: center;
width: 100%;
margin: 40px auto 80px;
}
.archive .my-profile {
margin-top: 120px;
}
.my-profile .player-image {
width: 160px;
height: 160px;
display: block;
position: relative;
margin: 0 auto;
border-radius: 100px;
}
.my-profile .player-image img {
border-radius: 50%;
border-width: 4px;
width: 100%;
height: 100%;
}
.my-profile .players-name {
font-size: 32px;
line-height: 1;
padding: 0;
margin-top: 16px;
}
.my-profile .players-points {
font-size: 32px;
line-height: 1;
margin: 16px 0 40px;
}
.my-profile .players-league,
.my-profile .players-points::after {
content: 'points';
font-size: 14px;
line-height: 1;
display: block;
color: var(--half-white);
text-transform: uppercase;
padding-top: 4px;
}
.my-profile .profile-wrap {
margin: 40px 0;
}
.mini-quest-trophies {
display: flex;
gap: 24px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.profile-game-stats {
padding: 8px;
font-size: 24px;
width: 424px;
max-width: 100%;
margin: 16px auto;
}
.profile-game-stats h4 {
line-height: 1;
color: var(--half-white);
text-transform: uppercase;
font-size: 12px;
margin: 4px;
}
.profile-buttons {
display: flex;
gap: 16px 32px;
margin: 24px auto;
align-items: center;
justify-content: center;
width: 100%;
background: rgba(0, 0, 0, .1);
padding: 24px 0;
flex-wrap: wrap;
}
.profile-buttons a {
font-size: 14px;
color: #fff;
}
.profile-buttons a:hover {}
.profile-buttons a svg {
height: 14px;
margin: 0 6px 4px 0;
vertical-align: middle;
fill: #fff;
}
.update-avatar,
.update-bio {
text-align: center;
background: rgba(0, 0, 0, .1);
border-radius: 12px;
padding: 24px;
width: 424px;
max-width: 100%;
margin: 0 auto;
}
.update-avatar .description,
#basic-user-avatar-form p:nth-last-of-type(2) {}
#basic-user-avatar-form img {
border-radius: 96px;
}
.update-avatar input[type="submit"] {
margin: 0 auto;
}
.center {
text-align: center;
margin: 16px;
}
.hide-this {
display: none !important;
}
.wpforms-required-label {
color: #fff !important;
}
.wpforms-container .wpforms-field-limit-text {
font-size: 12px;
line-height: 1;
color: var(--half-white);
}
.wpforms-container .wpforms-field {
padding: 4px 0;
}
.wpforms-container .wpforms-submit-container {
padding: 16px 0;
}
.already-have {
font-size: 14px;
line-height: 1;
}
#wordList {
width: 160px;
margin: 0 auto;
}
#wordList a {
color: #fff;
}
#wordList .highlight {
background: var(--shadow);
}
.word-list-intro {
padding: 80px 16px 16px;
text-align: center;
width: 600px;
margin: 0 auto;
}
.sb-container {
background: hsl(156 55% 30%);
padding: 24px;
position: sticky;
top: 0;
z-index: 2;
text-align: center;
border-bottom: 4px solid rgba(0, 0, 0, .1);
}
#searchBox {
width: 400px;
max-width: 100%;
}
/* LEADERBOARD */
body.page-template-leaderboard .player .points {
color: #fff;
--hue: 330;
}
body.page-template-leaderboard::after {
content: '';
background: url(/wp-content/uploads/2022/04/iStock-892261454.png);
background-size: 60%;
background-attachment: fixed;
opacity: .09;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
}
.main-leaderboard {
padding-bottom: 150px;
}
.main-leaderboard h2 {
text-align: center;
margin-top: 100px;
text-transform: uppercase;
}
body.page-template-leaderboard .podium-wrap {
width: 600px;
height: auto;
min-height: 100px;
max-width: 100%;
margin: 40px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: dense;
}
body.page-template-leaderboard .podium-wrap .player {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
border-bottom: none;
padding: 0;
}
body.page-template-leaderboard .podium-wrap .player .name {
padding: 10px 0 20px;
}
.under-podium {
padding: 8px 16px;
background: rgba(0, 0, 0, .15);
border-radius: 16px;
width: 600px;
margin: 0 auto;
max-width: 100%;
}
body.page-template-leaderboard .player {
width: 600px;
max-width: 100%;
margin: 0 auto;
font-size: 16px;
line-height: 1;
color: #fff;
padding: 16px 24px;
border-bottom: 1px solid var(--light);
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
background: transparent;
}
body.page-template-leaderboard .player .points {
font-size: 16px;
}
body.page-template-leaderboard .player .place {
font-size: 24px;
display: inline-block;
text-align: right;
line-height: 1.4;
}
body.page-template-leaderboard .under-podium .player .place {
font-size: 16px;
width: 34px;
margin-right: 16px;
}
body.page-template-leaderboard .player.rank-1 {
grid-column: 2;
}
body.page-template-leaderboard .player.rank-1 img {
height: 120px;
width: 120px;
z-index: 1;
border-width: 4px;
}
body.page-template-leaderboard .player.rank-2 {
grid-column: 1;
}
body.page-template-leaderboard .player.rank-2 img {
height: 90px;
width: 90px;
border-width: 4px;
}
body.page-template-leaderboard .player.rank-3 img {
height: 80px;
width: 80px;
border-width: 4px;
}
body.page-template-leaderboard .player sup {
font-size: 15px;
vertical-align: top;
}
body.page-template-leaderboard .player img {
width: 60px;
height: 60px;
border-radius: 100px;
vertical-align: middle;
margin: 0;
padding: 0;
box-shadow: 2px 3px 8px rgba(0, 0, 0, .2);
border-width: 3px;
}
body.page-template-leaderboard .player .name {
font-size: 16px;
padding: 8px 0 16px 24px;
text-transform: capitalize;
}
.podium-wrap .player .points {
margin: 0 auto;
}
@media screen and (max-width: 450px) {
body.page-template-leaderboard .player {
padding: 16px 8px;
}
body.page-template-leaderboard .player .place {
font-size: 16px;
}
body.page-template-leaderboard .player.rank-1 img {
height: 95px;
width: 95px;
}
body.page-template-leaderboard .player.rank-1::before {
background-size: contain;
top: -60px;
}
body.page-template-leaderboard .player.rank-2 img {
height: 65px;
width: 65px;
}
body.page-template-leaderboard .player.rank-3 img {
height: 55px;
width: 55px;
}
body.page-template-leaderboard .player .name {
font-size: 14px;
padding-left: 16px;
}
}