/* 青年攀登 · 墨绿 / 暖白 / 铜金。覆写打包样式，保留交互组件。 */ :root { --ink: #173f3a; --muted: #5e7770; --gold: #a67c43; --teal: #006f61; --bg-deep: #edf0e8; --shadow: 0 16px 40px #193c3220; } body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background: #163c35 !important; } #app .game-stage { border: 1px solid #fff5; border-radius: 16px; background: #edf0e8 !important; box-shadow: 0 24px 70px #001b1a55; } #app .game-stage::before { opacity: .23; background: url('./custom-assets/workshop-tech-v3-web.jpg') center / cover; mask-image: linear-gradient(135deg, transparent 35%, #000); } #app .page { color: var(--ink); } #app .page-heading { border-bottom: 1px solid #aebfb7; padding-bottom: 16px; margin-bottom: 20px; } #app .page-heading > b:not(.counter), #app .page-heading > .hero, #app .quality-eye-icon { display: none !important; } #app .page-kicker { color: #8f6936 !important; font-size: 12px !important; font-weight: 800; letter-spacing: .16em; } #app .page-title { color: #163e36 !important; font-size: clamp(26px, 2.7vw, 42px); font-weight: 900; letter-spacing: -.035em; line-height: 1.2; } #app .page-subtitle { color: #586e67 !important; font-size: clamp(13px, 1.15vw, 16px); } #app .content-card, #app .glass-card, #app .dialog-box { border: 1px solid #cfdbd3 !important; border-radius: 12px; background: #fafbf7 !important; box-shadow: 0 10px 26px #21463a0c !important; color: #234d43; } #app .content-card :is(h2,h3,h4), #app .content-card header, #app .dialog-meta strong { color: #16493e !important; } #app .content-card :is(p,li,small), #app .dialog-box p, #app .rules :is(strong,p) { color: #536e64 !important; } #app .content-card :is(strong,header strong), #app .counter, #app .count strong { color: #99642d !important; } #app .tag { color: #326253 !important; border: 1px solid #b7c9bd !important; border-radius: 5px; background: #e9eee4 !important; font-size: 12px; letter-spacing: .06em; } #app .primary-btn, #app .home-page .primary-btn { min-height: 46px; border: 1px solid #007563 !important; border-radius: 7px !important; color: #fff9e9 !important; background: #006b59 !important; box-shadow: 0 5px 0 #004b40, 0 9px 20px #004b4026 !important; font-weight: 800; letter-spacing: .05em; transition: background .18s, transform .18s; } #app .primary-btn:hover:not(:disabled) { background: #00846e !important; transform: translateY(-2px); } #app .primary-btn:disabled { opacity: .45; box-shadow: none !important; cursor: default; } #app .secondary-btn { color: #245646 !important; background: #e5ede3 !important; border: 1px solid #a6bfae !important; border-radius: 6px; box-shadow: none !important; } #app .choice-btn, #app .defect-option { color: #1d463d !important; background: #f1f4ec !important; border: 1px solid #cad8cd !important; border-radius: 8px; box-shadow: none; text-shadow: none; } #app .choice-btn :is(span,b), #app .defect-option span { color: inherit !important; } #app .choice-btn b, #app .defect-option b { color: #517363 !important; background: #e1e9dc !important; border-radius: 5px; } #app .choice-btn:hover:not(:disabled), #app .defect-option:hover:not(:disabled) { background: #e4eee0 !important; border-color: #568b70 !important; } #app .choice-btn.correct, #app .choice-btn.selected, #app .defect-option.correct { color: #134c36 !important; background: #d7ecd9 !important; border-color: #4a9865 !important; } #app .choice-btn.wrong, #app .defect-option.wrong { color: #883e31 !important; background: #f5dfd7 !important; border-color: #c58770 !important; } #app .feedback { color: #586950 !important; background: #f0eee1 !important; border: 1px solid #dcd5bc !important; border-radius: 7px; font-size: 14px !important; line-height: 1.65 !important; } #app .feedback.success { color: #235f43 !important; background: #e0edda !important; border-color: #a4c295 !important; } #app .feedback.warning { color: #865331 !important; background: #f5e8d8 !important; } #app .progress-label { color: #577264 !important; } #app .progress-label strong { color: #1c6f58 !important; } #app .progress-track { height: 6px !important; background: #dce4d7 !important; } #app .progress-fill { background: linear-gradient(90deg, #006e5b, #97b781) !important; } #app .action-row { background: none !important; } /* 顶栏与操作区。 */ #app .header-bar { background: #123e35 !important; border: 1px solid #2d5949 !important; border-radius: 9px !important; box-shadow: 0 4px 14px #163d351a; } #app .header-brand strong { color: #fff2d3 !important; } #app .header-brand small { color: #b3c8b8 !important; } #app .header-badge { border-radius: 7px; color: #e1c386; background: #ffffff09; border-color: #b89959; animation: none !important; } #app .stat-item { background: #ffffff09 !important; border-radius: 4px; } #app .stat-item strong { color: #f5e3ac !important; } #app .stat-icon::before { color: #bad0c2; font-size: 10px; } #app .profile-entry { color: #e7d8ae !important; border: 1px solid #b4a175 !important; background: #ffffff08 !important; border-radius: 5px; } #app .jby-restart-button { border-radius: 5px !important; color: #dce9da !important; border-color: #809e86 !important; background: #234e40 !important; box-shadow: none !important; } .ui-symbol { width: 26px; height: 26px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* 首页：大幅车间影像 + 纪实感排版。 */ #app .home-page { position: relative; isolation: isolate; color: #f8f0da; background: #0d352e; } #app .home-page::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#0d352efc 0%,#0d352eed 36%,#0d352e32 85%), url('./custom-assets/workshop-tech-v3-web.jpg') center / cover; } #app .home-page::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 28px; height: 1px; background: #c2aa6e55; } #app .home-page .home-content { position: relative; z-index: 1; } #app .home-page .home-kicker { color: #d4bb7f !important; font-size: 14px !important; letter-spacing: .18em !important; font-weight: 500 !important; } #app .home-page h1, #app .home-page .home-left h1 { color: #fbf7e7 !important; -webkit-text-fill-color: #fbf7e7 !important; font-size: clamp(52px, 5.8vw, 90px) !important; line-height: 1.12 !important; letter-spacing: -.045em !important; margin: 16px 0 20px !important; font-family: 'Microsoft YaHei', sans-serif !important; font-weight: 900 !important; } #app .home-page h1 span, #app .home-page .home-left h1 span { color: #d9b776 !important; -webkit-text-fill-color: #d9b776 !important; font-weight: 900 !important; margin-top: 8px !important; } #app .home-page .home-intro { max-width: 430px !important; color: #d4dfd1 !important; font-size: 15px !important; line-height: 1.9 !important; margin-bottom: 22px !important; } #app .home-page .home-tags { gap: 0 !important; margin-bottom: 30px !important; display: flex !important; } #app .home-page .home-tags span { color: #d8c38f !important; background: none !important; border: 0 !important; border-right: 1px solid #b9c7ae55 !important; border-radius: 0 !important; padding: 0 13px !important; min-height: 0 !important; } #app .home-page .home-tags span:first-child { padding-left: 0 !important; } #app .home-page .home-tags span:last-child { border-right: 0 !important; } #app .home-page .home-tags span::before { font-size: 12px; } #app .home-page .primary-btn { min-width: 230px; background: #d8bc7f !important; color: #143d30 !important; border-color: #e4ce99 !important; box-shadow: 0 5px 0 #8b6f3f,0 12px 28px #001b1555 !important; } #app .home-page .home-tip { color: #a8beb0 !important; font-size: 11px !important; } #app .home-page .home-right { position: relative; align-self: center; } #app .home-page .mountain-card { min-height: 360px !important; height: min(60vh,520px) !important; aspect-ratio: 1.12 !important; background: linear-gradient(0deg,#123e35dd,transparent 60%), url('./custom-assets/workshop-tech-v3-web.jpg') center / cover !important; border: 1px solid #e5e6c477 !important; border-radius: 100px 8px 8px 8px !important; box-shadow: 18px 20px 0 #e0c78d16,0 20px 60px #001e2155 !important; } #app .home-page .mountain-card::after { content: '每一次精进，都是向上的一步。'; display: block !important; position: absolute; z-index: 2; left: 28px; bottom: 30px; color: #fff2d2; font-size: 16px; letter-spacing: .08em; } #app .home-page .title-preview { width: 100% !important; margin-top: 20px !important; border: 0 !important; border-bottom: 1px solid #bba77266 !important; background: none !important; border-radius: 0; padding: 10px 0 16px; color: #bdcdb7 !important; } #app .home-page .title-preview > span { font-size: 0; } #app .home-page .title-preview > span::before { content: '青年 · 攀登计划'; font-size: 12px; letter-spacing: .15em; } #app .home-page .title-preview::after { content: '八站历练 / 一路向上'; color: #ddc189; font-size: 12px; } /* 地图重排为有编号的路线卡。 */ #app .track { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-content: center; padding: 65px 28px 35px; background: #e3eadc !important; overflow: hidden; } #app .track::before { background: url('./custom-assets/workshop-tech-v3-web.jpg') center/cover; opacity: .06; } #app .track > i, #app .track > strong { display: none; } #app .track > em { color: #365c45 !important; font-weight: 600; font-size: 12px; letter-spacing: .1em; } #app .track .node { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: 130px !important; border-radius: 8px !important; padding: 18px 12px !important; display: flex !important; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; transform: none !important; border: 1px solid #b8c9b6 !important; background: #f7f8f0 !important; color: #48705a !important; animation: none !important; opacity: 1 !important; filter: none !important; text-align: left; } #app .track .node span { width: 32px; height: 32px; } #app .track .node b { top: 16px; right: 14px; color: #92a48e !important; font-size: 12px; font-weight: 400; } #app .track .node small { position: static !important; width: auto !important; color: #52705a !important; font-size: 13px; line-height: 1.5; } #app .track .node.current { background: #164b3c !important; border-color: #164b3c !important; color: #e2c384 !important; box-shadow: 0 8px 20px #164b3c30; } #app .track .node.current small { color: #fff0ca !important; } #app .track .node.done { background: #d5e5cd !important; border-color: #a9c098 !important; color: #2a7454 !important; } #app .map-side { position: relative; overflow: hidden; background: #173e33 !important; border-color: #173e33 !important; color: #ede8d3 !important; } #app .map-side::before { content: ''; height: 115px; flex: 0 0 115px; order: -1; margin: -22px -22px 22px; background: linear-gradient(0deg,#173e3377,transparent),url('./custom-assets/workshop-tech-v3-web.jpg') center/cover; } #app .map-side h2 { color: #e8cd93 !important; } #app .map-side p { color: #c1d1be !important; } #app .map-side > i { display: none; } #app .map-side .tag { align-self: flex-start; border-color: #71977d !important; background: #ffffff0b !important; color: #d9d3aa !important; } #app .map-side .progress-label { color: #c3d0b8 !important; } #app .map-side .progress-label strong { color: #e4ca89 !important; } #app .map-side { background: #fafbf5 !important; border-color: #c8d5c4 !important; color: #345b45 !important; } #app .map-side::before { height: 180px; flex: 1 0 180px; margin-bottom: 24px; background-image: url('./custom-assets/workshop-tech-v3-web.jpg'); } #app .map-side h2 { color: #1a4937 !important; margin: 12px 0 8px; } #app .map-side p { color: #64765d !important; } #app .map-side .tag { color: #8c6c38 !important; background: #efe9d8 !important; border-color: #dbccaa !important; } #app .map-side .progress-wrap { margin: 30px 0 18px !important; } #app .map-side .progress-label { color: #5d7359 !important; } #app .map-side .progress-label strong { color: #8f6d36 !important; } #app .map-side .primary-btn { width: 100%; margin-bottom: 5px; } #app .count { border-radius: 7px; background: #e1e7d8; border-color: #b5c4ac; } #app .count span { color: #667e62; } /* 带教、剧情、参数和档案统一到新材质。 */ #app .story-page .visual { border: 1px solid #b5c7b8 !important; border-radius: 90px 8px 8px 8px; box-shadow: 15px 15px 0 #c4d0b85c; } #app .dialog-meta { color: #51715d; } #app .dialog-meta span { color: #50705a !important; } #app .dialog-avatar { display: none; } #app .dialog-box { border-left: 4px solid #ae8a4e !important; } #app .quiz-side, #app .teamcard, #app .jury, #app .repair .side { position: relative; overflow: hidden; background: #153f34 !important; color: #f0e7cd; } #app :is(.teamcard,.jury,.repair .side) > div:first-child { display: none !important; } #app :is(.teamcard,.jury,.repair .side)::before { content: ''; display: block; height: 145px; flex: 0 0 145px; margin: -22px -22px 22px; background: linear-gradient(0deg,#153f3455,transparent),url('./custom-assets/workshop-tech-v3-web.jpg') center/cover; } #app :is(.quiz-side,.teamcard,.jury,.repair .side) :is(h3,strong) { color: #e4c98f !important; } #app :is(.quiz-side,.teamcard,.jury,.repair .side) :is(p,small) { color: #c9d6c2 !important; } #app .quiz-side::after { background: linear-gradient(0deg,#153f34ee,#153f3488) !important; } #app .inspect .panel { background: radial-gradient(ellipse,#e0e9dd,#cbdacc) !important; border-color: #a7c0a9 !important; } #app .inspect .panel header { color: #315943 !important; } #app .inspect .panel header small { color: #7e6639 !important; } #app .inspect .side li { color: #405f49 !important; } #app .inspect .panel .spot::before, #app .inspect .panel .spot::after { pointer-events: none !important; } #app .inspect .panel .spot:not(.found) { background: radial-gradient(circle,#f4f9de 0 25%,#69b091 26% 58%,#287255 59% 100%) !important; border-color: #d7ebca !important; box-shadow: 0 0 0 5px #58896e22,0 0 14px #25674666 !important; } #app .role-task .rolling .visual { background: linear-gradient(0deg,#164332aa,#16433211),url('./custom-assets/workshop-tech-v3-web.jpg') center/cover; border-radius: 8px; } #app .role-task .rolling .visual > i, #app .role-task .rolling .visual > b { display: none; } #app .meter-card { background: #edf2e7 !important; border-color: #c5d5c0 !important; } #app .range { background: #cbd8c3 !important; } #app .range > i { background: #7fa272 !important; } #app .range > b { background: #0f7054 !important; border-color: #f7fff0; box-shadow: 0 0 0 3px #28684122; } #app .parameter-visual { background: #1c4d3a !important; border-color: #71977c !important; } #app .parameter-visual b { color: #e5c793 !important; } #app .parameter-visual small { color: #c2d2bc !important; } #app .parameter-meter { color: #31563f; background: #eff4e7; border-color: #c2d1b6; } #app .parameter-actions button { color: #356045; background: #dce7cf; border-color: #b0c4a0; } #app .defect-image-wrap { border-color: #c6d4c5 !important; background: #e8ede4 !important; } #app .defect-image-card > p { color: #62725d !important; } #app .scorebox { background: #e6eadb; border-color: #c4ccaf; color: #36573f; border-radius: 8px; } #app .scorebox :is(strong,b) { color: #98703b !important; } #app .stat-tile, #app .badge-card, #app .records > div { background: #e8eee0 !important; border-color: #c6d3bd !important; color: #33513b; } #app .stat-tile :is(span,small), #app .records :is(span,small) { color: #5c775e !important; } #app .stat-tile-value, #app .badge-card strong, #app .records strong { color: #35653f !important; } #app .profile .summary { background: #184737 !important; } #app .profile .summary :is(h2,b,strong) { color: #e1c78e !important; } #app .profile .summary :is(p,small,footer) { color: #cad6bc !important; } #app .profile .summary > div { border-radius: 9px; background: #ffffff08; border-color: #c8ad70; animation: none; color: #d9c18b; } #app .task-intro { background: linear-gradient(90deg,#edf0e8 40%,#edf0e8ad),url('./custom-assets/workshop-tech-v3-web.jpg') right/cover; } #app .task-intro .bg { display: none; } #app .rules span { color: #9a7137 !important; } #app .rules { background: #f8faf2 !important; border-color: #cad7c3 !important; } #app .quiz-side > div:first-child { display: none; } #app .quiz-side::before { content: ''; display: block; height: 170px; flex: 0 0 170px; margin: -22px -22px 20px; background: linear-gradient(0deg,#153f3455,transparent),url('./custom-assets/workshop-detail-v3-web.jpg') center/cover; } #app .quiz-side { aspect-ratio: auto !important; } #app .teamcard::before { background-image: linear-gradient(0deg,#153f3455,transparent),url('./custom-assets/workshop-detail-v3-web.jpg'); } #app .repair .side::before { background-image: linear-gradient(0deg,#153f3455,transparent),url('./custom-assets/workshop-detail-v3-web.jpg'); } #app .role-task .rolling .visual { background-image: linear-gradient(0deg,#164332aa,#16433211),url('./custom-assets/workshop-detail-v3-web.jpg'); background-position: 32% center; } #app .role-page .role-card { border-radius: 10px; border: 2px solid #c5d1bd; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 30px; } #app .role-page .role-card:nth-child(1)::before { background-image: url('./custom-assets/role-rolling.jpg'); } #app .role-page .role-card:nth-child(2)::before { background-image: url('./custom-assets/role-packing.jpg'); } #app .role-page .role-card::after { background: linear-gradient(0deg,#123f31ee,transparent 90%) !important; } #app .role-page .role-card.selected { border-color: #af8748; box-shadow: 0 0 0 3px #af874833; } #app .role-page .role-card h2 { color: #fff2d1; font-size: 30px; } #app .counter span { color: #67816b !important; } #app .icon-btn { color: #426b50; background: #dfe9d8; border-color: #b8cdb2; border-radius: 7px; } #app .profile .main :is(h3,h4) { color: #2b583f !important; } #app .profile .main :is(p,small) { color: #67785f !important; } #app .profile .badge-card { opacity: 1; } #app .profile .badge-card:not(.unlocked) { background: #eef0e8 !important; filter: none; } #app .profile .badge-card:not(.unlocked) .badge-icon { opacity: .55; } #app .profile .main .badge-card .tag { color: #77866a !important; } #app .tree { background: #173f33 !important; } #app .tree::before { background: #b9a37166; width: 1px; } #app .tree > em { color: #d6c28d; font-size: 12px; } #app .tree > .line { display: none; } #app .tree .leaf { left: 28px; right: 28px; width: auto; height: 58px; border-radius: 7px; transform: none; color: #dce5cd; background: #2d5843; border-color: #678261; } #app .tree .leaf.a { top: 23%; } #app .tree .leaf.b { top: 41%; } #app .tree .leaf.c { top: 59%; } #app .tree .leaf.active { background: #a9b778; color: #173f33; border-color: #cdd8a5; box-shadow: none; } #app .tree > div { color: #dfcd9b; background: #1a4736; border-color: #a28f59; border-radius: 6px; } #app .tree.qc-path { padding: 26px; background: #f9faf3 !important; display: flex; flex-direction: column; } #app .tree.qc-path::before { display: none; } #app .qc-path > header { display: flex; gap: 10px; align-items: center; color: #4c6d4d !important; font-size: 12px; letter-spacing: .06em; } #app .qc-path > header span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #b7c69c; color: #8b7845; border-radius: 7px; font-size: 12px; letter-spacing: 0; } #app .qc-origin { margin-top: 30px; padding: 22px; border-radius: 8px; color: #e7edda; background: #1e4d38; } #app .qc-origin small { color: #c8cd9e !important; font-size: 11px; letter-spacing: .08em; } #app .qc-origin h3 { color: #f4edce !important; font-size: 21px; margin-top: 8px; line-height: 1.4; } #app .qc-path ol { position: relative; display: grid; gap: 24px; list-style: none; padding: 0; margin: 28px 0; } #app .qc-path ol::before { content: ''; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 1px; background: #b3c39a; } #app .qc-path li { display: flex; gap: 14px; position: relative; } #app .qc-path li > span { z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #b9cba3; border-radius: 50%; background: #eef2e3; color: #6e814f; font-size: 11px; } #app .qc-path li b { color: #305c3f; display: block; padding-top: 4px; font-size: 15px; } #app .qc-path li p { color: #748067 !important; font-size: 12px; line-height: 1.7; margin-top: 7px; } #app .qc-path > footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #cbd4ba; color: #82906b; font-size: 11px; line-height: 1.8; } #app .game-stage:has(.culture-finale) > .jby-restart-button { display: none !important; } /* 结尾改为完整的山岳寄语海报。 */ #app .culture-finale { padding: 0 !important; background: #f1eee2 !important; display: block; overflow: auto; } #app .culture-finale-light, #app .culture-mountain { display: none !important; } #app .finale-spread { min-height: 100%; display: grid; grid-template-columns: .88fr 1.12fr; } #app .finale-art { position: relative; min-height: 100%; background: linear-gradient(0deg,#0d372ce6,transparent 70%),url('./custom-assets/ascent-mountain-v3-web.jpg') center/cover; color: #fff2cc; overflow: hidden; } #app .finale-art::before { content: ''; position: absolute; inset: 22px; border: 1px solid #ead2a049; border-radius: 100px 2px 2px 2px; } #app .finale-art-copy { position: absolute; left: 48px; right: 36px; bottom: 48px; } #app .finale-art-copy span { color: #d9c38e; letter-spacing: .22em; font-size: 12px; } #app .finale-art-copy h2 { font-size: clamp(30px,3.3vw,50px); font-weight: 400; line-height: 1.35; margin: 16px 0; letter-spacing: .05em; } #app .finale-art-copy p { font-size: 13px; color: #d9dcc5; letter-spacing: .1em; } #app .finale-copy { display: flex; flex-direction: column; padding: clamp(26px,4vw,58px); gap: 22px; } #app .culture-finale-header, #app .culture-finale-body, #app .culture-finale-footer { width: 100%; max-width: none; margin: 0; text-align: left; } #app .culture-finale-header h1 { font-size: clamp(28px,2.7vw,42px); color: #164c3c; line-height: 1.3; letter-spacing: -.03em; margin: 10px 0 12px; } #app .culture-finale-header > p:last-child { color: #66715b; font-size: 14px; line-height: 1.85; } #app .culture-finale-body { display: block; } #app .culture-letter { padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } #app .culture-letter-tag { padding: 0 0 10px; border: 0; border-bottom: 1px solid #b8b294; border-radius: 0; color: #8b6b3c; background: none; font-size: 12px; letter-spacing: .12em; } #app .culture-letter h2 { display: none; } #app .culture-letter > p { color: #435842 !important; font-size: 14px; line-height: 1.95; margin: 12px 0; } #app .culture-actions { padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } #app .culture-actions > span { color: #416644; background: none; border: 0; padding: 0; font-size: 12px; letter-spacing: .12em; } #app .culture-actions ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 14px 0 0; } #app .culture-actions li { padding: 32px 0 0; border-top: 1px solid #c5c5ac; border-radius: 0; background: none; } #app .culture-actions li::before { left: 0; top: 9px; width: auto; height: auto; font-size: 11px; border-radius: 0; background: none; color: #a38145; content: '0' counter(culture-step); } #app .culture-actions li b { color: #1c543e !important; font-size: 14px; } #app .culture-actions li small { color: #6e785d !important; font-size: 11px; line-height: 1.7; margin-top: 6px; } #app .culture-actions blockquote { display: none; } #app .culture-finale-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #c4c5aa; gap: 15px; } #app .culture-finale-footer p { color: #667656; font-size: 11px; line-height: 1.6; max-width: 160px; } #app .culture-restart-btn { padding: 13px 19px; border: 1px solid #126246; border-radius: 5px; color: #fff3d4; background: #17523b; box-shadow: none; font-size: 13px; } @media (min-width: 721px) { #app .app-shell { padding: 14px; } #app .game-stage { width: min(100%,1600px); height: calc(100dvh - 28px); max-height: 1000px; aspect-ratio: auto; } #app .header-bar { left: 22px; right: 22px; top: 18px; min-height: 54px; padding-inline: 14px; grid-template-columns: minmax(155px,1fr) minmax(330px,1fr) 240px; } #app .profile-entry { justify-self: end; } #app .jby-restart-button { top: 30px !important; right: 152px !important; min-height: 32px !important; } #app .page:not(.home-page):not(.story-page):not(.ending):not(.poster) { padding-top: 96px !important; } #app .home-page .home-content { grid-template-columns: minmax(0,1fr) minmax(0,1.06fr) !important; max-width: 1220px; gap: clamp(30px,6vw,90px) !important; } #app .culture-finale .finale-copy { padding-top: 46px; } #app .culture-letter > p { font-size: 16px; line-height: 2; margin: 16px 0; } #app .culture-finale-header > p:last-child { font-size: 15px; } #app .culture-actions { margin-top: 24px; } #app .culture-actions li small { font-size: 12px; } } @media (min-width: 721px) and (max-width: 1050px) { #app .track { gap: 10px; padding: 60px 18px 25px; grid-template-columns: repeat(2,minmax(0,1fr)); } #app .track .node { height: 90px !important; gap: 6px; padding: 10px !important; } #app .header-bar { grid-template-columns: minmax(150px,1fr) minmax(280px,1fr) 180px; gap: 6px; } #app .profile-entry span:last-child { display: none; } #app .jby-restart-button { right: 90px !important; } #app .finale-copy { gap: 15px; padding: 30px; } #app .culture-actions ol { gap: 10px; } } @media (max-width: 720px) { #app .game-stage { border-radius: 0; border: 0; } #app .game-stage::before { opacity: .08; } #app .header-bar { left: 10px !important; right: 10px !important; } #app .page { padding-top: 102px !important; padding-bottom: 25px !important; } #app .home-page, #app .story-page { padding-top: 26px !important; } #app .page-heading { gap: 8px !important; padding-bottom: 14px; margin-bottom: 16px; } #app .page-title { font-size: 27px !important; line-height: 1.2 !important; } #app .page-subtitle { font-size: 12px !important; } #app .home-page { overflow-y: auto !important; } #app .home-page::before { background: linear-gradient(0deg,#0d352e 8%,#0d352ec9 72%),url('./custom-assets/workshop-tech-v3-web.jpg') center/cover; } #app .home-page::after { display: none; } #app .home-page .home-content { gap: 22px !important; justify-content: flex-start !important; min-height: auto !important; } #app .home-page .home-kicker { font-size: 12px !important; margin-bottom: 0 !important; } #app .home-page h1, #app .home-page .home-left h1 { font-size: 47px !important; margin: 14px 0 18px !important; } #app .home-page .home-intro { font-size: 13px !important; line-height: 1.8 !important; margin-bottom: 19px !important; } #app .home-page .home-tags { width: auto !important; margin-bottom: 24px !important; justify-content: center !important; } #app .home-page .home-tags span { padding: 0 10px !important; } #app .home-page .home-tags span::before { font-size: 11px; } #app .home-page .mountain-card { min-height: 0 !important; height: 245px !important; border-radius: 70px 6px 6px 6px !important; } #app .home-page .mountain-card::after { left: 20px; bottom: 20px; font-size: 12px; } #app .home-page .title-preview { margin-top: 12px !important; } #app .home-page .title-preview::after { font-size: 10px; } #app .home-page .home-tip { font-size: 10px !important; } #app .content-card { border-radius: 10px; } #app .action-row { background: linear-gradient(0deg,#f3f5ed 70%,#f3f5ed00) !important; } #app .map-layout { gap: 14px !important; flex: none; } #app .track { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 55px 14px 18px; min-height: 0 !important; } #app .track .node { height: 100px !important; gap: 10px; padding: 13px !important; } #app .map-side { min-height: 270px !important; } #app .map-side::before { margin: -14px -14px 18px; flex: 0 0 160px; height: 160px; } #app .map-side .progress-wrap { margin-top: 18px !important; } #app .story-page .visual { min-height: 225px !important; border-radius: 65px 6px 6px 6px; } #app .teamcard::before, #app .jury::before, #app .repair .side::before { margin: -14px -14px 16px; height: 95px; flex-basis: 95px; } #app .quiz-side::before { margin: -14px -14px 12px; height: 100px; flex-basis: 100px; } #app .quiz-page .quiz-side { height: auto !important; max-height: none !important; } #app .stat-icon { overflow: visible; white-space: nowrap; flex: 0 0 auto; } #app .culture-finale { padding: 0 !important; } #app .finale-spread { display: block; } #app .finale-art { height: 390px; min-height: 0; } #app .finale-art-copy { left: 32px; bottom: 28px; } #app .finale-art-copy h2 { font-size: 35px; } #app .finale-copy { padding: 30px 24px; gap: 24px; } #app .culture-finale-header h1 { font-size: 29px; } #app .culture-finale-header > p:last-child { font-size: 13px; } #app .culture-actions ol { grid-template-columns: 1fr; gap: 14px; } #app .culture-actions li { padding: 13px 0 0 31px; } #app .culture-actions li::before { top: 16px; } #app .culture-actions li small { font-size: 12px; } #app .culture-finale-footer { align-items: stretch; flex-direction: column; } #app .culture-finale-footer p { max-width: none; } } /* ImageGen 元素图：保留 PNG 透明通道，与暖白面板自然融合。 */ #app .map-side::before { background: url('./custom-assets/mission-ascent.png') center / contain no-repeat !important; margin: 4px -8px 22px; min-height: 220px; height: 260px; flex: 1 0 220px; } #app .map-side { padding: 24px; } #app .tree.qc-path { background: linear-gradient(145deg,#f9faf3,#ecefdf) !important; } #app .qc-illustration { display: block; width: 100%; min-height: 0; max-height: 340px; object-fit: contain; flex: 1 1 auto; margin: 18px 0; } #app .qc-art-caption { text-align: center; margin: 0 0 28px; } #app .qc-art-caption small { color: #9a7a43 !important; font-size: 11px; letter-spacing: .12em; } #app .qc-art-caption h3 { color: #31573b !important; font-size: 18px; line-height: 1.6; margin-top: 10px; } #app .qc-art-caption p { color: #6f7c5e !important; font-size: 12px; margin-top: 10px; line-height: 1.8; } @media (max-width:720px) { #app .map-side::before { margin: 0 0 18px; min-height: 180px; height: 190px; flex: 0 0 190px; } #app .qc-illustration { max-height: 230px; height: 210px; flex: 0 0 auto; } } @media (max-width:720px) { #app .innovation .layout { flex: 0 0 auto !important; } #app .tree.qc-path { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; } #app .qc-illustration { width: 100%; height: 200px; max-height: none; flex: 0 0 200px; } #app .qc-art-caption { margin-bottom: 20px; } } @media (max-width:720px) { #app .page .action-row { position: static !important; bottom: auto !important; } } /* 参数稳定挑战：使用用户指定的 ZJ118 设备实拍图。 */ #app .role-task .rolling .visual { background: linear-gradient(0deg,rgba(22,67,50,.28),rgba(22,67,50,0)),url('./custom-assets/rolling-parameter-machine.jpg') center center / cover no-repeat !important; } /* 包装参数页：用户指定设备实拍。 */ #app .role-task .parameter-visual { background: linear-gradient(0deg,rgba(12,45,31,.82),transparent 65%),url('./custom-assets/packing-parameter-machine.jpg') center / cover no-repeat !important; justify-content: flex-end; padding: 25px 16px; box-sizing: border-box; } #app .parameter-visual > span { display: none !important; } #app .parameter-visual > b { color: #fff0cc !important; } #app .parameter-visual > small { color: #eef1db !important; }