.page-runes main .rf{--rf-berry:#8d2254;--rf-ink:#402e38;--rf-gold:#ac8142;isolation:isolate;color:var(--rf-ink);text-align:center;border:1px solid #ead1d8;border-radius:18px;padding:clamp(1rem,4vw,3rem);background:linear-gradient(150deg,#fff 20%,#fffafd 58%,#fff 90%);line-height:1.58}
.rf *{box-sizing:border-box}.rf .rf-header{max-width:625px;margin:auto}.rf h2,.rf h3{font:400 clamp(1.85rem,5vw,3rem)/1.14 Georgia,serif;color:var(--rf-berry);margin:.35em 0}.rf p{margin:.55em auto}.page-runes main .rf-overline{font:700 .7rem/1.58 system-ui,sans-serif;letter-spacing:.14em;color:#843650;text-transform:uppercase}
.page-runes main .rf-header::before,.page-runes main .rf-result::before{content:"";display:block;height:10px;width:116px;margin:0 auto 1rem;border-block:1px solid #dfb879;border-radius:0;background:repeating-linear-gradient(38deg,transparent 0 5px,#ab4670 5.5px 6.5px,transparent 7px 14px),repeating-linear-gradient(-38deg,transparent 0 5px,#c29650 5.5px 6.5px,transparent 7px 14px),#fff4f5}
.rf .rf-table{--gem:clamp(74px,22vw,124px);--gap:clamp(10px,3vw,32px);--rise:clamp(164px,27vw,217px);position:relative;isolation:isolate;display:grid;justify-items:center;max-width:680px;margin:1.35rem auto .55rem;padding:.5rem 0;border-radius:24px;background:radial-gradient(ellipse at 50% 56%,#f9d9e6 0%,#fff4f8 38%,#fff 72%)}
.rf-pouch{display:grid;justify-items:center;gap:.35rem;z-index:1;position:relative;border:0;cursor:pointer;background:transparent;color:#fff;font:inherit;font-weight:700;padding:.5rem;-webkit-tap-highlight-color:transparent}.rf-pouch:disabled{cursor:wait}.rf-pouch img{display:block;width:clamp(125px,22vw,180px);height:auto;transform-origin:50% 22%;filter:drop-shadow(0 5px 6px #8b385129)}.rf-pouch span{padding:.55rem 1.25rem;min-height:44px;border:1px solid #9b305a;border-radius:100px;background:var(--rf-berry);display:grid;align-items:center;box-shadow:0 3px 9px #98325222}.rf-pouch:enabled:hover span{background:#741943}.rf-pouch:enabled:hover img{transform:rotate(-3deg)}
.rf .rf-stones{display:grid;grid-template-columns:repeat(2,var(--gem));gap:var(--gap);position:relative;justify-content:center;align-items:start;list-style:none;padding:0;margin:.65rem auto .1rem;z-index:2}.rf-stones:empty{display:none}.rf-gem{display:grid;justify-items:center;width:var(--gem);text-align:center;position:relative}.rf-gem img{display:block;width:100%;height:calc(var(--gem)*.91);object-fit:contain;filter:drop-shadow(0 4px 4px #793b5128)}.rf-gem small{color:#7b3453;font:650 .73rem/1.4 system-ui,sans-serif;margin-top:.35rem}.rf-gem b{font:600 .9rem/1.3 Georgia,serif;color:#54283c}
.rf[data-stage=casting] .rf-pouch img{animation:rf-shake 1.15s ease-in-out both}.rf[data-stage=casting] .rf-gem{--offset:calc((var(--gem) + var(--gap)) / 2);--spin:-23deg;animation:rf-flight 1.03s cubic-bezier(.24,.55,.24,1) .30s both}.rf[data-stage=casting] .rf-gem:nth-child(2){--offset:calc((var(--gem) + var(--gap)) / -2);--spin:22deg;animation-delay:.67s}.rf[data-stage=casting] .rf-gem small,.rf[data-stage=casting] .rf-gem b{visibility:hidden}
.rf .rf-status{font-size:.89rem;color:#795366}.rf-status:empty{display:none}.rf-reading:not(:empty){padding-top:1.15rem}.page-runes main .rf-result{max-width:865px;margin:0 auto;padding:clamp(1.1rem,3vw,2rem);text-align:left;border:1px solid #d9b575;border-radius:14px;background:linear-gradient(115deg,#fffdf8,#fff 65%);box-shadow:0 6px 18px #782a4c0b;animation:rf-reveal .4s ease-out}.page-runes main .rf-result::before{width:100%;height:7px;margin-bottom:1.2rem;opacity:.7}.rf-pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,4vw,2rem)}.rf-position{min-width:0}.rf-position small{color:#705060}.rf .rf-position h3,.rf .rf-synthesis h3{font-size:clamp(1.5rem,3vw,2rem);margin:.23em 0}.rf .rf-synthesis{margin-top:1.15rem;padding:clamp(.9rem,2.5vw,1.5rem);border:1px solid #ecced8;border-left:3px solid #c29050;background:#fff3f7;border-radius:7px}.rf .rf-action{font-size:.92rem;border-top:1px solid #dfc9be;padding-top:.65rem}.rf-action strong{color:#842e50}.rf button:focus-visible,.rf-result:focus-visible{outline:3px solid #942452;outline-offset:3px}.rf .rf-note{font-size:.8rem;color:#65515d;margin:1rem auto 0}.rf .rf-note a{color:#79274b;text-underline-offset:2px}
@keyframes rf-shake{0%,100%{transform:none}12%,34%{transform:translate(-6px,1px) rotate(-13deg)}23%,46%{transform:translate(7px,-3px) rotate(15deg)}58%{transform:translate(-5px,-3px) rotate(-20deg)}73%{transform:translate(4px,1px) rotate(12deg)}89%{transform:translate(-2px,1px) rotate(-4deg)}}
@keyframes rf-flight{0%{opacity:0;transform:translate(var(--offset),calc(-1 * var(--rise))) scale(.16) rotate(var(--spin))}12%{opacity:1}34%{transform:translate(calc(var(--offset)*.63),calc(-1 * var(--rise) - 16px)) scale(.53) rotate(calc(var(--spin)*1.6))}79%{transform:translateY(4px) scale(1.02) rotate(calc(var(--spin)*-.13))}90%{transform:translateY(-4px)}100%{opacity:1;transform:none}}
@keyframes rf-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:640px){.rf-pair-grid{grid-template-columns:1fr}.rf-position+.rf-position{border-top:1px solid #e4cdd4;padding-top:1rem}}@media(prefers-reduced-motion:reduce){.rf *{animation:none!important;transition:none!important}}