/* Printed ivory medallions on photographed resin balls. Links stay real HTML. */
.ball-menu .ball-visual{width:120px;height:94px;filter:drop-shadow(2px 6px 5px #0009)}
.ball-shell{display:block;position:relative;width:94px;height:94px;flex:none;isolation:isolate;container-type:inline-size}
.ball-shell>img{display:block;width:100%;height:100%;object-fit:contain}
.ball-print{position:absolute;inset:24% 20% 23%;display:flex;align-items:center;justify-content:center;text-align:center;color:#201b15;font:800 12px/1.12 Manrope,sans-serif;font-size:12.8cqw;letter-spacing:-.65px;transform:rotate(-5deg);text-shadow:0 .5px .5px #6d543133;mix-blend-mode:multiply;white-space:nowrap}
.ball-menu .m6 .ball-print{font-size:10.5cqw;letter-spacing:-.55px}
.ball-menu .labelplate,.ball-menu .menu-item[aria-current] .labelplate{background:none;border:0;box-shadow:none;padding:3px 3px 0;text-shadow:0 2px 3px #00150d}
.ball-menu .plain-label{font-size:13px}
.ball-menu .menu-item[aria-current] .ball-shell:after{content:'';position:absolute;inset:1%;border-radius:50%;border:1px solid #f4d7a0;box-shadow:0 0 0 3px #f4d7a022;pointer-events:none}
.ball-menu .menu-item:focus-visible{outline:0}
.ball-menu .menu-item:focus-visible .ball-shell{outline:3px solid #fff1cf;outline-offset:4px;border-radius:50%}
.ball-menu .menu-item:hover .ball-visual{transform:translateY(-4px) rotate(4deg)}
.side-menu.ball-menu .ball-visual{width:105px;height:70px}
.side-menu.ball-menu .ball-shell{width:70px;height:70px}
.dialog-menu.ball-menu .m0 .ball-shell,.dialog-menu.ball-menu .m7 .ball-shell{width:65px;height:65px}
.menu-toggle{border:0;border-radius:30px;background:#092d22;box-shadow:0 3px 12px #0005,inset 0 0 0 1px #c3a67566}
.menu-toggle img{width:32px;height:32px}
.pocket-ghost .ball-shell{width:70px;height:70px}
@media(min-width:1101px){
 .rack-condensed .ball-menu:not(.dialog-menu) .ball-visual{height:40px;width:60px}
 .rack-condensed .ball-menu:not(.dialog-menu) .ball-shell{height:40px;width:40px}
 .rack-condensed .ball-menu:not(.dialog-menu) .labelplate{background:none}
}
@media(max-width:600px){
 .ball-menu .ball-visual,.rack-menu.ball-menu .ball-visual{width:77px;height:74px}
 .ball-menu .ball-shell{width:74px;height:74px}
 .side-menu.ball-menu .ball-visual,.dialog-menu.ball-menu .ball-visual,.dialog-menu.ball-menu .m0 .ball-visual,.dialog-menu.ball-menu .m7 .ball-visual{width:74px;height:68px}
 .side-menu.ball-menu .ball-shell,.dialog-menu.ball-menu .ball-shell,.dialog-menu.ball-menu .m0 .ball-shell,.dialog-menu.ball-menu .m7 .ball-shell{width:68px;height:68px}
 .ball-menu .plain-label{font-size:12px}
 .ball-menu .labelplate{padding:3px 0 0}
 .menu-toggle img{width:25px;height:25px}
}
@media(prefers-reduced-motion:reduce){.ball-menu .menu-item:hover .ball-visual{transform:none}}

/* R4c: photographic cue and ball share one viewport overlay, above open dialogs.
   No hit areas, scroll width or document layout are changed by the strike. */
.cue-strike-layer:popover-open{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;pointer-events:none;contain:strict}
.cue-strike-layer::backdrop{background:transparent;pointer-events:none}
.striking-cue{position:absolute;width:0;height:0;pointer-events:none}
.striking-cue>img{position:absolute;right:0;top:calc(var(--cue-length) * -0.02228261);width:var(--cue-length);height:calc(var(--cue-length) * 0.04456522);max-width:none;object-fit:fill;filter:drop-shadow(2px 4px 2px #0008);transform-origin:right center}
.struck-ball{position:absolute;pointer-events:none;filter:drop-shadow(2px 4px 3px #0008)}
.struck-ball>img{display:block;width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.cue-strike-layer{display:none!important}}