/* ============================================================
   TopQuiz — Quiz App Mode  v1.1
   Softlight · Bento · Mobile-first
   ============================================================ */

/* ── Base ───────────────────────────────────────────────────── */
body.quiz-app-mode {
  padding-top: 60px !important;
  background: #f5f6fa !important;
}
body.quiz-app-mode header#masthead.site-header {
  display: none !important;
}
/* Скрываем оригинальные floating кнопки — они заменены своими в шапке */
body.quiz-app-mode #tg-back-button,
body.quiz-app-mode #dark-mode-toggle {
  display: none !important;
}
/* Контент поста — убираем лишние отступы темы (только на страницах тестов) */
body.quiz-content-mode article.single-post {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.quiz-content-mode .site-main {
  background: transparent !important;
}
body.quiz-content-mode .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
body.quiz-content-mode .entry-content {
  padding: 12px 16px 0 !important;
  max-width: 680px;
  margin: 0 auto;
}
body.quiz-content-mode .related-posts {
  padding: 0 16px 24px !important;
  max-width: 680px;
  margin: 0 auto;
}
/* Компенсируем padding-top у hero на landing.html */
body.quiz-app-mode .hero { padding-top: 80px; }
@media (max-width: 767px) { body.quiz-app-mode .hero { padding-top: 40px; } }

/* ── App Header ─────────────────────────────────────────────── */
.quiz-app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  z-index: 9998;
  display: flex;
  align-items: center;
  padding: 0 10px 0 16px;
  gap: 8px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(233,74,117,0.1);
  box-shadow: 0 1px 16px rgba(0,0,0,0.07);
}

/* Play button */
.quiz-hdr-play {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #E94A75, #c0395d);
  color: #fff !important; border-radius: 100px;
  font-size: 0.82rem; font-weight: 700;
  text-decoration: none !important; white-space: nowrap;
  transition: all 0.2s; flex-shrink: 0;
}
.quiz-hdr-play svg { pointer-events: none; }
.quiz-hdr-play:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(233,74,117,0.35); }
.quiz-hdr-play:active { transform: scale(0.95); }
@media (max-width: 400px) { .quiz-hdr-play span { display: none; } }

/* Search overlay */
#quiz-search-overlay {
  position: fixed;
  top: 60px; left: 0; right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 12px 16px;
  z-index: 9997;
  transform: translateY(-110%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  border-bottom: 1px solid rgba(233,74,117,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
#quiz-search-overlay.open { transform: translateY(0); }
#quiz-search-overlay form {
  display: flex; align-items: center; gap: 8px;
  max-width: 600px; margin: 0 auto;
}
#quiz-search-overlay input[type=search] {
  flex: 1; padding: 10px 16px;
  border: 1.5px solid rgba(233,74,117,0.2);
  border-radius: 100px; font-size: 1rem; font-family: inherit;
  background: #fafafa; outline: none; color: #222;
}
#quiz-search-overlay input[type=search]:focus {
  border-color: #E94A75;
  box-shadow: 0 0 0 3px rgba(233,74,117,0.1);
}
#quiz-search-close {
  width: 36px; height: 36px; border: none;
  background: rgba(0,0,0,0.06); border-radius: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #666; flex-shrink: 0; transition: all 0.2s;
}
#quiz-search-close:hover { background: rgba(233,74,117,0.1); color: #E94A75; }

