/* ===== 国庆主题 gq =====
   全部规则挂在 html.fest-on 下面。
   访客点「×」→ 移除 html.fest-on → 所有装饰和布局改动一起归零。
*/

/* ---------- ① 顶部红色横幅（CSS 画底，不闪） ---------- */
html.fest-on body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 34px;
  z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg,
    #C8102E 0%, #EE1C25 22%, #D4111F 50%, #EE1C25 78%, #C8102E 100%);
  box-shadow: 0 2px 16px rgba(200,16,46,.34);
}

html.fest-on #gq-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 34px;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 40px 0 10px;
  box-sizing: border-box;
  pointer-events: none;
  color: #FFE9A8;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
  user-select: none; -webkit-user-select: none;
}
html.fest-on #gq-bar .gq-bar-t { white-space: nowrap; }
html.fest-on #gq-bar .gq-bar-sub {
  font-size: 10.5px; font-weight: 500;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  color: rgba(255,233,168,.72);
  white-space: nowrap;
}

/* 横幅两侧的小国旗 */
html.fest-on #gq-bar .gq-flag {
  display: inline-flex; flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
  transform-origin: 0% 50%;
  animation: gqWave 3.6s ease-in-out infinite;
}
html.fest-on #gq-bar .gq-flag.rev { animation-delay: -1.8s; }
html.fest-on #gq-bar .gq-flag svg { display: block; border-radius: 1px; }
@keyframes gqWave {
  0%, 100% { transform: perspective(150px) rotateY(-8deg); }
  50%      { transform: perspective(150px) rotateY(8deg) skewY(-1.4deg); }
}

/* 关闭按钮 */
html.fest-on #gq-bar .gq-x {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: rgba(255,255,255,.1);
  color: rgba(255,233,168,.75);
  font-size: 14px; line-height: 1; cursor: pointer;
  pointer-events: auto;
  font-family: inherit;
  transition: background .18s, color .18s;
}
html.fest-on #gq-bar .gq-x:hover {
  background: rgba(255,255,255,.24);
  color: #fff;
}
html.fest-on #gq-bar .gq-x:active { transform: translateY(-50%) scale(.9); }

/* 把页头和内容往下推 */
html.fest-on body { padding-top: 34px !important; }
html.fest-on header.fixed { top: 34px !important; }

/* ---------- ② 页头偏红 ---------- */
html.fest-on header.fixed {
  background-color: rgba(255,246,246,.86) !important;
  border-bottom-color: rgba(238,28,37,.16) !important;
}
html.fest-on.dark header.fixed { background-color: rgba(30,16,16,.92) !important; }

/* ---------- ③ logo 换装 ---------- */
html.fest-on header a span[class~="bg-blue-500"] {
  background-color: #EE1C25 !important;
  box-shadow: 0 0 0 3px rgba(238,28,37,.18) !important;
}
html.fest-on #gq-star {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 5px; flex-shrink: 0;
  color: #F5C518;
  animation: gqTwinkle 3.6s ease-in-out infinite;
}
html.fest-on #gq-star svg { width: .62em; height: .62em; display: block; }
@keyframes gqTwinkle {
  0%, 100% { opacity: .55; transform: scale(.9)  rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.08) rotate(8deg); }
}

