.rules-page{position:relative;max-width:2280px;margin:0 auto;padding:calc(var(--nav-h,64px) + clamp(26px,3.4vw,60px)) 4vw clamp(60px,6vw,110px);box-sizing:border-box}
.rules-page .back-link{display:inline-flex;align-items:center;gap:7px;margin:0 0 18px;color:var(--theme-accent,#ffb64a);font-weight:700;font-size:clamp(.85rem,.9vw,1.05rem);text-decoration:none;padding:7px 15px 7px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 40%,transparent);background:var(--theme-accent-soft,rgba(255,182,74,.1));transition:background .16s,box-shadow .16s}
.rules-page .back-link svg{transition:transform .16s;flex:none}
.rules-page .back-link:hover{background:color-mix(in srgb,var(--theme-accent,#ffb64a) 22%,transparent);box-shadow:0 6px 16px var(--theme-accent-soft,rgba(255,182,74,.2))}
.rules-page .back-link:hover svg{transform:translateX(-3px)}
.rules-page .vh1{font:800 clamp(2rem,3.8vw,4.2rem)/1.07 Inter,system-ui,sans-serif;letter-spacing:-.02em;margin:18px 0 16px;color:var(--theme-ink,var(--text,#EDEDF2))}
.rules-page .vh1 .vaccent{color:var(--theme-accent,#ffb64a)}
.rules-page .vsub{color:var(--theme-muted,var(--muted,#9A9AA6));font-size:clamp(.98rem,1.05vw,1.25rem);line-height:1.65;max-width:760px;margin:0 0 clamp(18px,1.8vw,28px)}

.rules-hero{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,90px);align-items:start;margin:0}
.rules-hero .hero-glow{position:absolute;top:-14%;left:-8%;width:min(48vw,860px);height:110%;background:radial-gradient(ellipse at center,var(--theme-accent-soft,rgba(255,182,74,.13)),transparent 68%);pointer-events:none;z-index:0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:clamp(10px,1vw,18px);margin-top:6px}
.stat-card{background:var(--theme-card,#241f19);border:1px solid var(--theme-line,rgba(255,255,255,.09));border-left:3px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 60%,transparent);border-radius:14px;padding:clamp(13px,1.1vw,22px);box-shadow:0 8px 22px var(--theme-shadow,rgba(0,0,0,.25))}
.stat-card b{display:block;font:800 clamp(1.05rem,1.4vw,1.5rem)/1.2 Inter,system-ui,sans-serif;color:var(--theme-accent,#ffb64a)}
.stat-card span{display:block;margin-top:4px;color:var(--theme-muted,var(--muted,#9A9AA6));font-size:.83rem;line-height:1.45}

.rules-page .vbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.rules-page .vglow{position:absolute;display:block;pointer-events:none;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--theme-accent,#ffb64a) 18%,transparent),transparent 68%);filter:blur(8px)}}

.demo-card{position:relative;padding:clamp(12px,1.2vw,18px);border-radius:20px;background:linear-gradient(180deg,var(--theme-card,rgba(255,255,255,.05)),var(--theme-card-2,rgba(255,255,255,.02)));border:1px solid var(--theme-line,rgba(255,255,255,.1));box-shadow:var(--theme-shadow,0 18px 44px rgba(0,0,0,.35))}
.demo-title{font:700 .95rem Inter,system-ui,sans-serif;color:var(--theme-ink,var(--text,#EDEDF2));margin-bottom:12px;display:flex;align-items:center;gap:8px}
.demo-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--theme-accent,#ffb64a);box-shadow:0 0 10px var(--theme-accent,#ffb64a)}
.demo-board{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;border:1px solid var(--theme-line,rgba(255,255,255,.12));overflow:hidden}
.db-grid{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.db-grid path{stroke:var(--theme-line,rgba(255,255,255,.12));stroke-width:1;fill:none}
.db-ball{position:absolute;width:14%;height:14%;left:calc(var(--x)*20% + 3%);top:calc(var(--y)*20% + 3%);border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 40%),radial-gradient(circle at 50% 55%,var(--c),color-mix(in srgb,var(--c) 45%,#000));box-shadow:0 3px 8px rgba(0,0,0,.35)}
.db-static{animation:dbCollect 8s ease-in-out infinite}
@keyframes dbCollect{0%,54%{transform:scale(1);opacity:1}55%{transform:scale(1.14)}62%,88%{transform:scale(0);opacity:0}96%,100%{transform:scale(1);opacity:1}}
.db-mover{--x:4;--y:0;animation:dbMove 8s ease-in-out infinite;z-index:2}
@keyframes dbMove{0%,8%{transform:translateY(0) scale(1);opacity:1}12%{transform:translateY(0) scale(1.18)}16%{transform:translateY(0) scale(1)}22%{transform:translateY(142.85%) scale(1)}30%,54%{transform:translateY(285.7%) scale(1)}55%{transform:translateY(285.7%) scale(1.14)}62%,88%{transform:translateY(285.7%) scale(0);opacity:0}89%{transform:translateY(0) scale(0);opacity:0}96%,100%{transform:translateY(0) scale(1);opacity:1}}
.db-path{position:absolute;left:calc(4*20% + 10%);top:calc(0*20% + 10%);width:0;height:40%;border-left:2px dashed var(--theme-accent,#ffb64a);opacity:0;animation:dbPath 8s ease-in-out infinite}
@keyframes dbPath{0%,6%{opacity:0}10%,28%{opacity:.7}36%,100%{opacity:0}}
.db-flash{position:absolute;left:1.5%;top:calc(2*20% + 1.5%);width:97%;height:17%;border-radius:999px;background:var(--theme-accent-soft,rgba(255,182,74,.2));box-shadow:0 0 24px var(--theme-accent,#ffb64a);opacity:0;animation:dbFlash 8s ease-in-out infinite}
@keyframes dbFlash{0%,52%{opacity:0}56%{opacity:.85}66%,100%{opacity:0}}
.db-score{position:absolute;left:50%;top:calc(2*20% + 2%);transform:translateX(-50%);font:800 1rem Inter,system-ui,sans-serif;color:var(--theme-accent,#ffb64a);text-shadow:0 2px 8px rgba(0,0,0,.4);opacity:0;animation:dbScore 8s ease-in-out infinite;z-index:3}
@keyframes dbScore{0%,56%{opacity:0;translate:0 0}60%{opacity:1;translate:0 -8px}74%{opacity:1;translate:0 -22px}82%,100%{opacity:0;translate:0 -30px}}
.demo-cap{margin-top:12px;color:var(--theme-muted,var(--muted,#9A9AA6));font-size:.85rem;line-height:1.5}

.chapter{position:relative;margin:0;padding:clamp(18px,2.4vw,32px);border-radius:20px;background:linear-gradient(180deg,var(--theme-card,rgba(255,255,255,.045)),var(--theme-card-2,rgba(255,255,255,.02)));border:1px solid var(--theme-line,rgba(255,255,255,.1));box-shadow:var(--theme-shadow,0 14px 36px rgba(0,0,0,.28));overflow:hidden}
.ch-h{display:flex;align-items:center;gap:14px;font:800 clamp(1.25rem,1.8vw,1.75rem)/1.2 Inter,system-ui,sans-serif;margin:0 0 16px;color:var(--theme-ink,var(--text,#EDEDF2))}
.ch-num{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--theme-accent,#ffb64a);background:var(--theme-accent-soft,rgba(255,182,74,.13));font:800 1.05rem Inter,system-ui,sans-serif}
.ch-num i{position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed var(--theme-accent,#ffb64a);opacity:.5;animation:chSpin 26s linear infinite}
@keyframes chSpin{to{transform:rotate(360deg)}}
.chapter p,.chapter li{color:var(--theme-muted,var(--muted,#9A9AA6));line-height:1.7;font-size:clamp(.93rem,1vw,1.06rem)}
.chapter p b,.chapter li b,.chapter td b{color:var(--theme-ink,var(--text,#EDEDF2))}
.chapter ul{margin:10px 0 0;padding-left:20px}
.chapter li{margin:7px 0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;background:var(--theme-accent-soft,rgba(255,182,74,.12));border:1px solid var(--theme-line,rgba(255,182,74,.25));color:var(--theme-accent,#ffb64a);font-weight:700;font-size:.84rem;white-space:nowrap}

.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.step-card{position:relative;padding:16px;border-radius:16px;background:var(--theme-card-2,rgba(255,255,255,.03));border:1px solid var(--theme-line,rgba(255,255,255,.09))}
.step-card h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:700 1rem Inter,system-ui,sans-serif;color:var(--theme-ink,var(--text,#EDEDF2))}
.step-card h3 svg{flex:none;color:var(--theme-accent,#ffb64a)}
.step-card p{margin:0;font-size:.9rem}

.score-table{width:100%;border-collapse:collapse;margin-top:4px}
.score-table th{text-align:left;font:700 .8rem Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--theme-muted,var(--muted,#9A9AA6));padding:8px 12px;border-bottom:1px solid var(--theme-line,rgba(255,255,255,.12))}
.score-table td{padding:11px 12px;border-bottom:1px solid var(--theme-line,rgba(255,255,255,.08));color:var(--theme-muted,var(--muted,#9A9AA6));font-size:.93rem;line-height:1.5;vertical-align:top}
.score-table tr:last-child td{border-bottom:none}
.score-table .pts{white-space:nowrap;font:800 1rem Inter,system-ui,sans-serif;color:var(--theme-accent,#ffb64a)}
.combo-balls{display:inline-flex;gap:3px;vertical-align:-2px;margin-right:8px}
.combo-balls i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 42%),radial-gradient(circle at 50% 55%,var(--c,#e53f3f),color-mix(in srgb,var(--c,#e53f3f) 45%,#000))}
.combo-balls i.rb{background:conic-gradient(#e53f3f,#e9d229,#2bcf6b,#2f7bf0,#b34fe0,#e53f3f)}

.bonus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.bonus-card{padding:16px;border-radius:16px;background:var(--theme-card-2,rgba(255,255,255,.03));border:1px solid var(--theme-line,rgba(255,255,255,.09))}
.bonus-card header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bonus-card header img{width:34px;height:34px;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.bonus-card header h3{margin:0;font:700 1.02rem Inter,system-ui,sans-serif;color:var(--theme-ink,var(--text,#EDEDF2))}
.bonus-card p{margin:0 0 8px;font-size:.89rem}
.bn-meta{display:flex;flex-wrap:wrap;gap:6px}

.lvl-list{display:grid;gap:8px;margin-top:12px}
.lvl-row{display:grid;grid-template-columns:44px minmax(90px,150px) 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--theme-card-2,rgba(255,255,255,.03));border:1px solid var(--theme-line,rgba(255,255,255,.08))}
.lvl-badge{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 .92rem Inter,system-ui,sans-serif;color:var(--theme-accent,#ffb64a);background:var(--theme-accent-soft,rgba(255,182,74,.13))}
.lvl-row b{color:var(--theme-ink,var(--text,#EDEDF2));font-size:.95rem}
.lvl-row span{color:var(--theme-muted,var(--muted,#9A9AA6));font-size:.88rem}
.lvl-dots{display:inline-flex;gap:4px}
.lvl-dots i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.8),rgba(255,255,255,0) 42%),radial-gradient(circle at 50% 55%,var(--c),color-mix(in srgb,var(--c) 45%,#000))}

.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:12px}
.set-card{padding:14px 16px;border-radius:14px;background:var(--theme-card-2,rgba(255,255,255,.03));border:1px solid var(--theme-line,rgba(255,255,255,.08))}
.set-card h3{display:flex;align-items:center;gap:9px;margin:0 0 6px;font:700 .95rem Inter,system-ui,sans-serif;color:var(--theme-ink,var(--text,#EDEDF2))}
.set-card h3 svg{flex:none;color:var(--theme-accent,#ffb64a)}
.set-card p{margin:0;font-size:.86rem}

.note-callout{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:13px 16px;border-radius:14px;background:var(--theme-accent-soft,rgba(255,182,74,.09));border:1px solid var(--theme-line,rgba(255,182,74,.22))}
.note-callout svg{flex:none;margin-top:2px;color:var(--theme-accent,#ffb64a)}
.note-callout p{margin:0;font-size:.89rem;color:var(--theme-muted,var(--muted,#9A9AA6));line-height:1.6}

.rules-cta{text-align:center;margin:clamp(26px,3vw,44px) 0 clamp(10px,1.5vw,20px)}
.rules-cta .btn-primary{display:inline-flex;align-items:center;gap:8px}

footer{margin-top:clamp(30px,4vw,56px);padding:clamp(22px,3vw,36px) clamp(18px,4vw,64px);border-top:1px solid var(--theme-line,rgba(255,255,255,.09));background:var(--theme-card-2,rgba(0,0,0,.18))}
.vfooter{max-width:2280px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:clamp(16px,2.5vw,32px)}
.footer-logo{display:inline-flex;align-items:center;gap:10px;font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:linear-gradient(180deg,#ffedbe 0%,#ffc55e 48%,#c98f33 80%,#ffe1a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.vfooter-links{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px)}
.vfooter-links a{color:var(--theme-muted,var(--muted,#9A9AA6));text-decoration:none;font-size:.92rem}
.vfooter-links a:hover{color:var(--theme-accent,#ffb64a)}
.vfooter-desc{max-width:2280px;margin:14px auto 0;color:var(--theme-muted,var(--muted,#9A9AA6));font-size:.86rem;line-height:1.6}
.vfooter-bottom{max-width:2280px;margin:12px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--theme-muted,var(--muted,#9A9AA6));font-size:.8rem;opacity:.85}

#toTop{position:fixed;right:clamp(14px,2vw,36px);bottom:clamp(14px,2vw,36px);z-index:60;width:clamp(46px,3vw,58px);height:clamp(46px,3vw,58px);border-radius:50%;border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 55%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--theme-accent,#ffb64a) 30%,var(--surface,rgba(255,255,255,.05))),color-mix(in srgb,var(--theme-accent,#ffb64a) 6%,var(--surface,rgba(255,255,255,.05))));backdrop-filter:blur(8px);color:var(--theme-accent,#ffb64a);font-size:clamp(18px,1.3vw,24px);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .3s,visibility .3s,background .25s,color .25s;box-shadow:0 10px 26px rgba(0,0,0,.3),0 0 0 5px color-mix(in srgb,var(--theme-accent,#ffb64a) 9%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
#toTop.show{opacity:.72;visibility:visible;transform:none}
#toTop:hover{background:var(--theme-accent,#ffb64a);color:#17120a;transform:translateY(-3px);border-color:transparent;box-shadow:0 16px 32px color-mix(in srgb,var(--theme-accent,#ffb64a) 35%,transparent)}
#toTop.show:hover,#toTop.show:focus-visible{opacity:1}

.records-hidden,[hidden]{display:none!important}

@media(max-width:1020px){
  .rules-hero{grid-template-columns:1fr}
  .demo-card{max-width:420px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step-grid,.bonus-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .rules-page{padding-left:14px;padding-right:14px}
  .lvl-row{grid-template-columns:38px minmax(0,1fr);grid-auto-rows:auto;row-gap:6px;column-gap:12px;align-items:center;padding:12px 14px}
  .lvl-row .lvl-badge{grid-row:1/2;align-self:center}
  .lvl-row b{grid-column:2}
  .lvl-row span:not(.lvl-badge){grid-column:2}
  .lvl-row .lvl-dots{grid-column:2;flex-wrap:wrap}
  .score-table th:nth-child(2),.score-table td:nth-child(2){display:none}
  .score-table td{padding:9px 8px;font-size:.87rem}
}
@media(prefers-reduced-motion:reduce){
  .db-static,.db-mover,.db-path,.db-flash,.db-score,.ch-num i{animation:none!important}
  .db-mover{transform:translateY(285.7%)}
  .db-path{opacity:0}
}

.rules-page .vsep{display:flex;align-items:center;justify-content:center;gap:12px;max-width:1400px;margin:clamp(30px,3.4vw,60px) auto;padding:clamp(2px,.6vw,8px) 6vw;position:relative;z-index:1}
.rules-page .vsep::before,.rules-page .vsep::after{content:"";flex:1;max-width:420px;height:1.5px;border-radius:2px}
.rules-page .vsep::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--theme-accent,#ffb64a) 50%,transparent))}
.rules-page .vsep::after{background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--theme-accent,#ffb64a) 50%,transparent))}
.rules-page .vsep i{border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),transparent 42%),var(--theme-accent,#ffb64a);box-shadow:0 0 10px color-mix(in srgb,var(--theme-accent,#ffb64a) 55%,transparent)}
.rules-page .vsep i:nth-child(1),.rules-page .vsep i:nth-child(5){width:6px;height:6px;opacity:.5}
.rules-page .vsep i:nth-child(2),.rules-page .vsep i:nth-child(4){width:8px;height:8px;opacity:.72}
.rules-page .vsep i:nth-child(3){width:11px;height:11px;opacity:.92}

.rules-hero .hero-art{position:absolute;top:50%;right:clamp(4px,2.5vw,48px);transform:translateY(-50%);width:min(34vw,450px);z-index:0;pointer-events:none}
.rules-hero .hero-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 26px var(--theme-shadow,rgba(0,0,0,.3)))}
@media(max-width:1150px){.rules-hero .hero-art{display:none}}

.chapter details>summary{cursor:pointer;user-select:none;transition:color .15s ease}
.chapter details>summary:hover{color:var(--theme-accent,#ffb64a)}
.chapter details>summary:hover b{color:inherit}
.note-callout a{color:var(--theme-accent,var(--accent,#ffb64a));font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--theme-accent,#ffb64a) 55%,transparent);transition:text-decoration-color .15s ease,opacity .15s ease}
.note-callout a:hover{text-decoration-color:var(--theme-accent,#ffb64a);opacity:.88}