.subpage-hero { margin-top: -84px; padding: 210px 0 110px; color: white; background: var(--blue); }
.subpage-hero-inner { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 70px; }
.subpage-hero .eyebrow { color: var(--yellow); }
.subpage-hero .eyebrow span { color: var(--blue-deep); background: var(--yellow); }
.subpage-hero h1 { margin: 0; font-size: clamp(65px, 8vw, 105px); line-height: .95; letter-spacing: -.075em; }
.subpage-hero h1 em { color: var(--yellow); font-style: normal; }
.subpage-hero-inner > div:first-child > p:last-child { max-width: 620px; margin: 28px 0 0; color: #dce3ff; font-size: 16px; line-height: 1.75; }
.rule-seal { width: 290px; aspect-ratio: 1; padding: 55px 30px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; color: var(--blue-deep); background: var(--yellow); border: 5px solid var(--blue-deep); border-radius: 50%; box-shadow: 14px 14px 0 var(--blue-deep); transform: rotate(6deg); }
.rule-seal b { font-size: 30px; }
.rule-seal i { font-size: 18px; font-style: normal; }
.rule-seal span { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--blue-deep); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-align: center; }

.rules-layout { padding: 100px 0 130px; display: grid; grid-template-columns: 245px 1fr; gap: 70px; align-items: start; }
.rules-aside { position: sticky; top: 108px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.rules-aside > p { margin: 0 0 15px; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.rules-aside > a { display: block; padding: 12px 0; color: #60667d; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.rules-aside > a:hover { color: var(--blue); padding-left: 5px; }
.aside-tip { margin-top: 20px; padding: 15px; color: #5a4d10; background: #fff3b8; border-radius: 12px; }
.aside-tip span { width: 23px; height: 23px; display: grid; place-items: center; background: var(--yellow); border: 1px solid #bd9f0d; border-radius: 50%; font-weight: 900; }
.aside-tip p { margin: 8px 0 0; font-size: 10px; line-height: 1.55; }
.rules-content { min-width: 0; }
.rule-block { padding: 0 0 72px; display: grid; grid-template-columns: 75px 1fr; gap: 28px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.rule-block + .rule-block { padding-top: 72px; }
.rule-number { position: sticky; top: 110px; align-self: start; color: var(--blue); font-size: 44px; line-height: 1; font-weight: 950; letter-spacing: -.07em; }
.rule-block h2, .faq-section h2 { margin: 0 0 28px; font-size: 44px; letter-spacing: -.05em; }
.rule-block .eyebrow { margin-bottom: 10px; }
.info-table { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.info-table div { padding: 16px 18px; display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid var(--line); }
.info-table div:last-child { border: 0; }
.info-table span { color: #767b91; font-size: 12px; }
.info-table strong { font-size: 13px; }
.rule-note { margin: 18px 0 0; padding: 15px 17px; color: #536080; background: var(--blue-soft); border-left: 4px solid var(--blue); border-radius: 0 12px 12px 0; font-size: 12px; line-height: 1.7; }
.number-list { margin: 0; padding: 0; list-style: none; counter-reset: item; display: grid; gap: 14px; }
.number-list li { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.number-list b { font-size: 16px; }
.number-list p { margin: 7px 0 0; color: #646a80; font-size: 12px; line-height: 1.7; }
.warning-card { margin-top: 18px; padding: 20px; color: #793239; background: #ffe7e7; border: 1px solid #f8b7b8; border-radius: 16px; }
.warning-card b { font-size: 13px; }
.warning-card p { margin: 7px 0 0; font-size: 11px; line-height: 1.65; }
.rule-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-cards article { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.rule-cards span { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.rule-cards h3 { margin: 9px 0 7px; font-size: 18px; }
.rule-cards p { margin: 0; color: #676d82; font-size: 11px; line-height: 1.65; }
.minor-title { margin: 30px 0 14px; font-size: 20px; }
.penalty-table { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.penalty-table > div { padding: 15px 17px; display: grid; grid-template-columns: 1fr 220px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 12px; }
.penalty-table > div:last-child { border: 0; }
.penalty-table .penalty-head { color: white; background: var(--blue-deep); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.penalty-table strong { color: var(--blue); }
.check-rule-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.check-rule-list li { padding: 16px; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; background: var(--paper); border-radius: 15px; }
.check-rule-list span { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-weight: 900; }
.check-rule-list p { margin: 0; color: #596078; font-size: 12px; line-height: 1.65; }
.reward-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.reward-rule-grid article { padding: 22px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); }
.reward-rule-grid article:last-child { color: white; background: var(--blue); }
.reward-rule-grid span { display: block; font-size: 11px; font-weight: 900; }
.reward-rule-grid strong { display: block; margin: 10px 0; font-size: 36px; }
.reward-rule-grid p { margin: 0; font-size: 11px; line-height: 1.6; }
.plain-list { margin: 25px 0 0; padding-left: 18px; color: #5f657b; font-size: 12px; line-height: 1.8; }
.timeline-list { border-left: 2px solid var(--blue); }
.timeline-list div { position: relative; padding: 0 0 24px 28px; }
.timeline-list div::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; background: var(--yellow); border: 2px solid var(--blue); border-radius: 50%; }
.timeline-list b { font-size: 14px; }
.timeline-list p, .long-copy { margin: 6px 0 0; color: #626980; font-size: 12px; line-height: 1.8; }
.long-copy + .long-copy { margin-top: 16px; }
.faq-section { padding: 74px 0 0 103px; scroll-margin-top: 120px; }
.faq-section details { background: var(--paper); border-top: 1px solid var(--line); }
.faq-section details:last-child { border-bottom: 1px solid var(--line); }
.faq-section summary { padding: 20px 5px; display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary span { color: var(--blue); font-size: 22px; }
.faq-section details[open] summary span { transform: rotate(45deg); }
.faq-section details p { margin: -5px 0 0; padding: 0 35px 22px 5px; color: #666c80; font-size: 12px; line-height: 1.7; }

.live-body { color: white; background: var(--blue-deep); }
.live-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .045; background-image: radial-gradient(circle, white 1.5px, transparent 1.5px); background-size: 26px 26px; }
.live-main { padding: 70px 0 100px; }
.live-topbar { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 17px; }
.live-topbar > div:first-child { display: flex; align-items: center; gap: 20px; }
.live-topbar p { margin: 0; color: #aeb8e2; font-size: 12px; }
.live-signal { display: inline-flex; align-items: center; gap: 8px; color: white; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.live-signal i { width: 9px; height: 9px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,93,97,.16); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.round-state { display: grid; text-align: right; }
.round-state span { color: #8792c1; font-size: 9px; }
.round-state strong { color: var(--yellow); font-size: 13px; }
.live-hero-grid { padding: 70px 0 55px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: end; }
.live-title .eyebrow { color: var(--yellow); }
.live-title h1 { margin: 0; font-size: clamp(58px, 6vw, 86px); line-height: .94; letter-spacing: -.07em; }
.live-title h1 em { color: var(--yellow); font-style: normal; }
.live-title > p:last-child { max-width: 450px; margin: 24px 0 0; color: #aeb8df; font-size: 12px; line-height: 1.75; }
.current-player { position: relative; min-height: 260px; padding: 34px; display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 28px; color: var(--ink); background: var(--yellow); border: 4px solid var(--ink); border-radius: 30px; box-shadow: 12px 12px 0 var(--blue); }
.current-label { position: absolute; left: 20px; top: 17px; display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 900; }
.current-label span { width: 8px; height: 8px; background: var(--red); border-radius: 50%; }
.current-avatar { position: relative; height: 160px; overflow: hidden; background: var(--red); border: 3px solid var(--ink); border-radius: 22px; }
.current-avatar > span { position: absolute; right: 8px; top: 4px; color: rgba(255,255,255,.3); font-size: 52px; font-weight: 950; }
.mini-face { position: absolute; left: 50%; bottom: -15px; width: 95px; height: 120px; background: #edb59b; border: 4px solid var(--ink); border-radius: 45% 45% 30% 30%; transform: translateX(-50%); }
.mini-face::before { content: ""; position: absolute; left: -6px; top: -18px; width: 100px; height: 45px; background: var(--ink); border-radius: 40px 50px 20px 20px; }
.current-player small { color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.current-player h2 { margin: 4px 0; font-size: 42px; }
.current-player p { margin: 0; color: #5f5540; font-size: 11px; }
.live-timer { grid-column: 2; margin-top: -48px; display: grid; }
.live-timer strong { color: var(--blue); font-family: Consolas, monospace; font-size: 42px; letter-spacing: -.04em; }
.live-timer span { font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.leaderboard-panel { padding: 30px; color: var(--ink); background: var(--paper); border-radius: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.2); }
.panel-heading { margin-bottom: 25px; display: flex; align-items: end; justify-content: space-between; }
.panel-heading .eyebrow { margin-bottom: 8px; }
.panel-heading h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.panel-heading > p { margin: 0 0 5px; color: #777c90; font-size: 10px; }
.leaderboard-table { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; }
.leader-row { min-width: 810px; padding: 14px 18px; display: grid; grid-template-columns: 70px 1.5fr repeat(4, 1fr); align-items: center; column-gap: 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.leader-row:last-child { border: 0; }
.leader-row.header { padding-block: 10px; color: #7a7f93; background: #f1f2f6; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.leader-row.first { background: #fff9d9; }
.leader-row.active { background: var(--blue-soft); }
.leader-row > span:first-child b { font-size: 23px; }
.leader-person { display: flex; align-items: center; gap: 10px; }
.leader-avatar { width: 39px; height: 39px; display: grid; place-items: center; color: white; border: 2px solid var(--ink); border-radius: 11px; font-style: normal; font-weight: 900; }
.avatar-blue { background: var(--blue); }.avatar-red { background: var(--red); }.avatar-green { background: #178161; }.avatar-purple { background: #704bc4; }
.avatar-orange { background: #e7774d; }
.waiting-player .current-avatar { background: #e7774d; }
.waiting-player .live-timer strong { font-size: 31px; letter-spacing: -.03em; }
.draw-button:disabled { color: #8690b7; background: #d8def6; box-shadow: none; cursor: not-allowed; }
.leader-person strong { display: grid; }
.leader-person small { color: #84889a; font-size: 9px; font-weight: 500; }
.penalty-zero { color: #26805f; }.penalty-bad { color: var(--red); font-weight: 800; }
.leader-row > span:last-child { display: flex; align-items: center; gap: 7px; }
.leader-row em { padding: 4px 7px; color: var(--blue-deep); background: var(--yellow); border-radius: 6px; font-size: 8px; font-style: normal; font-weight: 900; }
.timer-placeholder { color: var(--blue); font-weight: 800; }
.live-bottom-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel-card { padding: 28px; color: var(--ink); background: var(--paper); border-radius: 24px; }
.panel-heading.compact { margin-bottom: 20px; }
.panel-heading.compact h2 { font-size: 27px; }
.auto-update, .draw-lock { padding: 7px 10px; color: #1f7257; background: #dff5ed; border-radius: 99px; font-size: 9px; font-weight: 800; }
.draw-lock { color: #80584b; background: #fae9df; }
.feed-list article { padding: 15px 0; display: grid; grid-template-columns: 42px 10px 1fr; gap: 10px; align-items: start; border-top: 1px solid var(--line); }
.feed-list time { color: #888da0; font-family: monospace; font-size: 10px; }
.feed-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; }
.feed-dot.blue { background: var(--blue); }.feed-dot.yellow { background: var(--yellow); }.feed-dot.red { background: var(--red); }.feed-dot.green { background: #1e9c71; }
.feed-list p { margin: 0; color: #5c6277; font-size: 11px; line-height: 1.55; }
.draw-display { padding: 22px; text-align: center; background: var(--blue-soft); border-radius: 17px; }
.ticket-visual { width: 230px; margin: 0 auto; padding: 17px; display: grid; color: white; background: var(--blue); border: 2px dashed white; outline: 5px solid var(--blue); border-radius: 10px; }
.ticket-visual span { font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.ticket-visual strong { font-family: Consolas, monospace; font-size: 43px; line-height: 1; }
.ticket-visual small { color: #d9e1ff; font-size: 10px; }
.draw-display > p { margin: 18px 0 0; color: #6a7086; font-size: 10px; }
.draw-button { width: 100%; margin-top: 14px; border: 0; }
.operator-note { margin: 12px 0 0; color: #9296a7; font-size: 9px; line-height: 1.5; text-align: center; }
.live-reminder { margin-top: 20px; padding: 20px 24px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 15px; color: var(--ink); background: var(--yellow); border-radius: 18px; }
.live-reminder > span { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--blue-deep); border-radius: 50%; font-weight: 900; }
.live-reminder b { font-size: 12px; }
.live-reminder p { margin: 3px 0 0; color: #655b35; font-size: 10px; }
.live-reminder a { font-size: 11px; font-weight: 900; }

@media (max-width: 850px) {
  .subpage-hero { padding-top: 180px; }
  .subpage-hero-inner { grid-template-columns: 1fr; }
  .rule-seal { width: 220px; }
  .rule-seal b { font-size: 22px; }
  .rules-layout { grid-template-columns: 1fr; gap: 40px; }
  .rules-aside { position: relative; top: auto; display: none; }
  .rule-block { grid-template-columns: 55px 1fr; gap: 16px; }
  .faq-section { padding-left: 71px; }
  .live-hero-grid { grid-template-columns: 1fr; }
  .current-player { max-width: 700px; }
  .leaderboard-table { overflow-x: auto; }
  .live-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .subpage-hero h1 { font-size: 58px; }
  .rule-seal { display: none; }
  .rules-layout { padding-top: 70px; }
  .rule-block { grid-template-columns: 1fr; }
  .rule-number { position: static; font-size: 32px; }
  .rule-cards, .reward-rule-grid { grid-template-columns: 1fr; }
  .penalty-table > div { grid-template-columns: 1fr; gap: 6px; }
  .info-table div { grid-template-columns: 1fr; gap: 5px; }
  .faq-section { padding-left: 0; }
  .live-topbar { align-items: flex-start; }
  .live-topbar > div:first-child { align-items: flex-start; flex-direction: column; gap: 8px; }
  .live-hero-grid { padding-top: 45px; }
  .live-title h1 { font-size: 58px; }
  .current-player { min-height: 360px; padding: 48px 24px 24px; grid-template-columns: 120px 1fr; gap: 15px; }
  .current-avatar { height: 130px; }
  .live-timer { grid-column: 1/-1; margin-top: 0; }
  .live-reminder { grid-template-columns: 38px 1fr; }
  .live-reminder a { grid-column: 2; }
}

/* Layout refinement v2 */
.live-header { color: var(--ink); }
.live-header .nav-live { color: white; }
.subpage-hero h1 { max-width: 820px; }
.rule-block > div:last-child { min-width: 0; }

@media (max-width: 760px) {
  .subpage-hero { padding: 165px 0 82px; }
  .subpage-hero-inner { gap: 38px; }
  .subpage-hero h1 { font-size: clamp(54px, 15vw, 72px); line-height: .98; }
  .rules-layout { padding: 72px 0 96px; }
  .rule-block { padding-bottom: 56px; }
  .rule-block + .rule-block { padding-top: 56px; }
  .rule-block h2, .faq-section h2 { font-size: 36px; line-height: 1.08; }
  .live-main { padding-top: 48px; }
  .live-hero-grid { padding: 50px 0 42px; gap: 32px; }
  .live-title h1 { font-size: clamp(54px, 15vw, 72px); line-height: .96; }
  .leaderboard-panel { padding: 22px 16px; }
  .panel-heading { align-items: start; flex-direction: column; gap: 9px; }
  .leaderboard-table { overflow: visible; border: 0; display: grid; gap: 10px; }
  .leader-row.header { display: none; }
  .leader-row {
    min-width: 0;
    padding: 15px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 8px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .leader-row > span:first-child { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  .leader-row > span:nth-child(2) { grid-column: 2; grid-row: 1; }
  .leader-row > span:nth-child(3) { grid-column: 2; grid-row: 2; }
  .leader-row > span:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; }
  .leader-row > span:nth-child(5) { grid-column: 2; grid-row: 3; }
  .leader-row > span:nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; }
  .leader-row > span:nth-child(3)::before { content: "R1  "; color: #9296a7; font-size: 8px; font-weight: 700; }
  .leader-row > span:nth-child(4)::before { content: "R2  "; color: #9296a7; font-size: 8px; font-weight: 700; }
  .leader-row > span:nth-child(5)::before { content: "判罚  "; color: #9296a7; font-size: 8px; font-weight: 700; }
  .leader-row > span:last-child { flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  .live-bottom-grid { margin-top: 14px; gap: 14px; }
  .panel-card { padding: 22px 18px; }
}

@media (max-width: 560px) {
  .rule-seal { display: none; }
  .info-table div { padding: 14px 15px; }
  .current-player { min-height: 320px; grid-template-columns: 108px minmax(0, 1fr); }
  .current-player h2 { font-size: 35px; }
  .live-timer strong { font-size: 34px; }
  .live-reminder { padding: 17px; }
  .leader-avatar { width: 34px; height: 34px; }
}

/* Readability pass: rules and live copy */
.subpage-hero-inner > div:first-child > p:last-child { font-size: 17px; line-height: 1.8; }
.rules-aside > p { font-size: 12px; }
.rules-aside > a { font-size: 13px; }
.aside-tip p { font-size: 12px; line-height: 1.65; }
.info-table span { font-size: 13px; }
.info-table strong { font-size: 14px; }
.rule-note { font-size: 14px; line-height: 1.75; }
.number-list b { font-size: 17px; }
.number-list p { font-size: 14px; line-height: 1.75; }
.warning-card b { font-size: 14px; }
.warning-card p { font-size: 13px; line-height: 1.7; }
.rule-cards span { font-size: 11px; }
.rule-cards p { font-size: 13px; line-height: 1.7; }
.penalty-table > div { font-size: 14px; line-height: 1.55; }
.penalty-table .penalty-head { font-size: 11px; }
.check-rule-list p { font-size: 14px; line-height: 1.7; }
.reward-rule-grid span { font-size: 12px; }
.reward-rule-grid p { font-size: 13px; line-height: 1.7; }
.plain-list { font-size: 14px; line-height: 1.85; }
.timeline-list b { font-size: 15px; }
.timeline-list p, .long-copy { font-size: 14px; line-height: 1.85; }
.faq-section summary { font-size: 15px; }
.faq-section details p { font-size: 14px; line-height: 1.75; }
.live-topbar p { font-size: 13px; }
.live-signal { font-size: 12px; }
.round-state span { font-size: 10px; }
.round-state strong { font-size: 14px; }
.live-title > p:last-child { font-size: 14px; line-height: 1.8; }
.current-player small { font-size: 10px; }
.current-player p { font-size: 12px; }
.leader-row { font-size: 13px; }
.leader-row.header { font-size: 10px; }
.leader-person small { font-size: 10px; }
.panel-heading > p { font-size: 11px; line-height: 1.55; }
.auto-update, .draw-lock { font-size: 10px; }
.feed-list time { font-size: 11px; }
.feed-list p { font-size: 13px; line-height: 1.65; }
.draw-display > p { font-size: 11px; line-height: 1.55; }
.operator-note { font-size: 11px; line-height: 1.6; }
.live-reminder b { font-size: 13px; }
.live-reminder p { font-size: 12px; line-height: 1.6; }
.live-reminder a { font-size: 12px; }

@media (max-width: 760px) {
  .info-table span { font-size: 13px; }
  .info-table strong { font-size: 14px; }
  .rule-note, .number-list p, .check-rule-list p, .plain-list, .timeline-list p, .long-copy, .faq-section details p { font-size: 14px; }
  .leader-row { font-size: 12px; }
  .leader-person small { font-size: 9px; }
  .feed-list p { font-size: 12px; }
  .operator-note { font-size: 10px; }
}