/* style.css - Updated font sizes */
@font-face {
    font-family: 'PT Serif';
    src: local('PT Serif'), local('PTSerif-Regular'), url('ptserif.woff2') format('woff2'), url('ptserif.woff') format('woff'), url('ptserif.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'PT Serif';
    src: local('PT Serif Italic'), local('PTSerif-Italic'), url('ptserifitalic.woff2') format('woff2'), url('ptserifitalic.woff') format('woff'), url('ptserifitalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'PT Serif';
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url('ptserifbold.woff2') format('woff2'), url('ptserifbold.woff') format('woff'), url('ptserifbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'PT Serif';
    src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url('ptserifbolditalic.woff2') format('woff2'), url('ptserifbolditalic.woff') format('woff'), url('ptserifbolditalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

*{margin:0;padding:0;box-sizing:border-box;}
html { font-size: 18px; } /* increased base font size */
body,html{font-family:'PT Serif', serif;background:#f0f0f0;color:#333;height:100%;overflow:auto;}
.quiz-container {background:#fff;width:90%;max-width:500px;margin:20px auto;padding:24px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.start-screen, .result-screen {
  position: relative;
  background: linear-gradient(135deg, #1f1c2c, #928dab);
  color: #fff;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: fadeIn 1s ease-out both;
  overflow: hidden;
  margin: 20px auto;
  max-width: 500px;
}
.start-screen h1, .result-screen h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.start-screen p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.result-screen p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
/* .start-screen::before, .result-screen::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  background: rgba(255,255,255,0.4);
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
} */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* .start-btn{padding:14px 28px;background:#ffa500;border:none;border-radius:6px;color:#000;cursor:pointer;font-size:1rem;}
.start-btn:hover{background:#e59400;} */
.header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.progress-bar{flex:1;height:12px;background:#eee;border-radius:6px;overflow:hidden;}
.progress{height:100%;width:0;background:#ffa500;transition:width .3s;}
#counter{font-size:1rem;font-weight:bold;}
.question-section{text-align:left;}
#question{font-size:1.3rem;margin-bottom:18px;}
.options{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.option-btn{padding:14px;border: 2px solid rgb(255,150,00);color:#000;border-radius:6px;background:#fff;cursor:pointer;font-size:1rem;}
.option-btn.correct{background:#c8e6c9;color: activebuttontext;}
.option-btn.wrong{background:#ffcdd2;}
.explanation{text-align:left;margin-top:12px;padding:12px;border-left:4px solid #ffa500;background:#fafafa;font-size:1rem;word-break: break-word; hyphens: auto;}
.explanation img{max-width:100%;border-radius:4px;margin-top:12px;}
/* .next-btn, .retry-btn{display:block;margin:24px auto 0;padding:12px 28px;background:#ffa500;border:none;border-radius:6px;color:#000;cursor:pointer;font-size:1.1rem;}
.next-btn:hover, .retry-btn:hover{background:#e59400;} */
.share-section{display:flex;justify-content:center;gap:20px;margin:18px 0;}
.share-btn{background:#fff;border:none;border-radius:50%;width:88px;height:88px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;}
.share-btn:hover{background:#ffd700;}
@media(max-width:480px){
  html { font-size: 16px; }
  .share-btn{width:64px;height:64px;font-size:1.3rem;}
}

/* Кнопка «Подписаться» на финальном экране */
.next-btn, .retry-btn, .start-btn {
  border: none;
  cursor: pointer;
  font-family: Arial;
  display: inline-block;
  margin: 12px auto 0;
  padding: 10px 20px;
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: #000;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background .2s, transform .2s;
}
.subscribe-btn {
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  border: none;
  cursor: pointer;
  font-family: Arial;
  margin: 12px auto 0;
  padding: 10px 20px;
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: #000;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background .2s, transform .2s;
}
.subscribe-btn:hover, .next-btn:hover, .retry-btn:hover, .start-btn:hover {
  background: linear-gradient(135deg, #ffe066, #ff8c00);
  transform: translateY(-2px);
}
.subscribe-btn i {
  font-size: 1.2rem;
}
.result-logo {
  text-align: center;
  margin-bottom: 20px;
}
.result-logo img {
  max-width: 150px;
  height: auto;
  display: inline-block;
}