/* A carved shell receives the coins, makes three complete shakes, then pours.
   Motion owns coin poses and the phase attribute; this file draws the vessel. */
.ritual-desk .casting-zone{
 --tortoise-shake-duration:1350ms;
 --tortoise-pour-duration:650ms;
 --tortoise-width:210px;
 --tortoise-top-offset:140px;
}
.ritual-desk .tortoise-vessel{
 position:absolute;left:50%;top:calc(50% - var(--tortoise-top-offset));
 width:var(--tortoise-width);aspect-ratio:360/260;z-index:4;
 transform:translateX(-50%);pointer-events:auto;user-select:none;
 -webkit-user-select:none;isolation:isolate;padding:0;border:0;background:none;
 touch-action:manipulation;cursor:pointer;border-radius:45%;
}
.ritual-desk .tortoise-vessel:disabled{opacity:1;cursor:default}
.ritual-desk .tortoise-vessel:focus-visible{outline:2px dashed var(--world-gold,#e0bc75);outline-offset:5px}
.ritual-desk .tortoise-vessel::after{
 content:"";position:absolute;z-index:-1;left:12%;right:12%;bottom:3%;height:13%;
 border-radius:50%;background:#172c2580;filter:blur(7px);opacity:.45;
 transform:scaleX(.88);transition:opacity .25s ease,transform .25s ease;
}
.ritual-desk .tortoise-vessel-body{
 display:block;position:relative;width:100%;height:100%;transform-origin:50% 81%;
 filter:drop-shadow(2px 5px 3px #142c3430);
}
.ritual-desk .tortoise-shell{display:block;width:100%;height:auto;pointer-events:none}
/* A transparent geometry anchor exactly inside the illustrated opening. */
.ritual-desk .tortoise-mouth{
 position:absolute;left:34%;top:75%;width:32%;height:12%;display:block;
 border-radius:50%;pointer-events:none;
}
.ritual-desk .tortoise-vessel-body::before,
.ritual-desk .tortoise-vessel-body::after{
 content:"";position:absolute;top:33%;width:8%;height:28%;border-radius:50%;
 border:1.5px solid var(--world-gold,#e0bc75);opacity:0;
}
.ritual-desk .tortoise-vessel-body::before{left:-4%;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent;transform:rotate(13deg)}
.ritual-desk .tortoise-vessel-body::after{right:-4%;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-13deg)}
.ritual-desk .tortoise-shake-marks{
 position:absolute;left:50%;top:3%;display:flex;gap:5px;transform:translateX(-50%);
 opacity:0;pointer-events:none;
}
.ritual-desk .tortoise-shake-marks>i{
 display:block;width:5px;height:5px;border:1px solid var(--world-gold,#e0bc75);
 border-radius:50%;background:transparent;box-shadow:0 1px 3px #183e4544;
}
.ritual-desk .casting-zone[data-ritual-phase="gather"] .tortoise-vessel::after,
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-vessel::after{opacity:.27;transform:scaleX(.75)}
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-vessel-body{
 animation:tortoise-three-shakes calc(var(--tortoise-shake-duration)/3) cubic-bezier(.35,.04,.43,1.08) 3;
 will-change:transform;
}
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-vessel-body::before,
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-vessel-body::after{opacity:.58}
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-shake-marks{opacity:1}
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-shake-marks>i{animation:tortoise-shake-count calc(var(--tortoise-shake-duration)/3) ease both}
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-shake-marks>i:nth-child(2){animation-delay:calc(var(--tortoise-shake-duration)/3)}
.ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-shake-marks>i:nth-child(3){animation-delay:calc(var(--tortoise-shake-duration)/3*2)}
.ritual-desk .casting-zone[data-ritual-phase="release"] .tortoise-vessel-body{
 animation:tortoise-pour var(--tortoise-pour-duration) cubic-bezier(.22,.61,.36,1) both;
 will-change:transform;
}
.ritual-desk .casting-zone[data-ritual-phase="release"] #coins{z-index:5}
/* The smaller coins leave a clear landing area below the shell. */
.ritual-desk .casting-zone #coins{translate:0 35px;gap:20px;padding:12px 4px}
.ritual-desk .casting-zone #coins .coin{width:76px;height:76px}
.ritual-desk .casting-zone #coins .coin:nth-child(2){margin-top:14px}
.ritual-desk .casting-zone #coins .coin:nth-child(3){margin-top:-6px}
.ritual-desk .casting-zone #coins .coin b{font-size:15px}
.ritual-desk .casting-zone #coins .coin em{font-size:10px;letter-spacing:5px}
.ritual-desk .casting-zone #coins .yj-coin-back{font-size:15px;padding-top:5px}
.ritual-desk .casting-zone .coin-field>span{width:min(100%,370px);height:250px}
.ritual-desk .casting-zone .coin-field>i{height:76%}
/* Holding is anticipation; gathering and shaking begin on release. */
.ritual-desk .casting-zone #coins.is-charging .coin{translate:none;rotate:none;filter:brightness(calc(1 + var(--charge,0)*.08))}
.ritual-desk .casting-zone #coins.is-charging .coin:nth-child(1),
.ritual-desk .casting-zone #coins.is-charging .coin:nth-child(2),
.ritual-desk .casting-zone #coins.is-charging .coin:nth-child(3){--yj-hold-x:0px;--yj-hold-tilt:0deg}
@keyframes tortoise-three-shakes{
 0%,100%{transform:translate3d(0,0,0) rotate(0)}
 23%{transform:translate3d(-11px,-5px,0) rotate(-12deg)}
 53%{transform:translate3d(11px,-3px,0) rotate(12deg)}
 78%{transform:translate3d(-4px,-2px,0) rotate(-5deg)}
}
@keyframes tortoise-shake-count{
 0%,45%{background:transparent;transform:scale(1)}
 70%{background:var(--world-gold,#e0bc75);transform:scale(1.35)}
 100%{background:var(--world-gold,#e0bc75);transform:scale(1)}
}
@keyframes tortoise-pour{
 0%{transform:rotate(0)}
 34%,63%{transform:rotate(-28deg)}
 100%{transform:rotate(0)}
}
@media(max-width:1050px) and (min-width:761px){
 .ritual-desk .casting-zone{--tortoise-width:190px;--tortoise-top-offset:125px}
 .ritual-desk .casting-zone #coins{gap:14px;translate:0 33px}
 .ritual-desk .casting-zone #coins .coin{width:68px;height:68px}
}
@media(max-width:760px){
 .ritual-desk .casting-zone{--tortoise-width:165px;--tortoise-top-offset:110px}
 .ritual-desk .casting-zone #coins{gap:16px;translate:0 30px;padding:4px}
 .ritual-desk .casting-zone #coins .coin{width:60px;height:60px}
 .ritual-desk .casting-zone #coins .coin:nth-child(2){margin-top:12px}
 .ritual-desk .casting-zone #coins .coin:nth-child(3){margin-top:-5px}
 .ritual-desk .casting-zone #coins .coin b{font-size:13px}
 .ritual-desk .casting-zone #coins .coin em{font-size:8px;letter-spacing:3px}
 .ritual-desk .casting-zone #coins .yj-coin-back{font-size:13px;padding-top:4px}
 .ritual-desk .casting-zone .coin-field>span{height:195px;width:290px}
 .ritual-desk .casting-zone .coin-field>i{height:165px;width:240px}
 .ritual-desk .casting-zone .cast-charge-ring{height:188px;width:290px;max-height:94%}
 .ritual-desk .casting-zone .cast-charge-label{font-size:10px;bottom:2px;padding:2px 8px}
}
@media(max-width:360px){
 .ritual-desk .casting-zone #coins{gap:14px}
 .ritual-desk .casting-zone .coin-field>span{width:260px}
 .ritual-desk .casting-zone .coin-field>i{width:225px}
 .ritual-desk .casting-zone .cast-charge-ring{width:260px}
}
@media(max-height:800px) and (max-width:760px){
 .ritual-desk .casting-zone .cast-charge-label{bottom:2px}
}
@media(max-height:670px) and (min-width:761px){
 .ritual-desk .casting-zone{--tortoise-width:155px;--tortoise-top-offset:107px}
 .ritual-desk .casting-zone #coins{translate:0 30px;padding:4px;gap:16px}
 .ritual-desk .casting-zone #coins .coin{width:60px;height:60px}
 .ritual-desk .casting-zone .coin-field>span{height:200px}
}
@media(prefers-reduced-motion:reduce){
 .ritual-desk .tortoise-vessel-body,.ritual-desk .tortoise-shake-marks>i{animation:none!important;transform:none!important;will-change:auto!important}
 .ritual-desk .tortoise-vessel::after{transition:none!important}
 .ritual-desk .tortoise-vessel-body::before,.ritual-desk .tortoise-vessel-body::after{display:none!important}
 .ritual-desk .casting-zone[data-ritual-phase="shake"] .tortoise-shake-marks>i{background:var(--world-gold,#e0bc75)}
}