/**
 * OnSolo × ReelShort Global Short Drama Creator Awards
 *
 * 样式还原自设计稿站点。原稿基于 Tailwind v4 preflight，其重置把所有元素的 margin/padding 清零、
 * 并让 h1~h6 继承字号字重，下面的版式全部建立在这个前提上，所以 reset 一节不能删。
 */

/* ---------- reset（对齐 Tailwind v4 preflight 中版式相关的部分） ---------- */

*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
button, input { font: inherit; color: inherit; background: transparent; }
ol, ul { list-style: none; }
img, video { display: block; max-width: 100%; }
/* 下面有若干 .foo{display:flex} 的规则，优先级高于 [hidden] 的默认 display:none */
[hidden] { display: none !important; }

/* ---------- 基础 ---------- */

/* 投稿抽屉挂在 .festivalSite 外面（fixed 定位，不能被内容区的层叠上下文困住），所以配色变量定在 :root */
:root {
  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Playfair Display", Georgia, serif;
  --fblack: #101012;
  --fpaper: #f0eee7;
  --fblue: #463bff;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; line-height: 1.5; }
body { font-family: var(--font-sans); background: #f0eee7; color: #101012; }
em { font-family: var(--font-serif); font-weight: 400; font-style: normal; }
p { line-height: 1.55; }

.festivalSite { background: var(--fpaper); min-height: 100vh; }
.cap { font: 600 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- 顶栏与 Tab ---------- */

.festivalNav {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; padding: 0 5vw;
  background: var(--fblack); color: #fff; border-bottom: 1px solid #343438;
}
/* 三张图都是透明底的浅色标，只给高度、宽度按比例走，别写死尺寸 */
.festivalLogo { display: flex; align-items: center; gap: 10px; }
.festivalLogo img { width: auto; }
.festivalLogo i { margin: 0 2px; color: #777; font: 400 25px var(--font-sans); font-style: normal; }
.logoOnsolo { height: 26px; }
.logoReelMark { height: 34px; }
.logoReelWord { height: 20px; }
.festivalNavActions { display: flex; align-items: center; gap: 10px; }
.festivalCompetitionButton,
.festivalDiscordButton {
  display: flex; align-items: center; gap: 18px;
  padding: 11px 17px; border-radius: 999px; cursor: pointer;
  font: 600 10px var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
}
.festivalCompetitionButton { color: #111; background: #fff; border: 1px solid #fff; }
.festivalCompetitionButton:hover { color: #fff; background: none; }
.festivalDiscordButton { color: #fff; background: none; border: 1px solid #555; }
.festivalDiscordButton:hover { border-color: #fff; }
.festivalCompetitionButton i, .festivalDiscordButton i { font-size: 13px; font-style: normal; }

.festivalTabs {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: center; align-items: flex-end; gap: 18px;
  height: 78px; background: var(--fblack); border-bottom: 1px solid #29292d;
}
.festivalTabs button {
  height: 100%; padding: 0 14px 25px; cursor: pointer;
  color: #68686e; font: 600 clamp(16px, 2vw, 27px) var(--font-sans);
  border-bottom: 4px solid transparent;
}
.festivalTabs button.active { color: #fff; border-bottom-color: #fff; }

/* ---------- Hero ---------- */

.festivalHero {
  position: relative; overflow: hidden;
  height: calc(100vh - 148px); min-height: 650px;
  background: #08070c; color: #fff;
}
.festivalHero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 8% 68%, #ff203c, transparent 34%),
    radial-gradient(circle at 48% 48%, #3e22fa, transparent 41%),
    radial-gradient(circle at 88% 28%, #00b9e2, transparent 43%),
    linear-gradient(140deg, #12050d, #071424);
}
.festivalGlow {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 38%, #ffffff14 54%, #ffffffc7 94%);
}
.festivalMeta {
  position: absolute; top: 30px; left: 5vw; right: 5vw;
  display: flex; justify-content: space-between;
  font: 500 12px var(--font-mono); letter-spacing: .12em;
}
/* 征集时间是首屏最该看清的信息，比左边的活动名再大一号 */
.festivalMeta span:last-child { font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.festivalHeadline { position: absolute; top: 22%; left: 5vw; }
.festivalHeadline > p { font: 500 12px var(--font-mono); letter-spacing: .12em; }
.festivalHeadline h1 { margin: 25px 0 0; font-size: clamp(64px, 8.3vw, 130px); line-height: .8; letter-spacing: -.065em; }
.festivalHeadline em { color: #736dff; }
.festivalFacts {
  position: absolute; bottom: 30px; left: 5vw; right: 5vw;
  display: grid; grid-template-columns: 1fr 1fr 1fr .8fr;
  border-top: 1px solid #ffffff7a; border-bottom: 1px solid #ffffff7a;
}
.festivalFacts > div { display: flex; align-items: end; gap: 14px; padding: 18px 20px 18px 0; border-right: 1px solid #ffffff4d; }
.festivalFacts strong { font-size: clamp(34px, 4.2vw, 64px); line-height: .8; letter-spacing: -.05em; }
.festivalFacts span { max-width: 90px; font: 500 9px var(--font-mono); text-transform: uppercase; }
/* 积分那一格多一行折算金额，标签与它竖排 */
.festivalFacts .creditsFact > span { display: flex; flex-direction: column; gap: 6px; max-width: none; }
.festivalFacts .creditsFact em {
  color: #fff; font: 700 clamp(12px, 1.15vw, 18px) var(--font-sans);
  letter-spacing: -.02em; text-transform: none; white-space: nowrap;
}
.festivalFacts > a {
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #09090c;
  font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- 通用分节 ---------- */

.festivalSection { padding: 115px 5vw; }
.festivalDark { background: #111115; color: #fff; }

.festivalIntro > div { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10vw; margin-top: 50px; }
.festivalIntro h2,
.awardIntro h2,
.tabPage header h1,
.festivalFinal h2 { margin: 0; font-size: clamp(52px, 7vw, 105px); line-height: .88; letter-spacing: -.06em; }
.festivalIntro h2 em,
.awardIntro h2 em,
.festivalFinal h2 em { color: var(--fblue); }
.festivalIntro p { color: #555; }
.festivalIntro .large { margin-top: 0; color: #111; font-size: 23px; line-height: 1.35; }

/* ---------- 创作主题 ---------- */

.creativeUnified {
  min-height: 720px; margin-top: 45px; padding: 42px;
  background:
    radial-gradient(circle at 82% 18%, #1dcaefb8, transparent 30%),
    radial-gradient(circle at 12% 86%, #f61c3dbf, transparent 38%),
    radial-gradient(circle at 52% 50%, #4c30ffb3, transparent 45%),
    #0d0a23;
}
.creativeThemeLead { max-width: 900px; }
.creativeThemeLead > span { font: 600 10px var(--font-mono); letter-spacing: .14em; }
.creativeThemeLead h2 { margin: 70px 0 24px; font-size: clamp(58px, 7vw, 110px); line-height: .86; letter-spacing: -.06em; }
.creativeThemeLead h2 em { color: #aef3ff; }
.creativeThemeLead p { max-width: 760px; color: #ddd; font-size: 16px; }
/* 二创清单跟推荐方向上下排，不再左右分栏，所以这里是单列 */
.creativeThemeBody { margin-top: 70px; padding-top: 35px; border-top: 1px solid #ffffff80; }
.creativeThemeBody h3 { margin: 0 0 25px; font-size: 28px; }
.themeDirections { max-width: 1100px; }
.themeDirections li { display: grid; grid-template-columns: .36fr 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid #ffffff40; }
.themeDirections li b { font-size: 14px; }
.themeDirections li span { color: #bbb; font-size: 13px; }

.coCreation { margin-top: 52px; padding-top: 52px; border-top: 1px solid #ffffff99; }
.coCreation h3 { margin-top: 28px; font-size: clamp(34px, 4vw, 58px); line-height: .95; }
.coCreation p { color: #ddd; }
.coCreation small { display: block; margin-top: 25px; padding-top: 20px; border-top: 1px solid #ffffff4d; color: #aaa; line-height: 1.55; }
/* 两列按行铺，左列落 01/03/05/07/09 */
.coCreationScripts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-top: 26px; border-top: 1px solid #ffffff4d; }
.coCreationScripts li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid #ffffff33; }
.coCreationScripts > li > span { font: 600 9px var(--font-mono); color: #9e98ff; }
.coCreationScripts b { display: block; font-size: 13px; line-height: 1.35; }
.coCreationScripts small { margin: 5px 0 0; padding: 0; border: 0; color: #999; font-size: 10px; }
/* h4 与 p 交替排在两行上，三列各自对齐 */
.coCreationDetails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 35px; padding-top: 5px; }
.coCreationDetails h4 { grid-row: 1; margin: 25px 0 0; color: #aef3ff; font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.coCreationDetails p { grid-row: 2; margin-top: 0; color: #bbb; font-size: 12px; line-height: 1.65; }
.coCreationNotice { max-width: 1100px; margin-top: 28px; color: #999; }

/* ---------- 奖项 ---------- */

.festivalPrizes { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
.awardIntro h2 { margin-top: 40px; font-size: clamp(49px, 6.5vw, 95px); }
.awardIntro > p { max-width: 450px; color: #666; }
.awardRows { border-top: 1px solid #111; }
.awardRows article {
  display: grid; grid-template-columns: 35px 1fr .6fr; align-items: center; gap: 20px;
  padding: 27px 0; border-bottom: 1px solid #00000040;
}
.awardRows > article > span { font: 500 10px var(--font-mono); }
.awardRows h3 { margin: 0; font-size: 20px; }
.awardRows p { margin: 5px 0 0; color: #666; font-size: 11px; }
.awardRows strong { text-align: right; font-size: 24px; }

/* ---------- 长期扶持 ---------- */

.longTermSimple { background: var(--fpaper); color: #111; }
.longTermSimple > .cap { display: block; margin-bottom: 42px; }
.simpleIncentive { padding: 42px 0 65px; border-top: 1px solid #111; }
.simpleIncentive h2 { margin: 0 0 22px; font-size: clamp(28px, 3vw, 46px); letter-spacing: -.035em; }
.simpleIncentive h2 strong { font-weight: 650; }
.simpleIncentive > p { max-width: 980px; color: #555; font-size: 17px; }
.simpleIncentive h3 { margin: 32px 0 20px; font-size: 22px; }
.simpleIncentive h3 > small { display: inline-block; margin-left: 10px; color: #666; font: 600 12px var(--font-mono); letter-spacing: .04em; }
.simpleCreditTable { border: 1px solid #0000004d; }
.simpleCreditTable > div { display: grid; grid-template-columns: .7fr .42fr 1.8fr .8fr; align-items: center; }
.simpleCreditTable > div + div { border-top: 1px solid #00000040; }
.simpleCreditTable span,
.simpleCreditTable b,
.simpleCreditTable strong { padding: 16px; border-right: 1px solid #0003; font-size: 14px; }
.simpleCreditTable strong { color: var(--fblue); font-size: 18px; }
.simpleCreditTable small { color: #777; }
.simpleTableHead { background: #dfdcd4; }
.simpleTableHead span { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.simpleIncentive > ul { margin-top: 24px; }
.simpleIncentive > ul li { padding: 12px 0; border-top: 1px solid #00000038; color: #444; }
.simpleIncentive > ul li::before { content: "•"; margin-right: 12px; color: var(--fblue); }
.reelshortSimple { padding-bottom: 0; }
.reelshortSimple > ul { margin-top: 30px; }
.reelshortSimple > ul li { font-size: 16px; line-height: 1.55; }
/* 权益里的数字（10M+ 曝光、$10K–$50K 等）挑出来强调 */
.reelshortSimple > ul li em { font-family: inherit; font-weight: 600; color: var(--fblue); }

/* ---------- 作品要求 ---------- */

.generalEntryGuide { background: var(--fpaper); }
.requirementsTitle { display: grid; grid-template-columns: .35fr 1fr; align-items: start; gap: 5vw; padding: 55px 5vw 25px; }
.requirementsTitle h2 { margin: 0; font-size: clamp(44px, 5.3vw, 78px); line-height: .9; letter-spacing: -.055em; }
.requirementsTitle h2 em { color: var(--fblue); }
.requirementsTitle + .ruleIndex { padding-top: 10px; }
.ruleIndex { padding: 40px 5vw 100px; }
.ruleIndex article { display: grid; grid-template-columns: 50px .4fr 1fr; gap: 25px; padding: 27px 0; border-bottom: 1px solid #00000040; }
.ruleIndex span { font: 500 10px var(--font-mono); }
.ruleIndex h2 { margin: 0; font: 600 11px var(--font-mono); letter-spacing: .12em; }
.ruleIndex p { margin: 0; color: #555; }

/* ---------- 参与步骤（滚动联动） ---------- */

.scrollSteps {
  position: relative; display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(560px, 1.28fr); gap: 7vw;
  padding: 42px 5vw; background: var(--fpaper);
}
.scrollStepsIntro { position: sticky; top: 150px; z-index: 2; align-self: start; padding: 0 0 24px; }
.scrollStepsIntro h2 { margin: 32px 0 34px; font-size: clamp(52px, 5.4vw, 86px); line-height: .88; letter-spacing: -.06em; }
.scrollStepsIntro h2 em { color: var(--fblue); }
.scrollStepsIntro > p { max-width: 410px; margin: 0; color: #666; line-height: 1.65; }
.stepProgress { width: min(290px, 100%); height: 2px; margin-top: 38px; background: #10101224; overflow: hidden; }
.stepProgress > span { display: block; height: 100%; background: var(--fblue); transition: width .55s cubic-bezier(.22, 1, .36, 1); }

.scrollStepsList { position: relative; }
.scrollStepsList::before {
  content: ""; position: absolute; top: 70px; bottom: 70px; left: 27px;
  width: 1px; background: #1010122e;
}
/* 每步的高度由内容加 padding 决定，不再撑满视口 */
.scrollStepsList > li {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  align-items: start; gap: clamp(28px, 4vw, 66px); padding: 46px 0;
  opacity: .34; transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}
.scrollStepsList > li.isActive { opacity: 1; transform: translateY(0); }
.scrollStepsList > li.isPast { opacity: .5; transform: translateY(-10px); }
.stepNode {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #e1ded6; border: 1px solid #1010122e; box-shadow: 0 0 0 8px var(--fpaper);
  font: 600 13px var(--font-mono);
  transition: background .45s, color .45s, box-shadow .45s, transform .45s;
}
.isActive .stepNode {
  color: #fff; transform: scale(1.08);
  background: radial-gradient(circle at 35% 25%, #777 0, #27272a 44%, #101012 75%);
  box-shadow: 0 0 0 8px var(--fpaper), 0 12px 34px #20198238;
}
.isPast .stepNode { background: var(--fblue); color: #fff; }
.stepKicker { font: 600 10px var(--font-mono); letter-spacing: .14em; color: var(--fblue); }
.scrollStepsList h2 { margin: 14px 0; font-size: clamp(34px, 4.1vw, 62px); line-height: 1; letter-spacing: -.045em; }
.scrollStepsList p { max-width: 760px; margin: 0; color: #444; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.6; }
.scrollStepsList small {
  display: block; max-width: 760px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid #1010122e; color: #777;
  font: 600 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.scrollStepsList > li.isActive small { color: #4b43d5; border-color: #463bff59; }

/* ---------- 收尾 ---------- */

.festivalFinal {
  padding: 110px 5vw; text-align: center; color: #fff;
  background:
    radial-gradient(circle at 10% 60%, #ff233d, transparent 38%),
    radial-gradient(circle at 80% 20%, #14bfe9, transparent 38%),
    #311bcb;
}
.festivalFinal > span { font: 600 10px var(--font-mono); letter-spacing: .15em; }
.festivalFinal h2 { margin: 35px 0; }
.festivalFinal h2 em { color: #c6f5ff; }
.festivalFinal > p { color: #eee; }
.festivalFinal > div { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.festivalFinal a, .festivalFinal button {
  min-width: 185px; padding: 15px; border-radius: 999px; cursor: pointer;
  background: #fff; color: #111;
  font: 600 10px var(--font-mono); text-transform: uppercase;
}
.festivalFinal button { background: none; color: #fff; border: 1px solid #fff9; }

.festivalFooter {
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
  padding: 45px 5vw; background: #0e0e11; color: #fff;
}
.festivalFooter > b { font: 700 22px var(--font-serif); }
.festivalFooter > span { text-align: center; font: 500 10px var(--font-mono); color: #777; }
.festivalFooter > div { text-align: right; }
.festivalFooter button, .festivalFooter a { margin-left: 20px; color: #aaa; font-size: 13px; cursor: pointer; }

/* ---------- Timeline / Rules 两个子页 ---------- */

.tabPage { background: var(--fpaper); min-height: 70vh; }
.tabPage > header {
  display: grid; grid-template-columns: .35fr 1fr .55fr; align-items: start; gap: 5vw;
  padding: 105px 5vw 85px; background: #151519; color: #fff;
}
.tabPage header h1 { font-size: clamp(50px, 6.5vw, 94px); }
.tabPage header h1 em { color: #9e98ff; }
.tabPage header p { margin: 0; color: #aaa; }

.bigTimeline { padding: 40px 5vw 100px; }
.bigTimeline article { display: grid; grid-template-columns: 70px .4fr 1fr; gap: 30px; padding: 35px 0; border-bottom: 1px solid #00000040; }
.timeNo { font: 600 10px var(--font-mono); letter-spacing: .1em; }
.timeDate { font: 600 14px var(--font-mono); letter-spacing: .08em; }
.bigTimeline h2 { margin: 0; font-size: 30px; }
.bigTimeline p { max-width: 650px; color: #666; }
.timelineNote { display: grid; grid-template-columns: .3fr 1fr; margin: 0 5vw 100px; padding: 30px; background: #dedbd3; }
.timelineNote b { font: 600 10px var(--font-mono); text-transform: uppercase; }
.timelineNote p { margin: 0; }

.draftNotice {
  display: grid; grid-template-columns: .28fr 1fr; gap: 30px;
  margin: 45px 5vw 0; padding: 26px 30px; background: #dcd9d0; border: 1px solid #111;
}
.draftNotice b { font: 600 10px var(--font-mono); letter-spacing: .12em; }
.draftNotice p { margin: 0; line-height: 1.55; }
.officialRules { padding: 35px 5vw 110px; }
.officialRules details { border-bottom: 1px solid #00000047; }
.officialRules summary {
  display: grid; grid-template-columns: 55px 1fr 30px; align-items: center; gap: 20px;
  padding: 28px 0; cursor: pointer; list-style: none;
}
.officialRules summary::-webkit-details-marker { display: none; }
.officialRules summary span { font: 600 10px var(--font-mono); }
.officialRules summary h2 { margin: 0; font-size: clamp(21px, 2.3vw, 34px); letter-spacing: -.025em; }
.officialRules summary > b { text-align: right; font-size: 26px; font-weight: 400; transition: transform .2s; }
.officialRules details[open] summary > b { transform: rotate(45deg); }
.officialRuleBody { max-width: 1100px; padding: 0 7vw 34px 75px; color: #464543; }
.officialRuleBody p, .officialRuleBody li { line-height: 1.65; }
.officialRuleBody ol { padding-left: 22px; list-style: decimal; }
.officialRuleBody li { padding: 6px 0; }
.rulesEnd {
  display: grid; grid-template-columns: .3fr 1fr .55fr; gap: 5vw;
  padding: 100px 5vw; background: var(--fblue); color: #fff;
}
.rulesEnd h2 { margin: 0; font-size: clamp(48px, 6vw, 88px); line-height: .88; letter-spacing: -.055em; }
.rulesEnd h2 em { color: #baf3ff; }
.rulesEnd p { margin: 0; color: #d8d5ff; line-height: 1.6; }

/* ---------- 常驻参赛入口 ---------- */

/*
 * 用 opacity + visibility 而不是 [hidden] 切换，[hidden] 是 display: none，没有过渡可言。
 * z-index 压在抽屉（110）之下，抽屉打开时由 JS 摘掉 isVisible。
 */
.festivalFloatCta {
  position: fixed; right: 5vw; bottom: 32px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px; cursor: pointer;
  color: #111; background: #fff; border: 1px solid #fff;
  font: 600 11px var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
  box-shadow: 0 12px 34px #00000059;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  /* visibility 是离散属性，混在同一段时长里会在动画 50% 处翻转、把淡出砍掉一半，所以收起时延到最后一刻 */
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.festivalFloatCta.isVisible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.festivalFloatCta:hover { color: #fff; background: #111; border-color: #fff; }
.festivalFloatCta i { font-size: 13px; font-style: normal; }

/* ---------- 投稿抽屉 ---------- */

.entryPanelBackdrop {
  position: fixed; inset: 0; z-index: 110; display: flex; justify-content: flex-end;
  background: #000000b8; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.entryPanel {
  position: relative; width: min(560px, 100%); height: 100%; overflow: auto;
  padding: 55px 42px; background: var(--fpaper); color: #111;
}
.entryPanelClose {
  position: absolute; top: 20px; right: 22px; width: 42px; height: 42px;
  border: 1px solid #aaa; border-radius: 50%; font-size: 26px; cursor: pointer;
}
.entryPanel > h2 { margin: 30px 0 32px; font-size: clamp(48px, 5vw, 72px); line-height: .88; letter-spacing: -.055em; }
.entryPanel > h2 em { color: var(--fblue); }

/* Discord 入口固定在表单上方 */
.discordCta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-radius: 999px; background: #fff; color: #111;
  font: 600 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.discordCta span { font-size: 19px; }
.entryDiscordNote { margin: 12px 0 30px; color: #777; font-size: 12px; line-height: 1.55; }

.entryNotice { margin-bottom: 26px; padding: 14px 16px; border: 1px solid var(--fblue); background: #463bff14; color: #2f27b8; font-size: 13px; line-height: 1.5; }
.entrySection { border-top: 1px solid #111; padding-top: 22px; }
.entrySection + .entrySection { margin-top: 32px; }
.entrySectionHead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.entrySectionHead > b { font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.entrySectionHead > span { color: #777; font-size: 12px; }

.entrySignin p { margin-bottom: 16px; color: #666; font-size: 14px; }
.entryIdentity { display: flex; align-items: center; gap: 14px; }
.entryIdentity p { flex: 1; margin: 0; color: #666; font-size: 14px; }
.entryAvatar {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--fblue); color: #fff; background-size: cover; background-position: center;
  font: 600 18px var(--font-mono);
}
.entryName { flex: 1; font-size: 17px; font-weight: 600; }
.entryTextButton { color: #777; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.entryTextButton:hover { color: var(--fblue); }

.entryList li { padding: 16px 0; border-bottom: 1px solid #00000026; }
.entryList b { display: block; font-size: 16px; }
.entryList time { display: block; margin-top: 4px; color: #888; font: 600 10px var(--font-mono); letter-spacing: .06em; }
.entryList a { display: block; margin-top: 6px; color: var(--fblue); font-size: 12px; word-break: break-all; }

.entryForm { display: grid; gap: 16px; }
.entryForm label { font: 600 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.entryForm input {
  display: block; width: 100%; margin-top: 7px; padding: 13px 0;
  border-bottom: 1px solid #777; outline: 0; font: 400 15px var(--font-sans);
}
.entryForm input:focus { border-bottom-color: var(--fblue); }
.entryPrimary {
  width: 100%; padding: 17px 20px; border-radius: 999px; cursor: pointer;
  background: #111; color: #fff;
  font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.entryForm .entryPrimary { margin-top: 18px; background: var(--fblue); }
.entryPrimary:disabled { opacity: .4; cursor: not-allowed; }
.entryError { min-height: 18px; margin-top: 12px; color: #c8102e; font-size: 12px; line-height: 1.5; }
.entryError.ok { color: #1c7a4a; }

/* ---------- 响应式 ---------- */

@media (max-width: 800px) {
  .festivalHeadline h1 { font-size: 56px; line-height: .86; }
  .festivalNav { height: 58px; padding: 0 20px; gap: 12px; }
  .festivalLogo { gap: 6px; flex: none; }
  .festivalLogo i { font-size: 17px; }
  .logoOnsolo { height: 18px; }
  .logoReelMark { height: 26px; }
  .logoReelWord { height: 14px; }
  .festivalNavActions { gap: 6px; }
  .festivalCompetitionButton, .festivalDiscordButton { gap: 7px; padding: 9px 10px; font-size: 8px; }
  .festivalDiscordButton { max-width: 96px; line-height: 1.15; }
  /* 窄屏上收成贴底的一条，落在安全区里，不挡右下角内容 */
  .festivalFloatCta {
    right: 20px; left: 20px; bottom: calc(14px + env(safe-area-inset-bottom));
    justify-content: center; padding: 14px 18px; font-size: 10px;
  }
  .festivalTabs { justify-content: flex-start; gap: 0; height: 62px; padding-left: 8px; overflow-x: auto; }
  .festivalTabs button { padding: 0 12px 18px; font-size: 15px; white-space: nowrap; }

  .festivalHero { height: 750px; }
  /* 窄屏一行放不下活动名和日期，改成竖排：日期是首屏关键信息，不能像 demo 那样直接藏掉 */
  .festivalMeta { top: 22px; left: 22px; right: 22px; flex-direction: column; gap: 6px; font-size: 10px; }
  .festivalMeta span:last-child { font-size: 13px; }
  .festivalHeadline { top: 16%; left: 22px; }
  .festivalFacts { grid-template-columns: 1fr; bottom: 25px; left: 22px; right: 22px; }
  .festivalFacts > div { padding: 12px 0; border-right: 0; border-bottom: 1px solid #444; }
  .festivalFacts strong { font-size: 38px; }
  .festivalFacts > a { padding: 15px; }
  .festivalFacts .creditsFact { align-items: center; }
  .festivalFacts .creditsFact > span { gap: 3px; }
  .festivalFacts .creditsFact em { font-size: 14px; }

  .festivalSection { padding: 75px 22px; }
  .festivalIntro > div, .festivalPrizes { grid-template-columns: 1fr; gap: 45px; }
  .festivalIntro h2 { font-size: 55px; }
  .creativeUnified { min-height: 0; padding: 28px 22px; }
  .creativeThemeLead h2 { margin-top: 55px; font-size: 54px; }
  .creativeThemeBody { margin-top: 50px; }
  .themeDirections li { grid-template-columns: 1fr; gap: 6px; }
  .coCreation h3 { font-size: 40px; }
  .coCreationScripts, .coCreationDetails { grid-template-columns: 1fr; }
  .coCreationDetails h4, .coCreationDetails p { grid-row: auto; }
  .awardRows article { grid-template-columns: 28px 1fr; }
  .awardRows strong { grid-column: 2; text-align: left; }

  .longTermSimple > .cap { margin-bottom: 30px; }
  .simpleIncentive { padding: 32px 0 50px; }
  .simpleCreditTable { border: 0; }
  .simpleCreditTable .simpleTableHead { display: none; }
  .simpleCreditTable > div { grid-template-columns: 1fr 1fr; margin-bottom: 12px; border: 1px solid #0000004d; }
  .simpleCreditTable > div + div { border-top: 1px solid #0000004d; }
  .simpleCreditTable span, .simpleCreditTable b, .simpleCreditTable strong { padding: 12px; border-right: 0; }
  .simpleCreditTable span:nth-child(3), .simpleCreditTable strong { grid-column: 1 / -1; border-top: 1px solid #0003; }

  .requirementsTitle { grid-template-columns: 1fr; gap: 20px; padding: 45px 22px 20px; }
  .requirementsTitle h2 { font-size: 46px; }
  .ruleIndex { padding: 30px 22px 75px; }
  .ruleIndex article { grid-template-columns: 32px 1fr; }
  .ruleIndex p { grid-column: 2; }

  .tabPage > header { grid-template-columns: 1fr; gap: 30px; padding: 75px 22px; }
  .bigTimeline { padding: 30px 22px 75px; }
  .bigTimeline article { grid-template-columns: 35px 1fr; }
  .bigTimeline article > div:last-child { grid-column: 2; }
  .timelineNote { grid-template-columns: 1fr; gap: 15px; margin: 0 22px 75px; }
  .draftNotice { grid-template-columns: 1fr; gap: 12px; margin: 28px 22px 0; padding: 22px; }
  .officialRules { padding: 25px 22px 75px; }
  .officialRules summary { grid-template-columns: 32px 1fr 22px; gap: 10px; padding: 22px 0; }
  .officialRuleBody { padding: 0 0 28px 42px; }
  .rulesEnd { grid-template-columns: 1fr; gap: 28px; padding: 75px 22px; }

  .festivalFinal { padding: 80px 22px; }
  .festivalFinal > div { flex-direction: column; align-items: center; }
  .festivalFooter { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .festivalFooter > span, .festivalFooter > div { text-align: center; }

  .entryPanel { padding: 50px 22px; }
  .discordCta { padding: 16px 18px; font-size: 10px; }
}

@media (max-width: 900px) {
  .scrollSteps { grid-template-columns: 1fr; gap: 10px; padding: 48px 22px; }
  .scrollStepsIntro { position: relative; top: auto; padding: 0 0 28px; }
  .scrollStepsIntro h2 { font-size: 52px; }
  .scrollStepsIntro > p { max-width: 620px; }
  .stepProgress { width: 100%; }
  .scrollStepsList::before { top: 58px; bottom: 58px; left: 23px; }
  .scrollStepsList > li { grid-template-columns: 48px minmax(0, 1fr); gap: 22px; padding: 38px 0; }
  .stepNode { width: 48px; height: 48px; box-shadow: 0 0 0 6px var(--fpaper); }
  .isActive .stepNode { box-shadow: 0 0 0 6px var(--fpaper), 0 10px 26px #20198233; }
  .scrollStepsList h2 { font-size: clamp(32px, 8vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .scrollStepsList > li, .stepNode, .stepProgress > span { transition: none; }
  .scrollStepsList > li { transform: none; }
}
