:root {
    --junior-bg: #020b07;
    --junior-panel: #082018;
    --junior-panel-soft: #0d2d21;
    --junior-gold: #d7ad5e;
    --junior-gold-bright: #f2cf7d;
    --junior-cyan: #62d6d0;
    --junior-ivory: #f4ecda;
    --junior-muted: #a8bbb0;
    --junior-green: #62d396;
    --junior-red-soft: #db8075;
    --junior-border: rgba(218, 181, 101, .28);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--junior-bg); }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--junior-ivory);
    background: var(--junior-bg);
    font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
button, select, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--junior-cyan); outline-offset: 3px; }

.junior-sitebar {
    position: relative;
    z-index: 100;
    height: 68px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid rgba(215, 173, 94, .2);
    background: rgba(1, 10, 6, .96);
}
.junior-brand { display: flex; align-items: center; gap: 11px; color: var(--junior-ivory); text-decoration: none; }
.junior-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--junior-gold); transform: rotate(45deg); color: var(--junior-gold-bright); font: .7rem Georgia, serif; }
.junior-brand-mark::first-letter { transform: rotate(-45deg); }
.junior-brand > span:last-child { display: grid; }
.junior-brand strong { font: 500 .9rem "Noto Serif SC", "Songti SC", serif; letter-spacing: .18em; }
.junior-brand small { margin-top: 2px; color: #8ea096; font: .48rem Georgia, serif; letter-spacing: .16em; }
.junior-sitebar-title { color: #aebdb4; font: .72rem "Noto Serif SC", serif; letter-spacing: .2em; }
.junior-sitebar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.junior-sitebar-actions button, .junior-sitebar-actions a { min-height: 36px; padding: 8px 12px; border: 1px solid rgba(215, 173, 94, .22); color: #b8c5bd; background: transparent; text-decoration: none; cursor: pointer; }
.junior-sitebar-actions button:hover, .junior-sitebar-actions a:hover { border-color: var(--junior-gold); color: var(--junior-gold-bright); }

.junior-app { min-height: calc(100vh - 68px); }
.junior-stage { display: none; min-height: calc(100vh - 68px); }
.junior-stage.is-active { display: block; }
.junior-primary-button, .junior-secondary-button, .junior-text-button { min-height: 56px; padding: 13px 28px; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.junior-primary-button { border-color: #e0b55f; color: #07140e; background: linear-gradient(135deg, #f0d48f, #c9953f); box-shadow: 0 12px 38px rgba(211, 167, 79, .2); font-weight: 700; letter-spacing: .12em; }
.junior-secondary-button { border-color: rgba(219, 181, 102, .45); color: #e3c77f; background: rgba(9, 30, 21, .8); }
.junior-text-button { color: #aebdb4; background: transparent; }
.junior-primary-button:hover, .junior-secondary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(211, 167, 79, .28); }
.junior-back-button { min-height: 44px; padding: 8px 12px; border: 0; color: #a9b9af; background: transparent; cursor: pointer; }
.junior-back-button:hover { color: var(--junior-gold-bright); }

/* 待机神殿 */
.junior-attract-stage { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 42%, rgba(201, 160, 72, .16), transparent 28%), linear-gradient(180deg, #061b13, #020b07 68%, #000); }
.junior-attract-stage.is-active { display: grid; place-items: center; }
.junior-attract-stage::before { content: ""; position: absolute; inset: 0; z-index: -3; opacity: .42; background-image: radial-gradient(circle, rgba(245, 221, 156, .8) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(78, 208, 211, .58) 0 1px, transparent 1.6px); background-size: 79px 79px, 113px 113px; background-position: 0 0, 39px 24px; animation: junior-stars 26s linear infinite; }
.junior-attract-stage::after { content: ""; position: absolute; z-index: -2; left: -10vw; right: -10vw; bottom: -40vh; height: 75vh; border: 1px solid rgba(215, 173, 94, .28); border-radius: 50%; transform: perspective(650px) rotateX(67deg); background: repeating-radial-gradient(circle, transparent 0 48px, rgba(205, 164, 80, .13) 49px 50px), repeating-conic-gradient(from 0deg, rgba(205, 164, 80, .1) 0deg 1deg, transparent 1deg 15deg); box-shadow: 0 0 100px rgba(210, 167, 77, .14); }
.junior-temple-space { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.junior-orbit { position: absolute; left: 50%; top: 46%; border: 1px solid rgba(221, 184, 104, .2); border-radius: 50%; transform: translate(-50%, -50%) rotateX(67deg); }
.orbit-one { width: min(42vw, 540px); aspect-ratio: 1; animation: junior-orbit 18s linear infinite; }
.orbit-two { width: min(64vw, 820px); aspect-ratio: 1; border-style: dashed; animation: junior-orbit-reverse 29s linear infinite; }
.orbit-three { width: min(82vw, 1080px); aspect-ratio: 1; opacity: .45; animation: junior-orbit 42s linear infinite; }
.junior-temple-beam { position: absolute; left: 50%; top: 10%; width: 3px; height: 68%; transform: translateX(-50%); background: linear-gradient(transparent, rgba(242, 207, 125, .74), transparent); box-shadow: 0 0 30px #d5a856; }
.junior-star { position: absolute; width: 34px; aspect-ratio: 1; clip-path: polygon(50% 0, 61% 36%, 100% 50%, 63% 62%, 50% 100%, 37% 63%, 0 50%, 37% 36%); background: #e9c56f; filter: drop-shadow(0 0 15px rgba(235, 199, 116, .7)); animation: junior-float 4s ease-in-out infinite; }
.star-one { left: 18%; top: 30%; }
.star-two { right: 16%; top: 24%; animation-delay: -1.3s; transform: scale(.68); }
.star-three { right: 24%; bottom: 20%; animation-delay: -2.2s; transform: scale(.48); }
.junior-attract-copy { width: min(930px, calc(100vw - 40px)); padding: 42px 20px; text-align: center; }
.junior-attract-copy > p:first-child { margin: 0 0 12px; color: var(--junior-gold); font: .68rem Georgia, serif; letter-spacing: .38em; }
.junior-attract-copy h1 { margin: 0; color: var(--junior-ivory); font: 300 clamp(2.8rem, 6.5vw, 6.2rem)/1.05 "Noto Serif SC", "Songti SC", serif; letter-spacing: .12em; text-shadow: 0 0 45px rgba(220, 181, 99, .26); }
.junior-attract-copy h2 { margin: 16px 0 0; color: var(--junior-gold-bright); font: 500 clamp(1.15rem, 2vw, 1.65rem) "Noto Serif SC", serif; letter-spacing: .32em; }
.junior-three-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 42px auto 20px; }
.junior-three-steps span { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(215, 173, 94, .28); color: #d5dfd8; background: rgba(5, 24, 16, .74); font-size: .94rem; }
.junior-three-steps b { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--junior-gold); border-radius: 50%; color: var(--junior-gold-bright); font: 1rem Georgia, serif; }
.junior-attract-intro { margin: 0; color: #adbbb2; font-size: .9rem; line-height: 1.7; }
.junior-attract-actions { display: flex; justify-content: center; gap: 14px; margin-top: 32px; }
.junior-attract-actions button { min-width: 190px; }

/* 选择科学家 */
.junior-select-stage { position: relative; padding: 28px clamp(18px, 4vw, 58px) 130px; background: radial-gradient(circle at 50% 0, rgba(33, 102, 74, .2), transparent 42%), #03100a; }
.junior-stage-heading { position: relative; max-width: 1100px; margin: 0 auto 22px; text-align: center; }
.junior-stage-heading .junior-back-button { position: absolute; left: 0; top: 3px; }
.junior-stage-heading > p { margin: 0 0 8px; color: var(--junior-gold); font: .62rem Georgia, serif; letter-spacing: .28em; }
.junior-stage-heading h1 { margin: 0; font: 400 clamp(2rem, 4vw, 3.5rem) "Noto Serif SC", serif; letter-spacing: .12em; }
.junior-stage-heading > span { display: block; margin-top: 10px; color: var(--junior-muted); }
.junior-filter-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; max-width: 1100px; margin: 0 auto 22px; }
.junior-filter-tabs button { min-height: 44px; padding: 9px 24px; border: 1px solid rgba(215, 173, 94, .2); color: #aebdb4; background: rgba(6, 27, 18, .76); cursor: pointer; }
.junior-filter-tabs button.is-active { border-color: var(--junior-gold); color: var(--junior-gold-bright); background: rgba(215, 173, 94, .09); }
.junior-scientist-grid { max-width: 1280px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 auto; }
.junior-scientist-card { position: relative; min-height: 210px; display: grid; grid-template-columns: 42% 58%; overflow: hidden; padding: 0; border: 1px solid rgba(215, 173, 94, .2); color: var(--junior-ivory); background: linear-gradient(145deg, rgba(11, 41, 28, .94), rgba(3, 15, 10, .97)); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.junior-scientist-card:hover { transform: translateY(-4px); border-color: rgba(215, 173, 94, .65); }
.junior-scientist-card.is-selected { border-color: var(--junior-gold-bright); box-shadow: inset 0 0 34px rgba(215, 173, 94, .1), 0 0 28px rgba(215, 173, 94, .12); }
.junior-scientist-art { min-width: 0; overflow: hidden; background: #071a11; }
.junior-scientist-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.junior-scientist-copy { align-self: center; min-width: 0; display: grid; padding: 18px 14px; }
.junior-scientist-copy small { color: var(--junior-gold); font-size: .65rem; }
.junior-scientist-copy strong { margin: 7px 0; font: 500 clamp(1.25rem, 1.7vw, 1.65rem) "Noto Serif SC", serif; }
.junior-scientist-copy em { color: #adbbb2; font-size: .72rem; font-style: normal; line-height: 1.5; }
.junior-scientist-card > i { position: absolute; right: 9px; bottom: 8px; color: rgba(217, 181, 103, .58); font-size: .58rem; font-style: normal; }
.junior-selected-dock { position: fixed; z-index: 90; left: 50%; bottom: 18px; width: min(760px, calc(100vw - 26px)); min-height: 94px; display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 14px; padding: 9px 12px; border: 1px solid rgba(222, 183, 98, .56); background: rgba(2, 15, 9, .95); box-shadow: 0 18px 60px rgba(0,0,0,.6); transform: translateX(-50%); backdrop-filter: blur(12px); }
.junior-selected-dock[hidden] { display: none; }
.junior-selected-dock img { width: 74px; height: 74px; object-fit: cover; object-position: top; border: 1px solid var(--junior-border); }
.junior-selected-dock small { color: var(--junior-gold); font-size: .62rem; }
.junior-selected-dock h2 { margin: 3px 0; font: 500 1.35rem "Noto Serif SC", serif; }
.junior-selected-dock p { margin: 0; color: var(--junior-muted); font-size: .74rem; }

/* 法则之门 */
.junior-gate-stage { position: relative; padding: 22px 18px 35px; overflow: hidden; background: radial-gradient(circle at 50% 48%, rgba(212, 169, 78, .15), transparent 32%), #020b07; }
.junior-gate-stage.is-active { display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.junior-gate-back { position: absolute; z-index: 4; left: 22px; top: 20px; }
.junior-gate-heading { margin-bottom: 12px; }
.junior-gate { position: relative; width: min(62vh, 520px); height: min(76vh, 720px); min-height: 480px; padding: 0; overflow: hidden; border: 1px solid rgba(216, 177, 95, .46); color: var(--junior-ivory); background: #07140e; cursor: pointer; box-shadow: 0 30px 90px rgba(0,0,0,.58), 0 0 50px rgba(208, 162, 70, .08); }
.junior-gate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s cubic-bezier(.2,.7,.2,1), filter 1.3s ease, opacity 1.4s ease; }
.junior-gate::before, .junior-gate::after { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; width: 50%; border: 1px solid rgba(228, 192, 111, .22); background: rgba(2, 11, 7, .08); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.junior-gate::before { left: 0; transform-origin: left; }
.junior-gate::after { right: 0; transform-origin: right; }
.junior-gate-seam { position: absolute; z-index: 5; left: 50%; top: 4%; bottom: 4%; width: 2px; transform: translateX(-50%); background: linear-gradient(transparent, var(--junior-gold-bright), transparent); box-shadow: 0 0 14px var(--junior-gold); transition: width 1s ease, box-shadow 1s ease; }
.junior-gate-copy { position: absolute; z-index: 7; left: 50%; bottom: 8%; width: 72%; transform: translateX(-50%); display: grid; gap: 5px; justify-items: center; padding: 15px; border: 1px solid rgba(225, 189, 108, .42); background: rgba(2, 12, 8, .72); text-shadow: 0 2px 10px #000; transition: opacity .5s ease; }
.junior-gate-copy small { color: var(--junior-gold); font: .55rem Georgia, serif; letter-spacing: .24em; }
.junior-gate-copy strong { font: 500 1.55rem "Noto Serif SC", serif; letter-spacing: .2em; }
.junior-gate-copy em { color: #c5d0c9; font-size: .78rem; font-style: normal; }
.junior-gate:hover .junior-gate-seam { width: 4px; box-shadow: 0 0 30px var(--junior-gold-bright); }
.junior-gate.is-opening .junior-gate-seam { width: 18%; opacity: .8; box-shadow: 0 0 90px 24px rgba(239, 201, 116, .5); }
.junior-gate.is-opening::before { transform: perspective(900px) rotateY(-52deg); }
.junior-gate.is-opening::after { transform: perspective(900px) rotateY(52deg); }
.junior-gate.is-opening img { transform: scale(1.08); filter: brightness(1.28) saturate(1.12); }
.junior-gate.is-opening .junior-gate-copy { opacity: 0; }

/* 三星挑战游戏页 */
.junior-game-stage { height: calc(100vh - 68px); min-height: 0; padding: 10px 18px 8px; overflow: hidden; background: radial-gradient(circle at 50% 38%, rgba(23, 84, 59, .2), transparent 42%), #020b07; }
.junior-game-stage.is-active { display: grid; grid-template-rows: 64px minmax(0, 1fr) auto auto; gap: 9px; }
.junior-gamebar { min-height: 64px; display: grid; grid-template-columns: auto 1fr 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(215, 173, 94, .23); background: rgba(5, 24, 16, .92); }
.junior-round-count { display: grid; padding-right: 18px; border-right: 1px solid rgba(215, 173, 94, .2); }
.junior-round-count small { color: var(--junior-gold); font-size: .58rem; }
.junior-round-count strong { margin-top: 3px; font: 500 1.08rem "Noto Serif SC", serif; }
.junior-score { display: flex; align-items: center; justify-content: center; gap: 12px; }
.junior-score span { color: #c5d1c9; font-size: .78rem; }
.junior-score b { color: var(--junior-gold-bright); font: 1.55rem/1 Georgia, serif; letter-spacing: .08em; text-shadow: 0 0 15px rgba(230, 191, 105, .24); }
.junior-score.is-guardian b { color: #7ad7d1; }
.junior-score b.is-earning { animation: junior-score-star .85s ease; }
.junior-reset-button { min-height: 40px; padding: 8px 13px; border: 1px solid rgba(215, 173, 94, .2); color: #a9b9af; background: transparent; cursor: pointer; }
.junior-game-scene { min-height: 0; display: grid; grid-template-columns: minmax(230px, .8fr) minmax(420px, 1.65fr) minmax(210px, .65fr); gap: 10px; overflow: hidden; }
.junior-hero-panel, .junior-mission-panel, .junior-guardian-panel { min-height: 0; border: 1px solid rgba(215, 173, 94, .22); background: linear-gradient(155deg, rgba(10, 38, 26, .94), rgba(3, 15, 10, .97)); }
.junior-hero-panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; overflow: hidden; }
.junior-hero-art { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(93, 205, 190, .12), transparent 48%); }
.junior-hero-art img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: drop-shadow(0 0 25px rgba(82, 208, 191, .17)); }
.junior-hero-aura { position: absolute; inset: 18% 8% 0; border: 1px solid rgba(93, 212, 198, .2); border-radius: 50%; box-shadow: inset 0 0 40px rgba(93, 212, 198, .08); animation: junior-aura 3s ease-in-out infinite alternate; }
.junior-hero-name { position: relative; z-index: 3; margin-top: -58px; padding: 74px 16px 12px; background: linear-gradient(transparent, rgba(2, 13, 8, .96) 42%); }
.junior-hero-name small { color: var(--junior-cyan); font-size: .65rem; }
.junior-hero-name h2 { margin: 5px 0; font: 500 clamp(1.5rem, 2.2vw, 2.2rem) "Noto Serif SC", serif; }
.junior-hero-name p { margin: 0; color: #aebdb4; font-size: .72rem; }
.junior-hero-speech { margin: 0; padding: 11px 14px; border-top: 1px solid rgba(215, 173, 94, .17); color: #d7c592; background: rgba(215, 173, 94, .055); font-size: .76rem; line-height: 1.5; }
.junior-mission-panel { position: relative; display: grid; align-content: center; justify-items: center; padding: clamp(18px, 3vw, 42px); text-align: center; overflow-y: auto; }
.junior-mission-badge { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--junior-gold); border-radius: 50%; color: var(--junior-gold-bright); box-shadow: inset 0 0 22px rgba(215, 173, 94, .13), 0 0 28px rgba(215, 173, 94, .1); }
.junior-mission-badge span { font: 1.5rem Georgia, serif; line-height: 1; }
.junior-mission-badge small { font-size: .52rem; }
.junior-mission-kicker { margin: 14px 0 8px; color: var(--junior-gold); font: .62rem Georgia, serif; letter-spacing: .2em; }
.junior-mission-panel > h1 { max-width: 820px; margin: 0; color: var(--junior-ivory); font: 500 clamp(1.65rem, 3vw, 3.2rem)/1.42 "Noto Serif SC", "Songti SC", serif; letter-spacing: .04em; }
.junior-mission-hint { margin: 16px 0 12px; color: var(--junior-muted); font-size: .86rem; }
.junior-hint-button { min-height: 44px; padding: 9px 16px; border: 1px solid rgba(215, 173, 94, .3); color: #e0c276; background: rgba(215, 173, 94, .06); cursor: pointer; }
.junior-hint-button:disabled { color: #91a097; border-color: rgba(255,255,255,.1); cursor: default; }
.junior-feedback { width: min(720px, 100%); display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; border: 1px solid var(--junior-border); text-align: left; background: rgba(3, 17, 11, .9); }
.junior-feedback[hidden] { display: none; }
.junior-feedback-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 1.6rem Georgia, serif; }
.junior-feedback h2 { margin: 0 0 5px; font: 500 1.05rem "Noto Serif SC", serif; }
.junior-feedback p { margin: 0; color: #c3d0c7; font-size: .78rem; line-height: 1.65; }
.junior-feedback.is-correct { color: var(--junior-green); border-color: rgba(98, 211, 150, .48); }
.junior-feedback.is-gentle-wrong { color: #e1b66d; border-color: rgba(225, 182, 109, .44); }
.junior-feedback .junior-primary-button { min-height: 48px; padding: 10px 16px; white-space: nowrap; }
.junior-guardian-panel { display: grid; align-content: center; justify-items: center; padding: 22px 14px; text-align: center; }
.junior-guardian-core { position: relative; width: min(12vw, 150px); min-width: 110px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #5dc8c5; border-radius: 50%; box-shadow: inset 0 0 35px rgba(91, 207, 204, .15), 0 0 34px rgba(91, 207, 204, .12); animation: junior-guardian 3s ease-in-out infinite alternate; }
.junior-guardian-core::before, .junior-guardian-core::after, .junior-guardian-core span, .junior-guardian-core i { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(106, 220, 214, .4); border-radius: 50%; animation: junior-spin 12s linear infinite; }
.junior-guardian-core::after { inset: 22%; border-style: solid; animation-direction: reverse; animation-duration: 8s; }
.junior-guardian-core span { inset: -9%; border-color: rgba(213, 176, 99, .26); animation-duration: 18s; }
.junior-guardian-core i { inset: 37%; border-style: solid; background: radial-gradient(circle, rgba(103, 218, 211, .38), transparent 68%); animation: none; }
.junior-guardian-core b { position: relative; z-index: 3; color: #a9eeea; font: 1.55rem Georgia, serif; }
.junior-guardian-panel h2 { margin: 20px 0 8px; font: 500 1.25rem "Noto Serif SC", serif; }
.junior-guardian-panel p { margin: 0; color: var(--junior-muted); font-size: .76rem; line-height: 1.6; }
.junior-law-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.junior-law-card { position: relative; min-height: 132px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 12px; align-items: center; padding: 16px 16px 13px; overflow: hidden; border: 1px solid rgba(215, 173, 94, .25); color: var(--junior-ivory); background: linear-gradient(145deg, rgba(10, 40, 27, .98), rgba(3, 15, 10, .99)); text-align: left; cursor: pointer; transition: transform .2s ease, opacity .25s ease, border-color .2s ease, box-shadow .2s ease; }
.junior-law-card:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--junior-gold-bright); box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.junior-law-number { grid-row: 1 / 4; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--junior-gold); border-radius: 50%; color: var(--junior-gold-bright); font: 1rem Georgia, serif; }
.junior-law-card small { color: var(--junior-gold); font-size: .62rem; }
.junior-law-card strong { grid-column: 2; font: 500 clamp(1.15rem, 1.6vw, 1.5rem) "Noto Serif SC", serif; }
.junior-law-card p { grid-column: 2 / 4; margin: 4px 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #b8c6bd; font-size: .78rem; line-height: 1.5; }
.junior-law-card em { grid-column: 3; grid-row: 1 / 3; align-self: center; color: #8fa198; font-size: .62rem; font-style: normal; }
.junior-law-card.is-hinted-away { opacity: .1; transform: scale(.94); pointer-events: none; }
.junior-law-card.is-correct { opacity: 1; border-color: var(--junior-green); background: linear-gradient(145deg, rgba(17, 77, 50, .98), rgba(4, 27, 17, .99)); box-shadow: inset 0 0 35px rgba(98, 211, 150, .12), 0 0 30px rgba(98, 211, 150, .15); }
.junior-law-card.is-correct::after { content: "✓"; position: absolute; right: 12px; bottom: 7px; color: var(--junior-green); font: 1.2rem Georgia, serif; }
.junior-law-card.is-wrong { opacity: .66; border-color: rgba(219, 128, 117, .55); animation: junior-wrong-shake .35s ease; }
.junior-law-options.is-answered .junior-law-card:not(.is-correct):not(.is-wrong) { opacity: .4; }
.junior-fairness { margin: 0; color: rgba(174, 190, 180, .55); font-size: .64rem; text-align: center; }

/* 结算 */
.junior-result-stage { position: relative; padding: clamp(26px, 5vh, 58px) 18px; overflow: hidden; background: radial-gradient(circle at 50% 25%, rgba(224, 181, 92, .2), transparent 38%), linear-gradient(180deg, #072016, #020b07); }
.junior-result-stage.is-active { display: grid; place-items: center; }
.junior-result-light { position: absolute; inset: 0; pointer-events: none; }
.junior-result-light::before { content: ""; position: absolute; left: 50%; top: -20%; width: 22%; height: 95%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(245, 213, 140, .35), transparent); filter: blur(14px); }
.junior-result-light span, .junior-result-light i { position: absolute; left: 50%; top: 34%; width: min(68vw, 820px); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(66deg); border: 1px solid rgba(235, 198, 113, .25); border-radius: 50%; animation: junior-orbit 18s linear infinite; }
.junior-result-light i { width: min(46vw, 560px); border-style: dashed; animation-direction: reverse; }
.junior-result-card { position: relative; z-index: 2; width: min(820px, calc(100vw - 28px)); padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(223, 184, 99, .52); background: rgba(3, 20, 13, .93); box-shadow: 0 30px 100px rgba(0,0,0,.58), inset 0 0 55px rgba(215, 173, 94, .055); text-align: center; }
.junior-result-card > p:first-child { margin: 0; color: var(--junior-gold); font: .63rem Georgia, serif; letter-spacing: .26em; }
.junior-result-stars { margin: 17px 0 10px; color: var(--junior-gold-bright); font: clamp(2.8rem, 6vw, 5rem) Georgia, serif; letter-spacing: .15em; text-shadow: 0 0 34px rgba(239, 201, 116, .36); }
.junior-result-card h1 { margin: 0; font: 500 clamp(2rem, 4vw, 3.5rem) "Noto Serif SC", serif; letter-spacing: .1em; }
.junior-result-card > h2 { margin: 10px 0 22px; color: #d6c28d; font: 400 1rem "Noto Serif SC", serif; }
.junior-memory-list { display: grid; gap: 8px; text-align: left; }
.junior-memory-list article { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(215, 173, 94, .18); background: rgba(255,255,255,.02); }
.junior-memory-list article > b { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--junior-gold); border-radius: 50%; color: var(--junior-gold-bright); font: 1rem Georgia, serif; }
.junior-memory-list small { color: #8fa298; font-size: .6rem; }
.junior-memory-list strong { display: block; margin: 2px 0; color: #ead7a6; font: 500 1rem "Noto Serif SC", serif; }
.junior-memory-list p { margin: 0; color: #b9c7be; font-size: .76rem; line-height: 1.55; }
.junior-result-fairness { color: #899c91; font-size: .66rem; }
.junior-result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

/* 超时、字幕、粒子 */
.junior-idle-dialog { width: min(480px, calc(100vw - 28px)); padding: 0; border: 1px solid rgba(222, 183, 98, .6); color: var(--junior-ivory); background: linear-gradient(145deg, #0b2a1d, #031009); }
.junior-idle-dialog::backdrop { background: rgba(0, 6, 3, .82); backdrop-filter: blur(8px); }
.junior-idle-dialog > div { display: grid; justify-items: center; padding: 34px; text-align: center; }
.junior-idle-dialog span { font-size: 2.4rem; }
.junior-idle-dialog h2 { margin: 12px 0 6px; font: 500 1.8rem "Noto Serif SC", serif; }
.junior-idle-dialog p { margin: 0 0 20px; color: var(--junior-muted); }
.junior-idle-dialog small { margin-top: 12px; color: #8da197; }
.junior-effects { position: fixed; inset: 0; z-index: 350; width: 100%; height: 100%; pointer-events: none; }
.junior-subtitle { position: fixed; z-index: 500; left: 50%; bottom: 22px; width: min(820px, calc(100vw - 30px)); transform: translateX(-50%); padding: 11px 18px; border: 1px solid rgba(218, 183, 105, .4); color: #f3ead8; background: rgba(1,8,5,.92); box-shadow: 0 12px 35px rgba(0,0,0,.52); text-align: center; font-size: .86rem; line-height: 1.6; }
.junior-subtitle[hidden] { display: none; }

@keyframes junior-stars { to { background-position: 79px 79px, -74px 137px; } }
@keyframes junior-orbit { to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); } }
@keyframes junior-orbit-reverse { to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(-360deg); } }
@keyframes junior-float { 50% { translate: 0 -16px; opacity: .65; } }
@keyframes junior-aura { to { transform: scale(1.04); opacity: .55; } }
@keyframes junior-guardian { to { transform: scale(1.05); box-shadow: inset 0 0 45px rgba(91, 207, 204, .23), 0 0 48px rgba(91, 207, 204, .2); } }
@keyframes junior-spin { to { transform: rotate(360deg); } }
@keyframes junior-score-star { 45% { transform: scale(1.35); color: #fff3b6; text-shadow: 0 0 28px #f0c66c; } }
@keyframes junior-wrong-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

@media (max-width: 1100px) {
    .junior-scientist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .junior-game-scene { grid-template-columns: minmax(210px, .72fr) minmax(390px, 1.5fr) 170px; }
    .junior-guardian-core { min-width: 92px; }
}

@media (max-width: 860px) {
    .junior-sitebar { grid-template-columns: 1fr auto; height: auto; min-height: 62px; padding: 9px 13px; }
    .junior-sitebar-title { display: none; }
    .junior-sitebar-actions button { display: none; }
    .junior-sitebar-actions a { min-height: 38px; }
    .junior-app, .junior-stage { min-height: calc(100vh - 62px); }
    .junior-three-steps { grid-template-columns: 1fr; gap: 7px; }
    .junior-three-steps span { min-height: 54px; }
    .junior-scientist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .junior-selected-dock { grid-template-columns: 58px 1fr; }
    .junior-selected-dock img { width: 58px; height: 58px; }
    .junior-selected-dock .junior-primary-button { grid-column: 1 / -1; min-height: 48px; }
    .junior-game-stage { overflow: visible; }
    .junior-game-stage { height: auto; min-height: calc(100vh - 62px); }
    .junior-game-stage.is-active { display: block; }
    .junior-gamebar { grid-template-columns: 1fr 1fr; }
    .junior-round-count { grid-column: 1 / -1; border: 0; text-align: center; }
    .junior-reset-button { display: none; }
    .junior-game-scene { grid-template-columns: 1fr; margin-top: 9px; }
    .junior-hero-panel { min-height: 310px; grid-template-rows: 230px auto auto; }
    .junior-hero-art img { object-position: 50% 15%; }
    .junior-mission-panel { min-height: 380px; }
    .junior-guardian-panel { grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; gap: 0 18px; min-height: 150px; text-align: left; }
    .junior-guardian-core { grid-row: 1 / 3; width: 100px; }
    .junior-guardian-panel h2 { align-self: end; margin: 0 0 5px; }
    .junior-law-options { grid-template-columns: 1fr; margin-top: 10px; }
    .junior-law-card { min-height: 116px; }
    .junior-fairness { margin: 12px 0; }
}

@media (max-width: 540px) {
    .junior-attract-copy h1 { font-size: 2.55rem; }
    .junior-attract-copy h2 { letter-spacing: .2em; }
    .junior-attract-actions { display: grid; }
    .junior-attract-actions button { min-width: min(260px, calc(100vw - 50px)); }
    .junior-stage-heading .junior-back-button { position: static; display: block; margin-bottom: 6px; }
    .junior-filter-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .junior-filter-tabs button { flex: 0 0 auto; }
    .junior-scientist-grid { grid-template-columns: 1fr; }
    .junior-scientist-card { min-height: 180px; }
    .junior-gate { width: min(92vw, 440px); min-height: 430px; height: 68vh; }
    .junior-gate-back { position: static; justify-self: start; }
    .junior-gamebar { padding: 8px; }
    .junior-score { gap: 6px; }
    .junior-score b { font-size: 1.25rem; }
    .junior-score span { font-size: .68rem; }
    .junior-mission-panel { padding: 24px 16px; }
    .junior-mission-panel > h1 { font-size: 1.55rem; }
    .junior-feedback { grid-template-columns: 44px 1fr; }
    .junior-feedback-icon { width: 42px; height: 42px; }
    .junior-feedback .junior-primary-button { grid-column: 1 / -1; }
    .junior-result-card { padding: 24px 16px; }
    .junior-result-actions { display: grid; }
}

@media (min-width: 861px) and (max-height: 800px) {
    .junior-game-stage.is-active { grid-template-rows: 58px minmax(0, 1fr) 122px auto; }
    .junior-gamebar { min-height: 58px; }
    .junior-hero-panel { grid-template-rows: minmax(0, 1fr) auto auto; }
    .junior-mission-panel { padding: 16px 24px; }
    .junior-mission-badge { width: 48px; height: 48px; }
    .junior-mission-kicker { margin: 8px 0 5px; }
    .junior-mission-panel > h1 { font-size: clamp(1.45rem, 2.5vw, 2.45rem); }
    .junior-mission-hint { margin: 8px 0; }
    .junior-feedback { margin-top: 9px; padding: 9px; }
    .junior-law-card { min-height: 122px; padding-block: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}