lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
} lite-youtube::before {
content: attr(data-title);
display: block;
position: absolute;
top: 0; background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
height: 99px;
width: 100%;
font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
color: hsl(0deg 0% 93.33%);
text-shadow: 0 0 2px rgba(0,0,0,.5);
font-size: 18px;
padding: 25px 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}
lite-youtube:hover::before {
color: white;
} lite-youtube::after {
content: "";
display: block;
padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
} lite-youtube > .lty-playbtn {
display: block; width: 100%;
height: 100%; background: no-repeat center/68px 48px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
position: absolute;
cursor: pointer;
z-index: 1;
filter: grayscale(100%);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
border: 0;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
filter: none;
} lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap");
#quiz-game-wrapper {
font-family: 'Noto Sans', Arial, sans-serif;
text-align: center;
max-width: 550px;
margin: 30px auto;
padding: 25px;
border-radius: 20px;
background: #fefefe;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
color: #333;
}
#quiz-game-wrapper h2, #quiz-game-wrapper h3 {
font-weight: 700;
color: #3b3b3b;
margin-bottom: 15px;
}
#quiz-game-wrapper #intro, 
#quiz-game-wrapper #question-screen, 
#quiz-game-wrapper #result-screen, 
#quiz-game-wrapper #top10-screen {
background: #fff;
padding: 30px 25px;
border-radius: 20px;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
#quiz-game-wrapper #intro ul {
list-style: none;
padding: 0;
margin: 0 auto 25px auto;
max-width: 420px;
}
#quiz-game-wrapper #intro ul li {
background: #f4f4f4;
margin: 10px 0;
padding: 12px 18px;
border-radius: 12px;
font-size: 1.1em;
font-weight: 500;
color: #333;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
text-align: center;
transition: all 0.3s ease;
}
#quiz-game-wrapper #intro ul li:hover {
background: #eaeaea;
transform: translateY(-2px);
}
#quiz-game-wrapper #start,
#quiz-game-wrapper #submit,
#quiz-game-wrapper #restart {
background: linear-gradient(135deg, #ff7e5f, #feb47b);
color: #fff;
font-weight: 700;
padding: 12px 28px;
border: none;
border-radius: 18px;
cursor: pointer;
font-size: 1.1em;
box-shadow: 0 6px 0 #d96b52, 0 8px 15px rgba(0,0,0,0.2);
transition: all 0.2s ease;
margin-top: 10px;
}
#quiz-game-wrapper #start:hover,
#quiz-game-wrapper #submit:hover,
#quiz-game-wrapper #restart:hover {
background: linear-gradient(135deg, #feb47b, #ff7e5f);
transform: translateY(-3px);
box-shadow: 0 8px 0 #d96b52, 0 10px 20px rgba(0,0,0,0.25);
}
#quiz-game-wrapper #start:active,
#quiz-game-wrapper #submit:active,
#quiz-game-wrapper #restart:active {
transform: translateY(1px);
box-shadow: 0 4px 0 #d96b52, 0 6px 15px rgba(0,0,0,0.2);
}
#quiz-game-wrapper #question {
font-size: 1.3em;
font-weight: 600;
color: #444;
margin-bottom: 20px;
}
#quiz-game-wrapper #timer {
font-size: 1.2em;
color: #ff6f61;
font-weight: bold;
margin-bottom: 15px;
}
#quiz-game-wrapper #answer {
width: 80%;
padding: 12px 15px;
border-radius: 12px;
border: 2px solid #ccc;
outline: none;
font-size: 1em;
margin-bottom: 15px;
transition: all 0.3s ease;
}
#quiz-game-wrapper #answer:focus {
border-color: #ff7e5f;
box-shadow: 0 0 8px rgba(255,126,95,0.4);
}
#quiz-game-wrapper #final-score {
font-size: 1.4em;
font-weight: bold;
color: #ff6f61;
margin-bottom: 20px;
}
#quiz-game-wrapper #share-buttons a {
display: inline-block;
padding: 10px 16px;
border-radius: 12px;
margin: 5px;
font-size: 0.95em;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
color: #fff !important;
}
#quiz-game-wrapper #share-buttons a.telegram {
background-color: #26a5e4 !important;
}
#quiz-game-wrapper #share-buttons a.telegram:hover {
background-color: #1d8bc3 !important;
}
#quiz-game-wrapper #share-buttons a.whatsapp {
background-color: #25d366 !important;
}
#quiz-game-wrapper #share-buttons a.whatsapp:hover {
background-color: #1ebc57 !important;
}
#quiz-game-wrapper #top10-list {
list-style: decimal inside;
color: #555;
text-align: center;
margin: 10px 0;
padding: 0;
}
#quiz-game-wrapper #top10-list li {
padding: 6px 0;
font-weight: 500;
font-size: 1.05em;
}
#quiz-game-wrapper #current-record {
font-weight: bold;
color: #d2691e;
margin-top: 10px;
}
@media screen and (max-width: 600px) {
#quiz-game-wrapper { width: 90%; padding: 20px; }
#quiz-game-wrapper #answer { width: 90%; }
}#quizwords-app {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
}
.quiz-container button, .quiz-start button {
margin: 5px;
padding: 10px 15px;
cursor: pointer;
}
.quiz-word {
font-size: 24px;
margin-bottom: 10px;
}
.quiz-options button {
display: block;
width: 100%;
margin-bottom: 5px;
}