/* Hamburger */
.quiz-ham {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: none; border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 5px; padding: 10px;
  transition: background 0.2s;
}
.quiz-ham:hover  { background: rgba(233,74,117,0.08); }
.quiz-ham:active { background: rgba(233,74,117,0.15); }
.quiz-ham span {
  display: block; width: 20px; height: 2px;
  background: #2a2a3a; border-radius: 2px;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}
.quiz-ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.quiz-ham.open span:nth-child(2) { opacity:0; transform: scaleX(0); }
.quiz-ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Logo */
.quiz-app-logo {
  flex: 1; text-decoration: none;
  display: flex; align-items: center;
  padding: 0 2px;
}
.quiz-logo-text {
  font-size: 1.06rem; font-weight: 800;
  color: #1a1a2e; letter-spacing: -0.01em;
}
.quiz-logo-text em { font-style: normal; color: #E94A75; }

/* Header right — own buttons */
.quiz-app-header-right {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.quiz-hdr-btn {
  width: 40px; height: 40px;
  border: none; border-radius: 12px;
  background: rgba(0,0,0,0.05);
  cursor: pointer; color: #444;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.quiz-hdr-btn:hover  { background: rgba(233,74,117,0.1); color: #E94A75; }
.quiz-hdr-btn:active { transform: scale(0.93); }
.quiz-hdr-btn svg    { pointer-events: none; }

/* ── Hero Box ───────────────────────────────────────────────── */
.quiz-hero-box {
  width: 100%;
  margin-bottom: 0;
}
.quiz-hero-img {
  position: relative;
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a2e;
  display: flex;
  align-items: flex-end;
}
@media (min-width: 600px) { .quiz-hero-img { height: 280px; } }

.quiz-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,30,0.08) 0%,
    rgba(10,10,30,0.25) 40%,
    rgba(10,10,30,0.72) 100%
  );
}
.quiz-hero-nophoto {
  background: linear-gradient(135deg, #E94A75 0%, #c0395d 50%, #1a1a2e 100%);
}
.quiz-hero-title {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 16px 18px 20px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
  width: 100%;
}
@media (min-width: 600px) {
  .quiz-hero-title { font-size: 1.55rem !important; padding: 20px 28px 26px !important; }
}

/* ── Drawer Overlay ─────────────────────────────────────────── */
.quiz-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15,15,30,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.quiz-drawer-overlay.open { opacity:1; pointer-events: all; }

/* ── Drawer ─────────────────────────────────────────────────── */
.quiz-drawer {
  position: fixed; top:0; left:0; bottom:0;
  width: min(300px, 82vw);
  background: #fff; z-index: 10000;
  transform: translateX(-100%);
  transition: transform 0.36s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  border-radius: 0 28px 28px 0;
  box-shadow: 6px 0 40px rgba(0,0,0,0.12);
  overflow: hidden;
}
.quiz-drawer.open { transform: translateX(0); }

.quiz-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(135deg,#fdf2f6 0%,#fff 60%);
}
.quiz-drawer-brand { font-size:1.15rem; font-weight:800; color:#1a1a2e; }
.quiz-drawer-brand em { font-style:normal; color:#E94A75; }
.quiz-drawer-close {
  width:36px; height:36px; border:none;
  background: rgba(0,0,0,0.06); border-radius:10px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#666; transition:all 0.2s;
}
.quiz-drawer-close:hover { background:rgba(233,74,117,0.1); color:#E94A75; }

.quiz-drawer-nav {
  list-style:none; padding:10px; margin:0; flex:1; overflow-y:auto;
  display:flex; flex-direction:column;
}
.quiz-drawer-nav li a {
  display:flex; align-items:center;
  padding:12px 14px; border-radius:14px;
  text-decoration:none; color:#222;
  font-size:0.95rem; font-weight:500;
  transition:all 0.2s;
}
.quiz-drawer-nav li a:hover {
  background:rgba(233,74,117,0.07); color:#E94A75; padding-left:18px;
}
.qdni {
  width:38px; height:38px;
  background:rgba(233,74,117,0.08); border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; margin-right:12px;
  transition:background 0.2s;
}
.quiz-drawer-nav li a:hover .qdni { background:rgba(233,74,117,0.15); }
.qdni-tag {
  margin-left:auto; font-size:0.7rem; font-weight:600;
  color:#0088cc; background:rgba(0,136,204,0.1);
  border-radius:6px; padding:2px 7px; letter-spacing:0.02em;
}

.quiz-drawer-footer { padding:14px 14px 24px; border-top:1px solid rgba(0,0,0,0.06); }
.quiz-drawer-tg {
  display:flex; align-items:center; gap:10px;
  padding:13px 16px;
  background:linear-gradient(135deg,rgba(0,136,204,0.07),rgba(0,136,204,0.12));
  border:1px solid rgba(0,136,204,0.18); border-radius:16px;
  text-decoration:none; color:#0077bb; font-size:0.88rem; font-weight:600;
  transition:all 0.2s;
}
.quiz-drawer-tg:hover { background:linear-gradient(135deg,rgba(0,136,204,0.13),rgba(0,136,204,0.2)); transform:translateY(-1px); }

/* ── Content layout ─────────────────────────────────────────── */
.quiz-app-content { display:flex; flex-direction:column; gap:14px; }

/* ── Meta Block (bento) ─────────────────────────────────────── */
.quiz-meta-block { display:flex; flex-direction:column; gap:10px; }

.quiz-cat-pills { display:flex; flex-wrap:wrap; gap:6px; }
.quiz-cat-pill {
  display:inline-flex; align-items:center; padding:5px 13px;
  background:rgba(233,74,117,0.08); color:#E94A75;
  border-radius:100px; font-size:0.75rem; font-weight:700;
  text-decoration:none; letter-spacing:0.03em; text-transform:uppercase;
  border:1px solid rgba(233,74,117,0.14); transition:all 0.2s;
}
.quiz-cat-pill:hover { background:rgba(233,74,117,0.16); transform:translateY(-1px); }

.quiz-stats { display:flex; flex-wrap:wrap; gap:8px; }
.quiz-stat {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; background:#fff;
  border:1px solid rgba(0,0,0,0.08); border-radius:100px;
  font-size:0.82rem; font-weight:500; color:#555;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
}
.qs-icon { font-size:0.9em; line-height:1; }
.quiz-stat-fresh { color:#2a9d6a; background:rgba(42,157,106,0.07); border-color:rgba(42,157,106,0.15); }

/* ── Description Spoiler ────────────────────────────────────── */
.quiz-description-spoiler {
  background:#fff; border:1px solid rgba(233,74,117,0.1);
  border-radius:18px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.quiz-desc-toggle {
  list-style:none; display:flex; align-items:center;
  justify-content:space-between; padding:15px 18px;
  cursor:pointer; font-size:0.88rem; font-weight:600; color:#444;
  user-select:none; gap:8px; transition:background 0.2s;
}
.quiz-desc-toggle:hover { background:rgba(233,74,117,0.04); }
.quiz-desc-toggle::-webkit-details-marker { display:none; }
.qds-chevron {
  width:22px; height:22px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(233,74,117,0.1); border-radius:7px;
  transition:transform 0.3s ease, background 0.2s;
}
.qds-chevron::after {
  content:''; display:block; width:6px; height:6px;
  border-right:2px solid #E94A75; border-bottom:2px solid #E94A75;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform 0.3s ease;
}
.quiz-description-spoiler[open] .qds-chevron { background:rgba(233,74,117,0.18); transform:rotate(180deg); }
.quiz-desc-content {
  padding:0 18px 16px; font-size:0.88rem; line-height:1.7; color:#555;
  animation:qdFadeDown 0.25s ease;
}
.quiz-desc-content p:first-child { margin-top:0; }
.quiz-desc-content p:last-child  { margin-bottom:0; }
@keyframes qdFadeDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Test Card ──────────────────────────────────────────────── */
.quiz-test-card {
  background:#fff; border-radius:24px;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  overflow:hidden;
}
.quiz-test-card > div:first-child {
  padding:18px 16px 20px !important;
}

/* ── Related Posts → horizontal scroll with images ──────────── */
body.quiz-app-mode .related-posts { margin-top:4px; }
body.quiz-app-mode .related-posts > h3 {
  font-size:0.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.08em;
  color:#aaa; margin-bottom:12px; padding:0 2px;
}
body.quiz-app-mode .related-posts .posts-grid {
  display:flex !important; flex-direction:row !important;
  flex-wrap:nowrap !important; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px; scrollbar-width:none;
}
body.quiz-app-mode .related-posts .posts-grid::-webkit-scrollbar { display:none; }
body.quiz-app-mode .related-posts article.post-card {
  flex:0 0 auto; width:148px; scroll-snap-align:start;
  border-radius:18px; overflow:hidden;
  box-shadow:0 3px 14px rgba(0,0,0,0.09);
  background:#fff;
  display:flex; flex-direction:column;
  transition:transform 0.2s, box-shadow 0.2s;
  text-decoration:none !important;
}
body.quiz-app-mode .related-posts article.post-card:hover {
  transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.13);
}
/* Image — compact, fixed height */
body.quiz-app-mode .related-posts .post-thumbnail,
body.quiz-app-mode .related-posts .post-thumbnail a {
  display:block !important; width:100%;
}
body.quiz-app-mode .related-posts .post-thumbnail img,
body.quiz-app-mode .related-posts article.post-card img {
  display:block !important; width:100% !important;
  height:90px !important; object-fit:cover !important;
  border-radius:0 !important;
}
/* Hide excerpt, keep title */
body.quiz-app-mode .related-posts .post-card-content p { display:none !important; }
body.quiz-app-mode .related-posts .post-card-content {
  padding:10px 11px 13px !important; flex:1;
}
body.quiz-app-mode .related-posts .post-card-content h4 {
  font-size:0.76rem; line-height:1.42; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
body.quiz-app-mode .related-posts .post-card-content h4 a {
  color:#222; text-decoration:none;
}
body.quiz-app-mode .related-posts .post-card-content h4 a:hover { color:#E94A75; }

/* ── Dark mode (dark-mode.js uses filter:invert on body) ────── */
html.dark-mode .quiz-app-header,
html.dark-mode .quiz-drawer,
html.dark-mode .quiz-description-spoiler,
html.dark-mode .quiz-meta-block,
html.dark-mode .quiz-stats,
html.dark-mode .quiz-cat-pills {
  filter:invert(1) grayscale(1);
}
html.dark-mode .quiz-test-card {
  filter:invert(1) grayscale(0) hue-rotate(180deg);
}
html.dark-mode .quiz-hero-img {
  filter:invert(1) grayscale(1);
}

/* ── Inline hamburger (theme header, non quiz-mode pages) ───── */
.quiz-ham-inline {
  margin-left: 8px;
  flex-shrink: 0;
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .quiz-app-header { padding:0 24px 0 16px; }
  body.quiz-app-mode .entry-content { padding:16px 20px 0 !important; }
  body.quiz-app-mode .related-posts { padding:0 20px 32px !important; }
  body.quiz-app-mode .related-posts article.post-card { width:170px; }
  body.quiz-app-mode .related-posts .post-thumbnail img,
  body.quiz-app-mode .related-posts article.post-card img { height:105px !important; }
  body.quiz-app-mode .related-posts .posts-grid { justify-content:center; }
}