/* ---------- ④ 全站蓝 → 国庆红 ---------- */
html.fest-on [class~="bg-blue-500"]      { background-color: #EE1C25 !important; }
html.fest-on [class~="bg-blue-600"]      { background-color: #D4111F !important; }
html.fest-on [class~="border-blue-500"]  { border-color: #EE1C25 !important; }
html.fest-on [class~="border-blue-600"]  { border-color: #D4111F !important; }
html.fest-on [class~="text-blue-500"]    { color: #EE1C25 !important; }
html.fest-on [class~="text-blue-600"]    { color: #D4111F !important; }
html.fest-on [class~="bg-blue-50"]       { background-color: rgba(238,28,37,.07) !important; }
html.fest-on [class~="bg-blue-100"]      { background-color: rgba(238,28,37,.12) !important; }
html.fest-on [class~="border-blue-200"]  { border-color: rgba(238,28,37,.22) !important; }
html.fest-on [class~="border-blue-300"]  { border-color: rgba(238,28,37,.32) !important; }

html.fest-on.dark [class~="text-blue-400"] { color: #FF6B6B !important; }
html.fest-on.dark [class~="bg-blue-400"]   { background-color: #FF6B6B !important; }

html.fest-on [class*="hover:bg-blue-500"]:hover     { background-color: #EE1C25 !important; }
html.fest-on [class*="hover:text-blue-500"]:hover   { color: #EE1C25 !important; }
html.fest-on [class*="hover:text-blue-600"]:hover   { color: #D4111F !important; }
html.fest-on [class*="hover:border-blue-500"]:hover { border-color: #EE1C25 !important; }
html.fest-on [class*="focus:border-blue-500"]:focus { border-color: #EE1C25 !important;
                                                      box-shadow: 0 0 0 2px rgba(238,28,37,.2) !important; }
html.fest-on [class*="focus:ring-blue-500"]:focus   { --tw-ring-color: rgba(238,28,37,.35) !important; }

/* ---------- ⑤ 横幅下面的流动红金线 ---------- */
html.fest-on body::after {
  content: '';
  position: fixed; top: 34px; left: 0; right: 0; height: 3px;
  z-index: 9998; pointer-events: none;
  background: linear-gradient(90deg,
    #EE1C25 0%, #FF5A5F 16%, #F5C518 36%,
    #FF5A5F 56%, #EE1C25 76%, #EE1C25 100%);
  background-size: 220% 100%;
  animation: gqFlow 11s linear infinite;
  box-shadow: 0 0 16px rgba(238,28,37,.42), 0 0 40px rgba(245,197,24,.2);
}
@keyframes gqFlow { from { background-position: 0% 0 } to { background-position: 220% 0 } }

/* ---------- ⑥ 飘落的金色小星 ---------- */
html.fest-on #gq-dust {
  position: fixed; inset: 0; z-index: 9997;
  pointer-events: none; overflow: hidden;
}
html.fest-on .gq-p {
  position: absolute; top: -26px;
  color: #F5C518;
  will-change: transform, opacity;
  animation: gqFall linear infinite;
}
html.fest-on .gq-p svg { display: block; width: 100%; height: 100%; }
@keyframes gqFall {
  0%   { transform: translateY(-30px) rotate(0deg);   opacity: 0; }
  10%  { opacity: var(--o, .26); }
  88%  { opacity: var(--o, .26); }
  100% { transform: translateY(103vh) rotate(430deg); opacity: 0; }
}

/* ---------- 页脚上方的红金细线 ---------- */
html.fest-on .gq-rule {
  max-width: 896px; margin: 0 auto; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(238,28,37,.3) 18%,
    rgba(245,197,24,.55) 50%, rgba(238,28,37,.3) 82%, transparent 100%);
}

/* ---------- 手机 ---------- */
@media (max-width: 640px) {
  html.fest-on body::before,
  html.fest-on #gq-bar { height: 30px; }
  html.fest-on #gq-bar { font-size: 10.5px; gap: 6px; padding-right: 34px; }
  html.fest-on #gq-bar .gq-bar-sub { display: none; }
  html.fest-on #gq-bar .gq-flag.rev { display: none; }
  html.fest-on #gq-bar .gq-flag svg { height: 14px !important; width: auto !important; }
  html.fest-on body { padding-top: 30px !important; }
  html.fest-on header.fixed { top: 30px !important; }
  html.fest-on body::after { top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html.fest-on body::after,
  html.fest-on #gq-star,
  html.fest-on #gq-bar .gq-flag,
  html.fest-on .gq-p { animation: none !important; }
  html.fest-on #gq-dust { display: none; }
}