.action[data-action="strike"] { position: relative; padding-bottom: 17px; }
.timing-track { position: absolute; left: 7px; right: 7px; bottom: 4px; height: 10px; border: 1px solid #86714d; border-radius: 5px; background: #a5987c; overflow: hidden; pointer-events: none; }
.timing-good,.timing-perfect { position: absolute; top: 0; bottom: 0; }
.timing-good { left: 18%; width: 64%; background: #b9d798; }
.timing-perfect { left: 34%; width: 32%; background: #ffe27c; border-left: 1px solid #b58b2a; border-right: 1px solid #b58b2a; }
.timing-cursor { position: absolute; top: -1px; bottom: -1px; width: 4px; left: calc(var(--timing-position, 0) * 100%); transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px #2c3a33,0 0 4px #24382e; border-radius: 2px; }
.timing-track.frozen .timing-cursor { background: #fffaf0; width: 5px; }
.action.timing-ready { border-color: #b78c33; box-shadow: inset 0 0 0 1px #e6c876; }
.action[data-timing="perfect"] { border-color: #ad7a14; background: #ffe7a4; box-shadow: 0 0 15px #ffc35180; }
.action[data-timing="good"] { border-color: #668c4c; background: #e8f3d7; }
.action[data-timing="perfect"] strong { color: #79500b; }
.action[data-timing="good"] strong { color: #3c642b; }
.action[data-action="strike"][data-timing]:not([data-timing=""]) .cooldown { inset: 2px 4px auto auto; background: transparent; font-size: 9px; line-height: 1; text-shadow: none; }
.action:is([data-timing="perfect"],[data-timing="good"],[data-timing="normal"]):disabled { opacity: .9; }
.timing-number { color: #ffe391; font-size: 26px; }
.timing-good-number { color: #bdf1a3; font-size: 20px; }
@media (max-width:820px) and (orientation:portrait), (max-width:1100px) and (max-height:500px) and (orientation:landscape) {
  body.in-game .action[data-action="strike"] { min-height: 60px; padding-bottom: 17px; }
  body.in-game .action[data-action="strike"] strong { font-size: 10px; white-space: nowrap; }
}