/* The supplied gameplay guide, within the existing Music Jump page system. */
.music-guide[data-guide-language="en"] .guide-zh,
.music-guide[data-guide-language="zh"] .guide-en { display: none !important; }
.music-guide { --guide-purple: #8054a0; }
.music-guide section[id] { scroll-margin-top: 12px; }
.music-guide .mj-guide-hero { padding: 64px 0 58px; overflow: hidden; }
.music-guide .mj-guide-hero .game-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 55px; }
.music-guide .mj-guide-hero h1 { font-size: clamp(44px, 4.1vw, 62px); }
.music-guide .mj-guide-hero .mj-guide-overview { max-width: 660px; font-size: 16px; line-height: 1.85; }
.mj-guide-language { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #a88bbb70; border-radius: 6px; margin-bottom: 24px; }
.mj-guide-language button { border: 0; border-radius: 3px; padding: 7px 13px; font: inherit; font-size: 12px; color: #e4d9ed; background: transparent; }
.mj-guide-language button[aria-pressed="true"] { background: #e7d9f2; color: #34204f; }
.music-guide .mj-guide-hero .button.secondary { background: transparent; color: #fffefa; border-color: #a88bbb; }
.mj-guide-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; border-top: 1px solid #a88bbb45; padding-top: 26px; margin-top: 34px; }
.mj-guide-facts strong { display: block; font-size: 13px; color: var(--sun); margin-bottom: 7px; }
.mj-guide-facts span { font-size: 11px; color: #bca8ce; }
.mj-guide-title-art { position: relative; width: 100%; max-width: 460px; height: 640px; margin: 0; justify-self: center; isolation: isolate; }
.mj-phone-aura { position: absolute; inset: -5% -24%; z-index: -2; background: radial-gradient(ellipse at 56% 45%, #ad57e73d 0, #7957dd22 28%, transparent 62%); pointer-events: none; }
.mj-phone-scene::after { content: ''; position: absolute; left: 17%; right: 1%; bottom: 3%; height: 40px; z-index: -1; border-radius: 50%; background: #07011199; filter: blur(18px); transform: rotate(-9deg); }
.mj-music-orbit { position: absolute; left: 50%; top: 48%; border: 1px solid #cb99ff24; border-radius: 50%; pointer-events: none; z-index: -1; }
.mj-music-orbit-one { width: 370px; height: 370px; transform: translate(-50%, -50%) rotate(-30deg) scaleX(1.03); box-shadow: 0 0 70px #a069d909; }
.mj-music-orbit-two { width: 455px; height: 455px; border-color: #cb99ff0f; transform: translate(-50%, -50%) rotate(-30deg) scaleX(.9); }
.mj-music-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.mj-phone-device { position: absolute; z-index: 2; top: 48%; left: 50%; width: 260px; padding: 8px; border: 1.5px solid #d2bde8; border-radius: 39px; background: linear-gradient(120deg, #cec0e1 0%, #695477 7%, #1e172a 13%, #594968 52%, #d2c6df 88%, #7c688f 100%); box-shadow: 5px 4px 0 #6c587e, 8px 7px 0 #241830, 20px 27px 50px #08010f80, inset 0 0 0 2px #140b20; transform: translate(-50%, -50%) perspective(1000px) rotateY(-9deg) rotate(12deg); }
.mj-phone-screen { position: relative; overflow: hidden; border: 2px solid #09060e; border-radius: 30px; background: #39064c; aspect-ratio: 720 / 1465; isolation: isolate; }
.mj-phone-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mj-phone-screen::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(112deg, #fff1 0%, #fff0 34%, #ffffff08 60%, #fff0 72%); pointer-events: none; }
.mj-phone-camera { position: absolute; z-index: 3; left: 50%; top: 10px; width: 72px; height: 19px; transform: translateX(-50%); border-radius: 30px; background: #08060e; box-shadow: inset 0 1px 1px #000, 0 1px 1px #ffffff16; }
.mj-phone-camera::after { content: ''; position: absolute; width: 7px; height: 7px; top: 6px; right: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5c558b, #17172c 55%, #03030a); }
.mj-phone-home { position: absolute; bottom: 9px; left: 50%; width: 67px; height: 3px; transform: translateX(-50%); border-radius: 3px; background: #eee3f4aa; }
.mj-phone-side { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#c9b7d8, #665475, #baa4ca); }
.mj-phone-volume { left: -4px; top: 96px; height: 43px; box-shadow: 0 54px 0 #8f799f; }
.mj-phone-power { right: -5px; top: 134px; height: 64px; }
.mj-float-note { position: absolute; display: block; z-index: 3; font-family: Georgia, serif; font-weight: 400; line-height: 1; animation: mj-music-float 6s ease-in-out infinite; pointer-events: none; }
.mj-note-lime { left: 2%; top: 22%; color: #d1ff82; font-size: 76px; text-shadow: 0 0 25px #c6ff6445, 3px 4px 0 #789e4055; transform: rotate(-18deg); --note-rotation: -18deg; }
.mj-note-pink { right: -1%; top: 10%; color: #e8b3ff; font-size: 65px; text-shadow: 0 0 35px #dc8cff40, 3px 4px 0 #975bbd55; --note-rotation: 15deg; animation-delay: -2s; }
.mj-note-violet { right: 2%; bottom: 25%; color: #a494ff; font-size: 47px; opacity: .8; --note-rotation: 20deg; animation-delay: -4s; }
.mj-music-spark { position: absolute; z-index: 3; color: #d9c6f1; line-height: 1; pointer-events: none; }
.mj-spark-one { left: 15%; top: 10%; font-size: 23px; color: #d1ff82; }
.mj-spark-two { right: 3%; top: 36%; font-size: 34px; color: #cfb3f0; }
.mj-spark-three { left: 5%; bottom: 22%; font-size: 12px; color: #be92e2; }
.mj-floating-diamond { position: absolute; z-index: 3; left: 0; top: 48%; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 8px 18px #9ba5ff38); transform: rotate(-15deg); animation: mj-gem-float 7s ease-in-out infinite; }
.mj-rhythm-steps { position: absolute; z-index: 1; left: -1%; bottom: 12%; width: 138px; height: 95px; transform: rotate(-20deg); }
.mj-rhythm-steps i { position: absolute; display: block; width: 86px; height: 42px; border: 1px solid #cf9cff; background: linear-gradient(130deg, #a267da20, #dbafff0a); border-radius: 5px; transform: skewX(-24deg) rotate(-9deg); box-shadow: inset 0 0 14px #c08ae91c, 0 0 22px #a574e11a; }
.mj-rhythm-steps i:nth-child(1) { left: 2px; top: 42px; opacity: .4; }
.mj-rhythm-steps i:nth-child(2) { left: 18px; top: 21px; opacity: .7; }
.mj-rhythm-steps i:nth-child(3) { left: 34px; top: 0; border-color: #d0ff86; background: linear-gradient(130deg, #bdff6330, #bdff6308); box-shadow: 0 0 20px #c6ff6422, inset 0 0 18px #c6ff641a; }
.mj-floating-ball { position: absolute; z-index: 4; right: -1%; bottom: 10%; width: 83px; height: 99px; animation: mj-game-float 5.5s ease-in-out infinite; }
.mj-floating-ball > img { position: relative; display: block; margin: 0 auto; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 0 15px #d4c6ff80); }
.mj-floating-ball > span { position: absolute; width: 77px; height: 35px; bottom: 10px; left: 3px; border-radius: 5px; border: 1.5px solid #d0ff86; background: #b5ff6212; box-shadow: 0 0 22px #c6ff6436, inset 0 0 15px #c6ff641c; transform: perspective(90px) rotateX(53deg) rotate(-12deg); }
@keyframes mj-music-float { 0%, 100% { transform: translateY(0) rotate(var(--note-rotation)); } 50% { transform: translateY(-12px) rotate(calc(var(--note-rotation) + 5deg)); } }
@keyframes mj-gem-float { 0%, 100% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-11px) rotate(-8deg); } }
@keyframes mj-game-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.mj-guide-index { background: #ede6f4; border-bottom: 1px solid var(--line); }
.mj-guide-index nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 23px; padding-block: 25px; }
.mj-guide-index-label { font-size: 11px; font-weight: 800; color: #887194; text-transform: uppercase; letter-spacing: .1em; margin-right: 8px; }
.mj-guide-index a { color: #503365; font-size: 12px; text-decoration: none; padding: 5px 0; border-bottom: 1px solid #baa5c9; }
.mj-guide-index a:hover { color: #9a48af; border-color: currentColor; }
.mj-guide-section { padding: 78px 0; border-bottom: 1px solid var(--line); }
.mj-guide-section.mj-soft { background: #efedf8; }
.mj-guide-section.mj-cream { background: #f7f4ed; }
.mj-guide-heading { max-width: 820px; margin-bottom: 34px; }
.mj-guide-heading .eyebrow { font-size: 11px; color: #846297; margin-bottom: 15px; }
.mj-guide-heading h2 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.13; letter-spacing: -.025em; margin: 0; }
.mj-guide-section h3 { font-size: 26px; line-height: 1.2; margin: 28px 0 17px; }
.mj-guide-section p { color: #706779; line-height: 1.85; font-size: 15px; }
.mj-guide-section .mj-guide-lede { font-size: 17px; line-height: 1.9; margin-top: 0; }
.mj-guide-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 66px; align-items: center; }
.mj-guide-split > *, .mj-energy-columns > *, .mj-currency-grid > * { min-width: 0; }
.mj-guide-split.mj-align-start { align-items: start; }
.mj-guide-list { padding-left: 20px; margin: 18px 0 24px; color: #62546f; font-size: 15px; line-height: 1.8; }
.mj-guide-list li { margin: 9px 0; padding-left: 5px; }
.mj-guide-list li::marker { color: #9d74b7; }
.mj-control-steps { counter-reset: instruction; list-style: none; padding: 0; margin-top: 30px; }
.mj-control-steps li { counter-increment: instruction; position: relative; margin: 0; padding: 15px 0 15px 44px; border-top: 1px solid var(--line); }
.mj-control-steps li::before { content: "0" counter(instruction); position: absolute; left: 0; top: 17px; font-size: 11px; font-weight: 800; color: #9466b1; }
.mj-guide-section .mj-guide-note { border-left: 2px solid #b69ac8; padding-left: 17px; font-size: 13px; margin: 28px 0 0; }
.mj-guide-shot { margin: 0; min-width: 0; }
.mj-guide-shot > a { display: block; position: relative; overflow: hidden; border-radius: 10px; border: 1px solid #c8b7d6; background: #281440; }
.mj-guide-shot img { display: block; width: 100%; height: auto; }
.mj-guide-shot figcaption { color: #887194; font-size: 11px; line-height: 1.6; margin-top: 12px; }
.mj-enlarge { position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; width: 29px; height: 29px; color: white; font-size: 19px; border: 1px solid #fff6; border-radius: 50%; background: #160d2a99; transition: background .2s; }
.mj-guide-shot > a:hover .mj-enlarge { background: #8453ae; }
.mj-gameplay-example { max-width: 260px; width: 100%; justify-self: center; }
.mj-phone-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 430px; justify-self: center; align-items: start; }
.mj-phone-pair .mj-guide-shot:nth-child(2) { margin-top: 38px; }
.mj-two-column-list { columns: 2; column-gap: 26px; }
.mj-two-column-list li { break-inside: avoid; }
.mj-judgement-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 34px 0 25px; }
.mj-judgement-labels > div { padding: 22px 0; border-block: 1px solid #c7b9d6; }
.mj-judgement-labels strong { display: block; font: italic 35px Georgia, serif; color: #8054a0; margin-bottom: 8px; }
.mj-judgement-labels > div:last-child strong { color: #8e7b96; }
.mj-judgement-labels span { color: #887194; font-size: 12px; }
.mj-score-panel { border: 1px solid #c8b7d6; border-radius: 10px; background: #fffefa80; padding: 29px 32px; margin-top: 26px; }
.mj-score-panel .eyebrow { font-size: 10px; margin: 0; color: #846297; }
.mj-guide-section .mj-score-panel h3 { font-size: 32px; margin-top: 17px; }
.mj-score-panel p:last-child { margin-bottom: 0; }
.mj-revive-side { max-width: 440px; }
.mj-checkpoint-line { display: flex; align-items: center; gap: 14px; color: #8054a0; margin: 12px 5px; }
.mj-checkpoint-line span { font-size: 28px; }
.mj-checkpoint-line i { flex: 1; height: 1px; background: #c4acd6; }
.mj-checkpoint-line b { display: grid; place-items: center; border: 1px solid #b69ac8; border-radius: 50%; width: 76px; height: 76px; font-size: 43px; font-weight: 400; }
.mj-guide-section .mj-checkpoint-caption { text-align: center; font-size: 12px; margin: 18px 0 36px; }
.mj-wide-shot { margin-top: 28px; }
.mj-pvp-section { background: #2d1b45; color: #fffefa; }
.mj-pvp-section .mj-guide-heading .eyebrow { color: #c3a8d8; }
.mj-pvp-section p, .mj-pvp-section .mj-guide-list { color: #d9cee3; }
.mj-pvp-section .mj-guide-shot figcaption { color: #c3a8d8; }
.mj-pvp-section .mj-guide-list li::marker { color: var(--sun); }
.mj-pvp-captures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; width: 100%; max-width: 800px; margin: 38px auto 42px; }
.mj-pvp-captures .mj-guide-shot > a { border-color: #8c6ba8; }
.mj-pvp-rank-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; padding-top: 5px; }
.mj-pvp-rank-copy h3 { margin-top: 0; }
.mj-pvp-rank-copy .mj-guide-list { margin-top: 0; }
.mj-season-note { border-top: 1px solid #8f729c60; padding-top: 20px; margin-top: 25px; }
.mj-guide-resource-bar { max-width: 850px; margin: 0 auto 35px; }
.mj-energy-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }
.mj-energy-columns p { margin: 0; }
.mj-currency-grid { display: grid; margin-top: 32px; }
.mj-currency-grid article { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 45px; align-items: start; padding: 30px 0; border-top: 1px solid var(--line); }
.mj-currency-grid article:last-child { border-bottom: 1px solid var(--line); }
.mj-currency-heading { display: flex; align-items: center; gap: 20px; }
.mj-currency-heading > :first-child { flex: 0 0 65px; }
.mj-guide-section .mj-currency-heading h3 { margin: 0; }
.mj-currency-copy { min-width: 0; }
.mj-currency-copy p { margin: 0; }
.mj-currency-copy .mj-guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 35px; margin: 18px 0 0; }
.mj-currency-copy .mj-guide-list li { margin: 0; }
.mj-resource-diamond { width: 70px; height: 70px; object-fit: contain; }
.mj-resource-symbol.mj-coin { display: grid; place-items: center; width: 65px; height: 65px; color: #af7316; background: #f9d267; border: 5px solid #e4b33f; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff1b3; font-size: 34px; }
.mj-resource-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 25px 0 30px; }
.mj-resource-tags li { border: 1px solid #c8b7d6; border-radius: 4px; padding: 6px 12px; margin: 0; font-size: 12px; }
.mj-cosmetic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; }
.music-guide .mj-ball-lab { border-top: 1px solid var(--line); padding-top: 45px; margin-top: 45px; }
.music-guide .mj-ball-lab h3 { font-size: 34px; }
.mj-spin-shot { width: min(100%, 380px); justify-self: center; }
.mj-vip-phone { width: min(100%, 240px); justify-self: center; }
.mj-goal-section { background: #42266f; color: #fffefa; }
.mj-goal-section .mj-guide-heading { max-width: 850px; }
.mj-goal-section .mj-guide-heading .eyebrow { color: #cfb8e3; }
.mj-goal-section p { max-width: 850px; color: #e2d7eb; }
.mj-guide-goal-links { display: flex; flex-wrap: wrap; gap: 20px 35px; margin-top: 32px; }
.mj-guide-goal-links a { color: var(--sun); font-size: 13px; text-decoration: none; border-bottom: 1px solid #c6ff6460; padding-bottom: 7px; }
.music-guide[data-guide-language="zh"] h1,
.music-guide[data-guide-language="zh"] h2,
.music-guide[data-guide-language="zh"] h3 { line-height: 1.35; }
.music-guide[data-guide-language="zh"] .mj-guide-hero h1 { font-size: clamp(36px, 3.8vw, 54px); }

@media (max-width: 1000px) {
  .music-guide .mj-guide-hero .game-hero-grid { gap: 45px; }
  .mj-guide-title-art { height: 560px; }
  .mj-phone-device { width: 220px; border-radius: 34px; padding: 7px; }
  .mj-phone-screen { border-radius: 26px; }
  .mj-note-lime { font-size: 58px; }
  .mj-note-pink { font-size: 54px; }
  .mj-floating-diamond { width: 51px; height: 51px; }
  .mj-rhythm-steps { transform: rotate(-20deg) scale(.8); transform-origin: left bottom; }
  .mj-guide-split { gap: 35px; }
  .mj-guide-index nav { gap: 10px 18px; }
  .mj-phone-pair { gap: 12px; }
  .mj-cosmetic-grid { gap: 15px; }
  .mj-pvp-captures { max-width: 720px; gap: 25px; }
  .mj-pvp-rank-copy { gap: 35px; }
  .mj-currency-grid article { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }
  .mj-currency-heading { gap: 14px; }
}
@media (max-width: 760px) {
  .music-guide .mj-guide-hero { padding: 42px 0; }
  .music-guide .mj-guide-hero .game-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .music-guide .mj-guide-hero h1 { font-size: 44px; }
  .music-guide .mj-guide-hero .mj-guide-overview { font-size: 15px; }
  .mj-guide-facts { gap: 15px; }
  .mj-guide-title-art { max-width: 350px; height: 530px; }
  .mj-phone-device { width: 215px; }
  .mj-note-lime { left: 0; top: 20%; }
  .mj-note-pink { top: 7%; right: 0; }
  .mj-spark-one { top: 6%; }
  .mj-floating-ball { right: 0; bottom: 7%; transform: scale(.9); }
  .mj-music-orbit-one { width: 300px; height: 300px; }
  .mj-music-orbit-two { width: 365px; height: 365px; }
  .mj-guide-index nav { padding-block: 21px; gap: 9px 18px; }
  .mj-guide-index-label { flex-basis: 100%; margin-bottom: 5px; }
  .mj-guide-section { padding: 48px 0; }
  .mj-guide-heading { margin-bottom: 27px; }
  .mj-guide-heading h2 { font-size: 34px; }
  .mj-guide-section .mj-guide-lede { font-size: 16px; }
  .mj-guide-section p, .mj-guide-list { font-size: 14px; }
  .mj-guide-split, .mj-energy-columns, .mj-pvp-rank-copy { grid-template-columns: 1fr; gap: 33px; }
  .mj-gameplay-example { max-width: 240px; }
  .mj-phone-pair { max-width: 430px; gap: 17px; }
  .mj-judgement-labels { gap: 20px; margin-top: 26px; }
  .mj-judgement-labels strong { font-size: 31px; }
  .mj-judgement-labels span { font-size: 11px; }
  .mj-score-panel { margin-top: 0; padding: 24px; }
  .mj-guide-section .mj-score-panel h3 { font-size: 29px; }
  .mj-revive-side { justify-self: center; }
  .mj-pvp-captures { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(66vw, 240px); overflow-x: auto; gap: 18px; padding-bottom: 16px; margin: 30px auto; scroll-snap-type: x proximity; scrollbar-color: #a78cba #42266f; scrollbar-width: thin; }
  .mj-pvp-captures .mj-guide-shot { scroll-snap-align: start; }
  .mj-pvp-captures figcaption { font-size: 10px; }
  .mj-pvp-captures .mj-guide-shot > a { border-radius: 6px; }
  .mj-pvp-captures .mj-enlarge { width: 23px; height: 23px; font-size: 16px; right: 5px; bottom: 5px; }
  .mj-pvp-rank-copy { gap: 5px; }
  .mj-currency-grid { margin-top: 25px; }
  .mj-currency-grid article { grid-template-columns: 1fr; gap: 20px; padding: 25px 0; }
  .mj-currency-heading { gap: 16px; }
  .mj-currency-heading > :first-child { flex-basis: 50px; width: 50px; height: 50px; }
  .mj-currency-heading .mj-coin { font-size: 26px; border-width: 4px; }
  .mj-currency-copy .mj-guide-list { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .mj-cosmetic-grid { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
  .music-guide .mj-ball-lab { grid-template-columns: 1fr; gap: 30px; }
  .music-guide .mj-ball-lab .ball-options { grid-template-columns: 1fr 1fr; }
  .music-guide .mj-ball-lab h3 { font-size: 30px; }
}
@media (max-width: 370px) {
  .mj-guide-title-art { height: 475px; }
  .mj-phone-device { width: 185px; border-radius: 30px; padding: 6px; }
  .mj-phone-screen { border-radius: 23px; }
  .mj-phone-camera { width: 61px; height: 16px; top: 8px; }
  .mj-phone-camera::after { width: 6px; height: 6px; top: 5px; }
  .mj-note-lime { font-size: 48px; }
  .mj-note-pink { font-size: 46px; }
  .mj-floating-ball { width: 65px; right: 0; }
  .mj-floating-ball > img { width: 46px; height: 46px; }
  .mj-floating-ball > span { width: 60px; }
  .mj-floating-diamond { width: 43px; height: 43px; }
  .music-guide .mj-guide-hero h1 { font-size: 39px; }
  .music-guide[data-guide-language="zh"] .mj-guide-hero h1 { font-size: 33px; }
  .mj-guide-heading h2 { font-size: 30px; }
  .mj-guide-facts { gap: 10px; }
  .mj-guide-facts strong { font-size: 11px; }
  .mj-guide-facts span { font-size: 10px; }
  .mj-phone-pair { gap: 12px; }
  .mj-two-column-list { columns: 1; }
  .music-guide .mj-ball-lab .ball-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mj-float-note, .mj-floating-diamond, .mj-floating-ball { animation: none; }
}